<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>

      <Title title="人脸照片" />
      <div>
        <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>

      <Title title="保险文件" />
      <Preview :dataList="formData.insuranceFile" />

      <Title title="体检文件" />
      <Preview :dataList="formData.physicalExaminationFile" />
      
      <Title title="其他附件" />
      <Preview :dataList="formData.otherFileList" />
    </div>
  </view>
</template>

<script>
import { listSupervisorPersonById } from '@/api/project'
import config from '@/config'

export default {
  data() {
    return {
      formData: {
        name: '', // 姓名
        phone: '', // 联系方式
        sex: '', // 性别
        idCard: '', // 身份证号
        insuranceFile: [], // 保险文件
        otherFileList: [], // 其他文件
        physicalExaminationFile: [] // 体检文件
      },
      opt: {}
    }
  },
  onLoad(options) {
    console.log('options-监理详情', options)
    this.opt = options
    console.log('🚀 ~ onLoad ~ this.opt:', this.opt)
    this.getSupervisorPersonDetails()
  },
  methods: {
    // 获取监理人员详情
    getSupervisorPersonDetails() {
      const params = {
        id: this.opt.id,
        uuid: this.opt.uuid
      }
      listSupervisorPersonById(params).then(res => {
        console.log('监理人员详情', res)
        this.formData = res.data
        this.formData.faceUrl = config.fileUrl + this.formData.faceUrl
      })
    },
    // 点击图片
    clickImg(url) {
      uni.previewImage({
        urls: [url]
      })
    }
  }
}
</script>

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