<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="font-weight:bold">阶段控制</span>
        <div style="float: right; padding: 3px 0;display:flex;justify-content:space-between" type="text" v-if="pageState == 'see'">
          <el-button size="mini" plain @click="btnBack">返回</el-button>
          <el-button type="primary" size="mini" @click="btnEdit" v-if="pageState == 'see' && form.stage < 5" v-hasPermi="['ehr:pm:stage:edit']">修改</el-button>
          <el-button size="mini" type="primary" :loading="loading" @click="btnPublish" v-if="form.isPublish == 'N'" v-hasPermi="['ehr:pm:stage:publish']">发布</el-button>
          <el-button size="mini" type="primary" :loading="loading" @click="btnFillinFinish" v-if="form.isPublish == 'Y' && form.stage == '0'" v-hasPermi="['ehr:pm:stage:fillinFinish']">结束填写</el-button>
          <el-button size="mini" type="primary" :loading="loading" @click="btnStartSelfEvaluation" v-if="form.stage == '2'" v-hasPermi="['ehr:pm:stage:startSelfEvaluation']">开始自评</el-button>
          <el-button size="mini" type="primary" :loading="loading" @click="btnFinishSelfEvaluation" v-if="form.stage == '3'" v-hasPermi="['ehr:pm:stage:finishSelfEvaluation']">结束自评</el-button>
          <el-button size="mini" type="primary" :loading="loading" plain @click="btnOpenGradeAdjust" v-if="form.stage == '5' && form.isAdjust == 'N' && form.isSalary == 'N'" v-hasPermi="['ehr:pm:stage:openGradeAdjust']">开启部门分数调整</el-button>
          <el-button size="mini" type="primary" :loading="loading" plain @click="btnCloseGradeAdjust" v-if="form.stage == '5' && form.isAdjust == 'Y' && form.isSalary == 'N'" v-hasPermi="['ehr:pm:stage:closeGradeAdjust']">关闭部门分数调整</el-button>
          <el-button size="mini" type="primary" :loading="loading" plain @click="btnAdjustMark" v-if="form.stage == '5' && form.isSalary == 'N'" v-hasPermi="['ehr:pm:stage:markAdjust']">分数调整</el-button>
          <el-button size="mini" type="primary" :loading="loading" plain @click="btnComputeResult" v-if="form.stage == '5' && form.isSalary == 'N'" v-hasPermi="['ehr:pm:stage:computeResult']">计算结果</el-button>
          <el-button size="mini" type="primary" :loading="loading" plain @click="btnCendToSalary" v-if="form.stage == '5' && form.isSalary == 'N'" v-hasPermi="['ehr:pm:stage:cendToSalary']">过数到薪资</el-button>
          <el-button size="mini" type="primary" :loading="loading" plain @click="btnPublishResult" v-if="form.stage == '5' && form.isSalary == 'Y'" v-hasPermi="['ehr:pm:stage:publishResult']">绩效结果公示</el-button>
          <el-button size="mini" plain @click="btnPreviou">上一个</el-button>
          <el-button size="mini" plain @click="btnNext">下一个</el-button>
        </div>
        <div style="float: right; padding: 3px 0;display:flex;justify-content:space-between" type="text" v-if="pageState != 'see'">
          <el-button size="mini" plain @click="btnCancel" >取消</el-button>
          <el-button type="primary" :loading="loading" size="mini" @click="btnSave">保存</el-button>
        </div>
      </div>
      <div v-loading="loading">
        <el-descriptions :column="4" v-if="pageState == 'see'">
          <el-descriptions-item label="名称">{{form.name}}</el-descriptions-item>
          <el-descriptions-item label="月份">{{form.month}}</el-descriptions-item>
          <el-descriptions-item label="阶段" style="margin-left:27px">
            <div v-for="dict in dict.type.ehr_pm_status" v-if="form.stage == dict.value">
              <div>{{ dict.label }}</div>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="预计填写结束时间">{{form.fillinEndtiem}}</el-descriptions-item>
          <el-descriptions-item label="预计评分结束时间">{{form.markEndtiem}}</el-descriptions-item>
        </el-descriptions>
        <el-form size="mini" label-position="right" ref="form" :model="form" :rules="formRules" :inline="true" class="demo-form-inline" v-if="pageState != 'see'">
          <el-row>
            <el-col span="6">
              <el-form-item label="名称" prop="name">
                <el-input v-model="form.name" :disabled="form.isPublish == 'Y'"></el-input>
              </el-form-item>
            </el-col>
            <el-col span="6">
              <el-form-item label="月份" prop="month">
                <el-date-picker type="month" value-format="yyyy-MM" v-model="form.month" :disabled="form.isPublish == 'Y'">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col span="6">
              <el-form-item label="状态" prop="stage">
                <el-select size="mini" v-model="form.stage" placeholder="" disabled>
                  <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-col>
            <el-col span="6">
              <el-form-item label="预计填写结束时间" prop="yearMonth">
                <el-date-picker type="date" value-format="yyyy-MM-dd" v-model="form.fillinEndtiem">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col span="6">
              <el-form-item label="预计评分结束时间" prop="yearMonth">
                <el-date-picker type="date" value-format="yyyy-MM-dd" v-model="form.markEndtiem">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-tabs v-model="activeName" v-if="form.isPublish == 'Y'" @tab-click="btnTabs" v-show="pageState == 'see'">
          <el-tab-pane label="绩效列表" name="first">
            <PmList :key="pmListKey" :stage="form"/>
          </el-tab-pane>
          <el-tab-pane label="等级参数" name="second">
            <GcList :key="gcListKey" :stage="form"/>
          </el-tab-pane>
        </el-tabs>
        <!--               -->
      </div>
    </el-card>
    
  </div>
