<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="filter-view">
        <div
          v-if="sitePk"
          class="back-icon"
          @click="goBack">
          <i class="el-icon el-icon-back"></i>
        </div>
        <el-select
          v-model="filter.pageVo.errorCode"
          placeholder="Error Code"
          @change="handleFilter"
          class="filter-view-item"
          clearable>
          <el-option
            v-for="(item,index) in errCodeOptions"
            :key="index"
            :label="item.name"
            :value="item.value"/>
        </el-select>
        <el-select
          v-model="filter.pageVo.status"
          placeholder="Status"
          @change="handleFilter"
          class="filter-view-item"
          clearable>
          <el-option
            v-for="(item,index) in statusOptions"
            :key="index"
            :label="item.name"
            :value="item.value"/>
        </el-select>
        <div class="flex1" style="max-width: 500px;">
          <el-input
            class="filter-view-item"
            v-model="filter.pageVo.criteria"
            prefix-icon="el-icon-search"
            placeholder="Search by Station ID, Site Name, Carpark Code, Vendor Error Code"
            @keyup.enter.native="handleFilter"
            @change="handleFilter"
            clearable/>
        </div>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="handleFilter">
          Search
        </el-button>
      </div>
    </div>
    <el-table
      v-loading="listLoading"
      :data="connectorList"
      class="no-border"
      style="width: 100%;min-height: 65vh;">
      <el-table-column
        label="Station ID"
        prop="sitePk"
        align="center"
        min-width="120">
          <template slot-scope="{row}">
            <span>{{ row.chargeBoxId }}</span>
          </template>
      </el-table-column>
      <el-table-column
        label="Site Name"
        prop="sitePk"
        align="center"
        min-width="120">
          <template slot-scope="{row}">
            <span>{{ row.siteName }}</span>
          </template>
      </el-table-column>
      <el-table-column
        label="Carpark Code"
        prop="carParkCode"
        align="center"
        min-width="120"/>
      <!--el-table-column
        label="Service Provider"
        prop="sitePk"
        align="center"
        width="180">
          <template slot-scope="{row}">
            <span>{{ row.providerName }}</span>
          </template>
      </el-table-column-->
      <el-table-column
        label="Connector ID"
        prop="sitePk"
        align="center"
        min-width="120">
          <template slot-scope="{row}">
            <span>{{ row.connectorId }}</span>
          </template>
      </el-table-column>
      <el-table-column
        label="Last Status Update"
        prop="sitePk"
        align="center"
        min-width="150">
          <template slot-scope="{row}">
            <span>{{ row.dateTime }}</span>
          </template>
      </el-table-column>
      <el-table-column
        label="Status"
        prop="sitePk"
        align="center"
        min-width="80">
          <template slot-scope="{row}">
            <span>{{ row.status }}</span>
          </template>
      </el-table-column>
      <el-table-column
        label="Error Code"
        prop="sitePk"
        align="center"
        min-width="100">
          <template slot-scope="{row}">
            <span>{{ row.errorCode }}</span>
          </template>
      </el-table-column>
      <el-table-column
        label="Vendor Error Code"
        prop="sitePk"
        align="center"
        min-width="150">
          <template slot-scope="{row}">
            <span>{{ row.vendorErrorCode }}</span>
          </template>
      </el-table-column>
      <el-table-column
        label="Action"
        prop="sitePk"
        align="center"
        width="70">
        <template slot-scope="{row}">
          <!-- <TableAction /> -->
          <el-dropdown
            class="action-dropdown"
            @command="(v) => handleCommand(v, row)">
            <i class="el-icon-more icon-action"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                command="showConnectorQR">
                QRCode
              </el-dropdown-item>
              <el-dropdown-item
                command="changeToAvailable"
                v-if='row.status == "Unavailable"'>
                Change Availability to Available
              </el-dropdown-item>
              <el-dropdown-item
                command="changeToUnavailable"
                v-else>
                Change Availability to Unavailable
              </el-dropdown-item>
              <el-dropdown-item
                command="unlockConnector">
                Unlock Connector
              </el-dropdown-item>
              <el-dropdown-item
                command="remoteStart"
                v-if='row.status == "Preparing"'>
                Remote Start Transaction
              </el-dropdown-item>
              <el-dropdown-item
                command="remoteStop"
                v-if='row.status == "Charging"'>
                Remote Stop Transaction
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <div class="right">
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="filter.pageNo"
        :limit.sync="filter.pageSize"
        @pagination="getConnectorList" />
    </div>
    <ConnectorTags
      :visible="printConnector.visible"
      :qrCode="printConnector.qrCode"
      @hide="hideConnectorQR"/>
    <DialogRemoteOcpp
      v-bind="actionDialog"
      @hide="hideActionDialog"/>
  </div>
</template>

