
<template>
  <BasicModal
    width="1200px"
    v-bind="$attrs"
    @register="registerModal"
    :title="getTitle"
    @ok="handleSubmit"
  >
    <div style="height: 60vh" class="res-form-container">
      <a-tabs v-model:activeKey="activeKey" class="res-a-tabs">
        <a-tab-pane key="1" tab="地图资源信息">
          <!-- <BasicForm @register="registerForm"></BasicForm> -->
          <source-detail ref="refSourceDetail" @RtnMain="RtnMain" :formData="formData" :isUpdate="isUpdate"></source-detail>
        </a-tab-pane>
        <a-tab-pane key="2" tab="流程信息" force-render>
          <div class="tab2"></div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </BasicModal>
</template>
  <script lang="ts">
import { defineComponent, ref, computed, unref, reactive, onMounted } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { BasicForm, useForm } from '/@/components/Form/index';
import { formSchema } from './map.data';
import { BasicTree } from '/@/components/Tree';
import { PlusOutlined } from '@ant-design/icons-vue';
import SourceDetail from './SourceDetail.vue';

export default defineComponent({
  name: 'AccountModal',
  components: {
    BasicModal,
    BasicForm,
    BasicTree,
    PlusOutlined,
    SourceDetail,
    VNodes: (_, { attrs }) => {
      return attrs.vnodes;
    },
  },
  emits: ['success', 'register'],
  setup(_, { emit }) {
    const data = reactive({
      activeKey: '2',
    });
    const refSourceDetail = ref(null);
    let formData = ref(null)
    const isUpdate = ref(true);
    const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
      setModalProps({ confirmLoading: false });
      isUpdate.value = !!data?.isUpdate;
      if(isUpdate.value) formData.value = data.record
    });
    const getTitle = computed(() => (!unref(isUpdate) ? '新增组件资源' : '编辑组件资源'));

    async function handleSubmit() {
      refSourceDetail.value.submitForm();
    }
    const RtnMain = (status) => {
      emit('success')
    }

    onMounted(() => {});
    return {
      ...ref(data),
      registerModal,
      handleSubmit,
      getTitle,
      refSourceDetail,
      isUpdate,
      formData,
      RtnMain,
    };
  },
});
</script>
  <style scoped lang="less">
:deep(.vben-basic-tree) {
  width: 100% !important;
}

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

:deep(.is-flod) {
  display: none !important;
}
:deep(.res-form-container) {
  .res-a-tabs {
    margin-top: 61px !important;
  }
}
</style>
  