<script setup lang="ts">



import HomeApi from "@/api/home.ts";
import type {AppServeDataResponse} from "@/interface/api/AppServeDataResponse.ts";
import type {ISystemInfoVo} from "@/interface/page/home/ISystemInfoVo.ts";
import {AppServeResponseCodeEnum} from "@/constant/enums/AppServeResponseCodeEnum.ts";
import {computed, onMounted, onUnmounted, ref} from "vue";
import {AlarmClock, Coin, Cpu, Location, Monitor, SetUp, Stopwatch, Tickets} from "@element-plus/icons-vue";
import type {ISystemEventVo} from "@/interface/page/home/ISystemEventVo.ts";
import MessageUtils from "@/utils/MessageUtils.ts";
import type {ISystemNotificationVo} from "@/interface/page/home/ISystemNotificationVo.ts";
import {useI18n} from "vue-i18n";
import ChartPie from "@/components/charts/ChartPie.vue";
import ChartBar from "@/components/charts/ChartBar.vue";
import type {IBarPieLineDataItem} from "@/model/charts/IBarPieLineDataItem.ts";
import ChartLine from "@/components/charts/ChartLine.vue";
import type {IMultilineLineDataItem} from "@/model/charts/IMultilineLineDataItem.ts";

const { t } = useI18n();
const props = defineProps(['isFull']);
const isFull = computed(() => {
  return props.isFull ?? false;
});

let interval: number | undefined = undefined;
let eventSource: EventSource | undefined = undefined;
const systemInfo = ref<ISystemInfoVo>();
const eventInfo = ref<ISystemEventVo[]>([{
  eventTime: '-',
  eventMsg: '欢迎使用仓库控制系统'
}]); // 事件日志显示

const queryData = () => {
  querySystemInfo(); // 查询系统信息
  queryStockUsage(); // 查询库存使用率
  queryStockInOut(); // 获取今日出入库数量
  queryStockErrorDay7(); // 查询近七天设备故障数量
  queryStockInOutDay7(); // 获取近七天出入库数量
};

// 查询系统信息
const querySystemInfo = () => {
  HomeApi.queryServeData().then(res => {
    const stringify = JSON.stringify(res.data);
    const response = JSON.parse(stringify) as AppServeDataResponse<ISystemInfoVo>;
    if(response && response.code == AppServeResponseCodeEnum.SUCCESS && response.data != undefined) {
      systemInfo.value = response.data;
      return;
    }
    console.log(res);
  }).catch(() => {});
};

// 查询库存占用率
const queryStockUsage = () => {
  HomeApi.queryStockOccupancyRate().then(res => {
    const response = JSON.parse(JSON.stringify(res.data)) as AppServeDataResponse<IBarPieLineDataItem[]>;
    if(response && response.code == AppServeResponseCodeEnum.SUCCESS && response.data != undefined) {
      setStockUsageChartOptionData(response.data);
      return;
    }
    console.log(res);
  }).catch(() => {});
};

// 查询库存出入库数量
const queryStockInOut = () => {
  HomeApi.queryTodayInOutStock().then(res => {
    const response = JSON.parse(JSON.stringify(res.data)) as AppServeDataResponse<IBarPieLineDataItem[]>;
    if(response && response.code == AppServeResponseCodeEnum.SUCCESS && response.data != undefined) {
      setTodayStockInOutChartOptionData(response.data);
      return;
    }
    console.log(res);
  }).catch(() => {});
};

// 查询七日设备故障数量
const queryStockErrorDay7 = () => {
  HomeApi.querySevenDaysDeviceFailure().then(res => {
    const response = JSON.parse(JSON.stringify(res.data)) as AppServeDataResponse<IBarPieLineDataItem[]>;
    if(response && response.code == AppServeResponseCodeEnum.SUCCESS && response.data != undefined) {
      setStockErrorLineChartOptionData(response.data);
      return;
    }
    console.log(res);
  }).catch(() => {});
};

// 查询近七日出入库数量
const queryStockInOutDay7 = () => {
  HomeApi.querySevenDaysInOutStock().then(res => {
    const response = JSON.parse(JSON.stringify(res.data)) as AppServeDataResponse<IMultilineLineDataItem>;
    if(response && response.code == AppServeResponseCodeEnum.SUCCESS && response.data != undefined) {
      setStockInOutLineChartOptionData(response.data);
      return;
    }
    console.log(res);
  }).catch(() => {});
}


