<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleTabClick">
      <el-tab-pane label="显示屏" name="screen">
        <transition>
          <screen 
            :deviceID="this.$store.getters.deviceID"
            :lastItem="lastItem"
            :status="status"
            v-if="flag"
          >
          </screen>
        </transition>
      </el-tab-pane>
      <el-tab-pane label="趋势图" name="chart">
        <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
          <chart
            :chart-data="lineChartData.total"
            :showChart="showChart"
          >
          </chart>
        </el-row>
      </el-tab-pane>
    </el-tabs>
    
    <el-table
      v-loading="listLoading"
      :data="deviceLogs"
      style="width: 100%">
      <el-table-column
        type="index"
        label="序号">
      </el-table-column>
      <el-table-column
        prop="device_id"
        label="设备ID"
        min-width="150">
      </el-table-column>
      <el-table-column
        prop="mosq_count"
        label="计数"
        min-width="80">
      </el-table-column>
      <el-table-column
        prop="signal"
        label="信号"
        min-width="50">
      </el-table-column>
      <el-table-column
        prop="energy"
        label="电量"
        min-width="80">
      </el-table-column>
      <el-table-column
        prop="coordinate"
        label="坐标"
        min-width="270"
        :formatter="coordinate">
      </el-table-column>
      <el-table-column
        prop="calc_time"
        label="时间"
        min-width="100">
      </el-table-column>
    </el-table>
    <el-pagination
      class="pagination"
      background
      layout="total, prev, pager, next, jumper"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import { fetchDeviceList, fetchDeviceLogs } from '@/api/counter'
import Screen from './components/screen'
import Chart from './components/chart'

const defaultLastItem = {
  mosq_count: '0',
  signal: '0',
  energy: '0'
}
export default {
  name: 'deviceDetail',
  components: {
    Screen,
    Chart
  },
  data() {
    return {
      lineChartData: {
        total: {
          historyData: [],
          xAxis: [],
          title: 'Trend'
        }
      },
      listLoading: true,
      deviceLogs: [],
      activeName: 'screen',
      total: 0,
      lastItem: {},
      status: 0,
      showChart: false,
      flag: false
    }
  },
  watch: {
    activeName(val) {
      if (val === 'chart') {
        this.showChart = true
      }
    }
  },
  methods: {
    getDeviceLogs(params) {
      fetchDeviceLogs(params).then(response => {
        const dateList = []
        this.deviceLogs = response.data.results
        this.deviceLogs.forEach((item, index) => {
          this.lineChartData.total.historyData.push(item.mosq_count)
          dateList.push(item.calc_time.substr(11))
        })
        this.total = response.data.count
        this.lineChartData.total.xAxis = dateList.reverse()
        this.listLoading = false
        this.lastItem = this.deviceLogs[0]
        if (this.lastItem === undefined) {
          this.lastItem = defaultLastItem
        }
        this.flag = true
      })
    },
    getDevices(params) {
      fetchDeviceList(params).then(response => {
        this.deviceList = response.data.results
        this.status = this.deviceList[0].status
      })
    },
    coordinate(row, column) {
      return row.longitude + ', ' + row.latitude
    },
    handleCurrentChange(page) {
      this.listLoading = true
      const device_id = this.$store.getters.deviceID
      this.getDeviceLogs({ device_id, page })
    },
    handleSizeChange(page) {
      this.listLoading = true
      const device_id = this.$store.getters.deviceID
      this.getDeviceLogs({ device_id, page })
    },
    handleTabClick(tab, event) {
      // console.log(tab, event)
    }
  },
  created() {
    const device_id = this.$store.getters.deviceID
    this.getDeviceLogs({ device_id })
    this.getDevices({ device_id })
  }
}
</script>

<style lang="scss">
    .v-enter, .v-leave-to {
      opacity: 0;
    }
  .v-enter-active, .v-leave-active {
    transition: opacity 1.5s
  }
</style>
