<template>
  <panel-card title="异常点位排名">
    <template slot="func">
      <time-buttons @change="changeTime" />
      <el-select v-model="listQuery.alarmContent" placeholder="告警内容" clearable size="small" @change="fetchData">
        <el-option
          v-for="item in alarmContentTypeList"
          :key="item.value"
          :label="item.name"
          :value="item.value"
        />
      </el-select>
    </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="详细地址" 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 {
      listQuery: {
        alarmContent: '', // 报警内容
        beginTime: '', // 开始时间
        endTime: '' // 结束时间
      }, // 查询结果
      alarmContentTypeList: [],
      list: [
        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 },
        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 },
        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 },
        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 },
        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 },
        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 },
        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 },
        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 },
        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 },
        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 }
      ],
      total: 0
    }
  },
  created() {
    this.fetchAlarmContentType()
    this.fetchData()
  },
  methods: {
    // 获取排名列表
    fetchData() {
      alarmWellRank(this.listQuery).then(res => {
        this.list = res.data.rows
        this.total = res.data.total
      })
    },
    // 时间切换
    changeTime(timeRange) {
      this.handleDateTime()
      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.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>