// 创建连接 --- 已经弃用
const createConnect = () => {
  if(eventSource) {
    eventSource.close();
  }
  eventSource = HomeApi.createNoticeConnect();
  eventSource.onmessage = (event) => {
    console.log('SSE接收到数据：' + event.data);
  };
  eventSource.onopen = () => {
    console.log('SSE连接成功');
  };
  eventSource.onerror = () => {
    console.log('SSE连接失败或者断开连接');
  };
  eventSource.addEventListener('RUNNING_INFO', (event) => {
    const response = JSON.parse(event.data) as ISystemEventVo;
    if(eventInfo.value.length > 500) {
      eventInfo.value.pop();
    }
    eventInfo.value.unshift({
      eventTime: response.eventTime ?? '-',
      eventMsg: response.eventMsg ?? '-'
    });
  });
  eventSource.addEventListener('SYSTEM_INFO', (event) => {
    const response = JSON.parse(event.data) as ISystemNotificationVo;
    MessageUtils.showNotification(response.title ?? '-', response.message ?? '-', response.type ?? 'info', response.duration ?? 3000);
  });
}


onMounted(() => {
  queryData();
  interval = setInterval(() => {
    queryData();
  }, 3000);
  //createConnect(); // 创建SSE连接
  console.log('主页组件已经挂载');
});

onUnmounted(() => {
  if(interval) {
    clearInterval(interval);
  }
  // eventSource?.close();
});

// 设置仓库利用率饼图数据
const setStockUsageChartOptionData = (data: IBarPieLineDataItem[]) => {
  stockUsageChartOption.value.series[0].data = data;
};
// 设置今日出入库数量柱状图数据
const setTodayStockInOutChartOptionData = (data: IBarPieLineDataItem[]) => {
  let xName = [];
  let yData = [];
  for (let i = 0; i < data.length; i++) {
    xName.push(data[i].name);
    yData.push(data[i].value);
  }
  stockInOutChartOption.value.xAxis.data = xName;
  stockInOutChartOption.value.series[0].data = yData;
};
// 设置近七日设备故障折线图数据
const setStockErrorLineChartOptionData = (data: IBarPieLineDataItem[]) => {
  let xName = [];
  let yData = [];
  for (let i = 0; i < data.length; i++) {
    xName.push(data[i].name);
    yData.push(data[i].value);
  }
  stockErrorLineChartOption.value.xAxis.data = xName.reverse();
  stockErrorLineChartOption.value.series[0].data = yData.reverse();
};
// 设置近七天出入库数量折线图数据
const setStockInOutLineChartOptionData = (data: IMultilineLineDataItem) => {
  let xName = [];
  for (let i = 0; i < data.xDataList.length; i++) {
    xName.push(data.xDataList[i]);
  }
  const yDataList = data.yDataList;
  let yData = [];
  for (let i = 0; i < yDataList.length; i++) {
    const item = {
      name: yDataList[i].name,
      data: yDataList[i].data.reverse(),
      type: 'line',
      smooth: true,
    };
    yData.push(item);
  }
  stockInOutLineChartOptionDays7.value.xAxis.data = xName.reverse();
  stockInOutLineChartOptionDays7.value.series = yData;
};






