<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.name"
            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.phone"
            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.sex"
            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.birthday"
            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.idCard"
            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.postName"
            disabled
            disabledColor="#fff"
            border="none"
            inputAlign="right"
            fontSize="12"
            style="font-weight: 500"
          />
        </u-form-item>
        <!-- 特种工种 -->
        <u-form-item label="特殊工种" borderBottom v-if="formData.workType">
          <u-input
            v-model="formData.workType"
            disabled
            disabledColor="#fff"
            border="none"
            inputAlign="right"
            fontSize="12"
            style="font-weight: 500"
          />
        </u-form-item>
      </u-form>

      <Title title="人脸照片" />
      <div class="id-card">
        <u--image
          v-if="formData.faceUrl"
          :showLoading="true"
          :src="formData.faceUrl"
          width="100px"
          height="50px"
          radius="4"
          style="margin-right: 18px"
          @click="clickImg(formData.faceUrl)"
        />
      </div>
      <div>
        <Title title="体检文件" />
        <Preview :dataList="formData.physicalExaminationFile" />
      </div>
      <div>
        <Title title="保险文件" />
        <Preview :dataList="formData.insuranceFile" />
      </div>
      <div>
        <Title title="其他附件" />
        <Preview :dataList="formData.otherFile" />
      </div>
      <div v-if="isLeave">
        <Title title="离场原因" />
        <u--textarea v-model="formData.reason" height="105" :disabled="true" />
      </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 { approvalHistory, submitPersonApproval, getSubPersonnelDetails } from '@/api/project'
import config from '@/config'
import { filterInput } from '@/utils/regular'

export default {
  components: { Steps, TabbarBtn },
  data() {
    return {
      opt: {},
      isDetail: false,
      isLeave: false,
      showBtn: true,
      idCardImgs: [
        /* 'https://img.yzcdn.cn/vant/cat.jpeg', 'https://cdn.uviewui.com/uview/album/1.jpg' */
      ],
      formData: {
        name: '',
        phone: '',
        sex: '',
        // birthday: '',
        idCard: '',
        postName: '', // 岗位
        workType: '', // 特种工种
        facePhoto: [], // 人脸照片
        physicalExaminationFile: [], // 体检文件
        insuranceFile: [], // 保险文件
        otherFile: [] // 其他附件
      },
      // 审批意见
      approvalOpinion: '',
      // 审批记录
      approvalRecordList: []
    }
  },
  onLoad(opt) {
    this.opt = JSON.parse(opt.params)
    console.log('🚀 ~ onLoad ~ this.opt:', this.opt)
    this.isDetail = this.opt.isDetail
    this.isLeave = opt.isLeave && opt.isLeave === 'true'
    this.getSubPersonnelDetails()
    this.getApprovalRecord()
  },
  methods: {
    // 过滤输入框
    filter() {
      this.approvalOpinion = filterInput(this.approvalOpinion)
    },
    // 图片预览
    clickImg(url) {
      uni.previewImage({
        urls: [url]
      })
    },
    // 获取人员详情
    async getSubPersonnelDetails() {
      const params = {
        uuid: this.opt.uuid
      }
      const res = await getSubPersonnelDetails(params)
      console.log('人员详情', res)
      if (res.code === 200) {
        this.formData = res.data
        this.formData.faceUrl = config.fileUrl + this.formData.faceUrl
      }
    },
    // 获取审批记录
    async getApprovalRecord() {
      const params = {
        taskId: this.opt.taskId
      }
      console.log('🚀 ~ getApprovalRecord ~ params:', params)
      const res = await approvalHistory(params)
      console.log('审批记录', res)
      if (res.code === 200) {
        this.approvalRecordList = res.data
        console.log('🚀 ~ getApprovalRecord ~ this.approvalRecordList:', this.approvalRecordList)
      }
    },
    // 驳回
    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('🚀 ~ handleEnd ~ 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)
        })
    }
  }
}
</script>

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

  .id-card {
    display: flex;
    justify-content: flex-start;
  }
}
</style>
