<template>
  <el-dialog
    title="VIEW RATE"
    :visible="visible"
    :before-close="onHide"
    class="flexl flexcc"
    custom-class="history-rate-dialog">
    <div class="table-view" v-loading="loading">
      <el-table
        :data="tableData"
        class="no-border"
        height="100%">
        <el-table-column
          align="center"
          label="Rate Name"
          prop="rateName"
          min-width="140"/>
        <el-table-column
          align="center"
          label="Repeat"
          prop="repeat"
          min-width="120"/>
        <el-table-column
          align="center"
          label="Start Time"
          prop="startTime"
          min-width="100"/>
        <el-table-column
          align="center"
          label="End Time"
          prop="endTime"
          min-width="100"/>
        <el-table-column
          align="center"
          label="Rate Configured"
          prop="siteName"
          min-width="180">
          <template slot-scope="{row}">
            <div v-for="item in row.rateConfigs" :key="item">{{item}}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>

<script>
import site from '../../http/api/site'
export default {
  name: "HistoryRate",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: String|Number
  },
  data() {
    return {
      loading: false,
      tableData: []
    };
  },
  watch: {
    visible: {
      handler(n, o) {
        if (n && this.id) {
          this.tableData = []
          this.getHistoryRate();
        }
      }
    }
  },
  mounted() {
    
  },
  methods: {
    onHide() {
      this.$emit("hide")
    },
    getHistoryRate() {
      this.loading = true;
      site.getHistoryRates({
        sitePk: this.id
      }).then(res => {
        if (res.data) {
          this.tableData = res.data;
        }
      }).catch(err => {
        this.$message({
          message: err,
          type: 'error'
        })
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style>
.history-rate-dialog {
  width: 100%;
  display: flex;
  max-width: 800px;
  margin-top: 0 !important;
  flex-direction: column;
}
.history-rate-dialog .el-dialog__body {
  flex: 1;
  padding: 20px;
  display: flex;
  overflow: hidden;
  flex-direction: column;
}
.history-rate-dialog .table-view {
  height: 60vh;
  margin-bottom: 20px;
}
@media screen and (max-width: 600px) {
  .history-rate-dialog .table-view {
    height: 80vh;
    margin-bottom: 10px;
  }
}
</style>