<!--
  Description: 报警统计-各单位报警统计
  Author: 李亚光
  Date: 2023-07-09
 -->
<script lang="ts" setup name="AlarmCount">
import layout from './layout.vue'
import { getAlarmCompany, getAlarmTypeList } from '@/api/home/alarm/count'
import { shortcuts } from '@/utils/common'
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
const alarmType = ref<any[]>([])
const listQuery = ref({
  begTime: '',
  endTime: '',
  ledgerType: '',
  timeType: '1',
})
const selectTimeType = (type: string) => {
  listQuery.value.timeType = type
}
// 开始结束时间
const datetimerange = ref()
watch(() => datetimerange.value, (newVal) => {
  listQuery.value.begTime = ''
  listQuery.value.endTime = ''
  if (Array.isArray(newVal)) {
    if (newVal.length) {
      listQuery.value.begTime = `${newVal[0]}`
      listQuery.value.endTime = `${newVal[1]}`
    }
  }
})
// 类别
const ledgerTypeList = ref<{ id: string; name: string; value: string }[]>([
  {
    name: '闸井',
    id: '1',
    value: '1',
  },
  {
    name: '场站',
    id: '2',
    value: '2',
  },
  {
    name: '管线',
    id: '3',
    value: '3',
  },
])
const columns = ref<any[]>([
])
const xAxisData = ref([])
const data = ref<any[]>([])
const list = ref([])
const loading = ref(true)
const resizePage = () => {
  setTimeout(() => {
    const resize = new Event('resize')
    window.dispatchEvent(resize)
  })
}

const fetchData = () => {
  loading.value = true
  getAlarmCompany(listQuery.value).then((res) => {
    if (!res.data.length) {
      xAxisData.value = []
      list.value = []
      loading.value = false
      return
    }
    if (!userStore.roleTips.join().includes('admin')) {
      xAxisData.value = res.data.map((item: any) => item.dept)
      list.value = res.data
    }
    else {
      const deptList = [
        '高压管网',
        '第一分公司',
        '第二分公司',
        '第三分公司',
        '第四分公司',
        '第五分公司',
        '怀柔有限公司',
        '密云有限公司',
        '平谷有限公司',
        '延庆有限公司',
        '昌平有限公司',
        '房山有限公司',
      ]
      // 过滤
      list.value = res.data.filter((item: any) => deptList.filter(citem => item.dept.includes(citem)).length)
      // 排序
      const arr = [] as any[]
      deptList.forEach((item: string) => {
        const data = list.value.filter((citem: any) => citem.dept.includes(item))
        if (data.length) {
          arr.push(data[0])
        }
      })
      // console.log(arr, 'arr')
      list.value = arr
      xAxisData.value = list.value.map((item: any) => item.dept)
    }

    const objArr = []
    let ledgerTypeArr = []
    if (!listQuery.value.ledgerType) {
      for (const i in list.value[0]) {
        if (i !== 'dept') {
          objArr.push(i)
        }
      }
    }
    else if (listQuery.value.ledgerType === '1') {
      ledgerTypeArr = alarmType.value.filter((item: any) => item.watchObject === '1').map((item: any) => item.alarmName)
      for (const i in list.value[0]) {
        if (i !== 'dept' && ledgerTypeArr.includes(i)) {
          objArr.push(i)
        }
      }
    }
    else if (listQuery.value.ledgerType === '2') {
      ledgerTypeArr = alarmType.value.filter((item: any) => item.watchObject === '2').map((item: any) => item.alarmName)
      for (const i in list.value[0]) {
        if (i !== 'dept' && ledgerTypeArr.includes(i)) {
          objArr.push(i)
        }
      }
    }
    else if (listQuery.value.ledgerType === '3') {
      ledgerTypeArr = alarmType.value.filter((item: any) => item.watchObject === '3').map((item: any) => item.alarmName)
      for (const i in list.value[0]) {
        if (i !== 'dept' && ledgerTypeArr.includes(i)) {
          objArr.push(i)
        }
      }
    }
    data.value = objArr.map((item: any) => ({
      name: item,
      data: list.value.map((citem: any) => citem[item]),
    }))
    columns.value = objArr.map((item: any) => ({
      text: item,
      value: item,
      width: 120
    }))
    // if (!listQuery.value.ledgerType) {
    //   data.value = [
    //     {
    //       name: '闸井浓度超限',
    //       data: res.data.map((item: any) => item['闸井浓度超限']),
    //     },
    //     {
    //       name: '场站浓度超限',
    //       data: res.data.map((item: any) => item['场站浓度超限']),
    //     },
    //     {
    //       name: '管线浓度超限',
    //       data: res.data.map((item: any) => item['管线浓度超限']),
    //     },
    //   ]
    // }
    // else if (listQuery.value.ledgerType === '1') {
    //   data.value = [
    //     {
    //       name: '闸井浓度超限',
    //       data: res.data.map((item: any) => item['闸井浓度超限']),
    //     },
    //   ]
    // }
    // else if (listQuery.value.ledgerType === '2') {
    //   data.value = [
    //     {
    //       name: '场站浓度超限',
    //       data: res.data.map((item: any) => item['场站浓度超限']),
    //     },
    //   ]
    // }
    // else if (listQuery.value.ledgerType === '3') {
    //   data.value = [
    //     {
    //       name: '管线浓度超限',
    //       data: res.data.map((item: any) => item['管线浓度超限']),
    //     },
    //   ]
    // }

    // .map((item: any) => ({
    //   dept: item.dept,
    //   well: item['闸井浓度超限'],
    //   station: item['场站浓度超限'],
    //   pipeline: item['管线浓度超限'],
    // }))
    // columns.value = data.value.map((item: any) => ({
    //   text: item.name,
    //   value: columnsDict[item.name],
    // }))
    resizePage()
    loading.value = false
  }).catch(() => {
    loading.value = false
  })
}
onMounted(() => {
  getAlarmTypeList().then((res) => {
    alarmType.value = res.data
    fetchData()
  })
})
</script>

