<template>
  <div>
    <el-form :model="queryParams" ref="queryForm" size="mini" :inline="true">
      <el-row >
        <el-col :span="18">
          <el-form-item label="状态" prop="status">
            <el-select
              size="mini"
              v-model="queryParams.status"
              placeholder=""
              clearable
            >
              <el-option
                v-for="dict in dict.type.ehr_pm_status"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="员工">
              <el-input v-model="queryParams.params.staffCodeOrName" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item style="float:right">
            <el-button type="primary" icon="el-icon-search" size="mini" @click="btnSearch">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="btnResetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="float: right; padding: 3px 0; display:flex;justify-content:space-between">
      <el-button size="mini" icon="el-icon-download" @click="btnExportAll">全部导出</el-button>
      <CreatePmDialog :stageId="stage.id" v-if="stage.stage < 5"></CreatePmDialog>
    </div> 
    <el-table size="mini" height="400px" v-loading="loading" :data="listData">
      <el-table-column label="编号" align="center" prop="id" />
      <el-table-column label="员工工号" align="center" prop="staff" />
      <el-table-column label="员工名称" align="center" prop="staffName" />
      <el-table-column label="部门" align="left" prop="deptName" show-overflow-tooltip/>
      <el-table-column label="状态" align="center" prop="status" >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.ehr_pm_status" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" align="center" class-name="small-padding fixed-width" v-if="stage.stage < 5">
        <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete-solid"
              @click="btnDel(scope.row)"
            >删除</el-button>
            <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)">
              <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-if="scope.row.status == '2'"
                  command="toFillin"
                  icon="el-icon-edit-outline"
                  >驳回到填写</el-dropdown-item
                >
                <el-dropdown-item
                  v-if="scope.row.status == '5'"
                  command="toSelfEstimate"
                  icon="el-icon-location-outline"
                  >驳回到自评</el-dropdown-item
                >
              </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-row type="flex" justify="space-between">
        <el-col :span="12">
          <el-descriptions :column="6">
              <el-descriptions-item v-for="(objValue,key,index) of pmStatusNum" :label="key" v-if="objValue > 0">{{objValue}}</el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="12">
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { listPerformance,delPerformance,getPerformance,editStage} from "@/api/business/ehr/pm/performance";
import { stageCount} from "@/api/business/ehr/pm/stage";
import CreatePmDialog from './btnCreatePm.vue'
export default {
  name: "PmList",
  dicts: ['ehr_pm_status',],
  props: ["stage"],
  components: {CreatePmDialog},
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        status: null,
        params:{
          JXKKB: 'Y',
          staffCodeOrName: null,
        },
      },
      // 总条数
      total: 0,
      // 表格数据
      listData: [],
      // 遮罩层
      loading: true,
      loading1: true,
      // 是否显示弹出层
      open: false,
      // 绩效状态对应的数量
      pmStatusNum:[],
      //是否显示阶段调整弹出层
      turnDownOpen:false,
      //表单
      form:{},
      //表单校验规则
      rules:{
        status: [
          { required: true, message: "调整状态不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.queryParams.sourceId = this.stage.id;
    this.getList();
    stageCount(this.stage.id).then(response => {
      this.pmStatusNum = response.data;
      console.log('this.pmStatusNum',this.pmStatusNum);
    });
  },
  methods: {
    /** 查询绩效列表 */
    getList() {
      this.loading = true;
      listPerformance(this.queryParams).then(response => {
        this.listData = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    async btnSearch() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    btnResetQuery() {
      this.resetForm("queryForm");
      this.queryParams.params.staffCodeOrName = null;
      this.btnSearch();
    },
    //删除绩效
    btnDel(row){
      this.$modal.confirm('是否确认删除' + row.staffName + '[' + row.staff + ']'+ this.stage.month +'月的绩效吗？').then(function() {
        return delPerformance(row.id);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    // 更多操作触发
    handleCommand(command, row) {
      switch (command) {
        case "toFillin":
          this.toFillin(row);
          break;
        case "toSelfEstimate":
          this.toSelfEstimate(row);
          break;
        default:
          break;
      }
    },
    //驳回到填写
    toFillin(data){
      this.$modal.confirm('确定要将' + data.staffName + '【' + data.staff + '】的绩效调整为绩效填写状态吗？').then(function() {
        return editStage({
          id:data.id,
          status:"0"
        });
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("调整成功");
      }).catch(() => {});
    },
    //驳回到自评
    toSelfEstimate(data){
      this.$modal.confirm('确定要将' + data.staffName + '【' + data.staff + '】的绩效调整为绩效自评状态吗？').then(function() {
        return editStage({
          id:data.id,
          status:"3"
        });
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("调整成功");
      }).catch(() => {});
    },
    //导出全部
    btnExportAll(){
      this.download('/ehr/pm/performance/export', {pageNum: 1,pageSize: 9999999,sourceId:this.queryParams.sourceId}, `performance_${new Date().getTime()}.xlsx`)
    },
  },
};
</script>

