<template>
  <view>
    <Navbar title="审批详情" />
    <div class="content">
      <Title title="基本信息"  />
      <u-form
        labelPosition="left"
        :model="formData"
        ref="addressForm"
        labelWidth="120"
        :labelStyle="{ fontWeight: 400, fontSize: '12px', color: 'rgba(15, 39, 75, 0.6)' }"
      >
        <!-- 工具器名称 -->
        <u-form-item label="工具器名称" borderBottom>
          <u-input
            v-model="formData.equipName"
            disabled
            disabledColor="#fff"
            border="none"
            inputAlign="right"
            fontSize="12"
            style="font-weight: 500"
          />
        </u-form-item>
        <!-- 型号 -->
        <u-form-item label="型号" borderBottom>
          <u-input
            v-model="formData.model"
            disabled
            disabledColor="#fff"
            border="none"
            inputAlign="right"
            fontSize="12"
            style="font-weight: 500"
          />
        </u-form-item>
        <!-- 数量 -->
        <u-form-item label="数量" borderBottom>
          <u-input
            v-model="formData.num"
            disabled
            disabledColor="#fff"
            border="none"
            inputAlign="right"
            fontSize="12"
            style="font-weight: 500"
          />
        </u-form-item>
        <!-- 设备类型 -->
        <u-form-item label="设备类型" borderBottom>
          <u-input
            v-model="formData.equipType"
            disabled
            disabledColor="#fff"
            border="none"
            inputAlign="right"
            fontSize="12"
            style="font-weight: 500"
          />
        </u-form-item>
        <!-- 是否强制监测 -->
        <u-form-item label="是否强制监测" borderBottom>
          <u-input
            v-model="formData.isForceDetection"
            disabled
            disabledColor="#fff"
            border="none"
            inputAlign="right"
            fontSize="12"
            style="font-weight: 500"
          />
        </u-form-item>
        <!-- 下次检测时间 -->
        <u-form-item label="下次检测时间" borderBottom>
          <u-input
            v-model="formData.nextDetectionTime"
            disabled
            disabledColor="#fff"
            border="none"
            inputAlign="right"
            fontSize="12"
            style="font-weight: 500"
          />
        </u-form-item>
      </u-form>
      <div>
        <Title title="其他附件" />
        <Preview :dataList="otherAttachments" />
      </div>
      <Title title="审批意见" />
      <u--textarea v-model="approvalOpinion" placeholder="请输入内容" count height="105" :disabled="isDetail" @blur="filter" />
      <Title title="审批记录" />
      <Steps :data="approvalRecordList" />
      <TabbarBtn
        v-if="!isDetail"
        :showBtn="opt.finalCheck != 0 ? true : false"
        @reject="reject"
        @handlePermit="handlePermit"
        @handleEnd="handleEnd"
      />
    </div>
  </view>
</template>

<script>
import Steps from 'pages/component/Steps'
import TabbarBtn from './component/TabbarBtn'
import { submitPersonApproval, approvalHistory, selectDetails } from '@/api/project'
import config from '@/config'
import { filterInput } from '@/utils/regular'

export default {
  components: { Steps, TabbarBtn },
  data() {
    return {
      isLoading: false,
      opt: {},
      isDetail: false,
      formData: {
        equipName: '',
        model: '',
        num: '',
        // 设备类型
        equipType: '',
        // 是否强制监测
        isForceDetection: '',
        // 下次检测时间
        nextDetectionTime: ''
      },
      // 其他附件
      otherAttachments: [],
      // 审批意见
      approvalOpinion: '',
      // 审批记录
      approvalRecordList: []
    }
  },
  onLoad(opt) {
    this.opt = JSON.parse(opt.params)
    console.log('🚀 ~ onLoad ~ opt:', this.opt)
    this.isDetail = this.opt.isDetail
  },
  mounted() {
    this.getApprovalRecord()
    this.getSubPersonnelDetails()
  },
  methods: {
    filter() {
      this.approvalOpinion = filterInput(this.approvalOpinion)
    },
    // 获取工具器详情
    async getSubPersonnelDetails() {
      const params = {
        uuid: this.opt.uuid
      }
      // console.log('🚀 ~ 工具器详情 ~ params:', params)
      const res = await selectDetails(params)
      console.log('🚀 ~ 工具器详情 ~ res:', res)
      if (res.code === 200) {
        this.formData = res.data
        this.otherAttachments = res.fileList
        this.formData.equipType = this.formData.equipType == '1' ? '普通类型' : '特殊类型'
        this.formData.isForceDetection = this.formData.isForceDetection == '1' ? '是' : '否'
      }
    },
    // 驳回
    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: this.approvalOpinion,
        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: this.approvalOpinion,
        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: this.approvalOpinion,
        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)
        })
    },
    // 获取审批记录
    async getApprovalRecord() {
      const params = {
        taskId: this.opt.taskId
      }
      // console.log('🚀 ~ 审批记录 ~ params:', params)
      const res = await approvalHistory(params)
      console.log('🚀 ~ 审批记录 ~ res:', res)
      if (res.code === 200) {
        this.approvalRecordList = res.data
      }
    }
  }
}
</script>

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