<template>
  <div class="app-container">
    <el-card class="box-carde">
      <div slot="header" class="clearfix">
        <span>上报数据限制记录</span>
      </div>
      <el-container>
        <el-header style="padding: 0px;display:flex;justify-content:space-between;align-items: center">
          <div style="display: inline">
            <el-date-picker
              v-model="dateTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"/>
            <el-button type="primary" size="mini" style="margin-left: 5px" icon="el-icon-search" @click="searchEmp">搜索
            </el-button>
          </div>
        </el-header>
            <div>
              <el-table
                v-loading="tableLoading"
                :data="emps.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                height="500px"
                border
                stripe
                size="mini"
                style="width: 100%">
                <el-table-column
                  :show-overflow-tooltip="true"
                  :formatter="dateFormat"
                  prop="operationalTime"
                  align="center"
                  header-align="center"
                  label="操作时间"/>
                <el-table-column
                  :show-overflow-tooltip="true"
                  prop="limitTime"
                  :formatter="dateFormats"
                  align="center"
                  header-align="center"
                  label="干预数据日期"/>
                <el-table-column
                  :show-overflow-tooltip="true"
                  :formatter="operationalFormat"
                  prop="operationalStatus"
                  align="center"
                  header-align="center"
                  label="操作类型"/>
                <el-table-column
                  header-align="center"
                  align="center"
                  label="操作">
                  <template slot-scope="scope">
                    <el-button
                      style="padding: 3px 4px 3px 4px;margin: 2px"
                      size="mini"
                      icon="el-icon-document"
                      @click="showErrorInfo(scope.row)">查看内容
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div style="display: flex;justify-content: space-between;margin: 2px;float: right">
                <el-pagination
                  :current-page="currentPage"
                  :page-size="pageSize"
                  :page-sizes="[10, 25, 50, 100]"
                  :total="totalCount"
                  background
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleSizeChange"
                  @current-change="currentChange"/>
              </div>
            </div>
        <el-form
          ref="addEmpForm"
          :model="emp"
          style="margin: 0px;padding: 0px;"
          label-width="100px">
          <el-dialog
            :close-on-click-modal="false"
            :visible.sync="dialogVisibleErrorInfo"
            title="具体信息"
            style="padding: 0px;"
            label-width="1px"
            width="1000px">
            <el-input
              v-model="emp.operationalContext"
              :rows="20"
              type="textarea"
              style="width: 100%" />
            <span
              slot="footer"
              class="dialog-footer">
            <el-button
              size="mini"
              @click="cancelEidtEI">关 闭</el-button>
          </span>
          </el-dialog>
        </el-form>
      </el-container>
    </el-card>
  </div>
</template>
<script>
export default {


  data() {
    return {
      ef: '',
      // 日期选择器
      dateTime: [new Date(new Date().toLocaleDateString()).getTime() , new Date(new Date().toLocaleDateString()).getTime() + 60 * 60 * 24 * 3 * 1000],
      // 场站信息存储对象
      elTableData: [],
      efiId: '',
      emps: [],
      keywords: '',
      jType: '',
      dialogTitle: '',
      dialogVisibleErrorInfo: false,
      multipleSelection: [],
      depTextColor: '#c0c4cc',
      totalCount: -1,
      currentPage: 1,
      pageSize: 10,
      dialogVisible: false,
      tableLoading: false,
      fileParsing: [],
      activeName: 'first',
      forecastAndManualInterventionData: [],
      forecastValueCorrectAfterData: [],
      forecastTimeData: [],
      capacityUnit: '',
      capacity:'',
      emp:{
        operationalContext:''
      }
    }
  },
  mounted: function() {
    this.fileType=0;
    this.getAllClass()
  },

  methods: {
    cancelEidtEI () {
      this.dialogVisibleErrorInfo = false
    },
    showErrorInfo (row) {
      this.emp.operationalContext = row.operationalContext
      this.dialogVisibleErrorInfo = true
    },
    // // 获取后台所有场站信息
    // getELData() {
    //   this.$axios.post('/electricFieldInfo/findAllElectricFieldInfo').then((res) => {
    //     this.elTableData = res.data
    //     this.efiId = res.data[0].id
    //     // this.capacityUnit=res.data[0].capacityUnit
    //     // this.type = 'NWP'
    //     this.getAllClass()
    //   })
    // },
    // 表格所属场站，ID转换场站名称
    formatStation(row, column) {
      let belongTo = '未知的所属场站'
      for (let i = 0; i < this.elTableData.length; i++) {
        if (row.efiId === this.elTableData[i].id) {
          belongTo = this.elTableData[i].name
        }
      }
      return belongTo
    },
    // 根据类型获取class
    getAllClass() {
      if (this.dateTime == '' || this.dateTime == null) {
        alert('请选择时间')
        return
      }
      this.$axios.get('/electricField/').then((res) => {
        this.capacityUnit = 'mw'
        this.capacity=res.data.capacity
      })
      const formData = new FormData()
      const startTime = Math.round(this.dateTime[0])
      const endTime = Math.round(this.dateTime[1]) + 60 * 60 * 24 * 1000 - 1
      this.$axios.get('/dataLimitationLogController/queryDataLimitationLog/'+ startTime +'/' + endTime ).then((res) => {
        this.emps = res.data
        this.totalCount = this.emps.length
      })

    },
    operationalFormat(row, column) {
      let belongTo = '未知的文件类型场站'
      for (let i = 0; i < this.emps.length; i++) {
        if (row.operationalStatus =="0") {
          belongTo ="新增"
        }
        if (row.operationalStatus =="1") {
          belongTo ="修改"
        }
        if (row.operationalStatus =="2") {
          belongTo ="删除"
        }
      }
      return belongTo
    },
    // 时间格式化
    dateFormat(row, column) {
      const date = row[column.property]
      if (date === undefined) {
        return ''
      }
      return this.$moment(date).format('YYYY-MM-DD HH:mm:ss')// 使用moment插件进行日期格式化
    },
    timestampToTime(time) {
      const a = parseInt(time)
      const date = new Date(a) // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      const Y = date.getFullYear() + '-'
      const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      const D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' '
      const H = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':'
      const m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':'
      const s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds())
      return Y + M + D + H + m + s
    },
    // 时间格式化
    dateFormats(row, column) {
      const date = row[column.property]
      if (date === undefined) {
        return ''
      }
      return this.$moment(date).format('YYYY-MM-DD')// 使用moment插件进行日期格式化
    },
    searchEmp() {
      this.getAllClass()
    },
    currentChange(currentChange) {
      this.currentPage = currentChange
      this.getAllClass()
    },
    handleSizeChange(handleSizeChange) {
      this.pageSize = handleSizeChange
      this.getAllClass()
    },
    // 自定义排序
  }
}
</script>
<style>
.el-dialog__body {
  padding-top: 0px;
  padding-bottom: 0px;
}

.slide-fade-enter-active {
  transition: all .8s ease;
}

.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.slide-fade-enter, .slide-fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
}

#MyShortTermRealCharts {
  width: 100%;
  height: 500px;
}
</style>
