<template>
  <div class="largeScreen">
    <div class="app-title-bg">
      <span class="sys-time">{{ sysTime }}</span>
      <div class="top-right-style flex items-center">
        <div class="top-badge">
          <el-badge :value="badgeValue.alarm">
            <img src="../../assets/images/svg/remind.svg" width="30px" @click="openAlarm()"/>
          </el-badge>
        </div>

        <div class="cpp-btu-background home-jump-btu">
          <span @click="jumpRout">后台管理</span>
        </div>
      </div>

      <div class="titleBg">
        <span class="title-text">集 中 功 率 预 测</span>
      </div>
    </div>
    <div class="home-main-container">
      <echarts-map/>
      <!-- 上     -->
      <div class="float-container top-1 width-100 height-10r flex ">
        <div v-for="item of digitalDisk" class="width-20 flex-column items-center">
          <div>
            <div class="text-bg text-style">{{ item.name }}</div>
            <div class="flex items-center number-bg-style">
              <div v-for="num of item.num" class="flex items-center justify-center num-style number-bg ">{{ num }}</div>
              <span class="unit-style">MW</span>
            </div>
          </div>
        </div>
      </div>
      <!--  右    -->
      <div class="float-container right-1 top-default flex-column right-container-style">
        <div class="position-r border-style">
          <div class="position-a width-100 top-2  flex justify-center">
            <div class="right-top-style flex justify-between">
              <span>总场站数:{{ totality.number }}</span>
              <span>总容量:{{ totality.capacity }}MW</span>
            </div>
          </div>
          <div class="barTitleBg right-title-style">限电情况</div>
          <div id="gauge" class="chartStyle"/>
        </div>
        <div class="border-style" style="margin-top: 1%">
          <div class="barTitleBg right-title-style">功率曲线</div>
          <div id="line" class="chartStyle"/>
        </div>
      </div>
      <!--     左 -->
      <div class="float-container top-default flex-column justify-around left-container-style">
        <div class="flex">
          <img src="../../assets/images/dashboard/num3.png"/>
          <div class="flex-column justify-center items-center">
            <span>风速(m/s)</span>
            <span>{{ envData.ws }}</span>
          </div>
        </div>
        <div class="flex">
          <img src="../../assets/images/dashboard/num4.png"/>
          <div class="flex-column justify-center items-center">
            <span>辐照度(W/㎡)</span>
            <span>{{ envData.radiance }}</span>
          </div>
        </div>
        <div class="flex">
          <img src="../../assets/images/dashboard/num2.png"/>
          <div class="flex-column justify-center items-center">
            <span>限电比(%)</span>
            <span>{{ envData.rate }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="dark-el-dialog">
      <el-dialog width="60%" style="top:15%" :visible.sync="outerVisible" :close-on-click-modal="false">
        <div slot="title" class="dialog-title flex justify-between">
          <div>
            <el-button  @click="acknowledgeAll()">全部确认</el-button>
            <el-button @click="getAbnormalAlarms('')">全部告警</el-button>
            <el-button @click="getAbnormalAlarms('E1')">通道告警</el-button>
            <el-button @click="getAbnormalAlarms('E2')">上报告警</el-button>
            <el-button @click="getAbnormalAlarms('E3')">站端硬件告警</el-button>
            <el-button @click="getAbnormalAlarms('E4')">中心解析告警</el-button>
            <el-button @click="getAbnormalAlarms('E5')">通用告警</el-button>
            <el-button @click="innerVisible = true">报警配置</el-button>
          </div>
          <div class="dialog-title-badge flex justify-between">
            <el-badge :value="this.badgeValue.alarm">
              <img src="../../assets/images/svg/remind.svg" width="20px"/>
            </el-badge>
<!--            <el-badge :value="badgeValue.confirm">-->
<!--              <img src="../../assets/images/svg/right.svg" width="20px"/>-->
<!--            </el-badge>-->
          </div>
        </div>
        <div>
          <el-table
            :data="tableDataAlarm"
            border max-height="300px"
            element-loading-background="rgba(8, 61, 92,1)"
            v-loading="loadingAlarm"
            style="width: 100%">
            <el-table-column label="序号" type="index" align="center" width="60"></el-table-column>
            <el-table-column
              prop="stationCode" align="center"  :formatter="formatStation" :show-overflow-tooltip="true"
              label="场站名称"
            >
            </el-table-column>
            <el-table-column
              prop="startTime" align="center"
              label="报警开始时间" :formatter="formatStartDate"
            >
            </el-table-column>
            <el-table-column
              prop="endTime" align="center"
              label="报警结束时间" :formatter="formatEndDate"
            >
            </el-table-column>
            <el-table-column
              prop="msg" align="center" :show-overflow-tooltip="true"
              label="报警描述">
            </el-table-column>\
            <el-table-column
              prop="alarmSource" align="center" :formatter="formatAlarmSource"
              label="报警来源">
            </el-table-column>
            <el-table-column
              prop="operate" align="center"
              label="操作" width="80">
              <template  v-slot="{ row }">
                <img src="../../assets/images/svg/remind.svg" @click="acknowledge(row)" width="20px"/>
<!--                <img src="../../assets/images/svg/right.svg" width="20px"/>-->
              </template>
            </el-table-column>
          </el-table>
          <div class="block flex" style="justify-content: end">
            <el-pagination
              popper-class="cpp-popper"
              @size-change="handleSizeChangeAlarm"
              @current-change="handleCurrentChangeAlarm"
              :current-page=this.alarmPage.currentPage
              :page-sizes="[10, 15, 30, 50]"
              :page-size=this.alarmPage.pageSize
              layout="total, sizes, prev, pager, next, jumper"
              :total=this.alarmPage.total>
            </el-pagination>
          </div>
        </div>
        <el-dialog
          width="30%" style="top:15%"
          title="通道告警"
          :visible.sync="innerVisible"
          append-to-body>
          <!--  TODO 移植v3        -->

        </el-dialog>
      </el-dialog>
    </div>
  </div>
</template>
<script>

import {formatToDateTime} from "../../utils/dateUtil";
import echartsMap from './echartsMap/index.vue'
import {gaugeOption, lineOption} from "./echarts-data";

export default {
  name: 'largeScreen',
  components: {echartsMap},
  data() {
    return {
      sysTime: '',
      sysInterval: null,
      outerVisible: false,
      innerVisible: false,
      tableDataAlarm: [],
      loadingAlarm:false,
      tableDataAlarmBak: [],
      digitalDisk: [{
        name: '实际功率',
        num: '13591'
      }, {
        name: '理论功率',
        num: '13591'
      }, {
        name: '可用功率',
        num: '13591'
      }, {
        name: '超短期预测功率',
        num: '13591'
      }, {
        name: '短期预测功率',
        num: '13591'
      }],
      totality: {
        number: 39,
        capacity: 200
      },
      envData: {
        ws: 10,
        radiance: 20,
        rate: 999
      },
      // 告警统计值
      badgeValue: {
        alarm: 0,
        confirm: 0
      },
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      alarmPage: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      stationList:[],
      alarmEnum:[],
      alarmType: ''

    }
  },
  mounted() {
    this.init()
    const _this = this
    this.sysInterval = setInterval(function () {
      _this.sysTime = formatToDateTime(new Date())
    }, 1000)
  },
  destroyed() {
    clearInterval(this.sysInterval);
  },
  methods: {
    jumpRout() {
      this.$router.push({path: "/configManager/electricField"})
    },
    openAlarm() {
      this.alarmPage = {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      }
      this.getAbnormalAlarms("")
      this.outerVisible = true
    },
    init() {
      this.getStationCode()
      this.drawTable()
      this.drawChart()
    },
    async getStationCode() {
      await this.$axios({url: '/electricfield/all', method: 'get'}).then(response => {
        this.stationList = response.data
      })
      await this.$axios({url: '/enumSelect/alarmEnum', method: 'get'}).then(response => {
        this.alarmEnum = response.data
      })
    },
    drawTable() {
      // let data = [
      //   {name: 'xxx', date: 1728700191000, describe: 'xxxx', operate: 1, type: 'report'},
      //   {name: 'xxx', date: 1728613791000, describe: 'xxxx', operate: 1, type: 'tunnel'},
      //   {name: 'xxx', date: 1728440991000, describe: 'xxxx', operate: 1, type: 'report'},
      //   {name: 'xxx', date: 1728527391000, describe: 'xxxx', operate: 1, type: ''},
      //   {name: 'xxx', date: 1728354591000, describe: 'xxxx', operate: 0, type: ''}
      // ]
      // this.tableDataAlarmBak = data
      // this.tableDataAlarm = data
      // this.page.total = this.tableDataAlarm.length
      this.getAlarmSize()

      // this.badgeValue.confirm = this.tableDataAlarm.filter(w => w.operate === 0).length
      // this.badgeValue.alarm = this.tableDataAlarm.filter(w => w.operate === 1).length
    },
    getAlarmSize(){
      this.$axios.get('/abnormalAlarm/alarmCountStatus1').then(response => {
        this.badgeValue.alarm = response.data
      }).catch(() => {

      })
    },
    getAbnormalAlarms(prop){
      this.alarmPage = {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      }
      this.alarmType = prop
      this.filterInfo()
    },
    filterInfo() {
      this.getAlarmSize()
      this.loadingAlarm = true
      let queryParams = {
        currentPage: this.alarmPage.currentPage,
        pageSize: this.alarmPage.pageSize,
        alarmType: this.alarmType
      }
      this.$axios.get('/abnormalAlarm/dashboard', {params: queryParams}).then(response => {
        this.tableDataAlarm = response.data.records
        this.alarmPage.total = response.data.total
        this.loadingAlarm = false
      }).catch(() => {
        this.loadingAlarm = false
      })

      // if (prop !== null) {
      //   this.tableDataAlarm  = this.tableDataAlarmBak.filter(w => w.type === prop)
      // } else {
      //   this.tableDataAlarm = JSON.parse(JSON.stringify(this.tableDataAlarmBak))
      // }

    },
    /*模拟数据*/
    mockData(num) {
      let data = []
      for (let i = 0; i <= 96; i++) {
        data.push(Math.floor(Math.round(Math.random() * 10) * num, 2))
      }
      return data
    },
    drawChart() {
      gaugeOption.series[0].data[0].value = 10
      gaugeOption.series[1].data[0].value = 10
      gaugeOption.series[0].max = 39
      gaugeOption.series[1].max = 39
      var myChart = this.$echarts.init(document.getElementById('gauge'));
      myChart.setOption(gaugeOption, true)
      lineOption.series[0].data = this.mockData(10)
      lineOption.series[1].data = this.mockData(5)
      lineOption.series[2].data = this.mockData(5)
      lineOption.series[3].data = this.mockData(50)
      console.log(lineOption)
      var myChart1 = this.$echarts.init(document.getElementById('line'), 'dark');
      myChart1.setOption(lineOption, true)
      window.addEventListener("resize", function () {
        myChart.zhChart.resize();
        myChart1.zhChart.resize();
      });
    },
    formatStartDate(row) {
      return formatToDateTime(row.startTime)
    },
    formatEndDate(row){
      if(row.endTime){
        return formatToDateTime(row.startTime)
      }else {
        return "未结束"
      }
    },
    formatStation(row) {
      let name= '未知场站名称'
      this.stationList.forEach(s=>{
        if(row.stationCode == s.value){
          name = s.label
          return
        }
      })
      return name
    },
    formatAlarmSource(row) {
      let name= '未知场站名称'
      this.alarmEnum.forEach(s=>{
        if(row.alarmSource === s.value){
          name = s.label
          return name
        }
      })
      return name
    },
    handleSizeChangeAlarm(val) {
      this.alarmPage.pageSize = val
      this.alarmPage.currentPage = 1
      this.filterInfo()

    },
    handleCurrentChangeAlarm(val) {
      this.alarmPage.currentPage = val
      this.filterInfo()
    },
    acknowledgeAll(){
      this.$confirm('是否确认执行"所有场站告警全部确认"操作？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.get('/abnormalAlarm/acknowledgeAll').then(response => {
          this.filterInfo()
          this.$message.info("确认成功！")
        }).catch(() => {
          this.loading = false
        })
      })
    },
    acknowledge(row) {
      this.$confirm('是否对 【' + this.formatStation(row) + '：' +row.msg + '】进行"确认"操作？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        row.status = 1
        this.$axios.post('/abnormalAlarm/updateStatus1', row).then(response => {
          this.$message.info("【" + row.msg + "】 已确认！")
          this.filterInfo()
        }).catch(() => {
          this.loading = false
        })
      })
    }
  }

}
</script>

