<template>
  <BasicModal
    :maskClosable="false"
    width="1000px"
    v-bind="$attrs"
    @register="registerModal"
    :title="getTitle"
    @ok="handleSubmit"
    :useWrapper="true"
    :minHeight="600"
  >
    <div class="main">
      <div class="tabs">
        <a-tabs default-active-key="1" @change="callback">
          <a-tab-pane key="1" tab="基础信息">
            <!-- Content of Tab Pane 1 -->
          </a-tab-pane>
          <a-tab-pane key="2" tab="工程设计阶段">
            <!-- Content of Tab Pane 2 -->
          </a-tab-pane>
          <a-tab-pane key="3" tab="工程部位/分区分段">
            <!-- Content of Tab Pane 2 -->
          </a-tab-pane>
          <a-tab-pane key="4" tab="附件">
            <!-- Content of Tab Pane 2 -->
          </a-tab-pane>
        </a-tabs>
      </div>

      <div class="left" v-show="false">
        <ul style="padding: 20px">
          <li>
            <a-button type="primary">基础信息</a-button>
          </li>
          <li>
            <a-button type="primary">基础信息</a-button>
          </li>
          <li>
            <a-button type="primary">基础信息</a-button>
          </li>
          <li>
            <a-button type="primary">基础信息</a-button>
          </li>
        </ul>
      </div>
      <!-- <div style="height: 210vh; width: 80%; border-style: solid; border-color: #E9E9E9; border-width: 1px;"> -->
      <div>
        <!-- <BasicForm @register="registerForm">
          <template #map>
            <div style="height: 600px">
              <Map>
                <mapTool></mapTool>
              </Map>
            </div>
          </template>
        </BasicForm> -->
        <BasicForm v-show="active == 1" @register="registerForm1">
          <template #map>
            <div style="height: 600px">
              <Map>
                <mapTool />
              </Map>
            </div>
          </template>
        </BasicForm>
        <BasicForm v-show="active == 2" @register="registerForm2">
          <template #map>
            <div style="height: 600px">
              <Map>
                <mapTool />
              </Map>
            </div>
          </template>
        </BasicForm>
        <BasicForm v-show="active == 3" @register="registerForm3">
          <template #map>
            <div style="height: 600px">
              <Map>
                <mapTool />
              </Map>
            </div>
          </template>
        </BasicForm>
      </div>
    </div>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, computed, unref, reactive, onMounted, watch } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { accountFormSchema } from './account.data';
  import { accountFormSchema1 } from './account.data1';
  import { accountFormSchema2 } from './account.data2';
  import { accountFormSchema3 } from './account.data3';
  import { filterRoleList } from '/@/api/system/system';
  // import { addDzsbsjjr } from '/@/api/datamanager/groundDisasterId/muSourceData';

  // import {  Upload } from 'ant-design-vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  // import { FileItem } from '/@/components/Upload/src/typing';
  import { TOption } from '/@/views/rule/linkedge/config/config.data';
  // import { PlusOutlined } from '@ant-design/icons-vue';
  // import { upload } from '/@/api/oss/ossFileUploader';
  import Map from '../../../components/Map.vue';
  import mapTool from '../../../components/Map.vue';
  import { useMapStore } from '/@/store/modules/map';
  import { addBasinInformation } from '../../../method/api';
  export default defineComponent({
    name: 'AccountModal',
    components: {
      BasicModal,
      BasicForm,
      // Upload,
      // PlusOutlined,
      Map,
      mapTool,
    },
    emits: ['success', 'register'],
    setup(_, { emit }) {
      let active = ref(1);
      const tenantLogo = ref('');
      const loading = ref(false);
      const roleOptions = ref<TOption[]>([]);
      const isUpdate = ref(true);
      const rowId = ref('');
      const postData = reactive({});
      let newFormSchema = reactive([] as any);
      const getRoleList = async () => {
        const res = await filterRoleList();
        console.log(res);
        roleOptions.value = res.map((m) => {
          return {
            label: m.name,
            value: m.id,
          };
        });
      };
      watch(
        () => newFormSchema,
        () => {
          // newFormSchema.visible = true;
        }
      );
      onMounted(async () => {
        await getRoleList();

        // accountFormSchema.forEach((a, index) => {
        //   if (index < 10) {
        //     a.ifShow = true;
        //   } else {
        //     a.ifShow = false;
        //   }
        // });
        // updateSchema(accountFormSchema);
      });

      const [registerForm, { setFieldsValue, resetFields, validate, updateSchema }] = useForm({
        labelWidth: 100,
        schemas: accountFormSchema,
        showActionButtonGroup: false,
        actionColOptions: {
          span: 18,
        },
      });
      // const [registerForm1, { setFieldsValue1, resetFields1, validate1, updateSchema1 }] = useForm({
      const [registerForm1] = useForm({
        labelWidth: 100,
        schemas: accountFormSchema1,
        showActionButtonGroup: false,
        actionColOptions: {
          span: 18,
        },
      });
      // const [registerForm2, { setFieldsValue2, resetFields2, validate2, updateSchema2 }] = useForm({
      const [registerForm2] = useForm({
        labelWidth: 100,
        schemas: accountFormSchema2,
        showActionButtonGroup: false,
        actionColOptions: {
          span: 18,
        },
      });
      // const [registerForm3, { setFieldsValue3, resetFields3, validate3, updateSchema3 }] = useForm({
      const [registerForm3] = useForm({
        labelWidth: 100,
        schemas: accountFormSchema3,
        showActionButtonGroup: false,
        actionColOptions: {
          span: 18,
        },
      });

      const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
        await resetFields();
        setModalProps({ confirmLoading: false });
        isUpdate.value = !!data?.isUpdate;

        // accountFormSchema.forEach((a, index) => {
        //   if (index < 10) {
        //     a.ifShow = true;
        //   }
        //    else {
        //     a.ifShow = false;
        //   }
        // });
        if (unref(isUpdate)) {
          rowId.value = data.record.id;
          setFieldsValue(data.record);
        }
      });
      const getTitle = computed(() => (!unref(isUpdate) ? '新增' : '编辑'));

      async function handleSubmit() {
        setModalProps({ confirmLoading: true });
        try {
          const { createMessage } = useMessage();
          const values = await validate([
            'id',
            'lymc',
            'startLocationLon',
            'startLocationX',
            'startLocationY',
            'startLocationZ',
            'endLocationLat',
            'endLocationX',
            'endLocationY',
            'endLocationZ',
            'note',
            'fanwei',
            'qxgkNjy', //提交的时候校验，还有什么呢？没明白你问的啥 这个就是提交的时候，检查你的required为true的item有没有数据吧，没有的话就阻止提交对吧。。他的参数书那里有个问号，这说明什么，你要是给参数了，就校验指定对的。不给他就是校验整个表单。你这里没有必要给参数，懂？意对对对对
            'qxgkQw',
            'dztjFyptzzq',
            'dztjDzgs',
            'dztjDztj',
            'dztjDcyx',
            'dztjGzgk',
            'dztjXgz',
            'dztjSwdztj',
            'dztjWldztj',
            'dztjDzld',
            'dztjDzdfzjsd',
            'qxgkSsqhd',
          ]);
          Object.assign(postData, values);
          console.log('准备传递的参数' + JSON.stringify(postData));
          await addBasinInformation(paramsToFormData(postData as any), unref(isUpdate));
          closeModal();
          emit('success');
          createMessage.success(unref(isUpdate) ? '编辑成功' : '新增成功');
        } finally {
          setTimeout(() => {
            setModalProps({ confirmLoading: false });
          }, 300);
        }
      }
      // async function customUpload({ file }) {
      //   if (beforeUpload(file)) {
      //     tenantLogo.value = '';
      //     loading.value = true;
      //     const formData = new FormData();
      //     formData.append('file', file);
      //     const response = await upload(formData);
      //     if (response.fileStaticUri) {
      //       tenantLogo.value = response.fileStaticUri;
      //       loading.value = false;
      //     }
      //   }
      // }
      // const beforeUpload = (file: FileItem) => {
      //   const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
      //   if (!isJpgOrPng) {
      //     message.error('只能上传图片文件!');
      //   }
      //   const isLt2M = (file.size as number) / 1024 / 1024 < 5;
      //   if (!isLt2M) {
      //     message.error('图片大小不能超过5MB!');
      //   }
      //   return isJpgOrPng && isLt2M;
      // };
      function preProcessData(data) {
        Object.keys(data).forEach((item) => {
          if (typeof data[item] === 'undefined' || data[item] === null || data[item] === '') {
            delete data[item];
          }
        });
        return data;
      }

      function paramsToFormData(obj) {
        const data = preProcessData(obj);
        const formData = new FormData();
        Object.keys(data).forEach((key) => {
          if (data[key] instanceof Array) {
            data[key].forEach((item) => {
              formData.append(key, item);
            });
            return;
          }
          formData.append(key, obj[key]);
        });
        return formData;
      }
      const mapStore = useMapStore();

      const callback = (e) => {
        console.log(e, 'e');
        active.value = e;
        let doms = document.getElementsByClassName('ant-col');
        console.log('doms', doms);

        active.value = e;
        console.log(accountFormSchema, 'accountFormSchema');

        newFormSchema = accountFormSchema.map((item, index) => {
          if (e === '1' && index < 45) {
            item.ifShow = true;
            console.log(item.ifShow, item.label);
            // console.log({ item, ifShow: item.ifShow }, '显示！');
            return { ...item, ifShow: true };
          } else if (e === '2' && index >= 45 && index < 79) {
            item.ifShow = true;
            return { ...item, ifShow: true };
          } else if (e === '3' && index >= 79 && index < 94) {
            item.ifShow = true;
            return { ...item, ifShow: true };

          } else {
            // console.log({ item, ifShow: item.ifShow, label: item.label }, '隐藏');
            item.ifShow = false;
            return { ...item, ifShow: false };
          }
        });
        console.log(newFormSchema, 'newFormSchema');
        console.log(accountFormSchema, 'accountFormSchema');
        // debugger;
        updateSchema(newFormSchema);
      };
      return {
        active,
        callback,

        mapStore,
        registerModal,
        registerForm,
        registerForm1,
        registerForm2,
        registerForm3,
        handleSubmit,
        getTitle,
        roleOptions,
        // customUpload,
        // beforeUpload,
        tenantLogo,
        loading,
      };
    },
  });
