<template>
  <div>
    <panel-card title="离线分析">
      <div style="padding: 15px 10px; width: 300px">
        <el-card shadow="never">
          <div class="count-card">
            <span class="card-title">离线设备</span>
            <span class="card-value">{{ offline }}</span>
            <span class="card-unit">个</span>
          </div>
        </el-card>
      </div>
      <el-row style="margin-top: 20px;">
        <el-col :span="16">
          <device-offline-by-type-bar chart-title="" />
        </el-col>
        <el-col :span="8">
          <device-count-by-online-pie chart-title="" />
        </el-col>
      </el-row>
    </panel-card>
    <panel-card title="离线设备" style="margin-top: 10px;">
      <search-area size="small" @search="fetchData">
        <search-item>
          <el-input v-model="listQuery.devcode" size="small" placeholder="设备编号" clearable />
        </search-item>
        <search-item>
          <el-select v-model="listQuery.deviceType" size="small" clearable placeholder="设备类型">
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </search-item>
        <!--      <template slot="btns">-->
        <!--        <el-button size="small" type="primary" icon="el-icon-upload2" @click="batchExport">-->
        <!--          导出-->
        <!--        </el-button>-->
        <!--      </template>-->
      </search-area>
      <normal-table
        :data="list"
        :head="tableHead"
        :height="height"
        :query="listQuery"
        :columns="columns"
        :total="total"
        :options="tableOption.options"
        :tools-option="tableOption.toolsOption"
        :list-loading="listLoading"
        size="small"
        @change="changePage"
      />
    </panel-card>
  </div>
</template>

<script>
import PanelCard from '@/components/BigData/Card/panelCard'
import DeviceCountByOnlinePie from '@/views/staticCharts/DeviceCountByOnlinePie'
import DeviceOfflineByTypeBar from '@/views/staticCharts/DeviceOfflineByTypeBar'
import { getDeviceType, getOfflineDeviceList } from '@/api/device/device'
import { deviceStaticByStatus } from '@/api/data/dataStatics'
export default {
  name: 'DeviceCountByOffline',
  components: { DeviceOfflineByTypeBar, DeviceCountByOnlinePie, PanelCard },
  props: {
    typeList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 饼状图
      extendPie: {
        series: {
          label: { show: true, position: 'outside', formatter: '{b}:{c}' },
          radius: '45%'
        }
      },
      chartDataPie: {
        columns: ['onlineStatus', 'deviceCount'],
        rows: []
      },
      // 柱状图
      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: {
          'typeName': '权属单位',
          'offline': '设备数量（个）'
        },
        dimension: ['typeName'],
        metrics: ['offline']
      },
      chartData: {
        columns: ['typeName', 'offline'],
        rows: []
      },
      height: 400, // 表格高度
      tableHead: {
        show: false,
        text: '数据列表'
      }, // 表格头设置
      // 表格属性
      tableOption: {
        options: {
          needIndex: true // 是否需要序号列
        },
        toolsOption: {
          selectColumns: false, // 是否需要筛选列
          refresh: false // 是否需要刷新按钮
        }
      }, // 表格配置
      listQuery: {
        devcode: '',
        deviceType: '',
        offset: 1,
        limit: 20,
        sort: 'offlineDays',
        order: 'desc'
      }, // 查询条件
      list: [], // 返回列表
      total: 0, // 离线设备总数
      offline: 0, // 离线设备总数
      listLoading: false,
      deviceTypeList: [], // 设备类型列表
      columns: [
        { text: '设备编号', value: 'devcode', align: 'center' },
        { text: '设备类型', value: 'deviceTypeName', align: 'center' },
        { text: '点位编号', value: 'wellCode', align: 'center' },
        { text: '最近记录上传时间', value: 'lastDataTs', align: 'center' },
        { text: '离线天数', value: 'offlineDays', align: 'center' }
      ] // 显示列
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getOfflineDeviceList(this.listQuery).then(response => {
        this.tableOption.total = response.data.total
        this.total = response.data.total
        this.list = response.data.rows || []
        this.listLoading = false
      }).catch(_ => { this.listLoading = false })
      deviceStaticByStatus().then(res => {
        this.offline = res.data.offline
      })
    },
    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
    changePage(val) {
      if (val && val.size) {
        this.listQuery.limit = val.size
      }
      if (val && val.page) {
        this.listQuery.offset = val.page
      }
      this.fetchData()
    },
    // 批量导出
    batchExport() {
      // 全屏加载动画
      // const loading = this.$loading({
      //   lock: true,
      //   text: '数据处理中,请稍后...',
      //   spinner: 'el-icon-loading',
      //   background: 'rgba(0, 0, 0, 0.7)'
      // })
      // batchExportNoiseData(this.listQuery).then(res => {
      //   loading.close() // 关闭加载动画
      //   const blob = new Blob([res.data])
      //   const downloadElement = document.createElement('a')
      //   const href = window.URL.createObjectURL(blob) // 创建下载的链接
      //   downloadElement.href = href
      //   downloadElement.download = `离线设备数据.xlsx` // 下载后文件名
      //   document.body.appendChild(downloadElement)
      //   downloadElement.click() // 点击下载
      //   document.body.removeChild(downloadElement) // 下载完成移除元素
      //   window.URL.revokeObjectURL(href) // 释放blob对象
      // }).catch((res) => {
      //   loading.close()
      // })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.count-card{
  .card-title {
    font-size: 16px;
  }
  .card-value {
    font-size: 20px;
    font-weight: bold ;
    margin: 0 5px 0px 20px;
  }
}

</style>