<template>
  <view>
    <Navbar title="审批详情" />
    <u-tabs
      :list="tabList"
      @click="clickTab"
      :current="current.index"
      :activeStyle="{ fontWeight: 500, fontSize: '14px', color: '#0F274B' }"
      :inactiveStyle="{ fontWeight: 400, fontSize: '12px', color: 'rgba(15, 39, 75, 0.5)' }"
      style="margin: 0 10px"
    />
    <div class="content">
      <contractor-info
        v-show="current.index == 0"
        @handleOpinion="handleOpinion"
        :isDetail="isDetail"
        :isLeave="isLeave"
        :isSubcontractor="isSubcontractor"
        :params="opt"
      />
      <EnterpriseQualification
        v-show="current.index == 1"
        @handleOpinion="handleOpinion"
        :isSubcontractor="isSubcontractor"
        :isDetail="isDetail"
        :isLeave="isLeave"
        :params="opt"
        :approvalRecordList="enterpriseQualificationApprovalRecord"
      />
      <FourMeasuresAndTowSchemes
        v-show="current.index == 2"
        @handleOpinion="handleOpinion"
        :isSubcontractor="isSubcontractor"
        :isDetail="isDetail"
        :isLeave="isLeave"
        :params="opt"
        :approvalRecordList="fourMeasuresAndTowSchemesApprovalRecord"
      />
      <SecurityAgreement
        v-show="current.index == 3"
        @handleOpinion="handleOpinion"
        :isSubcontractor="isSubcontractor"
        :isDetail="isDetail"
        :isLeave="isLeave"
        :params="opt"
        :approvalRecordList="securityAgreementApprovalRecord"
      />
      <BuildersAndSecurityTool
        v-if="isShow"
        v-show="current.index == 4"
        :dataList="buildersList"
        :isSubcontractor="isSubcontractor"
        :currentIndex="4"
        :isDetail="isDetail"
        :isLeave="isLeave"
        :proId="opt.proId"
        :consUuid="opt.consUuid"
        :taskId="opt.taskId"
        @handleOpinion="handleOpinion"
      />
      <BuildersAndSecurityTool
        v-if="isShow"
        v-show="current.index == 5 && !isSubcontractor"
        :dataList="securityToolList"
        :isSubcontractor="isSubcontractor"
        :currentIndex="5"
        :isDetail="isDetail"
        :isLeave="isLeave"
        :proId="opt.proId"
        :consUuid="opt.consUuid"
        :taskId="opt.taskId"
        @handleOpinion="handleOpinion"
      />
      <OtherMaterial
        v-show="isSubcontractor ? current.index == 5 : current.index == 6"
        @handleOpinion="handleOpinion"
        :isSubcontractor="isSubcontractor"
        :isDetail="isDetail"
        :isLeave="isLeave"
        :params="opt"
        :approvalRecordList="otherMaterialApprovalRecord"
      />
      <ApprovalInfo
        v-show="isSubcontractor ? current.index == 6 : current.index == 7"
        @handleOpinion="handleOpinion"
        :isSubcontractor="isSubcontractor"
        :isDetail="isDetail"
        :isLeave="isLeave"
        :proId="opt.proId"
        :consUuid="opt.consUuid"
        :taskId="opt.taskId"
        :approvalRecordList="finalApprovalApprovalRecord"
      />
      <tabbar-btn
        v-show="isSubcontractor ? current.index == 6 : current.index == 7"
        v-if="!isDetail"
        :showBtn="opt.finalCheck != 0 ? true : false"
        @reject="reject"
        @handlePermit="handlePermit"
        @handleEnd="handleEnd"
      />
    </div>
  </view>
</template>

<script>
import TabbarBtn from './component/TabbarBtn'
import ContractorInfo from './component/ContractorInfo'
import FourMeasuresAndTowSchemes from './component/FourMeasuresAndTowSchemes'
import BuildersAndSecurityTool from './component/BuildersAndSecurityTool'
import EnterpriseQualification from './component/EnterpriseQualification'
import OtherMaterial from './component/OtherMaterial'
import ApprovalInfo from './component/ApprovalInfo'
import SecurityAgreement from './component/SecurityAgreement'
import {
  getConsPersonListPro,
  getConsEquipListPro,
  submitPersonApproval,
  getSubPersonList,
  approvalHistory
} from '@/api/project'

