<!--
  Description: 事件大屏 - 数据展示- 设备报警趋势
  Author: 李亚光
  Date: 2024-09-18
 -->
<script lang="ts" setup name="FullScreenDeviceAlarmTrend">
import layout from './layout.vue'
import { alarmTrend } from '@/api/home/dashboard/fullScreen'
// 宽高
const height = ref((window.innerHeight - 100 - 50) / 3 + 20)
const width = ref((window.innerWidth - (window.innerWidth * 0.6) - 30) / 2)
window.addEventListener('resize', () => {
  height.value = (window.innerHeight - 100 - 50 + 20) / 3
  width.value = (window.innerWidth - (window.innerWidth * 0.6) - 30) / 2
})
onBeforeUnmount(() => {
  window.addEventListener('resize', () => { })
})
const listQuery = ref({
  timeType: '2',
})
const selectTimeType = (type: string) => {
  listQuery.value.timeType = type
}
const xAxisData = ref<any[]>([])
const data = ref<any[]>([])
const loading = ref(false)

const fetchData = () => {
  loading.value = true
  alarmTrend(listQuery.value).then(res => {
    // console.log(res.data, '报警趋势')
    xAxisData.value = []
    data.value = []
    res.data.forEach((element: any) => {
      for (const i in element) {
        xAxisData.value.push(i)
        data.value.push(element[i])
      }
    });
    data.value = [
      {
        name: '报警次数',
        data: data.value,
        symbol: 'circle',
        color: '#E6271D',
      }
    ]
    loading.value = false
  })
}
watch(() => listQuery.value.timeType, (newVal) => {
  if (newVal) {
    fetchData()
  }
})
onMounted(() => {
  fetchData()
})
</script>

<template>
  <layout class="layout" :height="height" :width="width" title="设备报警趋势" subtitle="Equipment Alarm Trend">
    <template #content>
      <div class="container" v-loading="loading">
        <!-- 筛选条件 -->
        <div class="search">
          <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" style="margin: 0 5px;"
            @click="selectTimeType('2')">
            近7日
          </el-button>
          <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" style="margin: 0 5px;"
            @click="selectTimeType('3')">
            本月
          </el-button>
          <el-button :class="listQuery.timeType === '4' ? 'active' : ''" round size="small" style="margin: 0 5px;"
            @click="selectTimeType('4')">
            本年
          </el-button>
        </div>
        <line-chart :data="data" :x-axis-data="xAxisData" :style="{ width: '100%', height: `${height - 30}px` }"
          YfontColor="#fff" fontColor="#fff" axisLineType="solid" axisLineColor="rgba(255,255,255,0.4)" :legend="{
            show: true,
            // icon: 'line',
            orient: 'horizontal', // 图例方向
            align: 'left', // 图例标记和文本的对齐，默认自动
            top: 5,
            right: 20,
            itemWidth: 20,
            itemHeight: 12,
            textStyle: {
              color: '#fff',
            },
          }" />
      </div>
    </template>
  </layout>
</template>

<style lang="scss" scoped>
::v-deep(.el-loading-mask) {
  background-color: rgba($color: #0b0b0f, $alpha: 95%);
}

::v-deep(.el-button) {
  background-color: rgba($color: #103f60, $alpha: 80%);
  border-color: #856b6b;
  color: #fff;
}

.container {
  position: relative;

  .search {
    position: absolute;
    top: 5px;
    left: 10px;
    z-index: 10;
  }
}

.active {
  color: #1c3444;
  border-color: #777f8d;
  outline: none;
  font-weight: 700;
  background-color: rgba($color: #758292, $alpha: 100%);
}

// .layout {
//   ::v-deep(.title) {
//     padding-left: 8px !important;
//     color: #fff;
//     font-weight: 700;
//     // padding-left: 20px;
//     box-sizing: border-box;
//   }

//   // overflow: hidden;
// }</style>