import Dialog from '@vant/weapp/dist/dialog/dialog';
import Toast from '@vant/weapp/dist/toast/toast';
import { AddressTypeEnum } from '@config/emun';
import { saveAddress, removeAddress } from '@api/address';
import { VERIFY_RULES } from './config';
import { VerifyRule } from './types';

type AreaItem = {
  code: string;
  name: string;
};

const app: AppOption = getApp();

Page({
  data: {
    showAreaPicker: false,
    type: AddressTypeEnum.ADD,
    form: {
      userName: '',
      userPhone: '',
      country: '中国',
      province: '', // 省份
      city: '', // 城市
      district: '', // 区县
      address: '',
      isDefault: 0,
      addressStatus: 1,
      region: '', // 回显字段
    },
    fields: [
      {
        label: '收货姓名',
        key: 'userName',
        type: 'input',
        inputType: 'text',
        placeholder: '请输入收货人姓名',
        minLen: 1,
        maxlength: 20,
      },
      {
        label: '联系电话',
        key: 'userPhone',
        type: 'input',
        inputType: 'number',
        placeholder: '请输入联系电话',
        maxlength: 11,
      },
      {
        label: '所在地区',
        key: 'region',
        type: 'picker',
        placeholder: '请选择所在地区',
        showMore: true,
      },
      {
        label: '详细地址',
        key: 'address',
        type: 'input',
        inputType: 'textarea',
        placeholder: '请输入详细地址',
      },
    ],
  },

  onLoad() {
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.on('editAddress', (data) => {
      if (data.id) {
        const addressInfo = data;
        const { city, province, district } = addressInfo;
        addressInfo.region = `${city} ${province} ${district}`;
        this.setData({
          type: AddressTypeEnum.EDIT,
          form: { ...this.data.form, ...addressInfo },
        });
      }
    });
  },

  onUnload() {
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.off('editAddress', () => {});
  },

  onChangeField(e: WechatMiniprogram.TouchEvent) {
    const { key } = e.currentTarget.dataset;
    const value = e.detail;
    const { form } = this.data;
    form[key] = value;
    this.setData({ form });
  },

  onClickField(e: WechatMiniprogram.TouchEvent) {
    if (e.currentTarget.dataset?.type === 'picker') {
      this.setData({
        showAreaPicker: true,
      });
    }
  },

  onCloseAreaPicker() {
    this.setData({
      showAreaPicker: false,
    });
  },

  onConfirmAreaPicker(e: WechatMiniprogram.TouchEvent) {
    const [province, city, district] = e.detail.values.map((item: AreaItem) => item.name);
    const { form } = this.data;

    this.setData({
      form: {
        ...form,
        province,
        city,
        district,
        region: `${province}${city}${district}`,
      },
      showAreaPicker: false,
    });
  },

  onChangeDefaultAddress(e: WechatMiniprogram.TouchEvent) {
    this.setData({
      'form.isDefault': e.detail ? 1 : 0,
    });
  },

  async chooseWxAddress() {
    try {
      const res = await wx.chooseAddress();

      this.setData({
        form: {
          ...this.data.form,
          userName: res.userName,
          userPhone: res.telNumber,
          province: res.provinceName,
          city: res.cityName,
          district: res.countyName,
          address: res.detailInfo,
          region: `${res.provinceName}${res.cityName}${res.countyName}`,
        },
      });
    } catch (error) {
      console.error('取消地址导入', error);
    }
  },

  async onDeleteAddress() {
    await Dialog.confirm({ message: '您确定删除该收货地址吗？' });
    const { id } = this.data.form;
    await removeAddress({ id });
    app.route.back(1);
  },

  async onSubmitAddress() {
    const { isPass, errText } = await this.verifyAddress();
    if (!isPass) {
      // eslint-disable-next-line new-cap
      Toast(errText);
      return;
    }
    const from = this.data.form;

    try {
      await saveAddress(from);
      app.route.back(1);
    } catch (err) {
      console.log(err);
    }
  },

  async verifyAddress() {
    const { fields, form } = this.data;
    let isPass = true;
    let errText = '';

    fields.forEach((fieldItem) => {
      const { key } = fieldItem;
      const value = form[key];
      const verifyRuleList: VerifyRule[] = VERIFY_RULES[key] || [];

      // 根据规则集校验每个表单字段
      verifyRuleList.forEach((rule) => {
        if (isPass && !rule.regExp.test(value)) {
          isPass = false;
          errText = rule.errText;
        }
      });
    });

    return { isPass, errText };
  },
});