<style scoped lang="scss">
$top-container-height: 8rem;
.largeScreen {
  width: 100%;
  height: calc(100vh);
  color: white;
  background-color: #101C38;
  background-image: url('../../assets/images/pageBg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.top-right-style {
  width: 15%;
  position: absolute !important;
  right: 15px;
  justify-content: end;
}

.top-badge {
  cursor: pointer;
  margin-right: 30px;
  padding-top: 2%;

  ::v-deep .el-badge__content.is-fixed {
    top: 5px;
    right: 5px;
  }
}

.home-jump-btu {
  width: 100px;
  height: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;

}

.chartStyle {
  width: 100%;
  height: calc(35vh);
}

.home-main-container {
  position: relative;
}

.float-container {
  position: absolute;
}

.right-container-style {
  width: 30%;
  height: calc(100% - 10rem);
}

.left-container-style {
  width: 12%;
  height: calc(50%);
  left: 4rem;
  font-size: large;
}

.border-style {
  border-radius: 5px;
  box-shadow: inset 0px 1px 8px 5px rgba(29, 128, 218, 0.63);
}

.right-top-style {
  font-size: 20px;
  width: 50%;
}

.top-1 {
  top: 1rem;
}

.top-2 {
  top: 3rem;
}

.top-default {
  top: $top-container-height;
}

.right-1 {
  right: 1rem;
}

.width-100 {
  width: 100%;
}

.height-10r {
  height: $top-container-height;
}

.width-20 {
  width: 20%;
}

.text-style {
  width: 70%;
  height: 30px;
  padding: 1% 0 0 15%;
}

.unit-style {
  margin-left: 10px;
  font-size: 20px;
}

.num-style {
  width: 30px;
  height: 50px;
  font-size: 30px;
  margin-left: 10px;
}

.number-bg-style {
  margin-top: 10px;
}

.right-title-style {
  width: 90%;
  padding: 1% 0 0 10%;
  font-size: 18px;
  height: 35px;
}

.barTitleBg {
  background-image: url('../../assets/images/dashboard/barTitleBg.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}


.text-bg {
  background-image: url('../../assets/images/dashboard/numTitle.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.number-bg {
  background-image: url('../../assets/images/dashboard/numBg.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.dialog-title {
  width: 90%;
}

.dialog-title-badge {
  //width: 10%;

  ::v-deep .el-badge__content.is-fixed {
    top: 10px;
    right: 5px;
  }

  ::v-deep .el-badge__content {
    background-color: transparent;
    font-size: 14px;
    border: none;
  }
}
</style>
