<template>
  <Card
    :tab-list="tabListTitle"
    v-bind="$attrs"
    :active-tab-key="activeKey"
    @tabChange="onTabChange"
  >
    <template #tabBarExtraContent v-if="!isAdmin(role)">
      <div class="extra-date">
        <template v-for="(item, index) in dateList" :key="item">
          <span @click="changeDate(index)" :class="{ active: index === activeIndex }">{{
            item
          }}</span>
        </template>
        <DatePicker @change="onDateChange" />
      </div>
    </template>
    <div v-if="activeKey === '1'">
      <p class="center">{{ !isAdmin(role) ? '告警数' : '租户趋势' }}</p>
      <VisitAnalysis v-if="!isAdmin(role)" :alarmList="state.alarmList" />
      <VisitAnalysisBar v-else />
    </div>
    <div v-if="activeKey === '2'">
      <p class="center">消息量</p>
      <VisitAnalysisBar :dataPointList="state.dataPointList" :messageList="state.messageList" />
    </div>
  </Card>
  <Card v-bind="$attrs" :tab-list="tab1ListTitle" v-if="isAdmin(role)">
    <p class="center">客户趋势</p>
    <VisitAnalysis
  /></Card>
</template>
<script lang="ts" setup>
  import { ref, defineExpose, reactive } from 'vue';
  import { Card, DatePicker } from 'ant-design-vue';
  import VisitAnalysis from './VisitAnalysis.vue';
  import VisitAnalysisBar from './VisitAnalysisBar.vue';
  import { defineProps } from 'vue';
  import { isAdmin } from '/@/enums/roleEnum';
  import { useWebSocket } from '@vueuse/core';
  import { getAuthCache } from '/@/utils/auth';
  import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum';

  defineExpose({
    isAdmin,
  });
  const props = defineProps<{
    role: string;
  }>();
  const activeKey = ref('1');

  // 动态根据登录角色来判断
  const tabListTitle = !isAdmin(props.role)
    ? [
        {
          key: '1',
          tab: '告警数统计',
        },
        {
          key: '2',
          tab: '消息量统计',
        },
      ]
    : [
        {
          key: '1',
          tab: '租户',
        },
      ];

  const tab1ListTitle = [
    {
      key: '1',
      tab: '客户',
    },
  ];

  const dateList = ref(['1小时', '1天', '7天', '30天']);
  // web Socket
  const token: string = getAuthCache(JWT_TOKEN_KEY);
  const sendValue = JSON.stringify({
    entityDataCmds: [
      {
        query: {
          entityFilter: {
            type: 'singleEntity',
            singleEntity: {
              id: '33782740-5d97-11ec-8ac9-f38ed935ea2a',
              entityType: 'API_USAGE_STATE',
            },
          },
          pageLink: {
            pageSize: 1024,
            page: 0,
            sortOrder: {
              key: {
                type: 'ENTITY_FIELD',
                key: 'createdTime',
              },
              direction: 'DESC',
            },
          },
          entityFields: [
            {
              type: 'ENTITY_FIELD',
              key: 'name',
            },
            {
              type: 'ENTITY_FIELD',
              key: 'label',
            },
            {
              type: 'ENTITY_FIELD',
              key: 'additionalInfo',
            },
          ],
          latestValues: [
            {
              type: 'TIME_SERIES',
              key: 'createdAlarmsCountHourly',
            },
          ],
        },
        cmdId: activeKey.value,
      },
    ],
  });
  const activeIndex = ref(0);
  const state = reactive({
    server: `${import.meta.env.VITE_WEB_SOCKET}${token}`,
    alarmList: new Array<[number, string]>(),
    alarmItem: new Array<[number, string]>(),
    dataPointList: new Array<[number, string]>(),
    messageList: new Array<[number, string]>(),
    dataPoint: new Array<[number, string]>(),
    MsgCount: new Array<[number, string]>(),
  });
  const { send, close } = useWebSocket(state.server, {
    onConnected() {
      send(sendValue);
      console.log('建立连接了');
    },
    onMessage(_, e) {
      const { data, update } = JSON.parse(e.data);
      if (activeKey.value === '1') {
        if (data) {
          const { createdAlarmsCountHourly } = data.data[0].latest.TIME_SERIES;
          state.alarmItem = [createdAlarmsCountHourly.ts, createdAlarmsCountHourly.value];
          state.alarmList.push([createdAlarmsCountHourly.ts, createdAlarmsCountHourly.value]);
        }
        if (update) {
          const { createdAlarmsCountHourly } = update[0].timeseries;
          const newArray: any = [];
          for (const item of createdAlarmsCountHourly) {
            newArray.push([item.ts, item.value]);
          }
          state.alarmList = [state.alarmItem, ...newArray];
        }
      } else {
        if (data) {
          const { transportDataPointsCountHourly, transportMsgCountHourly } =
            data.data[0].latest.TIME_SERIES;
          state.dataPoint = [
            transportDataPointsCountHourly.ts,
            transportDataPointsCountHourly.value,
          ];

          state.MsgCount = [
            transportDataPointsCountHourly.ts,
            transportDataPointsCountHourly.value,
          ];
          state.dataPointList.push([
            transportDataPointsCountHourly.ts,
            transportDataPointsCountHourly.value,
          ]);
          state.messageList.push([transportMsgCountHourly.ts, transportMsgCountHourly.value]);
        }
        if (update) {
          const { transportDataPointsCountHourly, transportMsgCountHourly } = update[0].timeseries;
          const newArray: any = [];
          const newArray1: any = [];
          for (const item of transportDataPointsCountHourly) {
            newArray.push([item.ts, item.value]);
          }
          for (const item of transportMsgCountHourly) {
            newArray1.push([item.ts, item.value]);
          }
          state.dataPointList = [state.dataPoint, ...newArray];
          state.messageList = [state.MsgCount, ...newArray1];
        }
      }
    },
    onDisconnected() {
      console.log('断开连接了');
      close();
    },
  });
  function onTabChange(key: string) {
    activeKey.value = key;
    if (key === '1') {
      const sendAlarmValue = JSON.stringify({
        entityDataCmds: [
          {
            cmdId: activeKey.value,
            historyCmd: {
              keys: ['createdAlarmsCountHourly'],
              startTs: 1638778336692,
              endTs: 1641370336692,
              interval: 43200000,
              limit: 60,
              agg: 'SUM',
            },
          },
        ],
      });
      send(sendAlarmValue);
    } else {
      const sendMessageValue = JSON.stringify({
        entityDataCmds: [
          {
            query: {
              entityFilter: {
                type: 'singleEntity',
                singleEntity: {
                  id: '33782740-5d97-11ec-8ac9-f38ed935ea2a',
                  entityType: 'API_USAGE_STATE',
                },
              },
              pageLink: {
                pageSize: 1024,
                page: 0,
                sortOrder: {
                  key: {
                    type: 'ENTITY_FIELD',
                    key: 'createdTime',
                  },
                  direction: 'DESC',
                },
              },
              entityFields: [
                {
                  type: 'ENTITY_FIELD',
                  key: 'name',
                },
                {
                  type: 'ENTITY_FIELD',
                  key: 'label',
                },
                {
                  type: 'ENTITY_FIELD',
                  key: 'additionalInfo',
                },
              ],
              latestValues: [
                {
                  type: 'TIME_SERIES',
                  key: 'transportMsgCountHourly',
                },
                {
                  type: 'TIME_SERIES',
                  key: 'transportDataPointsCountHourly',
                },
              ],
            },
            cmdId: activeKey.value,
          },
        ],
      });
      const sendMessageValue2 = JSON.stringify({
        entityDataCmds: [
          {
            cmdId: activeKey.value,
            historyCmd: {
              keys: ['transportMsgCountHourly', 'transportDataPointsCountHourly'],
              startTs: 1641283221226,
              endTs: 1641369621226,
              interval: 7200000,
              limit: 12,
              agg: 'AVG',
            },
          },
        ],
      });
      send(sendMessageValue);
      send(sendMessageValue2);
    }
  }
  function onDateChange(date, dateString) {
    console.log(date, dateString);
  }
  function changeDate(index: number) {
    activeIndex.value = index;
  }
</script>

<style scoped lang="less">
  .center {
    display: flex;
    justify-content: center;
    font-size: 16px;
  }
  .active {
    color: #0960bd;
    font-weight: 500;
  }
  .extra-date {
    display: flex;
    align-items: center;
    justify-content: space-between;
    span {
      margin-right: 20px;
      cursor: pointer;
    }
  }
</style>