export default {
  components: {
    TabbarBtn,
    ContractorInfo,
    FourMeasuresAndTowSchemes,
    BuildersAndSecurityTool,
    EnterpriseQualification,
    OtherMaterial,
    ApprovalInfo,
    SecurityAgreement
  },
  data() {
    return {
      isLoading: false,
      opt: {},
      isDetail: false,
      isLeave: false,
      isSubcontractor: false,
      current: {
        index: 0
      },
      tabList: [
        { name: '承包商基本信息' },
        { name: '企业资质' },
        { name: '四措两案' },
        { name: '安全协议书' },
        { name: '施工人员' },
        { name: '安全工器具' },
        { name: '其他材料' },
        { name: '审批信息' }
      ],
      // 审批意见
      approvalOpinions: {
        // 企业资质
        enterpriseQualification: '',
        // 四措两案
        FourMeasuresAndTowSchemes: '',
        // 安全协议书
        SecurityAgreement: '',
        // 其他材料
        OtherMaterial: '',
        // 最终审批
        finalApproval: ''
      },
      // 施工人员列表
      buildersList: [],
      // 安全工器具列表
      securityToolList: [],
      isShow: true,
      // approvalRecordList: [], // 审批记录
      // 企业资质-审批记录
      enterpriseQualificationApprovalRecord: [],
      // 四措两案-审批记录
      fourMeasuresAndTowSchemesApprovalRecord: [],
      // 安全协议书-审批记录
      securityAgreementApprovalRecord: [],
      // 其他材料-审批记录
      otherMaterialApprovalRecord: [],
      // 最终审批-审批记录
      finalApprovalApprovalRecord: []
    }
  },
  onLoad(options) {
    console.log('🚀 ~ onload ~ options-审批详情:', options)
    this.opt = JSON.parse(options.params)
    console.log('🚀 ~ onLoad ~ this.opt:', this.opt)
    this.isDetail = this.opt.isDetail
    this.isLeave = options.isLeave && options.isLeave == 'true'
    this.isSubcontractor = options.isSubcontractor && options.isSubcontractor == 'true'
    if (this.isSubcontractor) {
      this.tabList.splice(0, 1, { name: '分包商基本信息' })
      // 删除 安全工器具
      this.tabList.splice(5, 1)
    }
  },
  onShow() {
    this.isShow = true
    if (!this.isSubcontractor) {
      this.getBuildersList()
      this.getSecurityToolList()
    } else {
      this.getSubcontractorList()
    }
  },
  onHide() {
    console.log('🚀 ~ onHide ~ 审批详情-隐藏了')
    this.isShow = false
  },
  mounted() {
    if (!this.isSubcontractor) {
      this.getBuildersList()
      this.getSecurityToolList()
    } else {
      this.getSubcontractorList()
    }
    this.getApprovalRecord()
  },
  methods: {
    clickTab(tab) {
      // console.log('🚀 ~ clickTab ~ tab:', tab)
      this.current = tab
    },
    reject(val) {
      console.log('驳回原因-->父元素:', val)
      const params = {
        proId: this.opt.proId,
        supId: this.opt.supId,
        supUuid: this.opt.supUuid,
        taskId: this.opt.taskId,
        procInstId: this.opt.procInsId,
        finalCheck: this.opt.finalCheck,
        reason: Object.values(this.approvalOpinions).join('@@'),
        agree: '2',
        rejectReason: val
      }
      if (this.isLoading) {
        uni.showToast({
          title: '请勿重复提交',
          icon: 'none'
        })
        return
      }
      this.isLoading = true
      console.log('🚀 ~ reject ~ params:', params)
      submitPersonApproval(params)
        .then(res => {
          console.log('驳回', res)
          if (res.code === 200) {
            uni.showToast({
              title: '驳回成功',
              icon: 'none'
            })
            setTimeout(() => {
              uni.navigateBack()
              this.isLoading = false
            }, 800)
          }
        })
        .catch(err => {
          console.log('🚀 ~ err:', err)
          setTimeout(() => {
            uni.navigateBack()
            this.isLoading = false
          }, 300)
        })
    },
    // 通过
    handlePermit() {
      if (this.isLoading) {
        uni.showToast({
          title: '请勿重复提交',
          icon: 'none'
        })
        return
      }
      this.isLoading = true
      const params = {
        proId: this.opt.proId,
        supId: this.opt.supId,
        supUuid: this.opt.supUuid,
        taskId: this.opt.taskId,
        procInstId: this.opt.procInsId,
        finalCheck: this.opt.finalCheck,
        reason: Object.values(this.approvalOpinions).join('@@'),
        agree: '1'
      }
      console.log('🚀 ~ handlePermit ~ params:', params)
      submitPersonApproval(params)
        .then(res => {
          console.log('通过', res)
          if (res.code === 200) {
            uni.showToast({
              title: '审批成功',
              icon: 'none'
            })
            setTimeout(() => {
              uni.navigateBack()
              this.isLoading = false
            }, 800)
          }
        })
        .catch(err => {
          console.log('🚀 ~ err:', err)
          setTimeout(() => {
            uni.navigateBack()
            this.isLoading = false
          }, 300)
        })
    },
    // 终审
    handleEnd() {
      if (this.isLoading) {
        uni.showToast({
          title: '请勿重复提交',
          icon: 'none'
        })
        return
      }
      this.isLoading = true
      const params = {
        proId: this.opt.proId,
        supId: this.opt.supId,
        supUuid: this.opt.supUuid,
        taskId: this.opt.taskId,
        procInstId: this.opt.procInsId,
        finalCheck: this.opt.finalCheck,
        reason: Object.values(this.approvalOpinions).join('@@'),
        agree: '3'
      }
      console.log('🚀 ~ handlePermit ~ params:', params)
      submitPersonApproval(params)
        .then(res => {
          console.log('通过', res)
          if (res.code === 200) {
            uni.showToast({
              title: '审批成功',
              icon: 'none'
            })
            setTimeout(() => {
              uni.navigateBack()
              this.isLoading = false
            }, 800)
          }
        })
        .catch(err => {
          console.log('🚀 ~ err:', err)
          setTimeout(() => {
            uni.navigateBack()
            this.isLoading = false
          }, 300)
        })
    },
    // 审批意见
    handleOpinion(val) {
      console.log('🚀 ~ handleOpinion ~ val-父-审批意见:', val)
      this.approvalOpinions = { ...this.approvalOpinions, ...val }
      console.log('🚀 ~ handleOpinion ~ this.approvalOpinions:', this.approvalOpinions)
    },
    // 获取施工人员列表
    async getBuildersList() {
      const params = {
        proId: this.opt.proId,
        consUuid: this.opt.consUuid,
        taskId: this.opt.taskId
      }
      const res = await getConsPersonListPro(params)
      console.log('🚀 ~ getBuildersList ~ 施工人员列表:', res)
      if (res.code === 200) {
        this.buildersList = this.$set(this, 'buildersList', res.rows)
      }
    },
    // 获取分包商施工人员列表
    async getSubcontractorList() {
      const params = {
        proId: this.opt.proId,
        consUuid: this.opt.consUuid,
        taskId: this.opt.taskId,
        uuid: this.opt.uuid,
        subUuid: this.opt.subUuid,
        supUuid: this.opt.supUuid,
        userType: uni.getStorageSync('userInfo').userType
      }
      const res = await getSubPersonList(params)
      console.log('🚀 ~ getSubcontractorList ~ 分包商施工人员列表:', res)
      if (res.code === 200) {
        this.buildersList = this.$set(this, 'buildersList', res.rows)
      }
    },
    // 获取安全工器具列表
    async getSecurityToolList() {
      const params = {
        proId: this.opt.proId,
        consUuid: this.opt.consUuid,
        uuid: this.opt.consUuid,
        taskId: this.opt.taskId,
        type: '2'
      }
      const res = await getConsEquipListPro(params)
      console.log('🚀 ~ getSecurityToolList ~ 安全工器具列表:', res)
      if (res.code === 200) {
        this.securityToolList = this.$set(this, 'securityToolList', res.rows)
        // 遍历 name -> equipName
        this.securityToolList.forEach(item => {
          item.name = item.equipName
          item.postName = item.equipType
        })
      }
    },
    // 下拉刷新
    onPullDownRefresh() {
      if (!this.isSubcontractor) {
        this.getBuildersList()
        this.getSecurityToolList()
      } else {
        this.getSubcontractorList()
      }
      this.getApprovalRecord()
      setTimeout(() => {
        uni.stopPullDownRefresh()
      }, 100)
    },
    // 获取审批记录
    async getApprovalRecord() {
      const params = {
        taskId: this.opt.taskId
      }
      console.log('🚀 ~ getApprovalRecord ~ params:', params)
      const res = await approvalHistory(params)
      if (res.code === 200) {
        this.enterpriseQualificationApprovalRecord = JSON.parse(JSON.stringify(res.data))
        this.enterpriseQualificationApprovalRecord.forEach(item => {
          if (item.reason) {
            item.reason = item.reason.split('@@')[0]
          }
        })

        this.fourMeasuresAndTowSchemesApprovalRecord = JSON.parse(JSON.stringify(res.data))
        this.fourMeasuresAndTowSchemesApprovalRecord.forEach(item => {
          if (item.reason) {
            item.reason = item.reason.split('@@')[1]
          }
        })

        this.securityAgreementApprovalRecord = JSON.parse(JSON.stringify(res.data))
        this.securityAgreementApprovalRecord.forEach(item => {
          if (item.reason) {
            item.reason = item.reason.split('@@')[2]
          }
        })

        this.otherMaterialApprovalRecord = JSON.parse(JSON.stringify(res.data))
        this.otherMaterialApprovalRecord.forEach(item => {
          if (item.reason) {
            item.reason = item.reason.split('@@')[3]
          }
        })

        this.finalApprovalApprovalRecord = JSON.parse(JSON.stringify(res.data))
        this.finalApprovalApprovalRecord.forEach(item => {
          if (item.reason) {
            item.reason = item.reason.split('@@')[4]
          }
        })
      }
    }
  }
}
</script>

<style lang="scss">
.content {
  padding: 0 20px;
}
</style>
