<template>
  <div class="app-container">
    <el-steps :space="200" :active="active1" finish-status="success">
      <el-step :title="$t('记录人')"></el-step>
      <el-step :title="$t('确认')"></el-step>
      <el-step :title="$t('记录人') + $t('事件调查')"></el-step>
      <el-step :title="$t('执行人')"></el-step>
      <el-step :title="$t('验证人')"></el-step>
    </el-steps>
    {{info.processId}}
    <el-form ref="form" :model="form" :rules="rules" label-width="80px" v-if="info.taskName === $t('记录人')">
      <el-form-item :label="$t('事件级别')" prop="accidentLevel">
        <el-select v-model="form.accidentLevel" :placeholder="$t('请选择') + $t('事件级别')">
          <el-option
            v-for="dict in accidentLevelOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('整改措施')">
        <el-input v-model="form.measures" type="textarea" :rows="2" :placeholder="$t('请输入') + $t('整改措施')" />
      </el-form-item>
      <el-form-item :label="$t('执行人')" prop="name">
        <el-select v-model="form.executorId" filterable :placeholder="$t('请选择') + $t('执行人') + ID">
          <el-option
            v-for="dict in userOptions"
            :key="dict.userId"
            :label="dict.nickName"
            :value="dict.userId">
            <span style="float: left">{{ dict.nickName }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ dict.dept.deptName }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('预计完成时间')" prop="completeTime">
        <el-date-picker clearable size="small" style="width: 200px"
                        v-model="form.completeTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        :placeholder="$t('请选择') + $t('预计完成时间')">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <el-table :data="historyList" border v-loading="historyLoading" style="width: 100%;">
      <el-table-column prop="taskName" header-align="center" align="center" label="$t('taskName')"></el-table-column>
      <el-table-column prop="userName" header-align="center" align="center" label="$t('handler')"></el-table-column>
      <el-table-column prop="taskCreateTime" header-align="center" align="center" label="$t('taskCreateTime')"></el-table-column>
      <el-table-column prop="taskEndTime" header-align="center" align="center" label="$t('taskEndTime')"></el-table-column>
      <el-table-column prop="comment" header-align="center" align="center" label="$t('auditOpinion')"></el-table-column>
    </el-table>
  </div>
</template>

<script>
  import { getHistorylist } from "@/api/ehs/approvedanger";
  import { listUser } from "@/api/system/user";

  export default {
    name: "approveDetail",
    props: ['info'],
    data () {
      return {
        // 遮罩层
        historyLoading: false,
        //流转列表
        historyList: [],
        //人员表联查
        userOptions: [],
        //人员表查询条件
        userQueryParams: {},
        // 事件级别字典
        accidentLevelOptions: [],
        // 查询参数
        queryParams: {
          processId: null,
        },
        //流程图显示进度
        active1: 0,
        active2: 0,
        // 表单参数
        form: {},
        editFormChanged: false, // 是否修改标识
        // 表单校验
        rules: {
          measures: [
            { required: true, message: this.$t('事件基本信息') + this.$t('不能为空'), trigger: "blur" }
          ],
        }
      }
    },
    mounted() {
      this.getHistory();
      this.stepInfo();
      this.getUser();
    },
    created() {
      this.getDicts("ACCIDENT_LEVEL").then(response => {
        this.accidentLevelOptions = response.data;
      });
    },
    watch: {
      form: {
        handler (val, oldVal) {
          for (let i in this.editForm) {
            if (val[i] != this.prevForm[i]) {
              this.editFormChanged = true;
              break;
            } else {
              this.editFormChanged = false;
            }
          }
          this.$emit('recordInfo', this.form);
        },
        deep: true,
      },
    },
    methods: {
      // 事件初步分类字典翻译
      accidentLevelFormat(row, column) {
        return this.selectDictLabel(this.accidentLevelOptions, row.accidentLevel);
      },
      /** 查询流转列表 */
      getHistory() {
        this.historyLoading = true
        this.queryParams.processId = this.info.processId;
        getHistorylist(this.queryParams).then(response => {
          this.historyList = response.rows;
          this.historyLoading = false
        });
      },
      /** 流程图显示 */
      stepInfo() {
        if (this.info.taskName === this.$t('验证人')) { this.active1 = 4; }
        else if (this.info.taskName === this.$t('执行人')) { this.active1 = 3; }
        else if (this.info.taskName === this.$t('记录人')) { this.active1 = 2; }
        else if (this.info.taskName === this.$t('确认')) { this.active1 = 1; }
        else { this.active1 = 0; }
      },
      //获取用户表
      getUser() {
        listUser(this.userQueryParams).then(response => {
          this.userOptions = response.rows;
        });
      },
    }
  }
</script>
