<template>
  <BasicDrawer v-bind="$attrs" title="产品详情" @register="register" width="60%" destroy-on-close>
    <Tabs v-model:activeKey="activeKey" @change="handlePanelChange">
      <Tabs.TabPane key="product" tab="产品">
        <div class="relative">
          <ProductDescription ref="DevConStRef" :record="record" />
        </div>
      </Tabs.TabPane>
      <Tabs.TabPane key="transport" tab="传输配置">
        <div>
          <TransportDescription :record="record" />
          <!-- <TransportConfigurationStep :ifShowBtn="false" ref="TransConStRef" /> -->
        </div>
      </Tabs.TabPane>
      <Tabs.TabPane key="topic" tab="Topic">
        <TopicPanel />
      </Tabs.TabPane>
      <Tabs.TabPane key="modelOfMatter" tab="物模型管理">
        <PhysicalModelManagementStep :record="record" />
      </Tabs.TabPane>
    </Tabs>
  </BasicDrawer>
</template>
<script lang="ts" setup>
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { Tabs } from 'ant-design-vue';
  import TransportConfigurationStep from './step/TransportConfigurationStep.vue';
  import PhysicalModelManagementStep from './step/PhysicalModelManagementStep.vue';
  import { nextTick, ref, unref } from 'vue';
  import { deviceConfigGetDetail } from '/@/api/device/deviceConfigApi';
  import { DeviceRecord } from '/@/api/device/model/deviceModel';
  import TopicPanel from './step/TopicPanel.vue';
  import ProductDescription from './components/ProductDescription.vue';
  import { TransportDescription } from './components/TransportDescript';

  defineEmits(['register']);

  type ActiveKey = 'product' | 'transport' | 'modelOfMatter' | 'topic';

  const activeKey = ref<ActiveKey>('modelOfMatter');

  const record = ref<DeviceRecord>({} as unknown as DeviceRecord);

  const DevConStRef = ref<InstanceType<typeof ProductDescription>>();
  const TransConStRef = ref<InstanceType<typeof TransportConfigurationStep>>();

  const setDeviceConfFormData = async (record) => {
    unref(DevConStRef)?.renderProductInfo(record);
  };
  const setTransConfFormData = async (res: Recordable) => {
    await nextTick();
    unref(TransConStRef)?.setFormData(res);
  };

  const [register, {}] = useDrawerInner(async (data: { record: DeviceRecord }) => {
    activeKey.value = 'product';
    record.value = data.record;
    record.value = await deviceConfigGetDetail(data.record.id);
    setDeviceConfFormData(record.value);
  });

  const handlePanelChange = (activeKey: ActiveKey) => {
    if (activeKey === 'transport') setTransConfFormData(unref(record));
  };
</script>

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