<template>
  <qinui-card-id
    :getData="onGetList"
    :getOneData="onGetOneData"
    :beforeEdit="onBeforeEdit"
    :postData="onPostData"
    popup-title="选择观演人"
    createPopupTitle="添加观演人"
    editPopupTitle="编辑观演人"
    desc="请填写2张游客信息"
    maxlength="2"
    v-model="theIds"
    :errMsg="() => '添加证件数不能超过票数'"
    placeholder="点击填写游玩人信息"
    formLabelPrefix="游客"
    :formConf="theFormConf"
    :fieldNames="theFieldNames"
  />
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue';

  // 数据相关 datas.ts start
  const theOneData = [
    {
      id: 212832822,
      idcardType: 'idcard',
      idcardNumber: '11************3409',
      idcardNumberUnique: '5ca63acda00aafcac7bb7125aa18ef22',
      idcardName: '\u674e\u601d\u8f89\u8f89',
      isDefault: 2,
      idcardTypeName: '\u8eab\u4efd\u8bc1',
    },
  ];

  const theItemData = {
    id: 22832829,
    idcardType: 'idcard',
    idcardNumber: '110103198910120631',
    idcardNumberUnique: '80a144de715bf83bc7dfcb79d53eec7a',
    idcardName:
      '\u6492\u4ea7\u751f\u7684\u64e6\u62ed\u7684\u64e6\u6389\u65f6\u64e6\u6253\u6492\u64e6\u6253\u6492\u64e6\u624b\u6253\u64e6',
    isDefault: 2,
    idcardTypeName: '\u8eab\u4efd\u8bc1',
  };
  // 数据相关 datas.ts end

  // 配置相关 conf.ts start
  const theFieldNames = {
    label: 'idcardName',
    value: 'id',
    num: 'idcardNumber',
    type: 'idcardType',
    typeLabel: 'idcardTypeName',
    isDefault: 'isDefault',
  };

  const theSelectConf = [
    {
      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: '身份证',
    },
  ];

  const onFormConf = (theSelect: any) => {
    return [
      {
        field: theFieldNames.label,
        comp: 'Input',
        label: '姓名',
        labelWidth: '160rpx',
        compProps: {
          border: 'none',
          placeholder: '请填写观演人姓名',
        },
      },
      {
        field: theFieldNames.type,
        comp: 'Picker',
        label: '证件类型',
        labelWidth: '160rpx',
        compProps: {
          options: theSelect,
          fieldNames: {
            label: 'label',
            value: 'value',
          },
          placeholder: '请选择证件类型',
        },
      },
      {
        field: theFieldNames.num,
        comp: 'Input',
        label: '证件号码',
        labelWidth: '160rpx',
        compProps: {
          border: 'none',
          options: theSelect,
          placeholder: '请填写证件号码',
        },
      },
      {
        field: theFieldNames.isDefault,
        label: '设置默认',
        comp: 'Switch',
        labelWidth: '160rpx',
        compProps: {},
      },
    ];
  };
  // 配置相关 conf.ts end

  const theIds = ref([]);
  // ajax 获取数据
  const onGetList = (theParams: any) => {
    let theDatas = {};
    if (theParams._page === 1) {
      theDatas = theOneData;
    } else {
      theDatas = {
        data: [],
        pagination: {
          total: 8,
          lastPage: 1,
        },
      };
    }
    return theDatas;
  };
  // 编辑的时候获取详情
  const onGetOneData = () => {
    return theItemData;
  };

  // 提交 创建 | 编辑 数据
  const onPostData = (theData: any) => {
    console.log(theData, '提交数据');
  };

  // 提交报错验证
  const onBeforeEdit = (theData: any, theFieldItems: any) => {
    console.log(theData, theFieldItems, 'theData');
    return new Promise((resolve) => {
      resolve(true);
    });
  };

  const theFormConf = ref<any>([]);
  // 设置 from
  const onSetFormConf = () => {
    theFormConf.value = onFormConf(theSelectConf);
  };

  onMounted(() => {
    onSetFormConf();
  });
</script>