import type { FormSchema } from '/@/components/Form/index';
import { getAreaList } from '/@/api/oem/index';
import { emailRule, phoneRule } from '/@/utils/rules';

export const schemas: FormSchema[] = [
  {
    field: 'name',
    component: 'Input',
    label: '公司名称',
    colProps: {
      span: 24,
    },
    componentProps: {
      maxLength: 100,
      placeholder: '请输入公司名称',
    },
    dynamicRules: () => {
      return [
        {
          required: false,
          validator: (_, value) => {
            if (String(value).length > 100) {
              return Promise.reject('字数不超过100个字');
            }
            return Promise.resolve();
          },
        },
      ];
    },
  },
  {
    field: 'abbreviation',
    component: 'Input',
    label: '公司简称',
    colProps: {
      span: 24,
    },
    componentProps: {
      maxLength: 100,
      placeholder: '请输入公司简称',
    },
    dynamicRules: () => {
      return [
        {
          required: false,
          validator: (_, value) => {
            if (String(value).length > 100) {
              return Promise.reject('字数不超过100个字');
            }
            return Promise.resolve();
          },
        },
      ];
    },
  },
  {
    field: 'officialWebsite',
    component: 'Input',
    label: '公司官网',
    colProps: {
      span: 24,
    },
    componentProps: {
      maxLength: 255,
      placeholder: '请输入公司官网',
    },
    dynamicRules: () => {
      return [
        {
          required: false,
          validator: (_, value) => {
            if (String(value).length > 255) {
              return Promise.reject('字数不超过255个字');
            }
            return Promise.resolve();
          },
        },
      ];
    },
  },
  {
    field: 'email',
    component: 'Input',
    label: '公司邮箱',
    colProps: {
      span: 24,
    },
    componentProps: {
      placeholder: '请输入公司邮箱',
    },
    rules: emailRule,
  },
  {
    field: 'synopsis',
    component: 'InputTextArea',
    label: '公司简介',
    colProps: {
      span: 24,
    },
    componentProps: {
      maxLength: 500,
      placeholder: '请输入公司简介',
      autoSize: { minRows: 8, maxRows: 12 },
    },
    dynamicRules: () => {
      return [
        {
          required: false,
          validator: (_, value) => {
            if (String(value).length > 500) {
              return Promise.reject('字数不超过500个字');
            }
            return Promise.resolve();
          },
        },
      ];
    },
  },
  {
    field: 'nameCountry',
    component: 'ApiSelect',
    label: '国家/地区',
    colProps: {
      span: 24,
    },
    componentProps: {
      api: getAreaList,
      params: { parentId: 0 },
      labelField: 'name',
      valueField: 'code',
      placeholder: '国家/地区',
    },
  },
  {
    field: 'prov',
    label: '所在城市',
    component: 'Input',
    colProps: {
      span: 24,
    },

    slot: 'customProv',
  },
  {
    field: 'address',
    component: 'Input',
    label: '详细地址',
    colProps: {
      span: 24,
    },
    componentProps: {
      maxLength: 100,
      placeholder: '请输入详细地址',
    },
    dynamicRules: () => {
      return [
        {
          required: false,
          validator: (_, value) => {
            if (String(value).length > 100) {
              return Promise.reject('字数不超过100个字');
            }
            return Promise.resolve();
          },
        },
      ];
    },
  },

  {
    field: 'contacts',
    component: 'Input',
    label: '联系人',
    colProps: {
      span: 24,
    },
    componentProps: {
      maxLength: 25,
      placeholder: '请输入联系人',
    },
    dynamicRules: () => {
      return [
        {
          required: false,
          validator: (_, value) => {
            if (String(value).length > 25) {
              return Promise.reject('字数不超过25个字');
            }
            return Promise.resolve();
          },
        },
      ];
    },
  },
  {
    field: 'tel',
    component: 'Input',
    label: '联系电话',
    colProps: {
      span: 24,
    },
    componentProps: {
      placeholder: '请输入联系电话',
    },
    rules: phoneRule,
  },
  {
    field: 'qrcode',
    label: '二维码',
    component: 'Input',
    colProps: {
      span: 24,
    },
    slot: 'qrcode',
  },
  {
    field: 'id',
    label: '唯一id',
    component: 'Input',
    show: false,
    componentProps: {
      maxLength: 36,
      placeholder: '请输入唯一id',
    },
  },
];

export const provSchemas: FormSchema[] = [
  {
    field: 'nameProv',
    component: 'ApiSelect',
    label: '',
    colProps: {
      span: 6,
    },
    componentProps({ formModel, formActionType }) {
      const { updateSchema } = formActionType;
      return {
        api: getAreaList,
        labelField: 'name',
        valueField: 'code',
        placeholder: '省份',
        params: { parentId: 1 },
        async onChange(value) {
          if (value === undefined) {
            formModel.nameCity = undefined; //  reset city value
            formModel.nameCoun = undefined;
            formModel.nameTown = undefined;
            updateSchema([
              {
                field: 'nameCity',
                componentProps: {
                  options: [],
                  placeholder: '城市',
                },
              },
              {
                field: 'nameCoun',
                componentProps: {
                  options: [],
                  placeholder: '区/县',
                },
              },
              {
                field: 'nameTown',
                componentProps: {
                  options: [],
                  placeholder: '城镇/街道',
                },
              },
            ]);
          } else {
            const nameCity = await getAreaList({ parentId: value });
            nameCity.forEach((item) => {
              item.label = item.name;
              item.value = item.code;
            });
            formModel.nameCity = undefined; //  reset city value
            formModel.nameCoun = undefined;
            formModel.nameTown = undefined;
            updateSchema({
              field: 'nameCity',
              componentProps: {
                options: nameCity,
                placeholder: '城市',
                async onChange(value) {
                  if (value === undefined) {
                    formModel.nameCoun = undefined; //  reset city value
                    formModel.nameTown = undefined;
                    updateSchema([
                      {
                        field: 'nameCoun',
                        componentProps: {
                          options: [],
                        },
                      },
                      {
                        field: 'nameTown',
                        componentProps: {
                          options: [],
                        },
                      },
                    ]);
                  } else {
                    // 获取区数据
                    const nameCoun = await getAreaList({ parentId: value });
                    nameCoun.forEach((item) => {
                      item.label = item.name;
                      item.value = item.code;
                    });
                    updateSchema({
                      field: 'nameCoun',
                      componentProps: {
                        // 请选择区
                        options: nameCoun,
                        async onChange(value) {
                          if (value === undefined) {
                            formModel.nameTown = undefined;
                            updateSchema({
                              field: 'nameTown',
                              componentProps: {
                                placeholder: '城镇/街道',
                                options: [],
                              },
                            });
                          } else {
                            const nameTown = await getAreaList({ parentId: value });
                            nameTown.forEach((item) => {
                              item.label = item.name;
                              item.value = item.code;
                            });
                            updateSchema({
                              field: 'nameTown',
                              componentProps: {
                                placeholder: '城镇/街道',
                                options: nameTown,
                              },
                            });
                          }
                        },
                      },
                    });
                  }
                },
              },
            });
          }
        },
      };
    },
  },
  {
    field: 'nameCity',
    component: 'Select',
    label: '',
    colProps: {
      span: 6,
    },
  },
  {
    field: 'nameCoun',
    component: 'Select',
    label: '',
    colProps: {
      span: 6,
    },
    componentProps: {
      placeholder: '区/县',
    },
  },
  {
    field: 'nameTown',
    component: 'Select',
    label: '',
    colProps: {
      span: 6,
    },
    componentProps: {
      placeholder: '城镇/街道',
    },
  },
];