<template>
  <div class="card-container">
    <div class="card-content" v-loading="loading">
      <div class="section-title">OCPP operation results</div>
      <el-form
        label-position="left"
        label-width="130px"
        :model="taskInfo">
        <el-row :gutter="20">
          <el-col :xs="24" :md="12" :lg="8">
            <el-form-item
              label="Operation:">
              <el-input
                style="max-width: 320px;"
                v-model="taskInfo.operationName"
                readonly/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :md="12" :lg="8">
            <el-form-item
              label="Start Timestamp:">
              <el-input
                style="max-width: 320px;"
                v-model="taskInfo.startTimestamp"
                readonly/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :md="12" :lg="8">
            <el-form-item
              label="End Timestamp:">
              <el-input
                style="max-width: 320px;"
                v-model="taskInfo.endTimestamp"
                readonly/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table
        class="result-table"
        :data="tableList">
        <el-table-column
          :label="item.label"
          align="center"
          class-name="fixed-width"
          v-for="(item, index) in columns"
          :key="index"
          :width="item.width">
          <template slot-scope="{row}">
            <span>{{ row[item.key] }}</span>
            <a href="javascript:void(0)"
              v-if="item.detail && row.details"
              class="link-detail"
              @click="showDetail(row.stationId, row.details)">(Details)</a>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      title="Details"
      width="70%"
      top="6vh"
      :visible.sync="showDetailDialog">
      <div style="color: #333; font-size: 15px;padding-bottom: 20px;">GetConfigurationResponse from <b>{{stationId}}</b></div>
      <el-table
        :data="detailInfo.configurationKeys"
        height="70vh">
        <el-table-column
          label="Key"
          align="center"
          class-name="fixed-width">
          <template slot-scope="{row}">{{row.key}}</template>
        </el-table-column>
        <el-table-column
          label="Value"
          align="center"
          class-name="fixed-width">
          <template slot-scope="{row}">{{row.value}}</template>
        </el-table-column>
        <el-table-column
          label="Read only"
          align="center"
          class-name="fixed-width">
          <template slot-scope="{row}">{{row.readonly}}</template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
  import ocpp from '../../http/api/ocpp'
  export default {
    data() {
      return {
        loading: false,
        taskId: this.$route.params.taskId,
        taskInfo: {},
        tableList: [],
        columns: [{
          key: 'siteName',
          label: 'Site Name'
        }, {
          key: 'stationId',
          label: 'Station ID'
        }, {
          key: 'response',
          label: 'Response',
          detail: true
        }, {
          key: 'errorMessage',
          label: 'Error'
        }],
        stationId: '',
        detailInfo: {},
        showDetailDialog: false,
      }
    },
    created() {
      this.loading = true;
      setTimeout(() => {
        this.getTaskInfo();
      }, 5000);
    },
    methods: {
      async getTaskInfo() {
        const res = await ocpp.getTaskInfo(this.taskId);
        if (res.success) {
          this.taskInfo = res.data;
          if (this.taskInfo.resultMap) {
            const list = [];
            for (let station in this.taskInfo.resultMap) {
              const item = this.taskInfo.resultMap[station]
              list.push({
                siteName: '',
                stationId: station,
                response: item.response,
                details: item.details,
                errorMessage: item.errorMessage
              })
            }
            this.tableList = list;
          }
        }
        this.loading = false;
      },
      showDetail(station, detail) {
        this.stationId = station;
        this.detailInfo = detail;
        this.showDetailDialog = true;
      }
    }
  }
</script>
<style scoped="scoped" lang='scss'>
  @import '../../styles/variables.scss';
  
  .card-container {
    width: 100%;
    padding: 20px 40px;
    min-height: $mainAppMinHeight;
    background-color: #F0F5FC;
  }
  .card-content {
    padding: 15px 30px;
    border-radius: 6px;
    background-color: white;
  }
  .section-title {
    color: #333;
    margin-top: 20px;
    margin-bottom: 30px;
    font-size: 15px;
    user-select: none;
    line-height: 24px;
    font-weight: 700;
    font-family: sans-serif;
    text-transform: uppercase;
  }
  .link-detail {
    color: #2370ff;
    margin-left: 4px;
    text-decoration: underline;
    &:active,
    &:hover {
      color: #ff5500;
      text-decoration: none;
    }
  }
  
  .result-table {
    width: 100%;
    min-height: 65vh;
    margin-top: 20px;
  }
  
  .result-table:before {
    height: 0;
  }
 
  @media screen and (max-width: 500px) {
    .card-container {
      padding: 0px;
    }
    .card-content {
      padding: 10px;
    }
  }
</style>
