<template>
  <view class="content">
    <view class="top-title">学员信息</view>

    <u-gap height="20" bgColor="#f2f2f2" />

    <view class="content_body">
      <u--form labelPosition="left" :model="ruleFormData" :rules="rules" ref="uFormRef">
        <u-form-item labelWidth="70" label="姓名" prop="userInfo.name" borderBottom required>
          <u--input v-model="ruleFormData.userInfo.name" placeholder="请输入姓名..." border="none"></u--input>
        </u-form-item>
        <u-form-item labelWidth="70" label="联系电话" prop="userInfo.phone" borderBottom required>
          <u--input v-model="ruleFormData.userInfo.phone" type="number" placeholder="请输入联系电话..."
            border="none"></u--input>
        </u-form-item>
        <u-form-item labelWidth="70" label="身份证号" prop="userInfo.idCard" borderBottom required>
          <u--input v-model="ruleFormData.userInfo.idCard" placeholder="请输入身份证号..." border="none"></u--input>
        </u-form-item>
        <u-form-item labelWidth="70" label="性别" prop="userInfo.sex" borderBottom required>
          <u-radio-group v-model="ruleFormData.userInfo.sex" placement="row" class="radio-group__style"
            @change="groupChange">
            <u-radio v-for="(item, index) in sexsList" :key="index" :label="item.name" :name="item.name">
            </u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item labelWidth="70" label="学历" prop="userInfo.education" borderBottom required
          @click="handleEducationClick">
          <u--input v-model="ruleFormData.userInfo.education" readonly placeholder="请选择学历..." border="none"></u--input>
          <u-action-sheet :show="showEducationPopper" :actions="educationActions" title="请选择学历"
            @close="showEducationPopper = false" @select="handleSelectEducation">
          </u-action-sheet>
        </u-form-item>
        <u-form-item labelWidth="70" label="职业" prop="userInfo.job" borderBottom required>
          <u--input v-model="ruleFormData.userInfo.job" placeholder="请输入职业..." border="none"></u--input>
        </u-form-item>
        <u-form-item labelWidth="125" label="职业资格等级证书" prop="userInfo.gradeCertificate" borderBottom required>
          <u-upload :fileList="ruleFormData.userInfo.gradeCertificate" :previewFullImage="true" @afterRead="afterRead"
            @delete="deletePic" name="1" multiple :maxCount="1"></u-upload>
        </u-form-item>
        <u-form-item labelWidth="120" label="获得证书时间" prop="userInfo.certificateAcquisitionTime" borderBottom required
          @click="showCertificateGetTime">
          <u--input v-model="ruleFormData.userInfo.certificateAcquisitionTime" readonly placeholder="请选择获得证书时间..."
            border="none"></u--input>
        </u-form-item>
        <u-form-item label="手写签字" prop="userInfo.writeSign" borderBottom required labelPosition="top" labelWidth="auto">
          <view style="flex: 1;">
            <u-button type="primary" size="mini" text="签字"
              :customStyle="{ position: 'absolute', top: '-46upx', right: '20upx', width: '100upx' }"
              @click="signVisible = true" />
            <view v-if="ruleFormData.userInfo.writeSign">
              <u-image width="400rpx" height="200rpx" :src="ruleFormData.userInfo.writeSign" />
            </view>
          </view>
        </u-form-item>
      </u--form>

      <view class="mt-10">
        <u-button type="primary" text="下一步" @click="$u.debounce(fnSubmit, 1000, true)" />
      </view>

    </view>

    <sign :signShow.sync="signVisible" @confirm="handleSign" />
    <u-datetime-picker :show="showCertificateGetTimePopper" mode="date" :round="12" :custom-style="{
      borderRadius: '24rpx',
      overflow: 'hidden',
      '--picker-header-radius': '24rpx 24rpx 0 0',
      '--picker-confirm-radius': '12rpx'
    }" @confirm="handleCertificateGetTimeConfirm" @cancel="handleCertificateGetTimeCancel"></u-datetime-picker>
  </view>
</template>

<script>
import Sign from '@/components/sign/sign.vue'
import { validateFieldPhone, validateFieldIdCard } from '@/utils/formValidateField.js'

