<template>
  <el-row :gutter="40" class="panel-group">
    <div>
      <el-col>
        <div class="flagBoxStyle">
          <div class="flagStyle" />
          <div>工单情况</div>
        </div>
      </el-col>
    </div>
    <el-row>
      <el-col :span="12">
        <ve-bar
          :data="chartData"
          :grid="grid"
          :extend="extend"
          :settings="chartSettings"
        />
      </el-col>
      <el-col :span="12">
        <div class="tableStyle">
          <el-table border :data="tableList" stripe>
            <el-table-column prop="name" label="设备型号" />
            <el-table-column prop="value" label="设备名称" />
          </el-table>
        </div>
      </el-col>
    </el-row>
  </el-row>
</template>

<script>
import { wellCountByBfzt } from '@/api/well/well'
import { deviceStaticByStatus, alarmNowStatic } from '@/api/data/dataStatics'
import { jobCountByStatus } from '@/api/alarm/job'
export default {
  name: 'AlarmStatus',
  data() {
    return {
      // 柱状图
      extend: {
        xAxis: {
          axisLabel: {
            rotate: 30,
            margin: 30,
            textStyle: {
              align: 'center'
            }
          }
        },
        series: {
          label: { show: true, position: 'top' },
          barMaxWidth: 35 // 最大柱宽度
        }
      },
      grid: {
        right: 60
      },
      chartSettings: {
        itemStyle: {
          'barCategoryGap': 5
        },
        barWidth: 15,
        labelMap: {
          'deviceType': '权属单位',
          'offline': '设备数量（个）'
        },
        dimension: ['deviceType'],
        metrics: ['offline']
      },
      chartData: {
        columns: ['deviceType', 'offline'],
        rows: []
      },
      tableList: [],
      dataGroup: [
        {
          title: '井',
          context: '--',
          flags: '条',
          icon: 'icon-alarm',
          color: '#40c9c6',
          permission: '/well/list'
        }
      ]
    }
  },
  created() {
    this.getWellCount()
    this.getDeviceCount()
    this.getAlarmCount()
    this.getJobCount()
  },
  mounted() {
    this.tableList = [
      {
        value: 'WELL-001',
        name: '液位超限'
      },
      {
        value: 'WELL-002',
        name: '燃气浓度超限'
      },
      {
        value: 'WELL-003',
        name: '井盖开启'
      },
      {
        value: 'WELL-004',
        name: '井盖开启'
      }
    ]
  },
  methods: {
    refresh() {
      this.getAlarmCount()
      this.getJobCount()
    },
    getWellCount() {
      wellCountByBfzt().then(response => {
        this.dataGroup[0].context = response.data.total
      })
    },
    getDeviceCount() {
      deviceStaticByStatus().then(response => {
        this.dataGroup[1].context = response.data.total
      })
    },
    getAlarmCount() {
      alarmNowStatic().then(response => {
        this.dataGroup[2].context = response.data.total
      })
    },
    getJobCount() {
      jobCountByStatus().then(response => {
        const data = response.data
        const total = data.beforeGet + data.beforeConfirm + data.inHandle
        this.dataGroup[3].context = total
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tableStyle{
  padding: 20px;
}
.flagBoxStyle {
  display: flex;
  margin-bottom: 20px;
}
.flagBoxStyle div:nth-child(2){
  line-height: 30px;
  font-weight: 600;
}
.flagStyle {
  width: 4px;
  height: 30px;
  margin-right: 6px;
  background: rgb(64 121 242);
}

</style>