<!--
  Description: 报警统计-异常位置分析
  Author: 李亚光
  Date: 2023-07-08
 -->
<script lang="ts" setup name="AlarmCount">
import dayjs from 'dayjs'
import layout from './layout.vue'
import { getErrorAnalyse } from '@/api/home/dashboard/index'
const listQuery = ref({
  begTime: '',
  endTime: '',
  ledgerType: '',
  timeType: '1',
})
// listQuery.value.begTime =
// listQuery.value.endTime =
// 开始结束时间
const datetimerange = ref()
// 默认当天
// datetimerange.value = [`${dayjs().format('YYYY-MM-DD')} 00:00:00`, dayjs().format('YYYY-MM-DD HH:mm:ss')]
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 shortcuts = [
  {
    text: '近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 7)
      return [start, end]
    },
  },
  {
    text: '近一个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 1)
      return [start, end]
    },
  },
  {
    text: '近三个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 3)
      return [start, end]
    },
  },
]
const selectTimeType = (type: string) => {
  listQuery.value.timeType = type
}
const list = ref<any[]>([])
const loadingTable = ref(true)
// 获取数据
const fetchData = () => {
  loadingTable.value = true
  getErrorAnalyse(listQuery.value).then((res) => {
    list.value = res.data
    loadingTable.value = false
  }).catch(() => {
    loadingTable.value = false
  })
}
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: 180px;margin: 0 5px;">
          <el-option label="闸井" value="1" />
          <el-option label="场站" value="2" />
          <el-option label="管线" value="3" />
        </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 class="alarm-count">
        <div class="table">
          <el-table v-loading="loadingTable" border :data="list" stripe style="width: 100%;" :height="340">
            <el-table-column label="位置类型" prop="type" align="center" width="140" />
            <el-table-column label="位号" prop="tagNumber" align="center" width="160" />
            <el-table-column label="名称" prop="ledgerName" align="center" />
            <el-table-column label="位置" prop="place" align="center" />
            <el-table-column label="管理单位" prop="deptName" align="center" />
            <el-table-column label="标签" prop="marker" align="center" width="140" />
            <el-table-column label="报警次数" prop="alarmSum" align="center" width="120" />
          </el-table>
        </div>
      </div>
    </template>
  </layout>
</template>

<style lang="scss" scoped>
.active {
  color: #3d7eff;
  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: 98%;
    padding: 10px;
  }
}
</style>