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

  import { Tabs } 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';
  import { getDeviceDetail } from '/@/api/device/deviceManager';
  export default defineComponent({
    name: 'DeviceModal',
    components: {
      BasicDrawer,
      Tabs,
      TabPane: Tabs.TabPane,
      Detail,
      RealTimeData,
      Alarm,
      ChildDevice,
    },
    emits: ['reload', 'register'],
    setup() {
      const activeKey = ref('1');
      const size = ref('small');
      const deviceDetailRef = ref();
      const deviceDetail = ref<any>({});
      const tbDeviceId = ref('');
      // 详情回显
      const [register] = useDrawerInner(async (data) => {
        const { id } = data;
        // 设备详情
        const res = await getDeviceDetail(id);
        deviceDetail.value = res;
        const { latitude, longitude, address } = res.deviceInfo;
        if (latitude) {
          deviceDetailRef.value.initMap(longitude, latitude, address);
        }
      });
      const closeDrawer = () => {
        activeKey.value = '1';
      };

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