export default {
  data() {
    return {
      routeQuery: {},
      sexsList: [
        {
          label: '1',
          name: '男'
        },
        {
          label: '0',
          name: '女'
        }
      ],
      showEducationPopper: false,
      showCertificateGetTimePopper: false,
      signVisible: false,
      educationActions: [
        {
          id: '0',
          name: '小学',
        },
        {
          id: '1',
          name: '初中',
        },
        {
          id: '2',
          name: '高中',
        },
        {
          id: '3',
          name: '大学专科',
        },
        {
          id: '4',
          name: '大学本科',
        },
        {
          id: '5',
          name: '研究生',
        },
        {
          id: '6',
          name: '博士',
        },
        {
          id: '7',
          name: '其他',
        }
      ],
      ruleFormData: {
        userInfo: {
          name: '', // 姓名
          phone: '', // 联系电话
          idCard: '', // 身份证号
          sex: '男', // 性别
          education: '', // 学历
          job: '', // 职业
          gradeCertificate: [], // 等级证书
          certificateAcquisitionTime: '', // 获取证书时间
          writeSign: '', // 手写签字
        }
      },
      rules: {
        'userInfo.name': {
          type: 'string',
          required: true,
          message: '请填写姓名',
          trigger: ['blur', 'change']
        },
        'userInfo.phone': [
          {
            required: true,
            message: '请输入手机号',
            trigger: ['change', 'blur'],
          },
          {
            validator: validateFieldPhone,
            trigger: ['change', 'blur'],
          }
        ],
        'userInfo.idCard': [
          {
            type: 'string',
            required: true,
            message: '请填写身份证号',
            trigger: ['blur', 'change']
          },
          {
            validator: validateFieldIdCard,
            trigger: ['change', 'blur'],
          }
        ],
        'userInfo.sex': {
          type: 'string',
          required: true,
          message: '请选择性别',
          trigger: ['change']
        },
        'userInfo.education': {
          type: 'string',
          required: true,
          message: '请选择学历',
          trigger: ['blur', 'change']
        },
        'userInfo.job': {
          type: 'string',
          required: true,
          message: '请输入职业',
          trigger: ['blur', 'change']
        },
        'userInfo.gradeCertificate': [
          {
            type: 'array',
            required: true,
            message: '请上传等级证书',
            trigger: ['blur', 'change']
          }
        ],
        'userInfo.certificateAcquisitionTime': {
          type: 'string',
          required: true,
          message: '请选择获取证书时间',
          trigger: ['blur', 'change']
        },
        'userInfo.writeSign': [
          {
            type: 'string',
            required: true,
            message: '请填写手写签字',
            trigger: ['blur', 'change']
          }
        ]
      }
    }
  },

  onLoad(query) {
    this.routeQuery = query;
  },

  methods: {
    groupChange(n) {
      console.log('groupChange', n);
    },
    radioChange(n) {
      console.log('radioChange', n);
    },
    handleEducationClick() {
      this.showEducationPopper = true;
    },
    handleSelectEducation(event) {
      this.ruleFormData.userInfo.education = event.name;
    },
    async afterRead(event) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      let fileListLen = this.ruleFormData.userInfo.gradeCertificate.length;
      lists.map((item) => {
        this.ruleFormData.userInfo.gradeCertificate.push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      // console.log('this.ruleFormData.userInfo.gradeCertificate :>> ', this.ruleFormData.userInfo.gradeCertificate);
      // for (let i = 0; i < lists.length; i++) {
      //   const result = await this.uploadFilePromise(lists[i].url);
      //   let item = this.ruleFormData.userInfo.gradeCertificate[fileListLen];
      //   this.ruleFormData.userInfo.gradeCertificate.splice(
      //     fileListLen,
      //     1,
      //     Object.assign(item, {
      //       status: "success",
      //       message: "",
      //       url: result,
      //     })
      //   );
      //   fileListLen++;
      // }
    },
    deletePic(event) {
      this.gradeCertificateList.splice(event.index, 1);
    },
    showCertificateGetTime() {
      this.showCertificateGetTimePopper = true;
    },
    handleCertificateGetTimeConfirm(event) {
      this.ruleFormData.userInfo.certificateAcquisitionTime = uni.$u.timeFormat(event.value, 'yyyy-mm-dd')
      this.handleCertificateGetTimeCancel()
    },
    handleCertificateGetTimeCancel() {
      this.showCertificateGetTimePopper = false;
    },
    handleSign(event) {
      this.ruleFormData.userInfo.writeSign = event.filePath;
    },
    async fnSubmit() {
      try {
        await this.$refs.uFormRef.validate()
        try {
          console.log("this.ruleFormData.userInfo : >>", this.ruleFormData.userInfo);

          // await setSubmitForm({
          //   form: this.form,
          //   formItems: this.formItems,
          //   TYPE: this.type,
          //   CORP_ID: this.form.CORP_ID,
          //   EW_RU_TASK_ID: this.taskId
          // })
          // pages/train_management/face_authentication
          uni.$u.route({
            url: '/pages/train_management/face_authentication',
            params: { ...this.routeQuery }
          })
        } catch {
        }
      } catch {
        uni.$u.toast('请补全必填项')
      }
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  .top-title {
    padding: 20rpx;
    text-align: center;
    font-size: 54rpx;
    font-weight: bold;
  }

  .content_body {
    padding: 20rpx 30rpx;

    .radio-group__style {
      display: flex;
      flex-direction: row;
      gap: 60rpx;
    }
  }
}
</style>
