<template>
  <div class="app-container">
    <p class="warn-content">
      智能模块消息推送列表
    </p>
    <el-table
     v-loading="listLoading"
    :data="deviceCount"
    style="width: 100%"
    :default-sort = "{prop: 'calc_time', order: 'descending'}"
    >
      <el-table-column
        prop="device_id"
        label="设备ID"
        sortable
        min-width="150">
      </el-table-column>
      <el-table-column
        prop="signal"
        label="信号强度"
        min-width="80">
      </el-table-column>
      <el-table-column
        sortable
        prop="mosq_count"
        label="灭蚊数量"
        min-width="100">
      </el-table-column>
      <el-table-column
        prop="energy"
        label="电量"
        min-width="100">
      </el-table-column>
      <el-table-column
        prop="coordinate"
        label="坐标"
        min-width="180"
        :formatter="formatter">
      </el-table-column>
      <el-table-column
        prop="calc_time"
        label="时间"
        min-width="150">
      </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 { fetchDeviceCount } from '@/api/counter'
export default {
  name: 'count',
  data() {
    return {
      deviceCount: [],
      listLoading: true,
      total: 0
    }
  },
  methods: {
    getDeviceCount(params) {
      fetchDeviceCount(params).then(response => {
        this.deviceCount = response.data.results
        // 页码
        // this.total = Math.ceil(response.data.count / 8) * 10
        this.total = response.data.count
        // console.log(this.total)
        this.listLoading = false
      })
    },
    formatter(row, column) {
      return row.longitude + ', ' + row.latitude
    },
    handleCurrentChange(page) {
      // console.log(page)
      this.listLoading = true
      this.getDeviceCount({ page })
    },
    handleSizeChange(page) {
      this.listLoading = true
      this.getDeviceCount({ page })
    }
  },
  created() {
    this.getDeviceCount()
  },
  deactivated() {
    this.$destroy(true)
  }
}
</script>

<style lang="scss">
  .pagination {
      float: right;
      font-weight: normal;
      padding: 2rem 0 1rem 0;
      .btn-prev {
        border: 1px solid #d1dbe5;
        border-right: 0;
        border-radius: 0 !important;
        background: #fff !important;
        margin: 0 !important;
      }
      .btn-next {
        border: 1px solid #d1dbe5;
        // border-left: 0;
        background: #fff !important;
        border-radius: 0!important;
        margin: 0 !important;
      }
      .el-pager li {
        border: 1px solid #d1dbe5;
        box-sizing: border-box;
        background: #fff !important;
        border-radius: 0!important;
        border-right: 0;
        padding: 0;
        margin: 0 !important;
      }
      .el-pager li:not(.disabled).active {
        background: #409EFF !important;
        border-color: #409EFF;
      }
      .el-pagination__jump {
        margin-left: .8rem;
      }
      .el-pagination__editor.el-input {
        width: 2.5rem;
      }
  }
  // mobile
  @media screen and (max-width: 375px) {
    .pagination {
      display: flex !important;
      justify-content: center;
      float: none;
      padding: 1rem 0 1rem 0;
      .el-pager li {
        // height: 1.5rem;
        // line-height: 1.5rem;
        font-size: .5rem !important;
        // min-width: 1.5rem !important;
      }
      .el-pagination__total {
        // margin-right: 2rem;
        display: none !important;
      }
      .el-pagination__jump {
        display: none !important;
      }
    }
  }
</style>
