<template>
  <div>
    <BasicModal
      :maskClosable="false"
      v-bind="$attrs"
      width="55rem"
      @register="register"
      @ok="handleSubmit"
      @cancel="handleCancel"
    >
      <Tabs v-model:activeKey="activeKey" :size="size">
        <TabPane key="1" tab="属性">
          <Attr v-show="activeKey === '1'" ref="AttrRef" />
        </TabPane>
        <TabPane disabled key="2" tab="服务">
          <Service v-show="activeKey === '2'" ref="ServiceRef" />
        </TabPane>
        <TabPane disabled key="3" v-show="activeKey === '3'" tab="事件">
          <Events v-show="activeKey === '3'" ref="EventsRef" />
        </TabPane>
      </Tabs>
    </BasicModal>
  </div>
</template>
<script lang="ts" setup>
  import { ref, unref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { Tabs, TabPane } from 'ant-design-vue';
  import Attr from './cpns/Attr.vue';
  import Service from './cpns/Service.vue';
  import Events from './cpns/Events.vue';

  defineEmits(['register']);
  const activeKey = ref('1');
  const size = ref('small');
  const AttrRef = ref<InstanceType<typeof Attr>>();
  const ServiceRef = ref<InstanceType<typeof Service>>();
  const EventsRef = ref<InstanceType<typeof Events>>();
  const isUpdate = ref(false);
  const isViewDetail = ref('');
  const [register, { closeModal, setModalProps }] = useModalInner(async (data) => {
    setModalProps({ loading: true });
    isUpdate.value = data.isUpdate;
    isViewDetail.value = data.isView;
    // AttrRef.value?.setFormData()
    setModalProps({ loading: false });
    if (!unref(isViewDetail)) {
      const title = !unref(isUpdate) ? '编辑物模型' : '新增物模型';
      setModalProps({ title, showOkBtn: true, showCancelBtn: true });
      if (!unref(isUpdate)) {
      }
    } else {
      setModalProps({ showOkBtn: false, showCancelBtn: false, title: '查看物模型' });
    }
  });
  const handleCancel = () => {
    AttrRef.value?.resetFormData();
    closeModal();
  };
  const handleSubmit = async () => {
    const value = await AttrRef.value?.getFormData();
    if (!value) return;
    console.log('搜集值', value);
  };
</script>

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