<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form
        :model="filter"
        v-bind:inline="true"
        label-position="left"
        label-width="70px"
        style="width: 100%;">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item
              label-width="130px"
              label="Heartbeat Period:">
              <el-select
                v-model="filter.period"
                placeholder="Select"
                @change="handleFilter">
                <el-option
                  v-for="(item, index) in heartOptions"
                  :key="index"
                  :value="item.value"
                  :label="item.name"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-table
      v-loading="listLoading"
      :data="stationList"
      style="width: 100%;">
      <el-table-column
        label="OCPP ID"
        align="center"
        class-name="fixed-width">
          <template slot-scope="{row}">
            <span>{{ row.key }}</span>
          </template>
      </el-table-column>
      <el-table-column
        label="# Of Attempts"
        align="center"
        class-name="fixed-width">
          <template slot-scope="{row}">
            <span>{{ row.numberOfAttempts }}</span>
          </template>
      </el-table-column>
      <el-table-column
        label="Last Attempt"
        align="center"
        class-name="fixed-width">
          <template slot-scope="{row}">
            <span>{{ row.lastAttemptTimestamp }}</span>
          </template>
      </el-table-column>
    </el-table>
    <div class="right">
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="handlePageChange" />
    </div>
  </div>
</template>

<script>
  import Pagination from '@/components/Pagination'
  import TableAction from '@/components/TableAction.vue'
  import api from '../../http/api/charge'
  export default {
    components: { Pagination, TableAction },
    data() {
      return {
        filter: {
          period: 'ALL'
        },
        listLoading: true,
        stationList: [],
        heartOptions: [],
        total: 1,
        listQuery: {
          page: 1,
          limit: 10,
        },
      }
    },
    created() {
      this.getHeartbeatOptions();
      this.getList();
    },
    methods: {
      handleFilter() {
        this.listLoading = true;
        this.listQuery.page = 1;
        this.getList();
      },
      handlePageChange() {
        this.listLoading = true;
        this.getList();
      },
      getHeartbeatOptions() {
        api.getHeartbeatPeriodList().then(res => {
          console.log('data', res);
          this.heartOptions = res.data;
        }).catch(err => {
          console.error('data', err);
        });
      },
      getList() {
        const params = {
          pageSize: this.listQuery.limit,
          pageNo: this.listQuery.page,
          pageVo: this.filter
        }
        api.getUnknownStationPages(params).then(res => {
          this.listLoading = false;
          this.total = res.total;
          this.stationList = res.data;
        }).catch(err => {
          this.listLoading = false;
          this.total = 0;
          this.stationList = [];
        })
      }
    }
  }
</script>

<style>
  
</style>