<template>
  <el-tabs v-model="activeName" :style="{ padding: '20px', height: '90%' }">
    <el-tab-pane label="工器具信息" name="first">
      <div class="app-container">
        <el-form :model="items" ref="form" label-width="80px">
          <el-form-item label="工器具名称" label-width="200px" prop="equipName">
            <el-input v-model="items.equipName" :style="{ width: '30%' }" :disabled="isDisabled" v-no-whitespace />
          </el-form-item>
          <el-form-item label="型号" label-width="200px" prop="model">
            <el-input v-model="items.model" :style="{ width: '30%' }" :disabled="isDisabled" v-no-whitespace />
          </el-form-item>
          <el-form-item label="单位" label-width="200px" prop="unit">
            <el-input v-model="items.unit" :style="{ width: '30%' }" :disabled="isDisabled" v-no-whitespace />
          </el-form-item>
          <el-form-item label="数量" label-width="200px" prop="num">
            <el-input v-model="items.num" :style="{ width: '30%' }" :disabled="isDisabled" v-no-whitespace />
          </el-form-item>
          <el-form-item label="设备类型" label-width="200px" prop="equipType">
            <el-select v-model="items.equipType" :style="{ width: '30%' }" :disabled="isDisabled">
              <el-option v-for="item in equipTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="检测时间" label-width="200px" prop="detectionTime">
            <el-date-picker
              v-model="items.detectionTime"
              type="date"
              :editable="false"
              readonly="readonly"
              :disabled="isDisabled"
              :style="{ width: '30%' }"
              placeholder="选择日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="是否强制检测检验" label-width="200px" prop="isForceDetection">
            <el-select v-model="items.isForceDetection" :style="{ width: '30%' }" :disabled="true">
              <el-option label="是" value="1"></el-option>
              <el-option label="否" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="下次检测时间" label-width="200px" prop="nextDetectionTime">
            <el-date-picker
              v-model="items.nextDetectionTime"
              type="date"
              readonly="readonly"
              :disabled="isDisabled"
              :style="{ width: '30%' }"
              placeholder="选择日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label-width="200px" label="工器具文件">
            <img
              v-if="items.instrumentDocumentFiles.length === 0"
              src="@/assets/file/no_file.png"
              alt="暂无数据"
              style="width: 100px; height: 100px; margin-left: 45px"
            />
            <bns-file-list-tabs
              v-else
              :items="items.instrumentDocumentFiles"
              :style="{ marginLeft: '45px' }"
              :isShowOptions="paramsData.isExamine"
              :opinionValueOther="opinionValueOther"
              @onCloseFileDialog="onCloseFileDialog"
            ></bns-file-list-tabs>
          </el-form-item>
        </el-form>
      </div>
    </el-tab-pane>
    <el-tab-pane label="审批信息" name="second">
      <bns-timeline-tabs
        :items="timelineItems"
        :show-type="paramsData.showType"
        :is-examine="paramsData.isExamine"
        :btn-show="paramsData.btnShow"
        :final-check="paramsData.finalCheck"
        v-on:pass="approvalPass"
        v-on:turnDown="approvalTurnDown"
        v-on:finalInstance="approvalFinalInstance"
        :opinionValueOther="opinionValueOther"
      ></bns-timeline-tabs>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import BnsEquipDetailsTabs from '@/components/pro-tabs/bns-equip-details-tabs.vue'
import BnsTimelineTabs from '@/components/pro-tabs/bns-timeline-tabs.vue'
import bnsFileListTabs from '@/components/pro-tabs/bns-file-list-tabs.vue'
import { approvalHistory } from '@/api/terminalEquipment/deviceInformation'
import { selectDetails } from '@/api/pro/cons/equip'
import { dictTableOption } from '@/api/tool/select'
import { getMyToDoNum, parseTime } from '@/utils/bonus'
import { submitPersonApproval } from '@/api/pro/subManagement/subList'
import { decryptCBC } from '@/utils/aescbc'

export default {
  name: 'toolEntryReviewComponent',
  components: { bnsFileListTabs, BnsTimelineTabs, BnsEquipDetailsTabs },
  data() {
    return {
      activeName: 'first',
      // 是否显示弹出层
      isDisabled: true,
      equipTypeOptions: [],
      items: {
        equipName: '',
        model: '',
        unit: '',
        num: '',
        equipType: '',
        detectionTime: '',
        isForceDetection: '',
        nextDetectionTime: '',
        instrumentDocumentFiles: [],
      },
      isExamine: false,
      btnShow: true,
      showType: 2,
      timelineItems: [],
      paramsData: {},
      // 阅读文件时的意见
      opinionValueOther: '',
    }
  },
  created() {
    const params = this.$route.params && this.$route.params.data
    this.paramsData = JSON.parse(decryptCBC(params))
    this.approvalHistory()
    this.getEquipType()
    const param = {
      uuid: this.paramsData.uuid,
    }
    selectDetails(param).then(response => {
      console.log(response)
      this.items = response.data
      this.items.instrumentDocumentFiles = response.fileList
      this.loading = false
    })
  },
  methods: {
    approvalHistory() {
      console.log('this.paramsData.taskId:' + this.paramsData.taskId)
      approvalHistory({ taskId: this.paramsData.taskId }).then(res => {
        this.timelineItems = res.data
      })
    },
    // 获取设备类型
    getEquipType() {
      const params = {
        dictType: 'sys_tools_type',
        dictValue: '',
      }
      dictTableOption(params).then(response => {
        this.equipTypeOptions = response.data
      })
    },
    //上传组件-图片查看
    picturePreview(file) {
      console.log(file)
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    /** 审核通过*/
    approvalPass(e) {
      const param = {
        reason: e,
        ...this.paramsData,
        agree: '1',
      }
      this.approval(param, '审批通过')
    },
    /**审核驳回*/
    approvalTurnDown(e) {
      const param = {
        ...e,
        ...this.paramsData,
        agree: '2',
      }
      this.approval(param, '退回成功')
    },
    /**终审*/
    approvalFinalInstance(e) {
      const param = {
        reason: e,
        ...this.paramsData,
        agree: '3',
      }
      this.approval(param, '终审成功')
    },
    /**
     * 审批方法+
     * @param param
     * @param text
     */
    getMyToDoNum,
    approval(param, text) {
      submitPersonApproval(param).then(response => {
        this.getMyToDoNum()
        if (response.code === 200) {
          this.$message({
            message: text,
            type: 'success',
          })
          this.$tab.closePage()
        } else {
          this.$message({
            message: response.msg,
            type: 'error',
          })
        }
      })
    },
    // 自定义事件接收意见
    onCloseFileDialog(val) {
      this.opinionValueOther = val
    },
  },
}
</script>

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