<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="安全阀位号" :label-style="labelStyle">{{ this.dataForm.devNo }}
      </el-descriptions-item>
      <el-descriptions-item label="单元" :label-style="labelStyle">{{ this.dataForm.unit }}</el-descriptions-item>
      <el-descriptions-item label="离线原因" :span="2">{{ this.dataForm.offlineReason }}</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.disassembly }}
      </el-descriptions-item>
      <el-descriptions-item label="破锁编号" :label-style="labelStyle">
        {{ this.dataForm.lockNo }}
      </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.temporaryTime, '{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </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">
        {{ 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.resetConfirm }}
      </el-descriptions-item>
      <el-descriptions-item label="离线安全阀复位后现场是否存在泄漏" :label-style="labelStyle">
        {{ this.dataForm.leakConfirm }}
      </el-descriptions-item>
      <el-descriptions-item label="离线安全复位后，之前采取的安全措施是否已撤销" :label-style="labelStyle">
        {{ this.dataForm.revokeConfirm }}
      </el-descriptions-item>
      <el-descriptions-item label="离线安全复位后，是否已经重新上锁" :label-style="labelStyle">
        {{ this.dataForm.lockConfirm }}
      </el-descriptions-item>
      <el-descriptions-item label="确认上锁人员" :label-style="labelStyle" :span="2">
        {{ this.dataForm.lockConfirmer1Name }} {{ this.dataForm.lockConfirmer2Name }}
      </el-descriptions-item>
      <el-descriptions-item label="上述信息确认人" :label-style="labelStyle">
        {{ this.dataForm.infoConfirmerName }}
      </el-descriptions-item>
      <el-descriptions-item label="确认时间" :label-style="labelStyle">
        {{ this.dataForm.confirmTime }}
      </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="340px"
             style="margin-top: 30px">
      <div v-if="flag">
        <div v-if="taskName=='临时措施制定人'">
          <el-form-item label="安全评估以及临时措施执行" prop="safa">
            <!--            <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>
          <el-form-item label="安全阀锁开是否拆解" prop="disassembly">
            <el-radio-group v-model="form.disassembly">
              <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="lockNo" v-if="form.disassembly=='是'">
            <el-select v-model="form.lockNo" placeholder="请选择锁编号" multiple clearable size="small" filterable
                       style="width: 100%">
              <el-option
                v-for="item in lockList"
                :key="item.lockCode"
                :label="item.lockCode"
                :value="item.lockCode"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div v-if="taskName=='信息确认人'||(taskName=='确认人'&&dataForm.disassembly!='是')">
          <el-row>
            <el-col span="12">
              <el-form-item label="离线安全阀是否已经复位" prop="resetConfirm">
                <el-radio-group v-model="form.resetConfirm">
                  <el-radio label="是">是</el-radio>
                  <el-radio label="否">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col span="12">
              <el-form-item label="离线安全阀复位后现场是否存在泄漏" prop="leakConfirm">
                <el-radio-group v-model="form.leakConfirm">
                  <el-radio label="是">是</el-radio>
                  <el-radio label="否">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col span="12">
              <el-form-item label="离线安全复位后，之前采取的安全措施是否已撤销" prop="revokeConfirm">
                <el-radio-group v-model="form.revokeConfirm">
                  <el-radio label="是">是</el-radio>
                  <el-radio label="否">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <div v-if="dataForm.disassembly=='是'">
              <el-col span="12">
                <el-form-item label="离线安全复位后，是否已经重新上锁" prop="lockConfirm">
                  <el-radio-group v-model="form.lockConfirm">
                    <el-radio label="是">是</el-radio>
                    <el-radio label="否">否</el-radio>
                    <el-radio label="NA">NA</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </div>
          </el-row>
          <!--          <div v-if="dataForm.disassembly=='是'">
                      <el-form-item label="上锁确认人" prop="lockConfirmer1">
                        <el-select v-model="form.lockConfirmer1" placeholder="请选择上锁确认人" clearable size="small" filterable
                                   style="width: 100%">
                          <el-option
                            v-for="item in infoConfirmerList"
                            :key="item.userId"
                            :label="item.nickName"
                            :value="item.userId"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </div>-->
        </div>
        <el-form-item label="备注" prop="remarks" v-if="taskName!='申请人提交申请'">
          <el-input type="textarea" v-model="form.remarks" placeholder="选填"/>
        </el-form-item>

        <div v-if="taskName=='申请人提交申请'">
          <el-form-item label="安全阀位号" prop="devNo">
            <el-select v-model="form.devNo" placeholder="请选择或输入安全阀位号" clearable size="small" filterable
                       allow-create style="width: 100%">
              <el-option
                v-for="item in safetyvavleList"
                :key="item.tagno"
                :label="item.tagno"
                :value="item.tagno"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="单元" prop="unit">
            <el-select v-model="form.unit" placeholder="请选择单元" clearable size="small" filterable
                       style="width: 100%">
              <el-option
                v-for="dict in unitOptions"
                :key="dict.dictLabel"
                :label="dict.dictLabel"
                :value="dict.dictLabel"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="离线原因" prop="offlineReason">
            <el-input type="textarea" v-model="form.offlineReason" placeholder="请输入离线原因"/>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button v-if="!this.taskForm.taskId == ''&&(this.taskName=='临时措施制定人'||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">{{ getButtonName() }}</el-button>
      <el-button v-if="!this.taskForm.taskId == ''&&(this.taskName=='临时措施制定人'||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 {getOfflinevalve, handle, listSAFA} from "@/api/apply/offlinevalve";
