<template>
  <Card
    :tab-list="tabListTitle"
    v-bind="$attrs"
    :active-tab-key="activeKey"
    @tabChange="onTabChange"
    v-if="!isAdmin(role)"
  >
    <template #alarm>
      <div>告警数统计</div>
    </template>
    <template #tabBarExtraContent>
      <div class="extra-date">
        <Tooltip overlay-class-name="!max-w-80 w-80">
          <template #title>
            <div> 30天: 查询最近30天的数据,间隔时间为1天.</div>
            <div>7天: 查询最近7天的数据,间隔时间为2小时.</div>
            <div>1天: 查询最近1天的数据,间隔时间为30分钟.</div>
            <div>1小时: 查询最近1小时的数据,间隔时间为5分钟.</div>
            <div>
              间隔时间:
              <span class="font-bold underline">以当前时间作为结束时间</span>
              ,往前推移对应天数或小时的时间作为开始时间,然后在此时间区间内进行分组聚合查询.
            </div>
          </template>
          <QuestionCircleOutlined class="!mr-1" />
        </Tooltip>
        <template v-for="(item, index) in dateList" :key="item.value">
          <span
            @click="
              quickQueryDate(index, item.value, role === RoleEnum.CUSTOMER_USER, item.interval)
            "
            :class="{ active: index === activeIndex }"
            >{{ item.label }}</span
          >
        </template>
        <DatePicker
          @change="(_, DateString) => onDateChange(_, DateString, role === RoleEnum.CUSTOMER_USER)"
          v-model:value="dateValue"
        >
          <Button
            type="link"
            class="!px-0"
            :style="dateValue ? { color: '#0960bd', fontWeight: 500 } : { color: '#000000d9' }"
          >
            {{ dateValue ? (dateValue as moment.Moment).format('YYYY-MM-DD') : '自定义' }}
          </Button>
        </DatePicker>
      </div>
    </template>
    <div v-if="activeKey === '1'">
      <!-- 折线图 -->
      <CustomerAlarmMessage
        v-if="role === 'CUSTOMER_USER'"
        type="CUSTOMER_ALARM_STATISTICAL"
        :customerList="customerAlarmList"
      />
      <VisitAnalysis v-else :alarmList="state.alarmList" />
    </div>
    <div v-if="activeKey === '2'">
      <!-- 柱形图 -->
      <CustomerAlarmMessage
        v-if="role === 'CUSTOMER_USER'"
        type="CUSTOMER_MESSAGE_STATISTICAL"
        :customerList="customerMessageList"
      />
      <VisitAnalysisBar
        v-else
        :dataPointList="state.dataPointList"
        :messageList="state.messageList"
      />
    </div>
  </Card>
  <div v-if="isAdmin(role)">
    <!-- <Card
      v-bind="$attrs"
      title="租户趋势"
      style="height: 26.75rem"
      :bodyStyle="{ padding: '0 24px' }"
    >
      <template #extra>
        <div class="extra-date">
          <template v-for="(item, index) in TenantOrCustomerDateList" :key="item.value">
            <span
              @click="quickQueryTenantOrCustomerTime(index, item.value, 'tenant')"
              :class="{ active: index === activeTenantIndex }"
              >{{ item.label }}</span
            >
          </template>
          <DatePicker.RangePicker
            @change="onDateTenantChange"
            size="small"
            v-model:value="tenantDateValue"
          />
        </div>
      </template>
      <TenantTrend :tenantTrendList="tenantTrendList" />
    </Card> -->
    <Card
      v-bind="$attrs"
      title="客户趋势"
      style="height: 26.75rem"
      :bodyStyle="{ padding: '0 24px' }"
    >
      <template #extra>
        <div class="extra-date">
          <Tooltip :overlayStyle="{ maxWidth: '340px' }">
            <template #title>
              <section>
                <div>最近一个月: 查询最近一个月的数据,间隔时间为1天.</div>
                <div>最近三个月: 查询最近三个月的数据,间隔时间为1天.</div>
                <div>最近一年: 查询最近一年的数据,间隔时间为1月.</div>
                <div>
                  间隔时间:
                  <span class="font-bold underline"> 以当天的(最后时间)作为结束时间 </span>
                  ,往前推移对应天数或月的时间作为开始时间,然后在此时间区间内进行分组聚合查询.
                </div>
              </section>
            </template>
            <QuestionCircleOutlined class="!mr-2 cursor-pointer" />
          </Tooltip>
          <template v-for="(item, index) in TenantOrCustomerDateList" :key="item.value">
            <span
              @click="quickQueryTenantOrCustomerTime(index, item.value)"
              :class="{ active: index === activeCustomerIndex }"
              >{{ item.label }}</span
            >
          </template>
          <DatePicker.RangePicker
            @change="onDateCustomerChange"
            :disabledDate="handleDisableDate"
            @calendarChange="handleCalendarChange"
            size="small"
            v-model:value="customerDateValue"
            :showTime="{
              defaultValue: [dateUtil('00:00:00', 'HH:mm:ss'), dateUtil('23:59:59', 'HH:mm:ss')],
            }"
          >
            <Button
              type="link"
              class="!px-0"
              :style="
                customerDateValue && customerDateValue.length
                  ? { color: '#0960bd', fontWeight: 500 }
                  : { color: '#000000d9' }
              "
              >{{
                customerDateValue && customerDateValue.length
                  ? `${(customerDateValue?.[0] as moment.Moment)?.format('YYYY-MM-DD')}
                ~
                ${(customerDateValue?.[1] as moment.Moment)?.format('YYYY-MM-DD')}`
                  : '自定义'
              }}</Button
            >
          </DatePicker.RangePicker>
        </div>
      </template>
      <CustomerTrend :customerTrendList="customerTrendList" />
    </Card>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, unref } from 'vue';
  import { Card, DatePicker, Tooltip, Button } from 'ant-design-vue';
  import VisitAnalysis from './VisitAnalysis.vue';
  import VisitAnalysisBar from './VisitAnalysisBar.vue';
  import { RoleEnum, isAdmin } from '/@/enums/roleEnum';
  import { useWebSocket } from '@vueuse/core';
  import { getAuthCache } from '/@/utils/auth';
  import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum';
  import { dateUtil, formatToDateTime } from '/@/utils/dateUtil';
  import CustomerTrend from './CustomerTrend.vue';
  // import TenantTrend from './TenantTrend.vue';
  import CustomerAlarmMessage from './CustomerAlarmMessage.vue';
  import { useDate } from '../hooks/useDate';
  import { getTrendData } from '/@/api/dashboard';
  import { useGlobSetting } from '/@/hooks/setting';
  import { QuestionCircleOutlined } from '@ant-design/icons-vue';
  import { RangePickerValue } from 'ant-design-vue/lib/date-picker/interface';

  defineExpose({
    isAdmin,
  });
  const props = defineProps<{
    role: string;
  }>();
  const activeKey = ref('1');
  let entityId = null;
  // 图表tab切换选项卡 1965 1280 1861 836
  const tabListTitle = [
    {
      key: '1',
      slots: { tab: 'alarm' },
    },
    // {
    //   key: '2',
    //   tab: '消息量统计',
    // },
  ];
  // 快速选择日期
  const activeIndex = ref(3);
  const dateValue = ref();
  const dateList = ref([
    { label: '1小时', value: 1000 * 60 * 60, interval: 1000 * 60 * 5 },
    { label: '1天', value: 1000 * 60 * 60 * 24, interval: 1000 * 60 * 30 },
    { label: '7天', value: 1000 * 60 * 60 * 24 * 7, interval: 1000 * 60 * 60 * 2 },
    { label: '30天', value: 1000 * 60 * 60 * 24 * 30, interval: 1000 * 60 * 60 * 24 },
  ]);

  // web Socket
  const token: string = getAuthCache(JWT_TOKEN_KEY);
  const { socketUrl } = useGlobSetting();
  const state = reactive({
    server: `${socketUrl}${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, {
    async onConnected() {
      if (isAdmin(props.role)) return;
      let content =
        JSON.parse(window.localStorage.getItem('entityId')) ||
        JSON.parse(window.sessionStorage.getItem('entityId'));
      entityId = content;
      const sendValue = JSON.stringify({
        entityDataCmds: [
          {
            query: {
              entityFilter: {
                type: 'singleEntity',
                singleEntity: entityId,
              },
              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 sendValue1 = JSON.stringify({
        entityDataCmds: [
          {
            cmdId: activeKey.value,
            historyCmd: {
              keys: ['createdAlarmsCountHourly'],
              startTs: Date.now() - 2592000000,
              endTs: Date.now(),
              interval: 86400000,
              agg: 'SUM',
            },
          },
        ],
      });
      send(sendValue);
      send(sendValue1);
    },
    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 = 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 = newArray;
          state.messageList = newArray1;
        }
      }
    },
    onDisconnected() {
      close();
    },
  });

  // 切换tab页
  function onTabChange(key: string) {
    activeKey.value = key;
    activeIndex.value = 3;
    dateValue.value = '';
    const sendValue = JSON.stringify({
      entityDataCmds: [
        {
          cmdId: activeKey.value,
          historyCmd: {
            keys:
              activeKey.value === '1'
                ? ['createdAlarmsCountHourly']
                : ['transportMsgCountHourly', 'transportDataPointsCountHourly'],
            startTs: Date.now() - 2592000000,
            endTs: Date.now(),
            interval: 86400000,
            agg: 'SUM',
          },
        },
      ],
    });
    if (key === '2') {
      const sendMessageValue = JSON.stringify({
        entityDataCmds: [
          {
            query: {
              entityFilter: {
                type: 'singleEntity',
                singleEntity: entityId,
              },
              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,
          },
        ],
      });
      send(sendMessageValue);
    }
    send(sendValue);
  }
  // 选择日期
  async function onDateChange(_, dateString, isCustomer: boolean) {
    activeIndex.value = -1;
    const dateTime = Number(formatToDateTime(dateString, 'x'));
    if (!dateString) return;
    if (isCustomer) {
      if (activeKey.value === '1') {
        const data = await getTrendData({
          startTs: dateTime,
          endTs: dateTime + 86400000,
          interval: 1000 * 60 * 30,
          trend: 'CUSTOMER_ALARM_STATISTICAL',
        });
        customerAlarmList.value = data;
      } else if (activeKey.value === '2') {
        const data = await getTrendData({
          startTs: dateTime,
          endTs: dateTime + 86400000,
          interval: 1000 * 60 * 30,
          trend: 'CUSTOMER_MESSAGE_STATISTICAL',
        });
        customerMessageList.value = data;
      }
    } else {
      // 动态发送ws数据
      const sendValue = JSON.stringify({
        entityDataCmds: [
          {
            cmdId: activeKey.value,
            historyCmd: {
              keys:
                activeKey.value === '1'
                  ? ['createdAlarmsCountHourly']
                  : ['transportMsgCountHourly', 'transportDataPointsCountHourly'],
              startTs: dateTime,
              endTs: dateTime + 86400000,
              interval: 1000 * 60 * 30,
              limit: 12,
              agg: 'SUM',
            },
          },
        ],
      });
      send(sendValue);
    }
  }
  const customerAlarmList = ref([]);
  const customerMessageList = ref([]);
  // 快速选择时间
  async function quickQueryDate(
    index: number,
    value: number,
    isCustomer: boolean,
    interval: number
  ) {
    if (activeIndex.value === index) return;
    activeIndex.value = index;
    dateValue.value = '';
    if (isCustomer) {
      if (activeKey.value === '1') {
        const data = await getTrendData({
          startTs: Date.now() - value,
          endTs: Date.now(),
          interval,
          trend: 'CUSTOMER_ALARM_STATISTICAL',
        });
        customerAlarmList.value = data;
      } else if (activeKey.value === '2') {
        const data = await getTrendData({
          startTs: Date.now() - value,
          endTs: Date.now(),
          interval,
          trend: 'CUSTOMER_MESSAGE_STATISTICAL',
        });
        customerMessageList.value = data;
      }
    } else {
      // 动态发送ws数据
      const sendValue = JSON.stringify({
        entityDataCmds: [
          {
            cmdId: activeKey.value,
            historyCmd: {
              keys:
                activeKey.value === '1'
                  ? ['createdAlarmsCountHourly']
                  : ['transportMsgCountHourly', 'transportDataPointsCountHourly'],
              startTs: Date.now() - value,
              endTs: Date.now(),
              interval,
              agg: 'SUM',
            },
          },
        ],
      });
      send(sendValue);
    }
  }
  const {
    // tenantDateValue,
    customerDateValue,
    // tenantTrendList,
    customerTrendList,
    // activeTenantIndex,
    activeCustomerIndex,
    TenantOrCustomerDateList,
    quickQueryTenantOrCustomerTime,
    // onDateTenantChange,
    onDateCustomerChange,
  } = useDate();

  const handleCalendarChange = (val: RangePickerValue) => {
    customerDateValue.value = val as any;
  };

  const handleDisableDate = (current: moment.Moment) => {
    if (!current) return true;
    if (!unref(customerDateValue) || unref(customerDateValue).length === 0) {
      return false;
    }
    const diffDate = current.diff(unref(customerDateValue)[0], 'days');
    return Math.abs(diffDate) > 30;
  };
</script>

<style 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>