</template>

<script>
import PmList from './pmList.vue'
import GcList from './gcList.vue'
import { getStage,addStage,updateStage,publishStage,fillinFinish,startSelfEvaluation,finishSelfEvaluation,openGradeAdjust,closeGradeAdjust,computeResult,cendToSalary,publishResult} from "@/api/business/ehr/pm/stage";

export default {
  name: 'detail',
  dicts: ['ehr_pm_status',],
  props: ['enterState','rowId',"ids"],
  model: {
    prop: 'isList',
    event: 'jugislist'
  },
  components: {PmList,GcList},
  data() {
    return {
      //id
      id:null,
      //表单
      form:{},
      //表单校验规则
      formRules:{
        name: [
          { required: true, message: "名称不能为空", trigger: "blur" },
        ],
        month: [
          { required: true, message: "月份不能为空", trigger: "blur" },
        ],
      },
      //遮罩
      loading: false,
      //页面状态
      pageState: null,
      //当前页签
      activeName: 'first',
      //pmListKey
      pmListKey: 0,
      //gcListKey
      gcListKey: 0,
    }
  },
  async created() {
    this.pageState = this.enterState;
    if(this.enterState == 'add'){
      this.form.stage = "0";
      this.form.isPublish = 'N';
      this.form.isAdjust = 'N';
    }
    if(this.enterState == 'edit' || this.enterState == 'see') {
      this.id = this.rowId;
      this.fetchStage(this.id);
    }
  },
  watch: {
  },
  methods: {
    //返回
    btnBack(){
      this.$emit('jugislist', true)
      this.$emit('refresh')
    },
    //查询详情
    async fetchStage(id){
      this.loading = true;
      await getStage(id).then(res => {
        if (res.code === 200) {
          this.form = res.data;
          this.id = res.data.id;
        }
        this.loading = false;
      })
    },
    //上一个
    btnPreviou(){
      let i = this.ids.indexOf(this.id) - 1;
      if(i > -1){
        let id = this.ids[i];
        this.fetchStage(id);
        this.activeName = 'first';
        this.pmListKey++;
      }else{
        this.$modal.msgSuccess("已经是当前页第一条了！");
      }
    },
    //下一个
    btnNext(){
      let i = this.ids.indexOf(this.id) + 1;
      if(i < this.ids.length){
        let id = this.ids[i];
        this.fetchStage(id);
        this.activeName = 'first';
        this.pmListKey++;
      }else{
        this.$modal.msgSuccess("已经是当前页最后一条了！");
      }
    },
    //发布
    btnPublish(){
      let that = this;
      this.$modal.confirm('确认要发布吗？').then(async function() {
        that.loading = true;
        return await publishStage(that.form);
      }).then(() => {
        that.fetchStage(that.id);
        that.$modal.msgSuccess("发布成功");
        that.loading = false;
      }).catch(() => {
        that.loading = false;
      });
    },
    //填写结束
    btnFillinFinish(){
      let that = this;
      this.$modal.confirm('确认要结束填写吗？').then(async function() {
        that.loading = true;
        return await fillinFinish(that.form);
      }).then(() => {
        that.fetchStage(that.id);
        that.$modal.msgSuccess("保存成功");
        that.loading = false;
      }).catch(() => {
        that.loading = false;
      });
    },
    //开始自评
    btnStartSelfEvaluation(){
      let that = this;
      this.$modal.confirm('确认要开启自评吗？').then(async function() {
        that.loading = true;
        return await startSelfEvaluation(that.form);
      }).then(() => {
        that.fetchStage(that.id);
        that.$modal.msgSuccess("开启成功");
        this.pmListKey++;
        that.loading = false;
      }).catch(() => {
        this.pmListKey++;
        that.loading = false;
      });
    },
    //结束自评
    btnFinishSelfEvaluation(){
      let that = this;
      this.$modal.confirm('确认要结束评分吗？').then(async function() {
        that.loading = true;
        return await finishSelfEvaluation(that.form);
      }).then(() => {
        that.fetchStage(that.id);
        that.$modal.msgSuccess("结束成功");
        that.loading = false;
      }).catch(() => {
        that.loading = false;
      });
    },
    //开启分数调整
    btnOpenGradeAdjust(){
      let that = this;
      this.$modal.confirm('确认要开启分数调整？').then(async function() {
        that.loading = true;
        return await openGradeAdjust(that.form);
      }).then(() => {
        that.fetchStage(that.id);
        that.$modal.msgSuccess("已开始");
        that.loading = false;
      }).catch(() => {
        that.loading = false;
      });
    },
    //关闭分数调整
    btnCloseGradeAdjust(){
      let that = this;
      this.$modal.confirm('确认要关闭分数调整？').then(async function() {
        that.loading = true;
        return await closeGradeAdjust(that.form);
      }).then(() => {
        that.fetchStage(that.id);
        that.$modal.msgSuccess("已关闭");
        that.loading = false;
      }).catch(() => {
        that.loading = false;
      });
    },
    //分数调整
    btnAdjustMark(){
      this.$router.push({ name: 'AdjustMark', params: { id: this.id } });
    },
    //计算结果
    btnComputeResult(){
      if(this.form.isAdjust == 'Y'){
        this.$modal.msgWarning("当前已开启部门负责人分数调整，请先关闭部门负责人分数调整后再进行计算结果操作！");
        return;
      }
      try {
        this.loading = true;
        computeResult(this.form).then(res => {
          this.$modal.msgSuccess("操作成功");
        })
      } catch (err) {
        console.error(err);
      } finally {
        this.loading = false;
      }
    },
    //过数到薪资
    btnCendToSalary(){
      let that = this;
      this.$modal.confirm('确认要同步到薪资绩效系数吗？').then(async function() {
        that.loading = true;
        return await cendToSalary(that.form);
      }).then(() => {
        that.fetchStage(that.id);
        that.$modal.msgSuccess("操作成功");
      }).catch(() => {
        that.loading = false;
      });
    },
    //公布结果
    btnPublishResult(){
      let that = this;
      this.$modal.confirm('确认要公示结果吗？').then(async function() {
        that.loading = true;
        return await publishResult(that.form);
      }).then(() => {
        that.fetchStage(that.id);
        that.$modal.msgSuccess("已公示");
      }).catch(() => {
        that.loading = false;
      });
    },
    //修改
    btnEdit(){
      this.pageState = "edit";
    },
    //取消
    btnCancel(){
      if(this.enterState == 'add'){
        this.btnBack();
      }else{
        this.pageState = "see";
      }
    },
    //保存
    btnSave(){
      this.$refs["form"].validate(valid => {
        try {
          this.loading = true;
          if (valid) {
            if (this.form.id != undefined) {
              updateStage(this.form).then(response => {
                this.$modal.msgSuccess("保存成功");
                this.btnBack();
              });
            } else {
              addStage(this.form).then(response => {
                this.$modal.msgSuccess("保存成功");
                this.btnBack();
              });
            }
          }
        } catch (err) {
          console.error(err);
        } finally {
          this.loading = false;
        }
      });
    },
    //页签切换
    btnTabs(e) {
      switch (e.name) {
        case "first":
          break;
        case "second":
          break;
        default:
          break;
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.footer {
  z-index: 500;
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 100%;
  line-height: var(--footer-height);
  text-align: right;
}
</style>
