<!--
  Description: 综合大屏 - 数据展示- 设备运行态势
  Author: 李亚光
  Date: 2024-09-18
 -->
<script lang="ts" setup name="FullScreenDeviceRunStatus">
import layout from './layout.vue'
import { deviceTrendStatistics } from '@/api/home/dashboard/fullScreen'
import LineChart from '@/components/Echart/LineChart.vue'
const $props = defineProps({
  type: {
    type: String,
    required: true,
  },
})
// 宽高
const height = ref((window.innerHeight - 100 - 50) / 3)
const width = ref((window.innerWidth - (window.innerWidth * 0.6) - 30) / 2)
window.addEventListener('resize', () => {
  height.value = (window.innerHeight - 100 - 50) / 3
  width.value = (window.innerWidth - (window.innerWidth * 0.6) - 30) / 2
})
onBeforeUnmount(() => {
  window.addEventListener('resize', () => {})
})
const xAxisData = ref<any[]>([])
const data = ref<any[]>([])
onMounted(() => {
  // setTimeout(() => {
  //   xAxisData.value = [
  //     '石景山区',
  //     '海淀区',
  //     '西城区',
  //     '东城区',
  //     '朝阳区',
  //     '通州区',
  //     '昌平区',
  //   ]
  //   data.value = [
  //     {
  //       name: '运行中',
  //       data: [79, 55, 32, 76, 45, 33, 35],
  //       symbol: 'circle',
  //       color: '#0889CC',
  //     },
  //     {
  //       name: '维护中',
  //       data: [7, 4, 2, 14, 0, 2, 11],
  //       symbol: 'circle',
  //       color: '#2E6C93',
  //     },
  //   ]
  // }, 500)
})

// 获取数据
const loading = ref(true)
const fetchData = () => {
  loading.value = true
  deviceTrendStatistics({ type: $props.type }).then((res) => {
    // console.log(res.data, '设备运行态势')
    xAxisData.value = []
    data.value = []
    const data1 = [] as string[]
    const data2 = [] as string[]
    res.data.forEach((item: any) => {
      for (const i in item) {
        // console.log(i)
        xAxisData.value.push(i)
        data1.push(item[i]['1'])
        data2.push(item[i]['2'])
      }
    })
    data.value = [
      {
        name: '运行中',
        data: data1,
        symbol: 'circle',
        color: '#0889CC',
      },
      {
        name: '维护中',
        data: data2,
        symbol: 'circle',
        color: '#2E6C93',
      },
    ]
    loading.value = false
  }).catch(() => {
    loading.value = false
  })
}
watch(() => $props.type, (newVal) => {
  if (newVal) {
    fetchData()
  }
  else {
    loading.value = false
  }
}, {
  deep: true,
  immediate: true,
})
</script>

<template>
  <layout
    v-loading="loading" class="layout" :height="height" :width="width" title="设备运行态势"
    subtitle="Equipment Operation Status"
  >
    <template #content>
      <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',
          },
        }"
      />
    </template>
  </layout>
</template>

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

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