<template>
  <BasicDrawer
    v-bind="$attrs"
    isDetail
    @register="register"
    destroyOnClose
    @close="closeDrawer"
    :title="deviceDetail.alias || deviceDetail.name"
    width="80%"
  >
    <Tabs v-model:activeKey="activeKey" :size="size">
      <TabPane key="1" tab="详情">
        <div>详情</div>
      </TabPane>
      <TabPane key="2" tab="属性">
        <Attribute />
      </TabPane>
      <TabPane key="3" tab="最新遥测数据"><div>最新遥测数据</div></TabPane>
      <TabPane key="4" tab="警告">
        <div>警告</div>
      </TabPane>
      <TabPane key="5" tab="事件">
        <div>事件</div>
      </TabPane>
      <!-- 网关设备并且场家是TBox -->
      <TabPane key="6" tab="关联">
        <div>关联</div>
      </TabPane>
      <!-- 网关设备并且是TBox -->

      <TabPane key="7" tab="审计日志">
        <div>审计日志</div>
      </TabPane>
    </Tabs>
  </BasicDrawer>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';

  import { Tabs, TabPane } from 'ant-design-vue';
  import { DeviceRecord } from '/@/api/device/model/deviceModel';

  import Attribute from './component/Attribute.vue';

  // defineProps({});

  // defineEmits([]);

  const activeKey = ref('1');
  const size = ref('small');
  const deviceDetail = ref<DeviceRecord>({} as unknown as DeviceRecord);
  // 详情回显
  const [register] = useDrawerInner(async (data) => {
    console.log(data, 'data');
  });
  const closeDrawer = () => {
    activeKey.value = '1';
  };
</script>