<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick" :style="{ padding: '20px' }">
      <el-tab-pane label="施工材料" name="first">
        <bns-file-list-tabs
          :items="constructionMaterial"
          :isShowOptions="paramsData.isExamine"
          :opinionValueOther="opinionValueOther"
          @onCloseFileDialog="onCloseFileDialog"
        ></bns-file-list-tabs>
      </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>
  </div>
</template>
<script>
import bnsFileListTabs from '@/components/pro-tabs/bns-file-list-tabs.vue'
import { getMaterialDetails } from '@/api/worksUnderConstruction/cMaterialsApproval'
import BnsTimelineTabs from '@/components/pro-tabs/bns-timeline-tabs.vue'
import { approvalHistory } from '@/api/terminalEquipment/deviceInformation'
import { getMyToDoNum, parseTime } from '@/utils/bonus'
import { submitApproval } from '@/api/pro/admissionRequest'
import { submitPersonApproval } from '@/api/pro/subManagement/subList'
import { decryptCBC } from '@/utils/aescbc'

export default {
  components: { BnsTimelineTabs, bnsFileListTabs },
  data() {
    return {
      proId: undefined,
      //当前激活的标签页
      activeName: 'first',
      //监理信息单位弹出层
      supervisorOpen: false,
      //生成工作证弹出层
      workCardOpen: false,
      //是否显示特殊工种
      showSpecialWorkType: false,
      // 施工材料
      constructionMaterial: [],
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      // 是否显示弹出层
      open: true,
      showOrNot: true,
      // 表单参数
      form: {},
      //对齐方式
      labelPosition: 'top',
      // 岗位选项
      deviceOptions: [],
      isExamine: false,
      btnShow: true,
      showType: 2,
      timelineItems: [],
      rules: {},
      paramsData: {},
      ids: {},
      // 阅读文件时的意见
      opinionValueOther: '',
    }
  },
  created() {
    const params = this.$route.params && this.$route.params.data
    this.paramsData = JSON.parse(decryptCBC(params))
    this.handleView()
    this.approvalHistory()
    this.ids = {
      proId: this.$store.state.user.thisIds.proId,
      contUuid: this.$store.state.user.thisIds.consUuid,
      consUuid: this.$store.state.user.thisIds.consUuid,
      userType: this.$store.state.user.userType,
      parentUuid: this.$store.state.user.thisIds.parentUuid,
      uuid: this.paramsData.uuid,
      taskId: this.paramsData.taskId,
      procInstId: this.paramsData.procInsId,
    }
  },
  methods: {
    approvalHistory() {
      console.log('this.paramsData.taskId:' + this.paramsData.taskId)
      approvalHistory({ taskId: this.paramsData.taskId }).then(res => {
        this.timelineItems = res.data
      })
    },
    handleView() {
      const params = {
        uuid: this.paramsData.uuid,
      }
      getMaterialDetails(params).then(response => {
        console.log(response)
        this.constructionMaterial = response.data.fileList
      })
    },

    // 表单上传，先判断文件是否按要求上传了，满足要求的话，构造formData
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
        }
      })
    },
    // 点击tab事件  切换tab
    handleClick(tab, event) {
      console.log(tab, event)
    },
    // 取消按钮
    cancel() {
      this.$tab.closePage()
    },
    /** 审核通过*/
    approvalPass(e) {
      const param = {
        reason: e,
        ...this.ids,
        agree: '1',
      }
      this.approval(param, '审批通过')
    },
    /**审核驳回*/
    approvalTurnDown(e) {
      const param = {
        ...e,
        ...this.ids,
        agree: '2',
      }
      this.approval(param, '退回成功')
    },
    /**终审*/
    approvalFinalInstance(e) {
      const param = {
        reason: e,
        ...this.ids,
        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" scoped>
.el_upload_preview_list {
  height: 100%;
  // el-uplaod组件卡片预览类型预览pdf样式
  .pdfContainer {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
