<template>
  <BasicModal v-bind="$attrs" @register="registerModal" :title="title" @ok="handleSubmit" width="60%">
    <div class="qdml-add p-5">
      <BasicForm @register="registerForm">
        <!-- 行业类别 -->
        <template #form-hylb="{ model, field }">
          <div>
            <a-select
              v-model:value="model[field]"
              @change="Changetype"
              placeholder="请选择行业类别"
              :fieldNames="{ label: 'text', value: 'value' }"
              :options="suspects"
            ></a-select>
          </div>
        </template>
        <template #form-hyfl="{ model, field }">
          <div>
            <a-select
              v-model:value="model[field]"
              @change="ChangeM"
              placeholder="请选择门类"
              :fieldNames="{ label: 'name', value: 'id' }"
              :options="treeM"
            ></a-select>
          </div>
        </template>
        <template #form-hydl="{ model, field }">
          <div>
            <a-select
              v-model:value="model[field]"
              @change="ChangeD"
              placeholder="请选择大类"
              :fieldNames="{ label: 'name', value: 'id' }"
              :options="treeD"
            ></a-select>
          </div>
        </template>
        <template #form-hyzl="{ model, field }">
          <div>
            <a-select
              v-model:value="model[field]"
              @change="ChangeZ"
              placeholder="请选择中类"
              :fieldNames="{ label: 'name', value: 'id' }"
              :options="treeZ"
            ></a-select>
          </div>
        </template>
        <template #form-hyxl="{ model, field }">
          <div>
            <a-select v-model:value="model[field]" placeholder="请选择小类" :fieldNames="{ label: 'name', value: 'id' }" :options="treeX"></a-select>
          </div>
        </template>
      </BasicForm>
    </div>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref, computed, unref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { formSchema } from './GWrdkjbxxb.data';
  import { useUserStore } from '/@/store/modules/user';
  import { saveOrUpdate, edit } from './GWrdkjbxxb.api';
  import { getTown, categoryList, dict } from '/@/api/common/api';

  const userStore: any = useUserStore();

  // Emits声明
  const emit = defineEmits(['register', 'success']);
  const isUpdate = ref(true);
  //表单配置
  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
    labelWidth: 220,
    schemas: formSchema,
    showActionButtonGroup: false,
    //默认row行配置,当 layout 为 horizontal 生效
    rowProps: { gutter: 24, justify: 'start', align: 'middle' },
    //全局col列占比(每列显示多少位)，和schemas中的colProps属性一致
    baseColProps: { span: 12 },
    //使用labelCol的样式参数来控制标题宽度
    labelCol: { style: { width: '150px' } },
    //row行的样式
    baseRowStyle: { width: '100%' },
    //表单布局属性，支持（vertical,horizontal），默认为horizontal
    layout: 'horizontal',
  });
  //表单赋值
  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    //重置表单
    await resetFields();
    setModalProps({ confirmLoading: false, showCancelBtn: data?.showFooter, showOkBtn: data?.showFooter });
    isUpdate.value = !!data?.isUpdate;

    if (unref(isUpdate)) {
      //表单赋值
      const res = await edit(data.record.wrdkid);
      res.faliErji1 = res.faliErji;

      if (!res.isnyd2yzlg) res.isnyd2yzlg = '0';
      if (!res.iswlyd2yzlg) res.iswlyd2yzlg = '0';
      await setFieldsValue({
        ...res,
      });
    }
  });
  //设置标题
  const title = computed(() => (!unref(isUpdate) ? '添加' : '编辑'));
  //表单提交事件
  async function handleSubmit() {
    try {
      let values = await validate();
      setModalProps({ confirmLoading: true });
      //提交表单
      if (userStore?.userInfo?.userIdentity == '3' && !values.wrdkid) {
        if (!values.countryCode) values.countryCode = userStore?.userInfo?.codeRegion;
      }

      await saveOrUpdate(values, isUpdate.value);
      //关闭弹窗
      closeModal();
      //刷新列表
      emit('success', { isUpdate: isUpdate.value, values });
    } finally {
      setModalProps({ confirmLoading: false });
    }
  }

  // 获取省市的方法
  // const countrys = ref([]);
  const citys = ref([]);
  async function getcity() {
    citys.value = await getTown({ id: '440000' });
  }
  getcity();
  // 获取城镇
  // async function handleChange(v) {
  //   countrys.value = await getTown(v);
  // }

  // 获取行业类别
  let allCategory = [];
  let allD: any = [];
  let allZ: any = [];
  let allX: any = [];
  const treeM = ref<any>([]);
  const treeD = ref<any>([]);
  const treeZ = ref<any>([]);
  const treeX = ref<any>([]);
  async function getcategory() {
    allCategory = await categoryList();
    // treeM.value = allCategory
  }
  getcategory();
  // 获取行业分类
  const suspects = ref([]);
  async function gethylb() {
    suspects.value = await dict({ key: 'dk_hyfl' });
  }
  gethylb();
  // 点击行业类别事件 很麻烦 有时间需要优化
  function Changetype(v) {
    if (v == 1) {
      // 只显示42号类
      treeM.value = allCategory.filter((item) => item['is42']);
    } else {
      treeM.value = allCategory;
    }
  }
  function ChangeM(v) {
    allD = treeM.value.filter((item: any) => item.id === v);
    treeD.value = allD[0].children;
  }
  function ChangeD(v) {
    allZ = treeD.value.filter((item: any) => item.id === v);
    treeZ.value = allZ[0].children;
  }
  function ChangeZ(v) {
    allX = treeZ.value.filter((item: any) => item.id === v);
    treeX.value = allX[0].children;
  }
</script>

<style lang="less">
  .qdml-add {
    .ant-row {
      display: flex;
      flex-wrap: wrap;

      .ant-form-item-label {
        background-color: #fbfbfb;
        text-align: center;
        border: 1px solid #e6e6e6;
        margin-right: 3px;
      }

      // > div:nth-child(5) {
      //   flex: 0 0 50%;
      // }

      // > div:nth-child(4) {
      //   flex: 0 0 50%;

      //   .ant-form-item-control-input {
      //     margin-left: 1%;
      //   }
      // }

      // > div:nth-child(11) {
      //   flex: 0 0 30%;
      // }

      // > div:nth-child(12) {
      //   flex: 0 0 17%;

      //   .ant-form-item-control-input {
      //     margin-left: 1%;
      //   }
      // }

      // > div:nth-child(13) {
      //   flex: 0 0 17%;

      //   .ant-form-item-control-input {
      //     margin-left: 1%;
      //   }
      // }

      // > div:nth-child(14) {
      //   flex: 0 0 17%;

      //   .ant-form-item-control-input {
      //     margin-left: 1%;
      //   }
      // }

      // > div:nth-child(15) {
      //   flex: 0 0 17%;

      //   .ant-form-item-control-input {
      //     margin-left: 1%;
      //   }
      // }
    }
  }
</style>
