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

  defineEmits(['register']);
  const blockContent = `属性一般是设备的运行状态，如当前温度等；服务是设备可被调用的方法，支持定义参数，如执行某项任务；事件则是设备上报的
通知，如告警，需要被及时处理。`;
  const activeKey = ref('1');
  const size = ref('small');
  const AttrRef = ref<InstanceType<typeof Attribute>>();
  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>