<script>
  import Pagination from '@/components/Pagination' 
  import TableAction from '@/components/TableAction.vue'
  import ConnectorTags from './components/ConnectorTags.vue'
  import DialogRemoteOcpp from './components/DialogRemoteOcpp.vue'
  import api from '../../http/api/charge'
  import ocpp from '../../http/api/ocpp'
  export default {
    components: { Pagination, TableAction, ConnectorTags, DialogRemoteOcpp },
    data() {
      return {
        filter: {
          pageNo: 1,
          pageSize: 10,
          pageVo: {
            criteria: '',
            status: '',
            errorCode: ''
          }
        },
        listLoading: true,
        connectorList: [],
        total: 0,
        statusOptions: [],
        errCodeOptions: [],
        printConnector: {
          qrCode: "",
          visible: false
        },
        sitePk: "",
        actionDialog: {
          visible: false,
          isStart: true,
          item: {}
        }
      }
    },
    created() {
      if (this.$route.params.id) {
        this.filter.sitePk = this.sitePk = this.$route.params.id;
      }
      this.getStatusOption();
      this.getErrorCodeOptions();
    },
    methods: {
      goBack() {
        this.$router.push({
          path: "/site-management/edit/" + this.sitePk
        })
      },
      handleFilter() {
        this.filter.pageNo = 1;
        this.getConnectorList();
      },
      getStatusOption() {
        api.getStatusList().then(res => {
          if (res.data.length > 0) {
            res.data.forEach(item => {
              this.statusOptions.push({
                name: item,
                value: item
              })
            })
          }
          this.getConnectorList();
        }).catch(err => {
          this.$message.error(err)
        })
      },
      getErrorCodeOptions() {
        api.getErrorCodeOption().then(res => {
          if (res.data.length > 0) {
            res.data.forEach(item => {
              this.errCodeOptions.push({
                name: item,
                value: item
              })
            })
          }
          this.getConnectorList();
        }).catch(err => {
          this.$message.error(err)
        })
      },
      getConnectorList() {
        this.listLoading = true;
        api.getConnectorList(this.filter).then(res => {
          this.listLoading = false;
          this.total = res.total;
          this.connectorList = res.data;
        }).catch(err => {
          this.$message.error(err)
          this.listLoading = false;
        })
      },
      handleCommand(cb, item) {
        this[cb](item)
      },
      showConnectorQR(row) {
        this.printConnector.visible = true;
        this.printConnector.qrCode = row.chargeBoxId + "::" + row.connectorId
      },
      unlockConnector(row) {
        this.$confirm("Confirm unlock this connector?", "Unlock Connector",  {
          confirmButtonText: 'Confirm',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(res => {
          const params = {
            connectorId: row.connectorId,
            stationIds: [row.chargeBoxId]
          }
          this.sendPerform("ocppOperations/unlockConnector", params);
        })
      },
      changeToAvailable(row) {
        this.$confirm("Confirm change to available?", "Change Availability",  {
          confirmButtonText: 'Confirm',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(res => {
          const params = {
            availType: "OPERATIVE",
            connectorId: row.connectorId,
            stationIds: [row.chargeBoxId]
          }
          this.sendPerform("ocppOperations/changeAvailability", params);
        })
      },
      changeToUnavailable(row) {
        this.$confirm("Confirm change to unavailable?", "Change Availability",  {
          confirmButtonText: 'Confirm',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(res => {
          const params = {
            availType: "INOPERATIVE",
            connectorId: row.connectorId,
            stationIds: [row.chargeBoxId]
          }
          this.sendPerform("ocppOperations/changeAvailability", params);
        })
      },
      sendPerform(api, params) {
        this.listLoading = true;
        ocpp.sendPerform(api, params).then(res => {
          this.listLoading = false;
          if (res.data.taskId) {
            this.$openRoute("/ocpp-operations/result/" + res.data.taskId);
            //this.$router.push({path: '/ocpp-operations/result/' + res.data.taskId});
          }
        }).catch(err => {
          this.listLoading = false;
          this.$message({
            type: 'error',
            message: err
          })
        });
      },
      remoteStart(row) {
        this.actionDialog.visible = true;
        this.actionDialog.item = row;
        this.actionDialog.isStart = true;
        /*this.$confirm("Confirm remote start?", "Remote",  {
          confirmButtonText: 'Confirm',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(res => {
          const params = {
            connectorId: row.connectorId,
            stationIds: [row.chargeBoxId],
            //mobileNumber: ""
          }
          //this.sendPerform("ocppOperations/remoteStartTransaction", params);
        })*/
      },
      remoteStop(row) {
        this.actionDialog.visible = true;
        this.actionDialog.item = row;
        this.actionDialog.isStart = false;
        /*this.$confirm("Confirm remote stop?", "Remote",  {
          confirmButtonText: 'Confirm',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(res => {
          const params = {
            availType: "INOPERATIVE",
            connectorId: row.connectorId,
            stationIds: [row.chargeBoxId]
          }
          //this.sendPerform("ocppOperations/remoteStopTransaction", params);
        })*/
      },
      hideConnectorQR() {
        this.printConnector.visible = false;
      },
      hideActionDialog() {
        this.actionDialog.visible = false;
      }
    }
  }
</script>

<style lang="scss">
  .filter-item {
    &.el-input {
      width: 100%;
      .el-input__inner {
        width: 100%;
        min-width: 300px;
        max-width: 500px;
        border-radius: 2px;
      }
    }
  }
  .back-icon {
    width: 30px;
    height: 30px;
    padding: 10px;
    display: flex;
    cursor: pointer;
    font-size: 18px;
    align-items: center;
  }
</style>
