<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, dataCount } from '@/api/data/dataStatics'
import PanelCard from '@/components/BigData/Card/panelCard'
import { getDayTime } from '@/utils/dateutils'
export default {
  name: 'PanelGroup',
  components: { PanelCard, Card },
  data() {
    return {
      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',
          path: '/wellList'
        },
        {
          title: '设备',
          context: '--',
          flags: '个',
          icon: 'icon-device',
          color: '#36a3f7',
          permission: '/device/list',
          path: '/deviceList'
        },
        {
          title: '今日数据',
          context: '--',
          flags: '条',
          icon: 'icon-database',
          color: '#1ed8f3',
          permission: '/data',
          path: '/dataManage'
        },
        {
          title: '离线设备',
          context: '--',
          flags: '个',
          icon: 'icon-device',
          color: '#676767',
          permission: '/device/list',
          path: '/deviceList?status=offline'
        },
        {
          title: '当前报警',
          context: '--',
          flags: '条',
          icon: 'icon-alarm',
          color: '#f4516c',
          permission: '/alarm/now',
          path: '/alarmNow'
        }
      ]
    }
  },
  created() {
    this.getWellCount()
    this.getDeviceCount()
    this.getAlarmCount()
    this.getTodayDataCount()
  },
  methods: {
    // 获取井数量
    getWellCount() {
      wellCountByBfzt().then(response => {
        this.dataGroup[0].context = response.data.total
      })
    },
    // 获取设备数量， 离线设备数量
    getDeviceCount() {
      deviceStaticByStatus().then(response => {
        this.dataGroup[1].context = response.data.total
        this.dataGroup[3].context = response.data.offline
      })
    },
    // 获取当前报警数量
    getAlarmCount() {
      alarmNowStatic().then(response => {
        this.dataGroup[4].context = response.data.total
      })
    },
    // 获取今日数据总数
    getTodayDataCount() {
      const beginTime = getDayTime(new Date().getTime()).Format('yyyy-MM-dd hh:mm:ss')
      const endTime = new Date().Format('yyyy-MM-dd hh:mm:ss')
      const params = { beginTime, endTime }
      dataCount(params).then(response => {
        let count = 0
        response.data.forEach(item => {
          count = count + Number(item.countRecords)
        })
        this.dataGroup[2].context = count + ''
        console.log('今日总数', this.dataGroup[2].context)
      })
    },
    // 跳转页面
    goPage(card) {
    this.$router.push({
      path: card.path
    })
    }
  }
}
</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>