<template>
  <div>
    <qinui-form
      labelWidth="160rpx"
      :model="userInfo"
      ref="formComp"
    >
      <qinui-form-comp
        :isLink="true"
        label="微信头像"
        prop="name"
        comp="ChooseAvatar"
        :compProps="{
          // 图片宽度
          width: '80rpx',
          // 图片高度
          height: '80rpx',
          // 图片圆角
          radius: '40rpx',
          // 上传 + 大小
          fontSize: '40rpx',
          // 上传接口
          url: 'https://api.test.fanzhi.cn/common/upload/images/resource',
          // 上传接口透传的参数
          formData: {
            topic: 'c_user',
          },
          // 上传失败默认文字可不传
          errorMessage: '头像上传失败'
        }"
        v-model="userInfo.image"
        v-model:fileId="userInfo.imageId"
        labelWidth="160rpx"
        required
      />
      <qinui-form-comp
        label="图片"
        prop="upload"
        comp="Upload"
        :compProps="{
          disabled: true,
          width: '80rpx',
          height: '80rpx',
          url: 'https://api.test.fanzhi.cn/common/upload/images/resource',
          extData: {
            topic: 'c_user',
          },
        }"
        v-model="userInfo.upload"
        v-model:fileId="userInfo.uploadId"
        labelWidth="160rpx"
      />
      <qinui-form-comp
        :isLink="true"
        label="姓名"
        prop="name"
        comp="Input"
        :compProps="{
          border: 'none',
          placeholder: '姓名,只能为中文',
        }"
        v-model="userInfo.name"
        labelWidth="160rpx"
        required
      />
      <qinui-form-comp
        label="证件类型"
        prop="type"
        comp="Picker"
        v-model="userInfo.type"
        :compProps="{
          options: thePickerOpts,
          fieldNames: {
            label: 'label',
            value: 'value',
          },
          placeholder: '请选择证件类型',
        }"
        labelWidth="160rpx"
        required
      />
      <qinui-form-comp
        label="证件号码"
        prop="num"
        comp="Input"
        :compProps="{
          border: 'none',
          placeholder: '请输入证件号码',
        }"
        v-model="userInfo.num"
        labelWidth="160rpx"
        required
      />
      <qinui-form-comp
        label="是否默认"
        prop="isDefault"
        comp="Switch"
        v-model="userInfo.isDefault"
        labelWidth="160rpx"
        required
      />
    </qinui-form>
    <qinui-button type="primary" @click="onSubmit">提交</qinui-button>
    <qinui-button @click="onReset">重置</qinui-button>
  </div>
</template>

<script>
  // datas.ts start
  const thePickerOptions = [
    {
      pattern:
        '^[1-9]\\d{7}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{3}$|^[1-9]\\d{5}[1-9]\\d{3}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{3}([0-9]|[Xx])$',
      example: '11010219******479X',
      value: 'idcard',
      label: '\u8eab\u4efd\u8bc1',
    },
  ];
  // datas.ts end

  // 校验规则配置 start
  const theCompRules = {
    name: [
      {
        type: 'string',
        required: true,
        message: '请填写姓名',
        trigger: [],
      },
      {
        // 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
        validator: (rule, value) => {
          return true;
        },
        message: '姓名必须为中文',
        // 触发器可以同时用blur和change，二者之间用英文逗号隔开
        trigger: [],
      },
    ],
    type: {
      type: 'number',
      required: true,
      message: '请选择证件类型',
      trigger: [],
    },
    num: [
      {
        // 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
        validator: (rule, value) => {
          // 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
          if (value.length === 0) {
            rule.message = '请输入证件号码';
            return false;
          }
          if (value.length > 0) {
            const theReg = new RegExp(this.thePickerOpts?.[this.userInfo.type]?.pattern);
            rule.message = '请输入正确的证件号码';
            return theReg.test(value);
          }
          return true;
        },
        // 触发器可以同时用blur和change，二者之间用英文逗号隔开
        trigger: [],
      },
    ]
  };
  // 校验规则配置 end

  export default {
    data() {
      return {
        // 基础使用 start
        userInfo: {
          image: '',
          imageId: '',
          upload: [
            'https://test-oss.test.fanzhi.cn/images/82/61/a261a69a252fd117d9369b2e39d2.jpg',
          ],
          uploadId: [236250],
          name: '楼兰',
          type: 0,
          num: '',
          remark: '',
          isDefault: 2,
        },
        thePickerOpts: [],
      };
    },
    created() {
      this.onGetList();
    },
    onReady() {
      // 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
      this.$refs.formComp.setRules(theCompRules);
    },
    methods: {
      // 基础使用 start
      onGetList() {
        this.thePickerOpts = thePickerOptions;
      },
      // 提交
      onSubmit() {
        // 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
        this.$refs.formComp
          .validate()
          .then((res) => {
            qin.showToast({
              title: '校验通过',
              icon: 'none',
            });
          })
          .catch((errors) => {
            qin.showToast({
              title: errors?.[0].message || '校验失败',
              icon: 'none',
            });
          });
      },
      // 重置
      onReset() {
        const validateList = ['name', 'type', 'isDefault'];
        this.$refs.formComp.resetFields();
        setTimeout(() => {
          this.$refs.formComp.clearValidate(validateList);
          // 或者使用 this.$refs.formComp.clearValidate()
        }, 10);
      },
      // 基础使用 end
    },
  };
</script>

<template>
  <qinui-form
    labelPosition="left"
    labelWidth="160rpx"
    :model="userInfo"
    ref="formComp"
  >
    <qinui-form-comp
      :isLink="true"
      label="图片"
      prop="upload"
      comp="Upload"
      :compProps="{
        disabled: true,
        width: '80rpx',
        height: '80rpx',
        url: 'https://api.test.fanzhi.cn/common/upload/images/resource',
        extData: {
          topic: 'c_user',
        },
      }"
      v-model="userInfo.upload"
      v-model:fileId="userInfo.uploadId"
      labelWidth="160rpx"
    />
    <qinui-form-comp
      :isLink="true"
      label="姓名"
      prop="name"
      comp="Input"
      :compProps="{
        disabled: true,
        border: 'none',
        placeholder: '姓名,只能为中文',
      }"
      v-model="userInfo.name"
      labelWidth="160rpx"
    />
    <qinui-form-comp
      label="证件类型"
      prop="type"
      comp="Picker"
      v-model="userInfo.type"
      :compProps="{
        disabled: true,
        options: thePickerOpts,
        fieldNames: {
          label: 'label',
          value: 'value',
        },
        placeholder: '请选择证件类型',
      }"
      labelWidth="160rpx"
    />
  </qinui-form>
</template>

<script>
  export default {
    data() {
      return {
        // 基础使用 end
        userInfo: {
          image: '',
          imageId: '',
          upload: [
            'https://test-oss.test.fanzhi.cn/images/82/61/a261a69a252fd117d9369b2e39d2.jpg',
          ],
          uploadId: [236250],
          name: '楼兰',
          type: 0,
        },
        thePickerOpts: [],
      };
    },
    created() {
      this.onGetList();
    },
    methods: {
      // 基础使用 start
      onGetList() {
        this.thePickerOpts = thePickerOptions;
      },
    },
  };
</script>