<template>
  <div class="app-container">
    <el-form :inline="true" :model="DeviceSearchForm" @submit.native.prevent>
      <el-form-item
        prop="device_id"
      >
        <el-input
          size="mini"
          type="text"
          v-model="DeviceSearchForm.device_id"
          style="width: 10rem"
          auto-complete="off"
          @keyup.enter.native="onSubmit"
          placeholder="设备ID"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-select size="mini"
          style="width: 5rem"
          v-model="DeviceSearchForm.status"
          placeholder="状态"
        >
          <el-option label="全部" value=""></el-option>
          <el-option label="在线" value="1"></el-option>
          <el-option label="离线" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="onSubmit">搜索</el-button>
        <el-button size="mini" @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- table -->
    <el-table
      v-loading="listLoading"
      :data="deviceList"
      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="status"
        label="状态"
        min-width="80">
        <template slot-scope="scope">
          <span v-if="scope.row.status==0" style="color: #F56C6C">{{$t('counter.offline')}}</span>
          <span v-if="scope.row.status==1" style="color: #67C23A">{{$t('counter.online')}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="count"
        label="计数"
        min-width="80">
      </el-table-column>
      <el-table-column
        prop="signal"
        label="信号"
        min-width="80">
      </el-table-column>
      <el-table-column
        prop="energy"
        label="电量"
        min-width="80">
      </el-table-column>
      <el-table-column
        prop="time"
        label="时间"
        min-width="100">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        min-width="100">
        <template slot-scope="scope">
          <el-button type="text"
            @click="handleDetailClick(scope.row.device_id)" size="small">详情
          </el-button>
          <el-button type="text"
            @click="handleMapClick(scope.row.device_id)" size="small">地图
          </el-button>
        </template>
      </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 } from '@/api/counter'
export default {
  name: 'device',
  data() {
    return {
      deviceList: [],
      listLoading: true,
      DeviceSearchForm: {
        device_id: null,
        status: null
      },
      total: 0
    }
  },
  methods: {
    getDevices(params) {
      fetchDeviceList(params).then(response => {
        this.deviceList = response.data.results
        this.total = response.data.count
        this.listLoading = false
      })
    },
    onSubmit() {
      const device_id = this.DeviceSearchForm.device_id
      const status = this.DeviceSearchForm.status
      this.getDevices({ device_id, status })
    },
    resetSearch() {
      this.DeviceSearchForm.device_id = ''
      this.DeviceSearchForm.status = ''
      this.getDevices()
    },
    handleCurrentChange(page) {
      this.listLoading = true
      this.getDevices({ page })
    },
    handleSizeChange(page) {
      this.listLoading = true
      this.getDevices({ page })
    },
    handleDetailClick(deviceID) {
      // console.log(deviceID)
      this.$store.dispatch('changeDeviceID', deviceID).then(() => {
        this.$router.push('/counter/detail')
      }).catch(() => {
        console.log('Err: get device_id failed in device page')
      })
    },
    handleMapClick(deviceID) {
      // console.log(deviceID)
      this.$store.dispatch('changeMapClick', true).then(() => {
        console.log('go to map')
      }).catch(() => {
        console.log('Err: click map failed')
      })
      this.$store.dispatch('changeDeviceID', deviceID).then(() => {
        this.$router.push('/counter/map')
      }).catch(() => {
        console.log('Err: get device_id failed in device page')
      })
    }
  },
  created() {
    this.getDevices()
  },
  deactivated() {
    this.$destroy(true)
  }
}
</script>

<style lang="scss">
  
</style>
