<template>
  <div class="app-container">
    <div class="card-content" v-if="false">
      <el-form
        :model="form"
        :rules="rule"
        ref="addForm"
        label-position="right"
        label-width="90px">
        <el-form-item
          label="Site Name:">
          <el-input
            class="add-text"
            v-model="table.list[0].siteName"
            placeholder="Add text"
            maxlength="100"
            readonly
            v-if="table.total"/>
        </el-form-item>
        <el-form-item
          label="Station ID:">
          <div class="flexcwr">
            <el-input
              class="add-text"
              v-model="params.pageVo.chargeBoxId"
              style="margin-bottom: 10px;"
              placeholder="Add text"
              maxlength="100"
              readonly/>
          </div>
        </el-form-item>
        <!--el-form-item
          label="Connector: ">
          <div class="flexcwr">
            <el-input
              class="add-text"
              style="margin-bottom: 10px;"
              v-model="form.connector"
              placeholder="Add text"
              maxlength="100"
              readonly/>
            <el-button
              type="primary"
              style="margin-bottom: 10px;"
              @click="onExport">
              Export
            </el-button>
          </div>
        </el-form-item-->
      </el-form>
    </div>
    <div class="filter-container right">
      <el-button
        type="primary"
        :loading="loading"
        @click="onExport">
        Export
      </el-button>
    </div>
    <el-table
      class="info-table"
      :data="table.list">
      <el-table-column
        label="Site Name"
        align="center"
        prop="siteName">
      </el-table-column>
      <el-table-column
        label="Station ID"
        align="center"
        prop="chargeBoxId">
      </el-table-column>
      <el-table-column
        label="Notification"
        align="center"
        prop="notification">
      </el-table-column>
      <el-table-column
        label="Timestamp"
        align="center"
        prop="timestamp">
      </el-table-column>
    </el-table>
    <div class="right">
      <pagination
        v-show="table.total > 0"
        :total="table.total"
        :page.sync="params.pageNo"
        :limit.sync="params.pageSize"
        @pagination="getDetail" />
    </div>
  </div>
</template>

<script>
import api from '@/http/api/incident'
import { Base64 } from 'js-base64';
import Pagination from '@/components/Pagination'
export default {
  data() {
    return {
      loading: false,
      form: {
        
      },
      rule: {
        
      },
      params: {
        pageNo: 1,
        pageSize: 10,
        pageVo: {
          sitePk: "",
          chargeBoxId: ""
        }
      },
      table: {
        list: [],
        total: 0,
        loading: false
      }
    }
  },
  components: { Pagination },
  created() {
    if (this.$route.params.id) {
      const params = JSON.parse(Base64.decode(this.$route.params.id));
      this.params.pageVo = params;
      this.getDetail();
    }
  },
  methods: {
    getDetail() {
      this.table.loading = true;
      api.viewConnectivityInfo(this.params).then(res => {
        if (res.data) {
          this.table.list = res.data
          this.table.total = res.total
        }
      }).catch(err => {
        this.$message({
          type: 'error',
          message: err
        })
      }).finally(() => {
        this.table.loading = false
      })
    },
    onExport() {
      this.loading = true;
      api.exportConnectivity(this.params.pageVo).then(res => {
        if (res && res.size > 0) {
          const name = 'Export-' + this.params.pageVo.chargeBoxId + '-' + new Date().getTime() + '.xls'
          this.downloadFile(res, name);
        } else {
          this.$message.error('Empty files');
        }
      }).catch(err => {
        this.$message({
          type: 'error',
          message: err
        })
      }).finally(() => {
        this.loading = false
      })
    },
    downloadFile(res, fileName) {
      const blob = new Blob([res], {
        type: 'application/pdf;charset=utf-8'
      })
      // let href = window.URL.createObjectURL(blob)
      if ('download' in document.createElement('a')) {
        // 非IE下载
        const elink = document.createElement('a')
        elink.download = fileName
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href) // 释放URL 对象
        document.body.removeChild(elink)
      } else {
        // IE10+下载
        navigator.msSaveBlob(blob, fileName)
      }
    }
  }
}
</script>

<style scoped="scoped" lang='scss'>
  @import '../../styles/variables.scss';
  
  .card-container {
    width: 100%;
    padding: 20px 60px;
    min-height: $mainAppMinHeight;
    background-color: #F0F5FC;
  }
  .card-content {
    margin: 0 8px 16px;
    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: bold;
    font-family: sans-serif;
    text-transform: uppercase;
  }
  .info-table {
    width: 100%;
    min-height: 65vh;
    margin-top: 20px;
  }
  
  .info-table:before {
    height: 0;
  }
  .add-text {
    width: 100%;
    max-width: 300px;
  }
  .add-text ::v-deep .el-textarea__inner {
    font-family: sans-serif;
  }
  .hr {
    height: 2px;
    margin: 10px -40px;
    background-color: #F0F5FC;
  }
  .hr-full {
    height: 2px;
    margin: 80px -80px 30px;
    background-color: #F0F5FC;
  }
  .rate-list-view {
    display: flex;
    align-items: center;
  }
  .rate-text {
    max-width: 150px;
    padding-right: 14px;
  }
  .list-item-icon {
    width: 30px;
    height: 30px;
    cursor: pointer;
    margin: 0 10px 22px;
  }
  .buttons {
    padding-top: 15px;
    padding-bottom: 15px;
  }
  @media screen and (max-width: 500px) {
    .card-container {
      padding: 0px;
    }
    .card-content {
      padding: 15px 30px;
    }
  }
</style>