<template>
  <div>
    <el-card v-if="flow.staff == this.$store.state.user.name">
      <div slot="header" class="clearfix">
        <span style="font-weight:bold">绩效评分</span>-{{form.name}}
        <dict-tag :options="dict.type.ehr_pm_status" :value="form.status" style="display:inline-block;margin-right:5px;" />
        <el-tag v-if="form.isTwoEvaluation">双向评估</el-tag>
        <div style="float: right; padding: 3px 0" type="text">
          <el-button size="mini" plain @click="btnBack">返回</el-button>
          <el-button size="mini" plain @click="btnTurnDown(1)" v-if="flow.status == 0">驳回</el-button>
          <el-button size="mini" type="primary" plain @click="btnverify" v-if="flow.status == 0">提交</el-button>
        </div>
      </div>
      <div v-loading="loading">
        <el-form size="mini" ref="dataForm" :model="form" :rules="rules">
          <el-descriptions :column="6 ">
            <el-descriptions-item label="员工编号">{{form.staff}}</el-descriptions-item>
            <el-descriptions-item label="员工姓名">{{form.staffName}}</el-descriptions-item>
            <el-descriptions-item label="入职日期">{{form.dateJoin}}</el-descriptions-item>
            <el-descriptions-item label="转正日期">{{form.probationComplete}}</el-descriptions-item>
            <el-descriptions-item label="部门" span="2">{{form.deptName}}</el-descriptions-item>
            <el-descriptions-item label="职位">{{form.jobName}}</el-descriptions-item>
            <el-descriptions-item label="评估周期">{{form.name}}</el-descriptions-item>
            <el-descriptions-item label="评估人">{{form.evaluatorName}}</el-descriptions-item>
            <el-descriptions-item label="所属分组">
              <div v-for="dict in dict.type.ehr_pm_group" v-if="form.staffDivide == dict.value">
                <div>{{ dict.label }}</div>
              </div>
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions :column="6 ">
            <el-descriptions-item label="自评分" v-if="form.status > 3">{{form.saMark}}</el-descriptions-item>
          </el-descriptions>
          <el-row style="color: #606266;font-size: 14px;" v-if="form.status > 3">
            <el-col :span="2">
              个人总结：
            </el-col>
            <el-col :span="22">
              <div style="white-space: pre-wrap;text-align: left">{{form.summary}}</div>
            </el-col>
          </el-row>
          <el-row style="margin-top:10px;color: #606266;font-size: 14px;" v-if="form.status > 4">
            <el-col :span="2">
              总评语:
            </el-col>
            <el-col :span="22">
              <div v-for="(item,index) in comment" :key="index">{{item[0]}}:{{item[1]}}</div>
            </el-col>
          </el-row>
          <div v-if="flow.status == 0">
            <el-form-item label="总评语" prop="remark">
              <el-input type="textarea" v-model="form.remark"></el-input>
            </el-form-item>
          </div>
          <el-table size="mini"  :data="form.performanceItem" show-summary :summary-method="getSummaries" border :key="refreshTable">
            <el-table-column type="index" width="50" label="序号"/>
            <el-table-column width="100" label="评估方面" align="center" prop="aspect">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.ehr_pm_aspect" :value="scope.row.aspect"/>
              </template>
            </el-table-column>
            <el-table-column width="100" label="评估指标" align="center" prop="target" />
            <el-table-column width="80" label="权重(%)" align="center" prop="weight">
              <template slot-scope="scope">
                {{scope.row.asItem ? "+/-" : scope.row.weight}}
              </template>
            </el-table-column>
            <el-table-column label="指标说明" align="center" prop="instructions">
              <template slot-scope="scope">
                <div style="white-space: pre-wrap;text-align: left">{{scope.row.instructions}}</div>
              </template>
            </el-table-column>
            <el-table-column label="评分标准" align="center" prop="standard">
              <template slot-scope="scope">
                <div style="white-space: pre-wrap;text-align: left">{{scope.row.standard}}</div>
              </template>
            </el-table-column>
            <el-table-column width="100" label="数据来源" align="center" prop="source" />
            <el-table-column width="80" label="自评分" align="center" prop="selfScoring"/>
            <el-table-column label="自评语" align="center" prop="selfComment"/>
            <el-table-column width="80" label="评估人" align="center" prop="evaluatorName" v-if="form.isTwoEvaluation"/>
            <el-table-column width="80" label="上级评分" align="center" prop="leaderScoring" v-if="flow.status != 0"/>
            <el-table-column label="评分说明" align="center" prop="leaderComment" v-if="flow.status != 0"/>
            <el-table-column width="85" label="上级评分" align="center" prop="leaderScoring" :render-header="addRedStar" v-if="flow.status == 0">
              <template slot-scope="scope">
                <el-form-item :prop="'performanceItem.'+scope.$index+'.leaderScoring'" :rules="{required: true,message: ' ',trigger: 'blur'}">
                  <el-input v-if="scope.row.evaluator.includes($store.state.user.name)" v-model="scope.row.leaderScoring" v-only-number="{max:saMarkMax,min:0,precision:1}" size="mini"/>
                  <div v-else>{{scope.row.leaderScoring}}</div>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="评分说明" align="center" prop="leaderComment" v-if="flow.status == 0">
              <template slot-scope="scope">
                <el-form-item :prop="'performanceItem.'+scope.$index+'.leaderComment'">
                  <el-input v-if="scope.row.evaluator.includes($store.state.user.name)" size="mini" type="textarea" v-model="scope.row.leaderComment"/>
                  <div v-else>{{scope.row.leaderComment}}</div>
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </div>
    </el-card>

    <el-dialog title="" :visible.sync="turnDownOpen" width="1000px" :close-on-click-modal="false" :show-close="false">
      <el-form size="mini" label-position="right" ref="flow" :model="flow" :rules="flowRules" label-width="80px">
        <el-form-item label="驳回原因" prop="result">
          <el-input type="textarea" v-model="flow.result"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="btnTurnDownClose">取 消</el-button>
        <el-button size="mini" type="primary" @click="btnTurnDownConfirm">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { getPerformance} from "@/api/business/ehr/pm/performance";
