<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="date"
            placeholder="选择日期"/>
          <el-button type="primary" size="mini" style="margin-left: 5px" icon="el-icon-search" @click="searchEmp">搜索
          </el-button>
          <el-button type="primary" size="mini" style="margin-left: 5px" icon="el-icon-plus" @click="saveManual('form')">保存
          </el-button>
        </div>
      </el-header>

      <el-tabs v-model="activeName" type="card">

        <div>
          <el-table
            v-loading="tableLoading"
            :data="form.slice((currentPage-1)*pageSize,currentPage*pageSize)"
            height="550px"
            border
            stripe
            size="mini"
            style="width: 100%">
            <el-table-column
              prop="time1"
              header-align="center"
              align="center"
              label="时间">
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              prop="dataMin1"
              header-align="center"
              align="center"
              label="下限值">
              <template slot-scope="scope">
                <vxe-input type="number" v-model="scope.row.dataMin1" size="small"  style="width:100%" min="0" :max="capacity" placeholder="超过装机容量默认最大值"></vxe-input>
              </template>
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              prop="dataMax1"
              header-align="center"
              align="center"
              label="上限值">
              <template slot-scope="scope">
                <vxe-input type="number" v-model="scope.row.dataMax1" size="small"  style="width:100%" min="0" :max="capacity" placeholder="超过装机容量默认最大值"></vxe-input>
              </template>
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              prop="time2"
              align="center"
              header-align="center"
              label="时间"/>
            <el-table-column
              :show-overflow-tooltip="true"
              prop="dataMin2"
              align="center"
              header-align="center"
              label="下限值">
              <template slot-scope="scope">
                <vxe-input type="number" v-model="scope.row.dataMin2" size="small"  style="width:100%" min="0" :max="capacity" placeholder="超过装机容量默认最大值"></vxe-input>
              </template>
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              prop="dataMax2"
              align="center"
              header-align="center"
              label="上限值">
              <template slot-scope="scope">
                <vxe-input type="number" v-model="scope.row.dataMax2" size="small"  style="width:100%" min="0" :max="capacity" placeholder="超过装机容量默认最大值"></vxe-input>
              </template>
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              prop="time3"
              align="center"
              header-align="center"
              label="时间"/>
            <el-table-column
              :show-overflow-tooltip="true"
              prop="dataMin3"
              align="center"
              header-align="center"
              label="下限值">
              <template slot-scope="scope">
                <vxe-input type="number" v-model="scope.row.dataMin3" size="small"  style="width:100%" min="0" :max="capacity" placeholder="超过装机容量默认最大值"></vxe-input>
              </template>
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              prop="dataMax3"
              align="center"
              header-align="center"
              label="上限值">
              <template slot-scope="scope">
                <vxe-input type="number" v-model="scope.row.dataMax3" size="small"  style="width:100%" min="0" :max="capacity" placeholder="超过装机容量默认最大值"></vxe-input>
              </template>
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              prop="time4"
              align="center"
              header-align="center"
              label="时间"/>
            <el-table-column
              :show-overflow-tooltip="true"
              prop="dataMin4"
              align="center"
              header-align="center"
              label="下限值">
              <template slot-scope="scope">
                <vxe-input type="number" v-model="scope.row.dataMin4" size="small"  style="width:100%" min="0" :max="capacity" placeholder="超过装机容量默认最大值"></vxe-input>
              </template>
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              prop="dataMax4"
              align="center"
              header-align="center"
              label="上限值">
              <template slot-scope="scope">
                <vxe-input type="number" v-model="scope.row.dataMax4" size="small"  style="width:100%" min="0" :max="capacity" placeholder="超过装机容量默认最大值"></vxe-input>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tabs>
    </el-container>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ef: '',
      // 日期选择器
      dateTime:  new Date(new Date().toLocaleDateString()),
      // 场站信息存储对象
      elTableData: [],
      efiId: '',
      emps: [],
      dataList: [],
      keywords: '',
      jType: '',
      dialogTitle: '',
      multipleSelection: [],
      downLoading: false,
      depTextColor: '#c0c4cc',
      totalCount: -1,
      currentPage: 1,
      pageSize:25,
      dialogVisible: false,
      tableLoading: false,
      fileParsing: [],
      activeName: 'first',
      ultraValueData: [],
      shortValueData: [],
      realPowerValueData: [],
      capacityUnit: '',
      capacity: '',
      shortValueDate: [],
      form:[{
        time1:'',
        dataMax1:'',
        dataMin1:'',
        time2:'',
        dataMax2:'',
        dataMin2:'',
        time3:'',
        dataMax3:'',
        dataMin3:'',
        time4:'',
        dataMax4:'',
        dataMin4:'',
        lastModifyTime:''
      }],

    }
  },
  created: function() {
    this.getEl()

  },

  methods: {
    getEl(){
      this.$axios.get("/electricField/").then(res => {
        this.capacity = res.data.capacity
        this.queryManualIntervention()
        // console.log("获取场站信息成功")
      })
    },
    timestampToTimess(time) {
      const date = new Date(time)// 时间戳为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())
      return Y + M + D + H + m
    },
    timestampToTimes(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())
      return Y + M + D
    },
    // 根据类型获取class
    queryManualIntervention() {
      this.tableLoading =true
      const a=[];
      const b=[];
      const c=[];
      const d=[];
      for(var i=0; i<=23;i++){
        if(i<10){
          a.push(this.timestampToTimes(Math.round(this.dateTime))+"0"+i+":00")
          b.push(this.timestampToTimes(Math.round(this.dateTime))+"0"+i+":15")
          c.push(this.timestampToTimes(Math.round(this.dateTime))+"0"+i+":30")
          d.push(this.timestampToTimes(Math.round(this.dateTime))+"0"+i+":45")
        }else{
          a.push(this.timestampToTimes(Math.round(this.dateTime))+i+":00")
          b.push(this.timestampToTimes(Math.round(this.dateTime))+i+":15")
          c.push(this.timestampToTimes(Math.round(this.dateTime))+i+":30")
          d.push(this.timestampToTimes(Math.round(this.dateTime))+i+":45")
        }
      }
      for(var i=0; i<a.length;i++){
        this.form[i]={
          time1:a[i],
          dataMax1:"",
          dataMin1:"",
          time2:b[i],
          dataMax2:"",
          dataMin2:"",
          time3:c[i],
          dataMax3:"",
          dataMin3:"",
          time4:d[i],
          dataMax4:"",
          dataMin4:"",
        }
      }
      const startTime = Math.round(this.dateTime)
      const endTime = Math.round(this.dateTime) + 60 * 60 * 24 * 1000 - 1
      this.$axios.get('/dataLimitationController/queryDataLimitationServicea/'+startTime+'/'+endTime).then((res) => {
        for(var i=0;i<res.data.length;i++){
          for(var j=0;j<this.form.length;j++){
            if(this.timestampToTimess(res.data[i].limitTime) == this.form[j].time1){
              this.form[j].dataMax1 = res.data[i].upperLimit
              this.form[j].dataMin1 = res.data[i].lowerLimit
            }
            if(this.timestampToTimess(res.data[i].limitTime) == this.form[j].time2){
              this.form[j].dataMax2 = res.data[i].upperLimit
              this.form[j].dataMin2 = res.data[i].lowerLimit
            }
            if(this.timestampToTimess(res.data[i].limitTime) == this.form[j].time3){
              this.form[j].dataMax3 = res.data[i].upperLimit
              this.form[j].dataMin3 = res.data[i].lowerLimit
            }
            if(this.timestampToTimess(res.data[i].limitTime) == this.form[j].time4){
              this.form[j].dataMax4 = res.data[i].upperLimit
              this.form[j].dataMin4 = res.data[i].lowerLimit
            }
          }
        }
        this.totalCount = this.form.length
        this.tableLoading = false
      }).catch((error) => {
        this.$message.error('查询人工干预数据出错' + error)
      })
    },

    saveManual(formName){
      this.tableLoading = true
      this.form[0].lastModifyTime = Math.round(this.dateTime)
      this.$axios.put('/dataLimitationController/saveDataLimitation', this.form).then((res) => {
        this.$message.success(`保存成功`)
        this.queryManualIntervention()
        this.tableLoading = false
      }).catch((error) => {
        this.$message.error('保存数据限制出错' + error)
      })
    },
    // 时间格式化
    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())
      return H + m
    },

    searchEmp() {
      this.queryManualIntervention()
    },
    currentChange(currentChange) {
      this.currentPage = currentChange
      this.queryManualIntervention()
    },
    handleSizeChange(handleSizeChange) {
      this.pageSize = handleSizeChange
      this.queryManualIntervention()
    },
    changeTime(row, column) {
      return this.timestampToTime(row.time1)
    },
  }
}
</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;
}

#MyUltraShortTermChart {
  width: 100%;
  height: 400px;
}
</style>
