<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleTabClick">
      <el-tab-pane label="显示屏" name="screen">
        <screen 
          :deviceID="this.$store.getters.deviceID"
          :lastItem="lastItem"
          v-if="flag"
        ></screen>
      </el-tab-pane>
      <el-tab-pane label="趋势图" name="chart">配置管理</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 { fetchDeviceLogs } from '@/api/counter'
import Screen from './components/screen'
export default {
  name: 'deviceDetail',
  components: {
    Screen
  },
  data() {
    return {
      listLoading: true,
      deviceLogs: [],
      activeName: 'screen',
      total: 0,
      lastItem: {},
      flag: false
    }
  },
  methods: {
    getDeviceLogs(params) {
      fetchDeviceLogs(params).then(response => {
        this.deviceLogs = response.data.results
        this.total = response.data.count
        this.listLoading = false
        this.lastItem = this.deviceLogs[0]
        this.flag = true
      })
    },
    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 })
  }
}
</script>

<style lang="scss">

</style>