</script>
<style scoped lang="less">
  :deep(.vben-basic-tree) {
    width: 100% !important;
  }

  :deep(.is-unflod) {
    display: none !important;
  }

  :deep(.is-flod) {
    display: none !important;
  }

  .main {
    .tabs {
      display: flex;
      justify-content: center;
    }
    // display: flex;
    li {
      margin-bottom: 10px;
    }

    .left {
      width: 20%;
      height: 210vh;
      margin-right: 5px;
      border-style: solid;
      border-color: #e9e9e9;
      border-width: 1px;
    }
  }

  :deep(.ant-form-item) {
    display: flex !important;
    flex-direction: column !important;
  }

  :deep(.ant-form-item-label) {
    text-align: left;
    // width: 80px !important;
    padding: 5px 0 !important;
  }

  :deep(.ant-col) {
    min-height: unset !important;
    width: 100% !important;
  }

  :deep(.scrollbar) {
    padding: 14px 0 14px 63px;
  }

  :deep(.ant-col-6) {
    padding: 0 20px;
  }

  :deep(.ant-col-24) {
    padding: 0 20px;
  }

  :deep(.ant-col-8) {
    padding: 0 20px;
  }

  :deep(.ant-col-12) {
    padding: 0 20px;
  }

  :deep(.ant-col-18) {
    padding: 0 20px;
  }
</style>