// 仓库使用率配置
const stockUsageChartOption = ref({
  title: {
    text: '仓库使用率',
    textStyle: {fontSize: 12}
  },
  color: ['#67c817', '#f5a407'],
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/> {b}: {c} ({d}%)'
  },
  legend: {orient: 'vertical', left: 'left'},
  label: {
    show: true,
    formatter: '{b} \n{d}%'
  },
  series: [
    {
      name: '仓库使用率', type: 'pie', radius: '50%',
      labelLine: {
        length: 5, // 第一段指示线长度
        length2: 8 // 第二段指示线长度
      },
      data: [
        {name: '占用', value: 1000 },
        {name: '空闲', value: 800 },
      ]
    }
  ]
});
// 今日出入库数量柱状图配置
const stockInOutChartOption = ref({
  title: {
    text: '今日出入库数量',
    textStyle: {fontSize: 12}
  },
  tooltip: {trigger: 'item'},
  legend: {orient: 'vertical', left: 'left'},
  xAxis: {
    type: 'category',
    data: ['入库', '出库', "移库"]
  },
  yAxis: {type: 'value'},
  series: [
    {
      data: [1000, 800, 400],
      type: 'bar'
    }
  ]
});
// 近七日设备故障折线图配置
const stockErrorLineChartOption = ref({
  title: {
    text: '近七日设备故障数量折线图',
    textStyle: {fontSize: 12}
  },
  tooltip: {formatter: '({b}) {c}'},
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {type: 'value'},
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true
    }
  ]
});
// 七日出入库数量
const stockInOutLineChartOptionDays7 = ref({
  title: {
    text: '近七日出入库数量折线图',
    textStyle: {fontSize: 12}
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {orient: 'horizontal', left: 'left'},
  xAxis: {
    type: 'category',
    data: ['1-1', '1-2', '1-3', '1-4', '1-5', '1-6', '1-7']
  },
  yAxis: {type: 'value'},
  series: [
    {
      data: [82, 93, 90, 93, 129, 133, 132],
      type: 'line',
      smooth: true,
      name: '入库数量'
    },
    {
      data: [92, 69, 70, 102, 89, 120, 170],
      type: 'line',
      smooth: true,
      name: '出库数量'
    },
    {
      data: [24, 12, 13, 32, 11, 21, 32],
      type: 'line',
      smooth: true,
      name: '移库数量'
    }
  ]
});

</script>

<template>
  <div :style="{marginLeft: '10px',marginTop: '10px', width: isFull ? 'calc(100vw - 20px)' : 'calc(100vw - 280px)' }">
<!--    系统基本资料-->
    <el-card style="margin-top: 10px">
      <el-descriptions class="margin-top" :column="3" size="default" border>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item"><el-icon style="translate: 0 2px; margin-right: 5px"><AlarmClock /></el-icon>{{ t('mainPage.systemRunningTime') + ':'}}</div>
          </template>
          {{systemInfo?.systemRunningTime ?? "-"}}
        </el-descriptions-item>
        <el-descriptions-item>
        <template #label>
          <div class="cell-item"><el-icon style="translate: 0 2px; margin-right: 5px"><Cpu /></el-icon>{{ t('mainPage.cpuUsage') + ':'}}</div>
        </template>
        {{systemInfo?.cpuData?.totalUseRatio ?? "-"}}%
      </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item"><el-icon style="translate: 0 2px; margin-right: 5px"><Coin /></el-icon>{{ t('mainPage.memoryUsageSize') + ':'}}</div>
          </template>
          {{systemInfo?.memoryData?.used ?? "-"}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item"><el-icon style="translate: 0 2px; margin-right: 5px"><Stopwatch /></el-icon>{{ t('mainPage.memoryUsage') + ':'}}</div>
          </template>
          {{systemInfo?.memoryData?.usage ?? "-"}}%
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item"><el-icon style="translate: 0 2px; margin-right: 5px"><Monitor /></el-icon>{{ t('mainPage.serverName') + ':'}}</div>
          </template>
          {{systemInfo?.serveData?.serveName ?? "-"}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item"><el-icon style="translate: 0 2px; margin-right: 5px"><Tickets /></el-icon>{{ t('mainPage.serverSystemName') + ':'}}</div>
          </template>
          {{systemInfo?.serveData?.systemName ?? "-"}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item"><el-icon style="translate: 0 2px; margin-right: 5px"><Location /></el-icon>{{ t('mainPage.serverIp') + ':'}}</div>
          </template>
          {{systemInfo?.serveData?.serveIp ?? "-"}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item"><el-icon style="translate: 0 2px; margin-right: 5px"><SetUp /></el-icon>{{ t('mainPage.serverSystemVersion') + ':'}}</div>
          </template>
          {{systemInfo?.serveData?.systemVersion ?? "-"}}
        </el-descriptions-item>

      </el-descriptions>
    </el-card>
    <el-card style="margin-top: 10px;">
      <el-scrollbar>
        <el-row style="width: calc(100vw - 330px)">
          <el-col :span="6">
            <el-scrollbar>
              <ChartPie style="width: 300px; height: calc(300px - 40px)" :option="stockUsageChartOption" />
            </el-scrollbar>
          </el-col>
          <el-col :span="6">
            <el-scrollbar>
              <ChartBar style="width: 300px; height: calc(300px - 40px)" :option="stockInOutChartOption" />
            </el-scrollbar>
          </el-col>
          <el-col :span="6">
            <el-scrollbar>
              <ChartLine :key="1" style="width: 350px; height: calc(300px - 40px)" :option="stockErrorLineChartOption" />
            </el-scrollbar>
          </el-col>
          <el-col :span="6">
            <el-scrollbar>
              <ChartLine :key="2" style="width: 300px; height: calc(300px - 40px)" :option="stockInOutLineChartOptionDays7" />
            </el-scrollbar>
          </el-col>
        </el-row>
      </el-scrollbar>
    </el-card>
<!--    <el-card style="margin-top: 10px; height: calc(100vh - 200px)">-->
<!--      <el-table :data="eventInfo" stripe border style="width: 100%" height="calc(100vh - 240px)">-->
<!--        <el-table-column prop="eventTime" label="时间" width="180" align="center"/>-->
<!--        <el-table-column prop="eventMsg" label="内容" show-overflow-tooltip/>-->
<!--      </el-table>-->
<!--    </el-card>-->
  </div>
</template>

<style scoped>

</style>