<script setup lang="ts">
  import cityData from 'public/city.json';
  import cityZip from 'public/zipcode_district_data.json';
  import type {
    FormInstanceFunctions,
    FormProps,
    SelectValue,
  } from 'tdesign-vue-next';

  const cityDataTyped = cityData as Record<string, Record<string, string>>;
  const cityZipTyped = cityZip as Record<string, string | number>;

  function getZipCode(city: string): string {
    for (const cityName of [
      city,
      city.substring(0, city.length - 1),
      city.substring(0, city.length - 3),
    ])
      if (cityZipTyped[cityName] !== undefined) {
        return '' + cityZipTyped[cityName];
      }
    return '';
  }

  const store = usePeopleStore();
  const { currentForm } = storeToRefs(store);

  const form = ref<FormInstanceFunctions>();
  const provinceIndex = ref('');
  async function submit() {
    // 执行提交逻辑
    if (!form.value) return;
    const result = await form.value.validate();
    if (typeof result === 'boolean' && result) form.value.submit();
  }
  function resetForm() {
    if (form.value) form.value.reset();
  }
  function changeProvince(val: SelectValue) {
    setProvinceIndexByName(val as string);
    currentForm.value.city = '';
    currentForm.value.zip = '';
  }
  function setProvinceIndexByName(name: string) {
    for (const [key, value] of Object.entries(cityDataTyped['00']!)) {
      if (value === name) {
        provinceIndex.value = key;
        return;
      }
    }
  }

  defineExpose({
    submit,
    resetForm,
    setProvinceIndexByName,
  });

  const rules: FormProps['rules'] = {
    date: [{ required: true, message: '请输入日期', trigger: 'blur' }],
    name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
    province: [
      { required: true, message: '请输入省份', trigger: 'submit' },
      { required: true, message: '请输入省份', trigger: 'change' },
    ],
    city: [{ required: true, message: '请输入城市', trigger: 'submit' }],
    address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
    zip: [{ required: true, message: '请输入邮编', trigger: 'blur' }],
  };
</script>

<template>
  <t-form
    ref="form"
    :rules="rules"
    :data="currentForm"
    @submit="
      () => {
        if (store.showAddPeople) store.addPeople();
        else if (store.showEditPeople) store.updatePeople();
      }
    "
  >
    <t-form-item name="date" label="日期">
      <t-date-picker
        v-model="currentForm.date"
        class="w-80"
        placeholder="请输入日期"
      />
    </t-form-item>
    <t-form-item name="name" label="姓名">
      <t-input v-model="currentForm.name" placeholder="请输入姓名" />
    </t-form-item>
    <t-form-item name="province" label="省份">
      <t-select
        v-model="currentForm.province"
        placeholder="请输入省份"
        @change="changeProvince"
      >
        <t-option
          v-for="item of cityDataTyped['00']"
          :key="item"
          :label="item"
          :value="item"
        >
          {{ item }}
        </t-option>
      </t-select>
    </t-form-item>
    <t-form-item name="city" label="城市">
      <t-select
        v-model="currentForm.city"
        placeholder="请输入城市"
        :disabled="currentForm.province === ''"
        @change="
          (x: SelectValue) => {
            currentForm.zip = getZipCode(x as string);
          }
        "
      >
        <t-option
          v-for="item of cityDataTyped[provinceIndex]"
          :key="item"
          :label="item"
          :value="item"
        >
          {{ item }}
        </t-option>
      </t-select>
    </t-form-item>
    <t-form-item name="address" label="地址">
      <t-input v-model="currentForm.address" placeholder="请输入地址" />
    </t-form-item>
    <t-form-item name="zip" label="邮编">
      <t-input v-model="currentForm.zip" placeholder="请输入邮编" />
    </t-form-item>
  </t-form>
</template>

<style scoped lang="less"></style>