<template>
  <el-dialog  :close-on-click-modal="false"
    :title="!this.taskForm.taskId == '' ? $t('处理') : $t('详情')"

    :visible.sync="visible"
    :append-to-body="true"
    width="60%">
    <el-descriptions :column="2" border size="small" v-if="!desFlag">
      <el-descriptions-item label="组织保护措施变更播述" :span="2" :label-style="labelStyle">
        {{ this.dataForm.changeDescribe }}
      </el-descriptions-item>
      <el-descriptions-item label="状态变更的原因" span="2" :label-style="labelStyle">
        {{ this.dataForm.changeReason }}
      </el-descriptions-item>
      <el-descriptions-item label="申请人" :label-style="labelStyle">
        {{ this.dataForm.applicantName }}
      </el-descriptions-item>
      <el-descriptions-item label="申请时间" :label-style="labelStyle">
        <template>
          <span>{{ parseTime(this.dataForm.applicationTime, '{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-descriptions-item>
      <el-descriptions-item label="状态" :label-style="labelStyle">
        <el-tag size="small" :type="statusFlag">{{ status[this.dataForm.status] }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="申请状态">
        <el-tag size="small" :type="approveStatusFlag">{{ approveStatus[this.dataForm.approveStatus] }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="安全评估及临时的安全措施" :span="2" :label-style="labelStyle">
        {{ this.dataForm.safa }}
      </el-descriptions-item>
      <el-descriptions-item label="安全评估人" :label-style="labelStyle">
        {{ this.dataForm.safaerName }}
      </el-descriptions-item>
      <el-descriptions-item label="安全评估时间" :label-style="labelStyle">
        <template>
          <span>{{ parseTime(this.dataForm.safaTime, '{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-descriptions-item>
      <el-descriptions-item label="批准人" :label-style="labelStyle">
        {{ this.dataForm.approverName }}
      </el-descriptions-item>
      <el-descriptions-item label="批准时间" :label-style="labelStyle">
        <template>
          <span>{{ parseTime(this.dataForm.approveTime, '{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-descriptions-item>
      <el-descriptions-item label="临时措施执行人" :label-style="labelStyle">
        {{ this.dataForm.executorName }}
      </el-descriptions-item>
      <el-descriptions-item label="临时措施执行时间" :label-style="labelStyle">
        <template>
          <span>{{ parseTime(this.dataForm.executionTime, '{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-descriptions-item>
      <el-descriptions-item label="临时措施确认人" :label-style="labelStyle">
        {{ this.dataForm.confirmerName }}
      </el-descriptions-item>
      <el-descriptions-item label="临时措施确认时间" :label-style="labelStyle">
        <template>
          <span>{{ parseTime(this.dataForm.confirmTime, '{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-descriptions-item>
      <el-descriptions-item label="组织保护措施状态变更执行" :span="2" :label-style="labelStyle">
        {{ this.dataForm.changeExecution }}
      </el-descriptions-item>
      <el-descriptions-item label="执行人" :label-style="labelStyle">
        {{ this.dataForm.changeExecutorName }}
      </el-descriptions-item>
      <el-descriptions-item label="执行时间" :label-style="labelStyle">
        <template>
          <span>{{ parseTime(this.dataForm.changeExecutorTime, '{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-descriptions-item>
      <el-descriptions-item label="组织保护措施是否已经恢复至变更前的状态" :label-style="labelStyle">
        {{ this.dataForm.resetConfirm }}
      </el-descriptions-item>
      <el-descriptions-item label="破锁编号" :label-style="labelStyle">
        {{ this.dataForm.lockNo }}
      </el-descriptions-item>
      <el-descriptions-item label="状态恢复，确认人1" :label-style="labelStyle">
        {{ this.dataForm.resetConfirmerName1 }}
      </el-descriptions-item>
      <el-descriptions-item label="确认时间" :label-style="labelStyle">
        {{ this.dataForm.resetConfirmTime1 }}
      </el-descriptions-item>
      <el-descriptions-item label="状态恢复，确认人2" :label-style="labelStyle">
        {{ this.dataForm.resetConfirmerName2 }}
      </el-descriptions-item>
      <el-descriptions-item label="确认时间" :label-style="labelStyle">
        {{ this.dataForm.resetConfirmTime2 }}
      </el-descriptions-item>
      <el-descriptions-item label="状态恢复后，之前采取的安全措施是否已撤销" :span="2" :label-style="labelStyle">
        {{ this.dataForm.revokeConfirm }}
      </el-descriptions-item>
      <el-descriptions-item label="备注" :span="2" :label-style="labelStyle">
        {{ this.dataForm.remarks }}
      </el-descriptions-item>
    </el-descriptions>
    <el-form ref="form" :model="form" label-position="left" :rules="rules" label-width="170px"
             style="margin-top: 30px">
      <div v-if="flag">
        <div v-if="taskName=='申请人提交申请'">
          <el-form-item label="组织保护措施变更描述" prop="changeDescribe">
            <el-input type="textarea" v-model="form.changeDescribe" placeholder="请输入组织保护措施变更描述"/>
          </el-form-item>
          <el-form-item label="状态变更的原因" prop="changeReason">
            <el-input type="textarea" v-model="form.changeReason" placeholder="请输入状态变更的原因"/>
          </el-form-item>
        </div>
        <div v-if="taskName=='安全评估人1'">
          <el-form-item label="安全评估及临时的安全措施" prop="safa" label-width="190px">
<!--            <el-input type="textarea" v-model="form.safa" placeholder="请输入安全评估及临时的安全措施"/>-->
            <el-autocomplete
              type="textarea"
              class="inline-input"
              style="width: 100%"
              v-model="form.safa"
              placeholder="请输入安全评估及临时的安全措施"
              :trigger-on-focus="false"
              :fetch-suggestions="getSAFA"></el-autocomplete>
          </el-form-item>
        </div>
        <div v-if="taskName=='变更执行人'">
          <el-form-item label="组织保护措施状态变更执行" prop="changeExecution" label-width="190px">
            <el-input type="textarea" v-model="form.changeExecution" placeholder="请输入组织保护措施状态变更执行"/>
          </el-form-item>
        </div>
        <div v-if="taskName=='安全评估人2'">
          <el-form-item label="组织保护措施是否已经恢复至变更前的状态" prop="resetConfirm" label-width="310px">
            <el-radio-group v-model="form.resetConfirm">
              <el-radio label="是">是</el-radio>
              <el-radio label="否">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="状态恢复后，之前采取的安全措施是否已撤销" prop="revokeConfirm" label-width="310px">
            <el-radio-group v-model="form.revokeConfirm">
              <el-radio label="是">是</el-radio>
              <el-radio label="否">否</el-radio>
              <el-radio label="NA">NA</el-radio>
            </el-radio-group>
          </el-form-item>
          <!--          <el-form-item label="确认人" prop="resetConfirmer1">
                      <el-select v-model="form.resetConfirmer1" placeholder="请选择确认人" clearable size="small" filterable
                                 style="width: 100%">
                        <el-option
                          v-for="item in resetConfirmerList"
                          :key="item.userId"
                          :label="item.nickName"
                          :value="item.userId"
                        ></el-option>
                      </el-select>
                    </el-form-item>-->
        </div>
        <el-form-item label="备注" prop="remarks" v-if="taskName!='申请人提交申请'">
          <el-input type="textarea" v-model="form.remarks" placeholder="选填"/>
        </el-form-item>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button v-if="!this.taskForm.taskId == ''&&(this.taskName=='安全评估人1'||this.taskName=='批准人')"
                 type="warning"
                 @click="dataFormSubmit(2)" :disabled="submitDisabled">{{ $t('驳回') }}</el-button>
      <el-button v-if="!this.taskForm.taskId == ''" type="primary"
                 @click="dataFormSubmit(1)"
                 :disabled="submitDisabled">{{ $t(taskName != '申请人提交申请' ? '通过' : '提交') }}</el-button>
      <el-button v-if="!this.taskForm.taskId == ''&&(this.taskName=='安全评估人1'||this.taskName=='批准人')"
                 type="danger"
                 @click="dataFormSubmit(0)" :disabled="submitDisabled">{{ $t('拒绝') }}</el-button>
      <el-button @click="visible = false">{{ $t('返回') }}</el-button>
    </span>
    <div>
      <span>{{ $t('流转详情') }}</span>
      <el-table :data="historyList" border v-loading="historyLoading" style="width: 100%;">
        <el-table-column prop="taskName" header-align="center" align="center"
                         :label="$t('流程进度')"></el-table-column>
        <el-table-column prop="userName" header-align="center" align="center" :label="$t('姓名')"></el-table-column>
        <el-table-column prop="taskCreateTime" header-align="center" align="center"
                         :label="$t('开始时间')"></el-table-column>
        <el-table-column prop="taskEndTime" header-align="center" align="center"
                         :label="$t('结束时间')"></el-table-column>
        <el-table-column prop="comment" header-align="center" align="center"
                         :label="$t('审批意见')"></el-table-column>
      </el-table>

    </div>
  </el-dialog>
</template>

<script>

import {getSafetychange, handle, listChangeReason, listSAFA} from "@/api/apply/safetychange";
import {getHistorylist} from "@/api/ehs/approvedanger";
import {listUserPost} from "@/api/system/user";

export default {
  name: "safetychange-detail",
  data() {
    return {
      labelStyle: {'width': '200px'},
      statusFlag: '',
      approveStatusFlag: '',
      status: {0: "未完成", 1: "已完成"},
      approveStatus: {1: "申请中", 2: "已通过", 3: "已拒绝"},
      flag: false,
      visible: false,
      resetConfirmerList: [],
      statusList: [],
      approveStatusList: [],
      safaList: [],
      //流转列表
      historyList: [],
      historyLoading: true,
      submitDisabled: false,
      taskName: '',
      devList: [],
      form: {},
      rules: {
        //resetConfirmer1: [{required: true, message: "请选择确认人", trigger: "blur"}],
        resetConfirm: [{required: true, message: "请选择是/否", trigger: "blur"}],
        changeExecution: [{required: true, message: "请输入组织保护措施状态变更执行", trigger: "blur"}],
        safa: [{required: true, message: "请输入安全评估及临时的安全措施", trigger: "blur"}],
        changeDescribe: [
          {required: true, message: "请输入组织保护措施变更描述", trigger: "blur"}
        ],
        changeReason: [
          {required: true, message: "请输入状态变更的原因", trigger: "blur"}
        ],
        revokeConfirm: [{required: true, message: "请选择是/否/NA", trigger: "blur"}]
      },
      dataForm: {
        id: null,
        changeDescribe: null,
        changeReason: null,
        applicant: null,
        applicantName: null,
        applicationTime: null,
        safa: null,
        safaer: null,
        safaerName: null,
        safaTime: null,
        approver: null,
        approverName: null,
        approveTime: null,
        executor: null,
        executorName: null,
        executionTime: null,
        confirmer: null,
        confirmerName: null,
        confirmTime: null,
        changeExecution: null,
        changeExecutor: null,
        changeExecutorName: null,
        changeExecutorTime: null,
        resetConfirm: null,
        resetConfirmer1: null,
        resetConfirmerName1: null,
        resetConfirmTime1: null,
        resetConfirmer2: null,
        resetConfirmerName2: null,
        resetConfirmTime2: null,
        revokeConfirm: null,
        remarks: null,
        status: null,
        createrCode: null,
        createdate: null,
        updaterCode: null,
        updatedate: null,
        deptId: null,
        approveStatus: null,
        apNo: null,
        processId: null
      },
      taskForm: {
        comment: '',
        taskId: '',
        files: '',
        govDate: '',
        govFileList: [],
        businessKey: '',
        offlinevalve: {}
      },
      desFlag: false,
    }
  },
  methods: {
    init(id, taskId, processId, taskName, flag, desFlag) {
      this.reset();
      this.devList = [];
      this.desFlag = desFlag;
      this.dataForm = {};
      this.historyList = [];
      this.dataForm.id = id || 0;
      this.form.id = id || 0;
      this.submitDisabled = false;
      this.flag = flag;
      this.visible = true;
      this.taskName = taskName;
      this.taskForm.taskId = taskId;
      this.taskForm.businessKey = id;
      this.dataForm.processId = processId;
      this.statusFlag = '';
      this.approveStatusFlag = '';
      getSafetychange(id).then(res => {
        this.dataForm = res.data;
        this.devList.push(this.dataForm);
        if (taskName == '申请人提交申请') {
          this.form.changeReason = this.dataForm.changeReason;
          this.form.changeDescribe = this.dataForm.changeDescribe;
        }

        if (this.dataForm.status === 1) {
          this.statusFlag = 'success';
        }
        if (this.dataForm.approveStatus === '2') {
          this.approveStatusFlag = 'success';
        } else if (this.dataForm.approveStatus === '1') {
          this.approveStatusFlag = 'warning';
        } else if (this.dataForm.approveStatus === '3') {
          this.approveStatusFlag = 'danger';
        }
      });
      this.getDicts("apply_status").then(response => {
        this.statusList = response.data;
      });
      this.getDicts("apply_approve_status").then(response => {
        this.approveStatusList = response.data;
      });
      getHistorylist({processId: processId}).then(response => {
        this.historyList = response.rows;
        this.historyLoading = false
      });
      listUserPost({
        actualposts: "12",
      }).then(response => {
        this.resetConfirmerList = response;
      });
      listSAFA({}).then(res => {
        this.safaList = res.data;
      })
    },
    getSAFA(val, cb) {
      let list = [];
      for (const item of this.safaList) {
        if (item.safa.indexOf(val) > -1)
          list.push({"value": item.safa})
      }
      return cb(list);
    },
    statusFormat(row, column) {
      let s = this.selectDictLabel(this.statusList, row.status);
      let type = '';
      if (row.status === 1) {
        type = 'success';
      }
      return <el-tag type={type}>{s}</el-tag>;
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        changeDescribe: null,
        changeReason: null,
        applicant: null,
        applicantName: null,
        applicationTime: null,
        safa: null,
        safaer: null,
        safaerName: null,
        safaTime: null,
        approver: null,
        approverName: null,
        approveTime: null,
        executor: null,
        executorName: null,
        executionTime: null,
        confirmer: null,
        confirmerName: null,
        confirmTime: null,
        changeExecution: null,
        changeExecutor: null,
        changeExecutorName: null,
        changeExecutorTime: null,
        resetConfirm: null,
        resetConfirmer1: null,
        resetConfirmerName1: null,
        resetConfirmTime1: null,
        resetConfirmer2: null,
        resetConfirmerName2: null,
        resetConfirmTime2: null,
        revokeConfirm: null,
        remarks: null,
        status: null,
        delFlag: null,
        createrCode: null,
        createdate: null,
        updaterCode: null,
        updatedate: null,
        deptId: null,
        approveStatus: null,
        apNo: null,
        processId: null,
      };
      this.resetForm("form");
    },
    // 字典翻译
    approveStatusFormat(row, column) {
      let s = this.selectDictLabel(this.approveStatusList, row.approveStatus)
      let type = '';
      if (row.approveStatus === '2') {
        type = 'success';
      } else if (row.approveStatus === '1') {
        type = 'warning';
      } else if (row.approveStatus === '3') {
        type = 'danger';
      }
      return <el-tag type={type}>{s}</el-tag>;
    },
    dataFormSubmit(val) {
      if (val==2||val==0){
        if (this.form.remarks==""||this.form.remarks==null||this.form.remarks==undefined){
          this.$alert("驳回/拒绝申请必须填写备注！", "注意！", { dangerouslyUseHTMLString: true });
          return;
        }
      }
      this.$refs["form"].validate(valid => {
        if (valid || val != 1) {
          this.submitDisabled = true;
          this.taskForm.condition = val;
          this.taskForm.safetychange = this.form;
          handle(this.taskForm).then(res => {
            this.msgSuccess("审核成功");
            this.visible = false;
            this.$emit('refreshDataList')
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
