<!--
  Description: 综合大屏 - 数据展示- 各分公司报警统计
  Author: 李亚光
  Date: 2024-09-18
 -->
<script lang="ts" setup name="FullScreenDeptAlarmCount">
import layout from './layout.vue'
import { deptAlarmStatistics } from '@/api/home/dashboard/fullScreen'
import BarChartHorizontal from '@/components/Echart/BarChartHorizontal.vue'
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
const $props = defineProps({
  type: {
    type: String,
    required: true,
  },
})
// 宽高
const height = ref((window.innerHeight - 100 - 50 + 20) / 3)
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 data = ref<any[]>([])
const xAxisData = ref<any[]>([])

onMounted(() => {
})
// 获取数据
const loading = ref(true)
const fetchData = () => {
  xAxisData.value = []
  data.value = []
  loading.value = true
  deptAlarmStatistics({ type: $props.type }).then((res) => {
    // console.log(res.data, '各分公司报警统计')
    xAxisData.value = []
    data.value = []
    // 整理数据
    if (!userStore.roleTips.join().includes('admin')) {
      res.data.forEach((element: any) => {
        xAxisData.value.push(element.dept)
        data.value.push(element.count)
      });
      data.value = [
        {
          name: '数量',
          data: data.value,
        },
      ]
    }
    else {
      const deptList = [
        '高压管网',
        '第一分公司',
        '第二分公司',
        '第三分公司',
        '第四分公司',
        '第五分公司',
        '怀柔有限公司',
        '密云有限公司',
        '平谷有限公司',
        '延庆有限公司',
        '昌平有限公司',
        '房山有限公司',
      ]
      // 过滤
      const needShow = res.data.filter((item: any) => deptList.filter(citem => item.dept.includes(citem)).length)
      // 排序
      const arr = [] as any[]
      deptList.forEach((item: string) => {
        const data = needShow.filter((citem: any) => citem.dept.includes(item))
        if (data.length) {
          arr.push(data[0])
        }
      })
      // console.log(arr, 'arr')
      xAxisData.value = arr.map((item: any) => item.dept)
      data.value = [
        {
          name: '数量',
          data: arr.map((item: any) => Number(item.count)),
        },
      ]
      // console.log(xAxisData.value, 'xAxisData.value')
    }
    // let need = ['一', '二', '三', '四', '五', '六', '高压']
    // result = result.filter((item: any) => item.dept.includes('分公司') && need.some((citem) => item.dept.includes(citem)))
    // if (result.length > 6) {
    //   result = result.slice(0, 6)
    // }
    // // 截取前六个排序
    // xAxisData.value = result.map((item: any) => item.dept)
    // data.value = [
    //   {
    //     name: '数量',
    //     data: ,
    //   },
    // ]
    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 class="layout" :height="height" :width="width" title="各分公司报警统计" subtitle="Alarm Statistics Of Each Company">
    <template #content>
      <div v-loading="loading">
        <bar-chart-horizontal-color :data="data" :x-axis-data="xAxisData" bar-width="10" :bar-coner="0"
          label-color="#a7ceec" :show-label="true" :style="{ width: '100%', height: `${height - 30}px` }"
          :legend="{ show: false }" font-color="#fff" />
      </div>

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