<template>
  <div class="card">
    <Card :bordered="false" class="card"> <BasicForm @register="registerForm" /></Card>
    <Loading v-bind="compState" />
    <a-button
      @click="handleUpdateInfo"
      size="large"
      type="primary"
      style="margin-top: 20px; background-color: #2950f7; border-radius: 5px"
      >更新基本信息</a-button
    >
  </div>
</template>

<script lang="ts">
  import { defineComponent, onMounted, ref } from 'vue';
  import { Card } from 'ant-design-vue';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { schemas } from '../config/enterPriseInfo.config';
  import { getEnterPriseDetail, updateEnterPriseDetail } from '/@/api/oem/index';
  import { Loading } from '/@/components/Loading';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { getTownChild } from '/@/api/oem/index';
  export default defineComponent({
    components: {
      Card,
      BasicForm,
      Loading,
    },
    setup() {
      const compState = ref({
        absolute: false,
        loading: false,
        tip: '拼命加载中...',
      });
      const [registerForm, { getFieldsValue, setFieldsValue, updateSchema }] = useForm({
        labelWidth: 80,
        schemas,
        showResetButton: false,
        showSubmitButton: false,
        wrapperCol: {
          span: 10,
        },
      });
      const { createMessage } = useMessage();
      const handleUpdateInfo = async () => {
        try {
          compState.value.loading = true;
          const fieldsValue = getFieldsValue();
          await updateEnterPriseDetail({
            ...fieldsValue,
            codeProv: fieldsValue.nameProv,
            codeCity: fieldsValue.nameCity,
            codeCoun: fieldsValue.nameCoun,
            codeTown: fieldsValue.nameTown,
          });
          compState.value.loading = false;
          createMessage.success('更新信息成功');
        } catch (e) {
          createMessage.error('更新信息失败');
        }
      };

      // 地区显示回显和数据联动
      async function updateCityData(codeProv: string, codeCity: string, codeCoun: string) {
        const nameCity = await getTownChild('codeProv', codeProv);
        const nameCoun = await getTownChild('codeCity', codeCity);
        const nameTown = await getTownChild('codeCoun', codeCoun);
        nameCity.forEach((item) => {
          item.label = item.nameCity;
          item.value = item.codeCity;
        });
        nameCoun.forEach((item) => {
          item.label = item.nameCoun;
          item.value = item.codeCoun;
        });
        nameTown.forEach((item) => {
          item.label = item.nameTown;
          item.value = item.codeTown;
        });
        updateSchema({
          field: 'nameTown',
          componentProps: {
            options: nameTown,
          },
        });
        updateSchema({
          field: 'nameCoun',
          componentProps: {
            options: nameCoun,
            async onChange(value) {
              if (value === undefined) {
                setFieldsValue({
                  nameTown: undefined,
                });
                updateSchema({
                  field: 'nameTown',
                  componentProps: {
                    options: [],
                  },
                });
              }
              let nameTown = await getTownChild('codeCoun', value);
              nameTown.forEach((item) => {
                item.label = item.nameTown;
                item.value = item.codeTown;
              });
              setFieldsValue({
                nameTown: undefined,
              });
              updateSchema({
                field: 'nameTown',
                componentProps: {
                  placeholder: '请选择街道/城镇',
                  options: nameTown,
                },
              });
            },
          },
        });
        updateSchema({
          field: 'nameCity',
          componentProps: ({ formModel }) => {
            return {
              options: nameCity,
              onChange: async (value) => {
                let nameCoun = await getTownChild('codeCity', value);
                if (value === undefined) {
                  formModel.nameCoun = undefined; //  reset city value
                  formModel.nameTown = undefined;
                  nameCoun = [];
                  updateSchema({
                    field: 'nameTown',
                    componentProps: {
                      options: [],
                    },
                  });
                }
                nameCoun.forEach((item) => {
                  item.label = item.nameCoun;
                  item.value = item.codeCoun;
                });
                formModel.nameCoun = undefined; //  reset city value
                formModel.nameTown = undefined;
                updateSchema({
                  field: 'nameCoun',
                  componentProps: {
                    // 请选择区
                    options: nameCoun,
                    async onChange(value) {
                      let nameTown = await getTownChild('codeCoun', value);
                      if (value === undefined) {
                        formModel.nameTown = undefined;
                        nameTown = [];
                      }
                      nameTown.forEach((item) => {
                        item.label = item.nameTown;
                        item.value = item.codeTown;
                      });

                      formModel.nameTown = undefined;
                      updateSchema({
                        field: 'nameTown',
                        componentProps: {
                          placeholder: '请选择街道/城镇',
                          options: nameTown,
                        },
                      });
                    },
                  },
                });
              },
            };
          },
        });
      }

      onMounted(async () => {
        const res = await getEnterPriseDetail();
        updateCityData(res.codeProv, res.codeCity, res.codeCoun);
        setFieldsValue(res);
      });

      return {
        registerForm,
        compState,
        handleUpdateInfo,
      };
    },
  });
</script>

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