<script setup lang="ts">
import { detailDeviceApi, probeDeviceApi, type NdmDeviceResultVO } from '@/apis';
import { DeviceType, DeviceTypeName, tryGetDeviceTypeVal, type DeviceTypeVal } from '@/enums';
import { useDeviceStore } from '@/stores';
import { useMutation } from '@tanstack/vue-query';
import { ApiOutlined, ReloadOutlined } from '@vicons/antd';
import { NButton, NCard, NFlex, NIcon, NTag, NTooltip } from 'naive-ui';
import { computed, toRefs } from 'vue';

const props = defineProps<{
  stationCode: string;
  device: NdmDeviceResultVO;
}>();

// const emit = defineEmits<{}>();

const { stationCode, device } = toRefs(props);

const type = computed(() => {
  const deviceTypeVal = tryGetDeviceTypeVal(device.value.deviceType);
  if (!deviceTypeVal) return '-';
  return DeviceTypeName[deviceTypeVal];
});
const name = computed(() => device.value.name ?? '-');
const ipAddr = computed(() => device.value.ipAddress ?? '-');
const gbCode = computed(() => Reflect.get(device.value, 'gbCode') as string | undefined);
const status = computed(() => device.value.deviceStatus);

const canOpenMgmtPage = computed(() => {
  const mgmtableDeviceTypes: DeviceTypeVal[] = [DeviceType['Camera'], DeviceType['Decoder'], DeviceType['Switch']];
  const deviceTypeVal = tryGetDeviceTypeVal(device.value.deviceType);
  return deviceTypeVal && mgmtableDeviceTypes.includes(deviceTypeVal);
});

const onClickOpenMgmtPage = () => {
  if (canOpenMgmtPage.value) {
    const ipAddress = device.value.ipAddress;
    if (ipAddress) {
      const targetUrl = `http://${ipAddress}`;
      window.open(targetUrl, '_blank');
    } else {
      window.$message.warning('未找到设备IP地址');
    }
  }
};

const canProbe = computed(() => device.value.snmpEnabled);

const { mutate: probeDevice, isPending: probing } = useMutation({
  mutationFn: async () => {
    await probeDeviceApi(device.value, { stationCode: stationCode.value });
  },
  onError: (error) => {
    console.error(error);
    window.$message.error(error.message);
  },
});

const { mutate: getDeviceDetail, isPending: loading } = useMutation({
  mutationFn: async () => {
    return await detailDeviceApi(device.value, { stationCode: stationCode.value });
  },
  onSuccess: (device) => {
    if (device) {
      useDeviceStore().patch(stationCode.value, device);
    }
  },
  onError: (error) => {
    console.error(error);
    window.$message.error(error.message);
  },
});
</script>

<template>
  <NCard size="small" hoverable>
    <template #header>
      <NFlex :align="'center'">
        <NTag v-if="status === '10'" size="small" type="success">在线</NTag>
        <NTag v-else-if="status === '20'" size="small" type="error">离线</NTag>
        <NTag v-else size="small" type="warning">未知</NTag>
        <div>{{ name }}</div>
        <NButton v-if="canOpenMgmtPage" ghost size="tiny" type="default" :focusable="false" @click="onClickOpenMgmtPage">管理</NButton>
      </NFlex>
    </template>
    <template #default>
      <div style="font-size: small; color: #666">
        <div>
          <span>设备类型：</span>
          <span>{{ type }}</span>
        </div>
        <div>
          <span>IP地址：</span>
          <span>{{ ipAddr }}</span>
        </div>
        <div v-if="gbCode">
          <span>国标编码：</span>
          <span>{{ gbCode }}</span>
        </div>
        <!-- <div>
          <span>上游设备：</span>
          <span>{{ device.linkDescription ?? '暂无' }}</span>
        </div> -->
        <div v-if="device.snmpEnabled">
          <span>上次诊断时间：</span>
          <span>{{ device.lastDiagTime ?? '暂无' }}</span>
        </div>
      </div>
    </template>
    <template #header-extra>
      <NTooltip v-if="canProbe" trigger="hover">
        <template #trigger>
          <NButton size="small" quaternary circle :loading="probing" @click="() => probeDevice()">
            <template #icon>
              <NIcon :component="ApiOutlined" />
            </template>
          </NButton>
        </template>
        <template #default>
          <span>获取最新诊断</span>
        </template>
      </NTooltip>
      <NTooltip trigger="hover">
        <template #trigger>
          <NButton size="small" quaternary circle :loading="loading" @click="() => getDeviceDetail()">
            <template #icon>
              <NIcon :component="ReloadOutlined" />
            </template>
          </NButton>
        </template>
        <template #default>
          <span>刷新设备</span>
        </template>
      </NTooltip>
    </template>
  </NCard>
</template>

<style scoped lang="scss"></style>
