<!--
  Description: 事件大屏 - 数据展示- 累计报警统计
  Author: 李亚光
  Date: 2024-09-18
 -->
<script lang="ts" setup name="FullScreenAccumulatedAlarmStatistics">
import layout from './layout.vue'
// 宽高
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
})
const listQuery = ref({
  timeType: '1',
})
const selectTimeType = (type: string) => {
  listQuery.value.timeType = type
}
const data = ref<any[]>([])
const xAxisData = ref<any[]>([])

onMounted(() => {
  setTimeout(() => {
    data.value = [1212, 598, 449, 1387]
    xAxisData.value = ['高压管线', '次高压管线', '中压管线', '低压管线']
    console.log(3000)
  }, 3000)
})
</script>

<template>
  <layout class="layout" :height="height" :width="width" title="累计报警统计" subtitle="Accumulated Alarm Statistics">
    <template #content>
      <div class="container">
        <!-- 筛选条件 -->
        <div class="search">
          <el-button
            :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" style="margin: 0 5px;"
            @click="selectTimeType('1')"
          >
            近7日
          </el-button>
          <el-button
            :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" style="margin: 0 5px;"
            @click="selectTimeType('2')"
          >
            本月
          </el-button>
          <el-button
            :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" style="margin: 0 5px;"
            @click="selectTimeType('3')"
          >
            本年
          </el-button>
        </div>
        <bar-chart3-d :x-axis-data="xAxisData" :data="data" :style="{ width: '100%', height: `${height - 30}px` }" />
      </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: #fff;
  color: #fff;
}

.container {
  position: relative;

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

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

  // overflow: hidden;
}

.active {
  color: #3d7eff;
  border-color: #e6ebf5;
  outline: none;
  background-color: rgba($color: #98a7bb, $alpha: 80%);
}
</style>