<template>
  <div>
    <div class="box">
      <el-tabs v-model="formData.type" type="card">
        <el-tab-pane
          v-for="(item, index) in tabsOption"
          :key="index"
          :label="item.label"
          :name="item.name"
        ></el-tab-pane>
      </el-tabs>

      <el-form
        ref="formData"
        :inline="true"
        :model="formData"
        label-width="50px"
      >
        <el-form-item label="类型">
          <el-select v-model="formData.pt_id" placeholder="请选择排序">
            <el-option
              v-for="item in point_types"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div v-if="formData.type == 'waiting'">
        <el-table
          :data="list"
          style="width: 100%; cursor: pointer;"
          v-loading="loading"
          class="listTable"
          @row-click="openDetail"
        >
          <el-table-column label="审批标题" prop="task_name">
            <template slot-scope="scope">
              <userImage
                class="fl"
                width="50px"
                height="50px"
                :id="scope.row.employee_id"
                :user_name="scope.row.employee_name"
              ></userImage>
              <span class="tableTitle"
                ><WWOpenData type="userName" :openid="scope.row.employee_name"></WWOpenData>的{{
                  scope.row.source_type == 1 ? '积分任务' :
                  scope.row.source_type == 2 ? '积分申请' :
                  scope.row.source_type == 3 ? '积分录入' :
                  scope.row.source_type == 4 ? '绩效工作' :
                  ''
                }}
                </span>
              <!-- <span class="tableTitle" v-show="scope.row.source_type == 1"
                ><WWOpenData type="userName" :openid="scope.row.employee_name"></WWOpenData>的积分任务</span
              >
              <span class="tableTitle" v-show="scope.row.source_type == 2"
                ><WWOpenData type="userName" :openid="scope.row.employee_name"></WWOpenData>的积分申请</span
              >
              <span class="tableTitle" v-show="scope.row.source_type == 3"
                ><WWOpenData type="userName" :openid="scope.row.employee_name"></WWOpenData>的积分录入</span
              >
              <span class="tableTitle" v-show="scope.row.source_type == 4"
                ><WWOpenData type="userName" :openid="scope.row.employee_name"></WWOpenData>的绩效工作</span
              > -->
            </template>
          </el-table-column>
          <el-table-column label="审批内容" prop="remark.rule">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top" popper-class="popperSPBOX">
                <span>{{
                  scope.row.remark.customize  ||  scope.row.remark.rule
                }}</span>
                <!-- <div slot="reference" class="name-wrapper" style="width:100%;height:18px;white-space: normal; overflow: hidden;"> -->
                <div slot="reference" class="name-wrapper"  style="width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
                  <span>{{
                  scope.row.remark.customize  ||  scope.row.remark.rule
                  }}</span>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            label="时间"
            prop="event_time"
            width="150"
          ></el-table-column>
          <el-table-column label="操作" prop="owner_id" width="80">
            <template slot-scope="scope">
              <el-button type="text">审批</el-button>
            </template>
          </el-table-column>
          <template slot="empty">
            <div class="nopoint_box">
              <div class="noimg noperson"></div>
              <span class="title">没有对应的数据</span>
            </div>
          </template>
        </el-table>
      </div>

      <div v-if="formData.type == 'reviewed'">
        <el-table
          :data="list"
          style="width: 100%; cursor: pointer;"
          v-loading="loading"
          class="listTable"
          @row-click="openDetail"
        >
          <el-table-column label="审批标题" prop="task_name">
            <template slot-scope="scope">
              <userImage
                class="fl"
                width="50px"
                height="50px"
                :id="scope.row.employee_id"
                :user_name="scope.row.employee_name"
              ></userImage>
              <span class="tableTitle"
                ><WWOpenData type="userName" :openid="scope.row.employee_name"></WWOpenData>的{{
                  scope.row.source_type == 1 ? '积分任务' :
                  scope.row.source_type == 2 ? '积分申请' :
                  scope.row.source_type == 3 ? '积分录入' :
                  scope.row.source_type == 4 ? '绩效工作' :
                  ''
                }}
                </span
              >
              <!-- <span class="tableTitle" v-show="scope.row.source_type == 1"
                ><WWOpenData type="userName" :openid="scope.row.employee_name"></WWOpenData>的积分任务</span
              >
              <span class="tableTitle" v-show="scope.row.source_type == 2"
                ><WWOpenData type="userName" :openid="scope.row.employee_name"></WWOpenData>的积分申请</span
              >
              <span class="tableTitle" v-show="scope.row.source_type == 3"
                ><WWOpenData type="userName" :openid="scope.row.employee_name"></WWOpenData>的积分录入</span
              >
              <span class="tableTitle" v-show="scope.row.source_type == 4"
                ><WWOpenData type="userName" :openid="scope.row.employee_name"></WWOpenData>的绩效工作</span
              > -->
            </template>
          </el-table-column>
          <el-table-column label="审批内容" prop="remark.rule">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top" popper-class="popperSPBOX">
                <span>{{
                scope.row.remark.customize  ||  scope.row.remark.rule
                }}</span>
                <div slot="reference" class="name-wrapper"  style="width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
                  <span>{{
                   scope.row.remark.customize ||  scope.row.remark.rule
                  }}</span>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            label="时间"
            prop="event_time"
            width="150"
          ></el-table-column>
          <el-table-column label="积分" prop="review_point" width="120">
            <template slot-scope="scope">
              <span v-show="scope.row.review_point < 0" class="red">{{ scope.row.review_point }} {{ $getTypsName(scope.row.pt_id) }}</span>
              <span v-show="scope.row.review_point >= 0" class="green">+{{ scope.row.review_point }} {{ $getTypsName(scope.row.pt_id) }}</span>
            </template>
            <!-- <template slot-scope="scope">
              <span v-show="scope.row.review_point < 0" class="color_red">{{
                scope.row.review_point
              }}</span>
              <span v-show="scope.row.review_point >= 0"
                >+{{ scope.row.review_point }}</span
              >
            </template> -->
          </el-table-column>
          <el-table-column label="状态" prop="status" width="80">
            <template slot-scope="scope">
              <span v-show="scope.row.status == 1" class="color_green"
                >审批通过</span
              >
              <span v-show="scope.row.status == 2" class="color_red"
                >审批驳回</span
              >
            </template>
          </el-table-column>
          <template slot="empty">
            <div class="nopoint_box">
              <div class="noimg noperson"></div>
              <span class="title">没有对应的数据</span>
            </div>
          </template>
        </el-table>
      </div>

      <center style="padding: 20px 0;">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="formData.page"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next"
          :page-size="formData.page_size"
          :total="total"
        >
        </el-pagination>
      </center>
    </div>
    <examinePopup
      :title="'审核详情'"
      :id="detail_id"
      :show.sync="detailShow"
    ></examinePopup>
  </div>
