<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="详情">
        <Detail
          ref="deviceDetailRef"
          :deviceDetail="deviceDetail"
          @open-gateway-device="handleOpenGatewayDevice"
        />
      </TabPane>
      <TabPane key="modelOfMatter" tab="物模型数据">
        <ModelOfMatter :deviceDetail="deviceDetail" />
      </TabPane>
      <!-- <TabPane key="2" tab="实时数据" v-if="deviceDetail?.deviceType !== 'GATEWAY'">
        <RealTimeData :deviceDetail="deviceDetail" />
      </TabPane>
      <TabPane key="7" tab="历史数据" v-if="deviceDetail?.deviceType !== 'GATEWAY'">
        <HistoryData :deviceDetail="deviceDetail" />
      </TabPane> -->
      <TabPane key="5" tab="命令下发" v-if="deviceDetail?.deviceType !== 'SENSOR'">
        <CommandIssuance :deviceDetail="deviceDetail" />
      </TabPane>
      <TabPane key="3" tab="告警"><Alarm :id="deviceDetail.id" /></TabPane>
      <TabPane key="4" tab="子设备" v-if="deviceDetail?.deviceType === 'GATEWAY'">
        <ChildDevice
          :fromId="deviceDetail?.tbDeviceId"
          @openTbDeviceDetail="handleOpenTbDeviceDetail"
        />
      </TabPane>
      <TabPane key="7" tab="命令下发记录">
        <CommandRecord :fromId="deviceDetail?.tbDeviceId" />
      </TabPane>
      <!-- 网关设备并且场家是TBox -->
      <TabPane
        key="6"
        tab="TBox"
        v-if="deviceDetail?.deviceType === 'GATEWAY' && deviceDetail?.brand == 'TBox'"
      >
        <TBoxDetail :deviceDetail="deviceDetail" />
      </TabPane>
      <!-- 网关设备并且是TBox -->

      <TabPane key="eventManage" tab="事件管理">
        <EventManage :tbDeviceId="deviceDetail.tbDeviceId" />
      </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 TBoxDetail from '../tabs/TBoxDetail.vue';
  import CommandIssuance from '../tabs/CommandIssuance.vue';
  import { CommandRecord } from '../tabs/commandRecord/index';
  import { getDeviceDetail } from '/@/api/device/deviceManager';
  // import HistoryData from '../tabs/HistoryData.vue';
  import ModelOfMatter from '../tabs/ModelOfMatter.vue';
  import EventManage from '../tabs/EventManage/index.vue';
  import { DeviceRecord } from '/@/api/device/model/deviceModel';

  export default defineComponent({
    name: 'DeviceModal',
    components: {
      BasicDrawer,
      Tabs,
      TabPane: Tabs.TabPane,
      Detail,
      // RealTimeData,
      Alarm,
      ChildDevice,
      CommandIssuance,
      TBoxDetail,
      // HistoryData,
      ModelOfMatter,
      CommandRecord,
      EventManage,
    },
    emits: ['reload', 'register', 'openTbDeviceDetail', 'openGatewayDeviceDetail'],
    setup(_props, { emit }) {
      const activeKey = ref('1');
      const size = ref('small');
      const deviceDetailRef = ref();
      const deviceDetail = ref<DeviceRecord>({} as unknown as DeviceRecord);
      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';
      };

      const handleOpenTbDeviceDetail = (data: { id: string; tbDeviceId: string }) => {
        emit('openTbDeviceDetail', data);
      };

      const handleOpenGatewayDevice = (data: { gatewayId: string; tbDeviceId: string }) => {
        emit('openGatewayDeviceDetail', { id: data.gatewayId });
      };

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