import { getFlow} from "@/api/business/ehr/pm/flow";
import { superiorevaluation,superiorevaluationFlow} from "@/api/business/ehr/pm/pmmark";

export default {
  name: "AwaitMarkPmDetail",
  dicts: ['ehr_pm_aspect','ehr_pm_role','ehr_pm_group','ehr_pm_status'],
  data() {
    return {
      //遮罩层
      loading: true,
      //表单
      form:{},
      //流程数据
      flow:{},
      //提交规则
      rules:{
        remark: [
          { required: true, message: " ", trigger: "blur" },
        ],
      },
      //流程数据规则
      flowRules:{
        result: [
          { required: true, message: "驳回原因不能为空", trigger: "blur" },
        ],
      },
      //是否显驳回弹出层
      turnDownOpen:false,
      //上级评分
      lldMark:0,
      //刷新表格标记
      refreshTable:0,
    };
  },
  computed: {
    //自评分最大值
    saMarkMax: function () {
      return this.form.staffDivide == 'C1' ? 150 : 100
    },
    comment() {
      if(this.form.comment){
        let obj = JSON.parse(this.form.comment);
        let arr = Object.entries(obj)
        return arr;
      }else{
        return [];
      }
    }
	},
  async created() {
    console.log("this.$route.query",this.$route.query);
    await this.fetchPerformance(this.$route.query.performanceId);
    await this.fetchFlow(this.$route.query.flowId);
    if(this.form.comment){
      let obj = JSON.parse(this.form.comment);
      if(this.form.isTwoEvaluation){
        this.form.remark = obj[this.$store.state.user.nickName];
      }else{
        this.form.remark = obj[this.form.evaluatorName];
      }
    }
  },
  methods: {
    //查询详情
    async fetchPerformance(id){
      this.loading = true;
      await getPerformance(id).then(res => {
        if (res.code === 200) {
          this.form = res.data;
          this.id = res.data.id;
          this.refreshTable++;
         }
         this.loading = false;
      })
    },
    //查询流程详情
    async fetchFlow(id){
      this.loading = true;
      await getFlow(id).then(res => {
        if (res.code === 200) {
          this.flow = res.data;
         }
         this.loading = false;
      })
    },
    //合计
    getSummaries(param){
      const { columns, data } = param;
      let ldMark = 0;
      ldMark = data.reduce((sum, e) => sum + (e.asItem ? Number(e.leaderScoring || 0) : Number(e.leaderScoring || 0) * (Number(e.weight || 0) / 100)), 0);
      ldMark = ldMark.toFixed(1);
      this.lldMark = ldMark;
      if(this.form.isTwoEvaluation){
        return ['合计','','',this.form.weight,'','','',this.form.saMark,'','',ldMark];
      }else{
        return ['合计','','',this.form.weight,'','','',this.form.saMark,'',ldMark];
      }
    },
    //驳回
    btnTurnDown(){
      this.turnDownOpen = true;
    },
    //驳回取消
    btnTurnDownClose(){
      this.turnDownOpen = false;
    },
    //驳回确认
    async btnTurnDownConfirm(){
      this.$refs["flow"].validate(async valid => {
        if (valid) {
          this.loading = true;
          this.turnDownOpen = false;
          this.flow.status = 1;
          //保存流程数据
          await superiorevaluationFlow(this.flow).then(res => {
            if (res.code === 200) {
              this.fetchPerformance(this.$route.query.performanceId);
              this.fetchFlow(this.$route.query.flowId);
              this.$modal.msgSuccess("已确认");
            }
            this.loading = false;
          })
        }
      });
    },
    //评写完成
    async btnverify(){
      if(this.form.staffDivide == 'C1' && this.lldMark > 150){
        this.$modal.msgWarning("业务组总评分不能超过150！");
        return;
      }
      if(this.form.staffDivide == 'C2' && this.lldMark > 100){
        this.$modal.msgWarning("非务组总评分不能超过100！");
        return;
      }
      this.$refs["dataForm"].validate(async (valid, obj) => {
        if (valid) {
          this.loading = true;
          this.flow.status = 2;
          this.flow.result = "已评分";
          let data = {
            performance: this.form,
            flow: this.flow
          }
          //保存流程数据
          await superiorevaluation(data).then(res => {
            if (res.code === 200) {
              this.fetchPerformance(this.$route.query.performanceId);
              this.fetchFlow(this.$route.query.flowId);
              this.$modal.msgSuccess("已确认");
            }
            this.loading = false;
          })
        } else {
          this.$modal.msgWarning("评分或评语不能为空！");
          return false;
        }
      });
    },
    //返回
    btnBack(){
      this.$router.back();
      // this.$router.push({name:'AwaitMarkPm',params: { id: this.form.sourceId}});
    },
    //必选标识
    addRedStar(h, { column }) {
      return [
        h('span', { style: 'color: #F56C6C' }, '*'),
        h('span', ' ' + column.label)
      ];
    },
  }
};
</script>

<style lang="scss" scoped>
</style>
