<template>
  <panel-card ref="alarmWellRank" title="异常点位排名">
    <template slot="func">
      <div>
        <time-buttons ref="timeButtons" :size="timeButtonSize" @change="changeTime" />
        <el-select v-model="listQuery.alarmContent" placeholder="告警内容" clearable size="small" style="width: 200px" @change="fetchData">
          <el-option
            v-for="item in alarmContentTypeList"
            :key="item.value"
            :label="item.name"
            :value="item.name"
          />
        </el-select>
      </div>
    </template>
    <el-table :data="list" stripe empty-text="无异常点位" height="368">
      <el-table-column type="index" width="50" align="center" />
      <el-table-column prop="wellCode" label="点位编号" align="center" />
      <el-table-column prop="position" label="详细地址" show-overflow-tooltip align="center" />
      <el-table-column prop="alarmCount" label="报警次数" align="center" />
      <el-table-column prop="count" label="报警设备数" align="center" />
    </el-table>
  </panel-card>
</template>

<script>
import PanelCard from '@/components/BigData/Card/panelCard'
import { alarmWellRank } from '@/api/data/dataStatics'
import { getAlarmContentType } from '@/api/alarm/alarm'
import TimeButtons from '@/components/BigData/TimeButtons'
export default {
  name: 'AlarmWellRank',
  components: { TimeButtons, PanelCard },
  data() {
    return {
      timeRange: [], // 时间范围
      timeButtonSize: 'normal', // 时间选择器大小
      listQuery: {
        alarmContent: '', // 报警内容
        beginTime: '', // 开始时间
        endTime: '' // 结束时间
      }, // 查询结果
      alarmContentTypeList: [],
      list: [],
      total: 0
    }
  },
  created() {
    this.fetchAlarmContentType()
    this.fetchData()
  },
  mounted() {
    const bodyWidth = this.$refs.alarmWellRank.$el.clientWidth
    if (bodyWidth < 566) {
      this.timeButtonSize = 'small'
    }
  },
  methods: {
    // 获取排名列表
    fetchData() {
      this.handleDateTime()
      alarmWellRank(this.listQuery).then(res => {
        this.list = res.data.rows
        this.total = res.data.total
      })
    },
    // 时间切换
    changeTime(timeRange) {
      this.timeRange = timeRange
      this.fetchData()
    },
    // 获取告警内容类别
    fetchAlarmContentType() {
      this.alarmContentTypeList = []
      getAlarmContentType('1').then(response => {
        const supportDeviceTypes = this.$store.getters.deviceTypes
        for (const item of response.data.list) {
          if (supportDeviceTypes.indexOf('' + item.deviceType) !== -1 && this.alarmContentTypeList.findIndex(t => t.name === item.name) === -1) {
            this.alarmContentTypeList.push(item)
          }
        }
      })
    },
    // 处理时间
    handleDateTime() {
      if (this.timeRange && this.timeRange.length > 0) {
        this.listQuery.beginTime = this.timeRange[0]
        this.listQuery.endTime = this.timeRange[1]
      } else {
        this.listQuery.beginTime = ''
        this.listQuery.endTime = ''
      }
    }
  }
}
</script>

<style scoped>

</style>