<template>
  <layout title="各单位报警统计">
    <!-- 查询条件 -->
    <template #search>
      <div class="search">
        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" style="margin: 0 5px;"
          @click="selectTimeType('1')">
          今日
        </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>
        <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 160px;margin: 0 5px;">
          <el-option v-for="item in ledgerTypeList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
        <el-date-picker v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts" />
        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
          搜索
        </el-button>
      </div>
    </template>
    <template #content>
      <div v-loading="loading" class="alarm-count">
        <div class="bar">
          <bar-chart-vertical v-show="xAxisData.length" :x-axis-data="xAxisData" :bar-coner="0" :data="data"
            :colors="[]" :bar-width="15" :show-label="false"
            :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '40', top: '10' }"
            :grid="{
              top: 50,
              left: 40,
              right: 40,
              bottom: 20,
              containLabel: true, // 是否包含坐标轴的刻度标签
            }" />
          <el-empty v-show="!xAxisData.length" description="暂无数据" />
        </div>
        <div class="table">
          <!-- <el-table border :data="list" stripe style="width: 100%;" :height="440">
            <el-table-column label="管理单位" prop="dept" align="center" width="200" />
            <el-table-column v-for="item in columns" :key="item.text" :label="item.text" :prop="item.value"
              align="center" />
          </el-table> -->
          <virtual-table :data="list" style="width: 100%;" :height="460" :columns="[
            { text: '管理单位', value: 'dept', width:120 },
            ...columns
          ]">
            <!-- <template #preColumns>
              <vxe-column title="序号" width="80" align="center">
                <template #default="{ rowIndex }">
                  {{ rowIndex + 1 }}
                </template>
              </vxe-column>
            </template> -->
          </virtual-table>
        </div>
      </div>
    </template>
  </layout>
</template>

<style lang="scss" scoped>
.active {
  color: #0d76d4;
  border-color: #c5d8ff;
  outline: none;
  background-color: #ecf2ff;
}

.search {
  display: flex;
  align-items: center;
}

.alarm-count {
  display: flex;

  .bar {
    width: 60%;
    height: 450px;
  }

  .table {
    width: 38%;
    padding: 10px;
    margin-left: 20px;
  }
}
</style>