<template>
  <BasicDrawer
    v-bind="$attrs"
    isDetail
    @register="register"
    destroyOnClose
    @close="closeDrawer"
    :title="drawerTitle"
    width="80%"
  >
    <Tabs v-model:activeKey="activeKey" :size="size">
      <Tabs.TabPane key="1" :tab="t('common.detailText')">
        <Detail
          ref="deviceDetailRef"
          :deviceDetail="deviceDetail"
          @open-gateway-device="handleOpenGatewayDevice"
        />
      </Tabs.TabPane>
      <Tabs.TabPane
        v-if="!isGBTTransportType"
        key="modelOfMatter"
        :tab="t('deviceManagement.device.thingsModelDataText')"
      >
        <ModelOfMatter :deviceDetail="deviceDetail" />
      </Tabs.TabPane>
      <Tabs.TabPane v-if="!isGBTTransportType" key="3">
        <template #tab>
          <Badge :offset="[2, -5]" style="color: inherit">
            <span>{{ t('deviceManagement.device.alarmText') }}</span>
            <template #count>
              <div
                :style="{ visibility: deviceDetail.alarmStatus ? 'visible' : 'hidden' }"
                class="w-3.5 h-3.5 !flex justify-center items-center rounded-1 border-red-400 border"
              >
                <Icon icon="mdi:bell-warning" color="#f46161" :size="12" class="!mr-0" />
              </div>
            </template>
          </Badge>
        </template>
        <AlarmLog :device-id="deviceDetail.id" class="bg-gray-100" />
      </Tabs.TabPane>
      <Tabs.TabPane
        key="4"
        :tab="t('deviceManagement.device.subdeviceText')"
        v-if="deviceDetail?.deviceType === DeviceTypeEnum.GATEWAY"
      >
        <ChildDevice
          :fromId="deviceDetail?.tbDeviceId"
          @openTbDeviceDetail="handleOpenTbDeviceDetail"
        />
      </Tabs.TabPane>
      <Tabs.TabPane
        v-if="!isGBTTransportType"
        key="7"
        :tab="t('deviceManagement.device.commandDeliveryRecordText')"
      >
        <CommandRecord :deviceDetail="deviceDetail" :fromId="deviceDetail?.tbDeviceId" />
      </Tabs.TabPane>
      <!-- 网关设备并且场家是TBox -->
      <Tabs.TabPane
        key="6"
        tab="TBox"
        v-if="deviceDetail?.deviceType === DeviceTypeEnum.GATEWAY && deviceDetail?.brand == 'TBox'"
      >
        <TBoxDetail :deviceDetail="deviceDetail" />
      </Tabs.TabPane>
      <Tabs.TabPane
        v-if="!isGBTTransportType"
        key="eventManage"
        :tab="t('deviceManagement.device.eventManagementText')"
      >
        <EventManage :tbDeviceId="deviceDetail.tbDeviceId" />
      </Tabs.TabPane>
      <Tabs.TabPane
        v-if="!isGBTTransportType"
        key="task"
        :tab="t('deviceManagement.device.taskText')"
      >
        <Task :tbDeviceId="deviceDetail.tbDeviceId" />
      </Tabs.TabPane>
      <Tabs.TabPane
        v-if="isGBTTransportType"
        key="videoChanel"
        :tab="t('deviceManagement.device.videoChannelText')"
      >
        <VideoChannel :deviceDetail="deviceDetail" />
      </Tabs.TabPane>
    </Tabs>
  </BasicDrawer>
</template>
<script lang="ts" setup>
  import { ref, computed } from 'vue';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { Tabs, Badge } from 'ant-design-vue';
  import Detail from '../tabs/Detail.vue';
  import ChildDevice from '../tabs/ChildDevice.vue';
  import TBoxDetail from '../tabs/TBoxDetail.vue';
  import { CommandRecord } from '../tabs/commandRecord/index';
  import { getDeviceDetail } from '/@/api/device/deviceManager';
  import ModelOfMatter from '../tabs/ModelOfMatter.vue';
  import EventManage from '../tabs/EventManage/index.vue';
  import { DeviceRecord, DeviceTypeEnum } from '/@/api/device/model/deviceModel';
  import Task from '../tabs/Task.vue';
  import AlarmLog from '/@/views/alarm/log/index.vue';
  import { Icon } from '/@/components/Icon';
  import VideoChannel from '../tabs/VideoChannel/index.vue';
  import { TransportTypeEnum } from '../../../profiles/components/TransportDescript/const';
  import { useI18n } from '/@/hooks/web/useI18n';

  const { t } = useI18n();
  const emit = defineEmits(['reload', 'register', 'openTbDeviceDetail', 'openGatewayDeviceDetail']);

  const activeKey = ref('1');
  const size = ref('small');
  const deviceDetailRef = ref();
  const deviceDetail = ref<DeviceRecord>({} as unknown as DeviceRecord);

  const isGBTTransportType = ref<boolean>(false); //获取产品是不是GB/T 28181
  // 详情回显
  const [register] = useDrawerInner(async (data) => {
    const { id, transportType, deviceType } = data || {};
    isGBTTransportType.value = !!(
      transportType == TransportTypeEnum.GBT28181 && deviceType == DeviceTypeEnum.DIRECT_CONNECTION
    );

    // 设备详情
    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 });
  };

  const drawerTitle = computed(() => {
    return deviceDetail.value?.alias || deviceDetail.value?.name;
  });
</script>