</template>

<script>
import examinePopup from "@/views/common/examinePopup";

export default {
  data() {
    return {
      formData: {
        type: "waiting",
        source_type: "0",
        pt_id: 0,
        page_size: 10,
        page: 1
      },
      total: null,
      list: null,
      loading: false,
      point_types: null,
      tabsOption: [
        { label: "待我审批", name: "waiting" },
        { label: "我已审批", name: "reviewed" }
      ],
      detailShow: false,
      detail_id: null
    };
  },
  watch: {
    "formData.type"() {
      this.formData.page = 1;
      this.list = [];
      this.get_list();
    },
    "formData.pt_id"() {
      this.list = [];
      this.formData.page = 1
      this.get_list();
    },
  },
  components: { examinePopup },
  mounted() {
    this.get_list();
    this.point_types = this.getPointTypes();
  },
  methods: {
    openDetail(item) {
      this.detail_id = item.id;
      this.detailShow = true;
    },
    // 获取积分类型
    getPointTypes() {
      let point = window.plus
        ? JSON.parse(plus.storage("SET_POINT_TYPES"))
        : JSON.parse(localStorage.getItem("SET_POINT_TYPES"));
      point.unshift({ code: "all", id: 0, name: "全部" });
      return point;
    },
    // 页码变更
    handleCurrentChange(val) {
      this.formData.page = val;
      this.get_list();
    },
    handleSizeChange(val) {
      this.formData.page_size = val;
      this.get_list();
    },
    get_list() {
      let self = this;
      self.loading = true;
      let params = JSON.parse(JSON.stringify(this.formData));
      self.$http('get',"/api/integral/review/list",params)
        .then(res => {
          if (res.data.code == 1) {
            self.list = res.data.data.list;
            self.total = res.data.data.total;
          } else {
            self.$message.error(res.data.data.msg);
          }
          self.loading = false;
        })
        .catch(e => {
          self.$message.error(e.data.data.msg);
          self.loading = false;
        });
    }
  }
};
</script>

<style  lang="scss">
.box {
  min-height: calc(100vh - 140px);
  width: 100%;
  background-color: #fff;
  padding: 20px;
  & .listTable {
    & .tableTitle {
      line-height: 50px;
      padding-left: 10px;
    }
  }
  & .color_red {
    color: #f56c6c;
  }
  & .color_green {
    color: #67c23a;
  }
}
.popperSPBOX{
  max-width: calc(100vh - 400px);
  background-color: rgb(255, 255, 255);
}
</style>
