<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="$t('counter.inputDeviceID')"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-select size="mini"
          style="width: 5.5rem"
          v-model="DeviceSearchForm.status"
          :placeholder="$t('counter.inputStatus')"
        >
          <el-option :label="$t('counter.all')" value=""></el-option>
          <el-option :label="$t('counter.online')" value="1"></el-option>
          <el-option :label="$t('counter.offline')" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="onSubmit">{{$t('counter.search')}}</el-button>
        <el-button size="mini" @click="resetSearch">{{$t('counter.reset')}}</el-button>
      </el-form-item>
    </el-form>

    <!-- table -->
    <el-table
      v-loading="listLoading"
      :data="deviceList"
      style="width: 100%">
      <el-table-column
        type="index"
        :label="$t('counter.sn')">
      </el-table-column>
      <el-table-column
        prop="device_id"
        :label="$t('counter.device')"
        min-width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.device_id }} <el-tag v-if="scope.row.chip_type === 'AIR-V2'" type="success" size="mini">V2</el-tag></span>
        </template>
      </el-table-column>
      <el-table-column
        prop="device_name"
        :label="$t('counter.deviceName')"
        min-width="150">
      </el-table-column>
      <el-table-column
        prop="status"
        :label="$t('counter.status')"
        min-width="80">
        <template slot-scope="scope">
          <span v-if="scope.row.status==0" style="color: #F56C6C" ><i class="el-icon-error"></i> {{$t('counter.offline')}}</span>
          <span v-if="scope.row.status==1" style="color: #67C23A" ><i class="el-icon-success"></i> {{$t('counter.online')}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="count"
        :label="$t('counter.count')"
        min-width="80">
        <template slot-scope="scope">
          <span ><i class="el-icon-alimosquito"></i> {{scope.row.count}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="signal"
        :label="$t('counter.signal')"
        min-width="80">
        <template slot-scope="scope">
          <span v-if="scope.row.signal>=24" style="color: #67C23A" ><i class="el-icon-alisignal-4"></i></span>
          <span v-if="scope.row.signal>=16 && scope.row.signal<24" style="color: #67C23A" ><i class="el-icon-alisignal-3"></i></span>
          <span v-if="scope.row.signal>=8 && scope.row.signal<16" style="color: #FF9B21" ><i class="el-icon-alisignal-2"></i></span>
          <span v-if="scope.row.signal>=0 && scope.row.signal<8" style="color: #F56C6C" ><i class="el-icon-alisignal-1"></i></span>
        </template>

      </el-table-column>
      <el-table-column
        prop="energy"
        :label="$t('counter.energy')"
        min-width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.energy.replace('%','') >= 90" style="color: #67C23A" ><i class="el-icon-alipower_9"></i> {{scope.row.energy}}</span>
          <span v-if="scope.row.energy.replace('%','') >= 80 && scope.row.energy.replace('%','') < 90" style="color: #67C23A" ><i class="el-icon-alipower_8" size="small"></i> {{scope.row.energy}}</span>
          <span v-if="scope.row.energy.replace('%','') >= 70 && scope.row.energy.replace('%','') < 80" style="color: #67C23A" ><i class="el-icon-alipower_7"></i> {{scope.row.energy}}</span>
          <span v-if="scope.row.energy.replace('%','') >= 60 && scope.row.energy.replace('%','') < 70" style="color: #67C23A" ><i class="el-icon-alipower_6"></i> {{scope.row.energy}}</span>
          <span v-if="scope.row.energy.replace('%','') >= 50 && scope.row.energy.replace('%','') < 60" style="color: #67C23A" ><i class="el-icon-alipower_5"></i> {{scope.row.energy}}</span>
          <span v-if="scope.row.energy.replace('%','') >= 40 && scope.row.energy.replace('%','') < 50" style="color: #FF9B21" ><i class="el-icon-alipower_4"></i> {{scope.row.energy}}</span>
          <span v-if="scope.row.energy.replace('%','') >= 30 && scope.row.energy.replace('%','') < 40" style="color: #FF9B21" ><i class="el-icon-alipower_3" ></i> {{scope.row.energy}}</span>
          <span v-if="scope.row.energy.replace('%','') >= 20 && scope.row.energy.replace('%','') < 30" style="color: #FF9B21" ><i class="el-icon-alipower_2"></i> {{scope.row.energy}}</span>
          <span v-if="scope.row.energy.replace('%','') >= 10 && scope.row.energy.replace('%','') < 20" style="color: #F56C6C" ><i class="el-icon-alipower_1"></i> {{scope.row.energy}}</span>
          <span v-if="scope.row.energy.replace('%','') >= 0 && scope.row.energy.replace('%','') < 10" style="color: #F56C6C" ><i class="el-icon-alipower_"></i> &lt;{{'10.0%'}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="time"
        :label="$t('counter.time')"
        min-width="100">
      </el-table-column>
      <el-table-column
        fixed="right"
        :label="$t('counter.action')"
        min-width="100">
        <template slot-scope="scope">
          <el-button type="text" title="Detail"
            @click="handleDetailClick(scope.row.device_id)" ><i class="el-icon-alixiangqing"></i>
          </el-button>
          <el-button type="text" title="Map"
            @click="handleMapClick(scope.row.device_id)" ><i class="el-icon-alimap"></i>
          </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({ path: '/counter/map', query: { device_id: deviceID }})
      }).catch(() => {
        console.log('Err: get device_id failed in device page')
      })
    }
  },
  created() {
    this.getDevices()
  },
  deactivated() {
    this.$destroy(true)
  }
}
</script>

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