<template>
  <view>
    <Navbar title="施工人员详情" />
    <div class="content">
      <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.age"
            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="showSpecialJobFile">
          <u-input
            v-model="formData.specialJobType"
            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.homeAddress"
            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.currentAddress"
            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.nativePlace"
            disabled
            disabledColor="#fff"
            border="none"
            inputAlign="right"
            fontSize="12"
            style="font-weight: 500"
          />
        </u-form-item>
      </u-form>

      <div>
        <Title title="人脸照片" />
        <u--image :showLoading="true" :src="formData.faceUrl" width="50px" height="50px" radius="4" @click="clickImg" />
      </div>
      <div>
        <Title title="体检文件" />
        <Preview :dataList="formData.physicalExaminationFile" />
      </div>
      <div>
        <Title title="保险文件" />
        <Preview :dataList="formData.insuranceFile" />
      </div>
      <div v-if="showSpecialJobFile">
        <Title title="特殊工种文件" />
        <Preview :dataList="formData.specialJobFile" />
      </div>
      <div>
        <Title title="其他附件" />
        <Preview :dataList="formData.otherFile" />
      </div>
      <div style="margin: 30px 0" v-if="showBtn">
        <u-button type="primary" size="small" shape="circle" @click="handleReadOver">完成批阅</u-button>
      </div>
    </div>
  </view>
</template>

<script>
import { getConstructionPersonnelDetails, addAnnotations, getSubPersonnelDetails } from '@/api/project'
import config from '@/config'

export default {
  data() {
    return {
      opt: {},
      formData: {
        name: '',
        phone: '',
        sex: '',
        admissionDate: '',
        idCard: '',
        // 工种
        postName: '',
        // 特种工种
        specialJobType: '',
        homeAddress: '',
        // 现住址
        currentAddress: '',
        // 籍贯
        nativePlace: '',
        // 人脸照片
        faceUrl: '',
        // 体检文件
        physicalExaminationFile: [],
        // 保险文件
        insuranceFile: [],
        // 其他附件
        otherFile: []
      },
      // 是否显示按钮
      showBtn: false,
      // 是否显示特殊工种文件
      showSpecialJobFile: false
    }
  },
  onLoad(options) {
    this.opt = JSON.parse(options.params)
    console.log('🚀 ~ onLoad ~ options:', this.opt)
    if (this.opt.isApproval) {
      this.showBtn = true
    } else {
      this.showBtn = false
    }
  },
  mounted() {
    this.getConstructionPersonnelDetails()
  },
  methods: {
    clickImg() {
      uni.previewImage({
        urls: [this.formData.faceUrl]
      })
    },
    // 完成批阅
    handleReadOver() {
      console.log('完成批阅')
      // 确认提示框
      uni.showModal({
        title: '提示',
        content: '是否完成批阅？',
        success: async res => {
          if (res.confirm) {
            const params = {
              uuid: this.opt.uuid,
              taskId: this.opt.taskId,
              type: '1'
            }
            const res = await addAnnotations(params)
            console.log('🚀 ~ handleReadOver ~ 完成批阅:', res)
            if (res.code === 200) {
              uni.showToast({
                title: '批阅成功',
                icon: 'success'
              })
              setTimeout(() => {
                uni.navigateBack()
              }, 1000)
            }
          }
        }
      })
    },
    // 获取人员详情
    async getConstructionPersonnelDetails() {
      const params = {
        id: this.opt.id,
        uuid: this.opt.uuid,
        proId: this.opt.proId,
        consUuid: this.opt.consUuid
      }
      if (this.opt.isSubcontractor) {
        const res = await getSubPersonnelDetails(params)
        console.log('🚀 ~ getConstructionPersonnelDetails ~ 人员详情:', res)
        if (res.code === 200) {
          this.formData = res.data
          if (res.data.specialJobType && res.data.specialJobType != '暂无') {
            this.showSpecialJobFile = true
          }
        }
      } else {
        const res = await getConstructionPersonnelDetails(params)
        console.log('🚀 ~ getConstructionPersonnelDetails ~ 人员详情:', res)
        if (res.code === 200) {
          this.formData = res.data
          this.formData.faceUrl = config.fileUrl + this.formData.faceUrl
          if (res.data.specialJobType && res.data.specialJobType != '暂无') {
            this.showSpecialJobFile = true
          }
        }
      }
    }
  }
}
</script>

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