<template>
  <panel-card title="数据总体情况">
    <div class="panel-group">
      <div v-for="card in dataGroup" :key="card.title" class="card-panel">
        <card :title="card.title" :context="card.context" :flags="card.flags" :icon="card.icon" :color="card.color" shadow="never" @click.native="goPage(card)" />
      </div>
    </div>
  </panel-card>
<!--  <el-row :gutter="20" class="panel-group">-->
<!--    &lt;!&ndash;    <el-dialog append-to-body :visible.sync="dialogFormVisible">&ndash;&gt;-->
<!--    &lt;!&ndash;      <el-table v-loading="listLoading" :data="list" class="table" border>&ndash;&gt;-->
<!--    &lt;!&ndash;        <el-table-column&ndash;&gt;-->
<!--    &lt;!&ndash;          v-for="column in columns"&ndash;&gt;-->
<!--    &lt;!&ndash;          :key="column.value"&ndash;&gt;-->
<!--    &lt;!&ndash;          :label="column.text"&ndash;&gt;-->
<!--    &lt;!&ndash;          :width="column.width"&ndash;&gt;-->
<!--    &lt;!&ndash;          :align="column.align"&ndash;&gt;-->
<!--    &lt;!&ndash;          show-overflow-tooltip&ndash;&gt;-->
<!--    &lt;!&ndash;        >&ndash;&gt;-->
<!--    &lt;!&ndash;          <template v-slot="scope">&ndash;&gt;-->
<!--    &lt;!&ndash;            <span>{{ scope.row[column.value] }}</span>&ndash;&gt;-->
<!--    &lt;!&ndash;          </template>&ndash;&gt;-->
<!--    &lt;!&ndash;        </el-table-column>&ndash;&gt;-->
<!--    &lt;!&ndash;      </el-table>&ndash;&gt;-->
<!--    &lt;!&ndash;    </el-dialog>&ndash;&gt;-->
<!--  </el-row>-->
</template>

<script>
import Card from '@/components/BigData/Card'
import { wellCountByBfzt } from '@/api/well/well'
import { deviceStaticByStatus, alarmNowStatic } from '@/api/data/dataStatics'
import { jobCountByStatus } from '@/api/alarm/job'
import PanelCard from '@/components/BigData/Card/panelCard'
export default {
  name: 'PanelGroup',
  components: { PanelCard, Card },
  data() {
    return {
      dialogFormVisible: false,
      listLoading: false,
      columns: [
        {
          text: '设备编号',
          value: '',
          align: 'center'
        },
        {
          text: '设备类型',
          value: '',
          align: 'center'
        },
        {
          text: '点位编号',
          value: '',
          align: 'center'
        },
        {
          text: '最新记录上传时间',
          width: '200',
          value: '',
          align: 'center'
        },
        {
          text: '离线天数',
          value: '',
          align: 'center'
        }
      ], // 显示列
      dataGroup: [
        {
          title: '安装点位',
          context: '--',
          flags: '个',
          icon: 'icon-well',
          color: '#40c9c6',
          permission: '/well/list'
        },
        {
          title: '设备',
          context: '--',
          flags: '个',
          icon: 'icon-device',
          color: '#36a3f7',
          permission: '/device/list'
        },
        {
          title: '今日数据',
          context: '--',
          flags: '条',
          icon: 'icon-alarm',
          color: '#f4516c',
          permission: '/alarm/now'
        },
        {
          title: '离线设备',
          context: '--',
          flags: '个',
          icon: 'icon-order',
          color: '#f4516c',
          permission: '/job/list'
        },
        {
          title: '当前报警',
          context: '--',
          flags: '条',
          icon: 'icon-alarm',
          color: '#40c9c6',
          permission: '/well/list'
        }
      ]
    }
  },
  created() {
    this.getWellCount()
    this.getDeviceCount()
    this.getAlarmCount()
    this.getJobCount()
  },
  methods: {
    goPage(card) {
      if (card.title === '离线设备') {
        this.dialogFormVisible = true
      }
    },
    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>
.panel-group {
  display: flex;
  margin: 10px;
  justify-content: space-between;
  .card-panel {
    flex: 1;
  }
  .card-panel + .card-panel  {
    margin-left: 20px;
  }
}

</style>