import {getHistorylist} from "@/api/ehs/approvedanger";
import {listUserPost} from "@/api/system/user";
import {allSafetyvavle} from "@/api/reliability/safetyvavle";
import {listAllLock} from "@/api/apply/lock";

export default {
  name: "offlinevalve-detail",
  data() {
    return {
      desFlag: false,
      status: {0: "未完成", 1: "已完成"},
      approveStatus: {1: "申请中", 2: "已通过", 3: "已拒绝"},
      //label样式
      labelStyle: {'width': '200px'},
      infoConfirmerList: [],
      // 安全阀清单
      safetyvavleList: [],
      safaList: [],
      unitOptions: [],
      lockList: [],
      //流转列表
      historyList: [],
      historyLoading: true,
      submitDisabled: false,
      taskName: '',
      visible: false,
      approveStatusList: [],
      statusList: [],
      taskForm: {
        comment: '',
        taskId: '',
        files: '',
        govDate: '',
        govFileList: [],
        businessKey: '',
        offlinevalve: {}
      },
      devList: [],
      dataForm: {
        id: null,
        devNo: null,
        unit: null,
        offlineReason: null,
        safa: null,
        disassembly: null,
        executor: null,
        confirmer: null,
        applicant: null,
        applicationTime: null,
        approver: null,
        approveTime: null,
        resetConfirm: null,
        leakConfirm: null,
        revokeConfirm: null,
        lockConfirm: null,
        lockConfirmer1: null,
        lockConfirmer2: null,
        infoConfirmer: null,
        confirmTime: null,
        remarks: null,
        temporaryTime: null,
        executionTime: null,
        status: 0,
        delFlag: null,
        createrCode: null,
        createdate: null,
        updaterCode: null,
        updatedate: null,
        deptId: null,
        approveStatus: null,
        lockConfirmer1Name: null,
        lockConfirmer2Name: null,
        infoConfirmerName: null,
        executorName: null,
        confirmerName: null,
        approverName: null,
        applicantName: null,
        apNo: null,
        processId: null
      },
      form: {},
      statusFlag: '',
      approveStatusFlag: '',
      rules: {
        safa: [{required: true, message: "请输入安全评估以及临时措施执行", trigger: "blur"}],
        lockConfirm: [{required: true, message: "请选择是/否/NA", trigger: "blur"}],
        revokeConfirm: [{required: true, message: "请选择是/否", trigger: "blur"}],
        leakConfirm: [{required: true, message: "请选择是/否", trigger: "blur"}],
        resetConfirm: [{required: true, message: "请选择是/否", trigger: "blur"}],
        disassembly: [{required: true, message: "请选择是/否/NA", trigger: "blur"}],
        lockConfirmer1: [{required: true, message: "请选择是/否/NA", trigger: "blur"}],
        devNo: [
          {required: true, message: "请选择或输入安全阀位号", trigger: "blur"}
        ],
        unit: [
          {required: true, message: "请选择单元", trigger: "blur"}
        ],
        offlineReason: [
          {required: true, message: "请输入离线原因", trigger: "blur"}
        ],
        lockNo: [
          {required: true, message: "请选择锁编号", trigger: "blur"}
        ],
      },
      flag: false
    }
  },
  methods: {
    init(id, taskId, processId, taskName, flag, desFlag) {
      this.flag = flag;
      this.desFlag = desFlag;
      this.submitDisabled = false;
      this.statusFlag = '';
      this.approveStatusFlag = '';
      this.reset();
      this.devList = [];
      this.dataForm = {};
      this.visible = true;
      this.taskName = taskName;
      this.taskForm.taskId = taskId;
      this.taskForm.businessKey = id;
      this.historyList = [];
      console.log(this.taskForm.taskId)
      this.dataForm.id = id || 0;
      this.form.id = id || 0;
      this.dataForm.processId = processId;
      getOfflinevalve(id).then(res => {
        this.dataForm = res.data;
        this.devList.push(this.dataForm);
        if (taskName == '申请人提交申请') {
          this.form.devNo = res.data.devNo;
          this.form.offlineReason = res.data.offlineReason;
          this.form.unit = res.data.unit;
        }
        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.getLocks(this.dataForm.devNo);
      });
      this.getDicts("apply_status").then(response => {
        this.statusList = response.data;
      });
      this.getDicts("apply_approve_status").then(response => {
        this.approveStatusList = response.data;
      });
      getHistorylist({processId: this.dataForm.processId}).then(response => {
        this.historyList = response.rows;
        this.historyLoading = false
      });
      listUserPost({
        actualposts: "12",
      }).then(response => {
        this.infoConfirmerList = response;
      });
      allSafetyvavle().then(res => {
        this.safetyvavleList = res.data
      });
      this.getDicts("UNIT").then(response => {
        this.unitOptions = response.data;
      });
      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);
    },
    getLocks(devNo) {
      listAllLock({position: devNo, status: 0}).then(res => {
        res.data.forEach(item => {
          let riskLevel = '风险等级: ';
          if (item.riskLevel)
            riskLevel = '风险等级:' + item.riskLevel.substring(item.riskLevel.indexOf('=') + 1, item.riskLevel.length)
          item.lockCode = item.lockCode + '(' + riskLevel + '；' + '初始状态:' + item.valveStatus + ')'
        })
        this.lockList = res.data;
      })
    },
    getButtonName(){
      switch (this.taskName){
        case '申请人提交申请':
          return '提交';
        case '临时措施执行人':
          return '确认已执行';
        case '临时措施确认人':
          return '确认';
        default:
          return '通过';
      }
    },
    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;
          if (this.form.lockNo) {
            this.form.lockNo = this.form.lockNo.join(',');
          }
          this.taskForm.offlinevalve = this.form;
          this.taskForm.condition = val;
          handle(this.taskForm).then(res => {
            this.msgSuccess("审核成功");
            this.visible = false;
            this.$emit('refreshDataList')
          })
        }
      })
    },
    // 字典翻译
    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>;
    },
    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,
        devNo: null,
        unit: null,
        offlineReason: null,
        safa: null,
        disassembly: null,
        executor: null,
        confirmer: null,
        applicant: null,
        applicationTime: null,
        approver: null,
        approveTime: null,
        resetConfirm: null,
        leakConfirm: null,
        revokeConfirm: null,
        lockConfirm: null,
        lockConfirmer1: null,
        lockConfirmer2: null,
        infoConfirmer: null,
        confirmTime: null,
        remarks: null,
        temporaryTime: null,
        executionTime: null,
        status: 0,
        delFlag: null,
        createrCode: null,
        createdate: null,
        updaterCode: null,
        updatedate: null,
        deptId: null,
        approveStatus: null,
        lockConfirmer1Name: null,
        lockConfirmer2Name: null,
        infoConfirmerName: null,
        executorName: null,
        confirmerName: null,
        approverName: null,
        applicantName: null
      };
      this.resetForm("form");
    },
  }

}
</script>

<style scoped>

</style>
