<template>
  <div id="main" class="h-all">
    <el-dialog
      @close="AddTo"
      @open="initFirst"
      v-dialogDrag
      :title=title
      :visible.sync="visibleFlag">
      <el-form inline="true">
        <el-main>
          <el-header height="auto">
            <div class="header-button-box">
              <!--                <el-button size='mini' icon="el-icon-download" type="success" @click="exportToExcelInit">-->
              <el-button size='mini' icon="el-icon-download" type="success" @click="downloadInit = true">
                {{$t("common.exportBtn")}}
              </el-button>
            </div>
          </el-header>
          <el-table
            id="myTable"
            tooltip-effect="dark"
            highlight-current-row
            ref="singleTable"
            :data="performList"
            border="true"
            stripe
            height="400px"
            header-row-class-name="table-header"
            cell-class-name="table-cell">
            <el-table-column
              type="index"
              :label="$t('AlarmStatistics.No')"
              width="50">
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              v-for="(item, index) in tableLabel"
              :key="index"
              :prop="item.prop"
              :width="item.width"
              :label="item.label">
            </el-table-column>
          </el-table>
        </el-main>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size='mini' type="primary" icon='el-icon-circle-check' @click="AddTo">
          {{$t("common.ok")}}
        </el-button>
        <el-button size='mini' @click="AddTo" icon='el-icon-circle-close'>{{$t("common.cancel")}}</el-button>
      </div>
    </el-dialog>
    <el-dialog
      v-dialogDrag
      @close="downloadCancle"
      title="导出文件格式选择"
      :visible.sync="downloadInit"
      width="400px"
      height="360px"
      style="font-size: 20px">
      <div>
        <el-radio-group v-model="radio"  size="mini">
          <el-radio label="0" border>excel</el-radio>
          <el-radio label="1" border>csv</el-radio>
        </el-radio-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="exportToInit" icon='el-icon-circle-check' size="mini">{{$t("common.ok")}}</el-button>
        <el-button @click="downloadCancle" icon='el-icon-circle-close' size="mini">{{$t("common.cancel")}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import HelperUtil from '../../utils/HelperUtil'

export default {
  name: 'RtTable',
  props: {
    visibleFlag: false,
    dataList: [],
    rate: ''
  },
  data: function () {
    return {
      title: '',
      tableLabel: [],
      performList: [],
      timeInt: null,
      downloadInit: false,
      radio: '0'
    }
  },
  methods: {
    /**
       * @Description  : 下载
       * @author       : ls
       * @date         : 2020/7/10 9:26
       * @param        :
       * @return       :
       */
    exportToExcelInit: function () {
      if (this.performList.length === 0) {
        this.InfoTip.warningTip_alarm(this, {message: '暂无数据!'})
      } else {
        HelperUtil.downloadExcel('实时性能.xlsx')
      }
    },
    exportToCsvInit: function () {
      var title = this.tableLabel.map(obj => { return obj.label })
      var titleForKey = this.tableLabel.map(obj => { return obj.prop })
      var data = this.performList
      var str = []
      str.push(title.join(',') + '\n')
      for (var i = 0; i < data.length; i++) {
        var temp = []
        for (var j = 0; j < titleForKey.length; j++) {
          if (j === 0) {
            temp.push(data[i][titleForKey[j]].concat('\t'))
          } else {
            temp.push(data[i][titleForKey[j]])
          }
        }
        str.push(temp.join(',') + '\n')
      }
      var uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str.join(''))
      var downloadLink = document.createElement('a')
      downloadLink.href = uri
      downloadLink.download = '实时性能.csv'
      document.body.appendChild(downloadLink)
      downloadLink.click()
      document.body.removeChild(downloadLink)
    },
    exportToInit: function () {
      this.downloadInit = false
      if (this.performList.length === 0) {
        this.InfoTip.warningTip_alarm(this, {message: '暂无数据!'})
      } else {
        if (this.radio === '0') {
          this.exportToExcelInit()
        } else {
          this.radio = '0'
          this.exportToCsvInit()
        }
      }
    },
    downloadCancle: function () {
      this.downloadInit = false
      this.radio = '0'
    },
    /**
       * @Description  : 表格
       * @author       : ls
       * @date         : 2020/7/9 9:54
       * @param        :
       * @return       :
       */
    initFirst: function () {
      this.title = '实时性能'
      this.tableLabel = []
      this.performList = []
      this.tableLabel.push(
        {
          label: '时间',
          prop: 'time'
        }
      )
      var flag = true
      for (let t = 0; t < this.dataList.length; t++) {
        for (let n = 0; n < this.dataList[t].data.length; n++) {
          var obj = {}
          if (flag) {
            obj['time'] = HelperUtil.timeTran(HelperUtil.dateToString(new Date(this.dataList[t].data[n][0])))
            obj[this.dataList[t].name] = this.dataList[t].data[n][1]
            this.performList.push(
              obj
            )
            if (n === 99) {
              flag = false
            }
          }
        }
        this.tableLabel.push(
          {
            label: this.dataList[t].name,
            prop: this.dataList[t].name
          }
        )
      }
      for (let i = 1; i < this.dataList.length; i++) {
        for (let q = 0; q < this.dataList[i].data.length; q++) {
          this.performList[q][this.dataList[i].name] = this.dataList[i].data[q][1]
        }
      }
      this.refresh()
    },
    /**
       * @Description  : 刷新
       * @author       : ls
       * @date         : 2020/7/10 10:36
       * @param        :
       * @return       :
       */
    refresh: function () {
      let _this = this
      this.timeInt = setInterval(function () {
        var flag = true
        for (let i = 0; i < _this.dataList.length; i++) {
          if (_this.dataList[i].data.length > 0 && flag) {
            var obj = {}
            obj['time'] = HelperUtil.timeTran(HelperUtil.dateToString(new Date(_this.dataList[i].data[99][0])))
            obj[_this.dataList[i].name] = _this.dataList[i].data[99][1]
            _this.performList.push(
              obj
            )
            flag = false
            _this.performList.shift()
          }
        }

        for (let j = 1; j < _this.dataList.length; j++) {
          if (_this.dataList[j].data.length > 0) {
            _this.performList[99][_this.dataList[j].name] = _this.dataList[j].data[99][1]
          }
        }
      }, _this.rate)
    },
    /**
       * @Description  : 确认
       * @author       : ls
       * @date         : 2020/6/8 10:16
       * @param        :
       * @return       :
       */
    AddTo: function () {
      this.$emit('update:visibleFlag', false)
      clearInterval(this.timeInt)
      this.timeInt = null
    }
  }
}
</script>

<style scoped lang="scss">
  /*!* 外层布局容器样式 *!*/
  .el-header {
    background-color: #f9fafc;
    color: #333;
    line-height: 40px;
  }

  #box{
    width:100%;
    height:100%;
    overflow:hidden;
  }
  .el-card__header {
    background-color: greenyellow;
  }

  /* .el-input {
     width: 330px;
   }*/

  /deep/ .el-textarea__inner{
    font-size: 12px;
  }
</style>
