<template>
  <div class="app-container">
    <div class="filter-container filter-view">
      <el-select
        class="filter-view-item"
        v-model="listQuery.pageVo.providerPk"
        placeholder="Service Provider"
        @change="toSearch"
        clearable>
        <el-option
          v-for="(item, index) in providerOptions"
          :key="index"
          :label="item.providerName"
          :value="item.providerPk"/>
      </el-select>
      <div class="filter-flex-button">
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="toAddPage">
          Add Charging Profile
        </el-button>
      </div>
    </div>
    <el-table
      v-loading="listLoading"
      :data="tableList"
      style="width: 100%;">
      <el-table-column
        :label="item.label"
        align="center"
        class-name="fixed-width"
        v-for="(item, index) in columns"
        :key="index"
        :min-width="item.width">
        <template slot-scope="{row}">
          <el-dropdown
            class="action-dropdown"
            @command="(v) => handleCommand(v, row)"
            v-if="item.action">
            <i class="el-icon-more icon-action"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                command="editProfile">
                Edit
              </el-dropdown-item>
              <el-dropdown-item
                command="delProfile">
                Delete
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <!-- <TableAction
            @edit="editProfile(row)"
            @delete="delProfile(row)"
            v-if="item.action"/> -->
          <span v-else>{{ row[item.key] }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="right">
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.pageNo"
        :limit.sync="listQuery.pageSize"
        @pagination="getList" />
    </div>
  </div>
</template>
<script>
  import Pagination from '@/components/Pagination'
  import TableAction from '@/components/TableAction.vue'
  import api from '../../http/api/chargingProfile.js'
  import provider from '../../http/api/provider'
  export default {
    data() {
      return {
        listLoading: true,
        tableList: [],
        total: 0,
        listQuery: {
          pageNo: 1,
          pageSize: 10,
          pageVo: {
            providerPk: ""
          }
        },
        columns: [{
          key: 'chargingProfilePk',
          label: 'Charging Profile ID',
          width: 150
        },{
          key: 'providerName',
          label: 'Service Provider',
          width: 140
        },{
          width: 100,
          key: 'stackLevel',
          label: 'Stack Level'
        },{
          key: 'description',
          label: 'Description',
          width: 130
        },{
          key: 'profileKind',
          label: 'Profile Kind',
          width: 140
        },{
          key: 'recurrencyKind',
          label: 'Recurrency Kind',
          width: 140
        },{
          key: 'validFrom',
          label: 'Valid From',
          width: 140
        },{
          key: 'validTo',
          label: 'Valid To',
          width: 140
        },{
          action: true,
          label: 'Action',
          width: 70
        }],
        providerOptions: []
      }
    },
    components: { Pagination, TableAction },
    created() {
      this.getAllProvider();
      this.getList();
    },
    methods: {
      toAddPage() {
        this.$router.push({path: '/smart-energy-management/charging-profiles/add'})
      },
      toSearch() {
        this.listQuery.pageNo = 1;
        this.getList();
      },
      getAllProvider() {
        this.listLoading = true;
        provider.getAllServiceProvider().then(res => {
          if (res.data && res.data.length > 0) {
            this.providerOptions = res.data
          }
        });
      },
      getList() {
        api.getChargingProfilePages(this.listQuery).then(res => {
          this.listLoading = false;
          this.total = res.total;
          this.tableList = res.data;
        }).catch(err => {
          this.listLoading = false;
          this.total = 0;
          this.tableList = [];
        })
      },
      handleCommand(cb, item) {
        this[cb](item)
      },
      editProfile(row) {
        this.$store.commit('charge/SET_ProfileId', row.chargingProfilePk)
        this.$router.push({path: '/smart-energy-management/charging-profiles/edit'});
      },
      delProfile(row) {
        this.$confirm('Are you sure you want to delete this profile ?', 'Delete', {
          confirmButtonText: 'OK',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(res => {
          this.deleteProfile(row.chargingProfilePk)
        })
      },
      deleteProfile(id) {
        api.delChargingProfile(id).then(res => {
          this.$message({
            message: 'Delete charging profile successfully',
            type: 'success'
          });
          this.listLoading = true;
          this.getList();
        }).catch(err => {
          this.$message({
            message: err,
            type: 'error'
          })
        })
      }
    }
  }
</script>
<style>
  
</style>