<template>
  <!-- <BasicModal v-bind="$attrs" width="55rem" @register="register" centered /> -->
  <BasicDrawer
    v-bind="$attrs"
    isDetail
    :title="deviceInfo?.name"
    @register="register"
    :destroyOnClose="true"
    @close="closeDrawer"
  >
    <Tabs v-model:activeKey="activeKey" :size="size" type="card">
      <TabPane key="1" tab="详情"
        ><Detail :deviceDetail="deviceInfo" ref="deviceDetailRef"
      /></TabPane>
      <TabPane key="2" tab="实时数据"><RealTimeData /></TabPane>
      <TabPane key="3" tab="告警"><Alarm /></TabPane>
      <TabPane key="4" tab="子设备"><ChildDevice /></TabPane>
    </Tabs>
  </BasicDrawer>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';

  import { Tabs, TabPane } from 'ant-design-vue';
  import Detail from '../tabs/Detail.vue';
  import RealTimeData from '../tabs/RealTimeData.vue';
  import Alarm from '../tabs/Alarm.vue';
  import ChildDevice from '../tabs/ChildDevice.vue';
  export default defineComponent({
    name: 'DeviceModal',
    components: {
      BasicDrawer,
      Tabs,
      TabPane,
      Detail,
      RealTimeData,
      Alarm,
      ChildDevice,
    },
    emits: ['reload', 'register'],
    setup() {
      const activeKey = ref('1');
      const size = ref('small');
      const deviceInfo = ref({});
      const deviceDetailRef = ref();
      // 详情回显
      const [register] = useDrawerInner((data) => {
        deviceInfo.value = data.record;
        const { latitude, longitude, address } = data.record.deviceInfo;
        deviceDetailRef.value.initMap(longitude, latitude, address);
      });

      const closeDrawer = () => {
        activeKey.value = '1';
      };

      return {
        size,
        activeKey,
        deviceInfo,
        register,
        closeDrawer,
        deviceDetailRef,
      };
    },
  });
</script>