<template>
    <div class="overviews">
        <div class="overview_top">
            <p class="titleSty">区域注册</p>
            <div class="zhuce">
              <div class="commonSty" v-for="(item,index) in topMassageData" :key="index">
                  <div>
                      <div>
                          <!-- <i class="el-icon-discount"></i> -->
                          <span style="font-size:20px;font-weight:600">{{item.name}}</span>
                      </div>
                      <div style="margin-top:15px">
                          <span style="font-size:16px">场站数量：</span>
                          <span style="font-size:16px;font-weight:bold;color:#5678eb">{{item.terminalNumber}}个</span>
                      </div>
                      <div style="margin-top:15px">
                          <span style="font-size:16px">装机数量：</span>
                          <span style="font-size:16px;font-weight:bold;color:#5678eb">{{item.installWtg}}台</span>
                      </div>
                      <div style="margin-top:15px">
                          <span style="font-size:16px">装机容量：</span>
                          <span style="font-size:16px;font-weight:bold;color:#5678eb">{{item.installPower}}(Mw)</span>
                      </div>
                  </div>
                  <!-- <img :style="getSty(item.name)" :src="item.img" alt=""> -->
              </div>
            </div>
        </div>
        <el-row class="overview_mid">
            <el-col :span="12" style="padding-right: 10px;">
              <p class="titleSty">智慧配置</p>
              <el-card :body-style="{ padding: '0px' }">
                <img src="../../assets/iconNeed/zhihuipeizhi.png" class="image">
                <div style="padding: 14px;">
                  <span style="font-size:16px;font-weight:bold;">请选择智慧配置源</span>
                  <div class="zhihuipeizhi">
                    <el-radio-group v-model="zhihuiRadio">
                        <el-radio :label="1" style="margin-bottom: 20px;">参考预测准确率</el-radio>
                        <el-radio :label="2">参考考核评分</el-radio>
                    </el-radio-group>
                  </div>
                  <el-button type="text" class="button" @click="submitwisdom">确 定</el-button>
                </div>
              </el-card>
            </el-col>
            <el-col :span="12" style="padding-left: 10px;">
              <p class="titleSty">数据源配置</p>
              <el-card :body-style="{ padding: '0px' }">
                <img src="../../assets/iconNeed/shujuyuan.png" class="image">
                <div style="padding: 14px;">
                  <span style="font-size:16px;font-weight:bold;">请选择数据源配置</span>
                  <div class="zhihuipeizhi">
                    <el-checkbox-group v-model="checkList" disabled>
                        <el-checkbox label="风机数值预测" style="margin-bottom: 20px;"></el-checkbox>
                        <el-checkbox label="中国数值天气预报预测" style="margin-bottom: 20px;"></el-checkbox>
                        <el-checkbox label="欧洲数值天气预报预测"></el-checkbox>
                    </el-checkbox-group>
                  </div>
                  <el-button type="text" class="button" disabled>确 定</el-button>
                </div>
              </el-card>
            </el-col>
        </el-row>
        <div class="overview_bottom">
            <div class="eleTop">
                <p class="titleSty">发电计划</p>
                <div class="exceed">
                    <span style="font-size:14px;margin-top: 3px;">选择场站：</span>
                    <el-select v-model="stationVal" placeholder="请选择" @change="changeStation">
                        <el-option
                        v-for="item in stationOptions"
                        :key="item.no"
                        :label="item.stationName"
                        :value="item.no">
                        </el-option>
                    </el-select>
                </div>
            </div>
			<el-row>
				<el-col :span="12" style="padding-right: 10px;">
					<div class="commonSty">
					<div id="barChart" :style="barChartStyle"></div>
					</div>
				</el-col>
				<el-col :span="12" style="padding-left: 10px;">
					<el-card :body-style="{ padding: '0px' }">
						<img src="../../assets/iconNeed/fadianjihua.png" class="image">
						<div style="padding: 14px;">
						<span style="font-size:16px;font-weight:bold;">请选择发电计划数据源配置</span>
						<div class="zhihuipeizhi">
							<el-radio-group v-model="fadianRadio">
								<el-radio :label="1" style="margin-bottom: 20px;">按预测等比分配日计划</el-radio>
								<el-radio :label="2">按月计划等分日计划</el-radio>
							</el-radio-group>
						</div>
						<el-button type="text" class="button" @click="submitGenera">确 定</el-button>
						</div>
					</el-card>
				</el-col>
			</el-row>
        </div>
    </div>

</template>

<script>
// import img1 from '../../assets/iconNeed/quyu.png'
// import img2 from '../../assets/iconNeed/fengchang.png'
// import img3 from '../../assets/iconNeed/wind.png'
// import img4 from '../../assets/iconNeed/rongliang.png'
import {apiGetgetRegistrationAreaList, apiGetwisdomConfiguration, apiGetgenerationScheduleConfiguration, apiGetStation, apiGetannualPower} from '../../api/api'
export default {
    data() {
        return {
            topMassageData: [],
			stationVal: '',
            itemVal: '',
            stationOptions: [],
            zhihuiRadio: 1,
            fadianRadio: 1,
            checkList: ['中国数值天气预报预测']
        }
    },
    mounted() {
		this.getRegistrationAreaList()
		this.getRegionalData()
    },
    computed:{
        barChartStyle() {
            return {
                'width': '100%',
                'height': '230px'
            }
        }
    },
    methods: {
		// 获取风场数据
        getRegionalData() {
            let that = this
            apiGetStation().then(datas =>{
                if (datas && datas.data && datas.data.list) {
                    that.stationOptions = datas.data.list
					that.stationVal = datas.data.list[0].no
					that.itemVal = datas.data.list[0].itemVal
		            that.getPowerPlanData()
                }
            })
        },
        changeStation(val) {
            this.stationVal = val
            this.stationOptions.forEach(item =>{
                if (item.no === val) {
                    this.itemVal = item.itemVal
                }
            })
            this.getPowerPlanData()
        },
		//获取注册区域信息列表
		getRegistrationAreaList() {
			let that = this
			apiGetgetRegistrationAreaList().then(datas =>{
				if (datas && datas.data) {
					if (datas.data.list.length>4) {
						datas.data.list.forEach((item, index) => {
							if (index < 4) {
								that.topMassageData.push(item)
							}
						});
					} else {
						that.topMassageData = datas.data.list
					}
				}
			})
		},
		submitwisdom() {
			let that = this
			let params = {
				type: that.zhihuiRadio
			}
			apiGetwisdomConfiguration(params).then(datas => {})
		},
		submitGenera() {
			let that = this
			let params = {
				stationNumber: that.stationVal,
				type: that.fadianRadio
			}
			apiGetgenerationScheduleConfiguration(params).then(datas =>{})
		},
        getSty(name) {
            let color = ''
            if (name === '东部区域') {
                color = 'width: 70px;height:70px;padding: 60px 23px 0 0;'
            } else if (name === '南部区域') {
                color = 'width: 140px;height:80px;padding: 60px 0 0 0;'
            } else if (name === '西部区域') {
                color = 'width: 80px;height:80px;padding: 60px 20px 0 0;'
            } else if (name === '北部区域') {
                color = 'width: 80px;height:80px;padding: 60px 20px 0 0;'
            }
            return color
        },
        //获取计划电量数据
        getPowerPlanData() {
            let that = this
            let params = {
                stationNumber: that.stationVal,
                itemVal: that.itemVal
            }
            apiGetannualPower(params).then(datas =>{
                if (datas && datas.data.list) {
                    let monthLen = 0
                    monthLen = new Date().getMonth()+1
                    // 柱状图数据处理
                    that.getBarData(datas.data.list, monthLen)
                }
            })
        },
        //处理当年月发电量柱状图数据
        getBarData(datas, val) {
            let xAxisAll = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
            let xAxis = []
            for(let i =0; i<val; i++) {
                xAxis.push(xAxisAll[i])
            }
            let legend = ['计划发电']
            let series = [
                {
                    name: '计划发电',
                    type: 'bar',
                    barGap: 0,
                    emphasis: {
                        focus: 'series'
                    }
                }
            ]
            datas.forEach((itn, index) =>{
                if (index === 0) {
                    let data = [itn.january, itn.february, itn.march, itn.april, itn.may,itn.june, 
                    itn.july, itn.august, itn.september, itn.october, itn.november, itn.december]
                    series[0].data = data
                }
            })
            this.getPowerBar('barChart', '计划电量', xAxisAll, legend, series)
        },
        getPowerBar(name, title, xAxis, legend, series) {
            let option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                    type: 'shadow'
                    }
                },
                grid: {
                    left: '6%',
                    right: '5%',
                    bottom: '3%',
                    containLabel: true
                },
                legend: {
                    // bottom: bott,
                    data: legend
                },
                xAxis: [
                    {
                    type: 'category',
                    axisTick: { show: false },
                    data: xAxis
                    }
                ],
                yAxis: [
                    {
                    type: 'value',
                    name: 'Wkw/h'
                    }
                ],
                series: series
            };
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById(name))
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize()
            })
        }
    }
}
</script>

<style lang="less">
.overviews{
	padding: 0 20px;
    background: #fff;
    .titleSty{
		margin-bottom: 5px;
        border-left: 4px solid #5997be;
        padding-left: 5px;
        font-size: 14px;
        font-weight: bold;
    }
    .overview_top{
		margin-top: 10px;
      .zhuce{
            display: flex;
            // justify-content: space-between;
        }
        .commonSty{
            padding: 10px 20px;
            margin-bottom: 10px;
            margin-right: 30px;
            width: 21%;
            // height: 190px;
            border-radius: 15px;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2);
            // display: flex;
            // justify-content: space-between;
        }
    }
    .overview_mid{
      padding: 0 0 10px 0;
	  margin-top: 10px;
        .el-card{
            border-radius: 15px;
            .el-card__body{
              display: flex;
              img{
                height: 270px;
              }
              .zhihuipeizhi{
                  margin: 20px 0;
                  display: table-caption;
              }
            }
        }
    }
    .overview_bottom{
		margin-top: 10px;
		.eleTop{
          display: flex;
          justify-content: space-between;
		  margin-bottom: 10px;
          .exceed{
              display: flex;
              position: relative;
              top: 1px;
              .el-select{
                  width: 200px;
                  margin-right:10px;
                  .el-input__inner{
                      height:24px;
                  }
                  .el-input__suffix{
                      .el-select__caret{
                          line-height:24px;
                      }
                  }
              }
          }
      }
      .commonSty{
            padding: 10px 20px;
            width: 95%;
            // height: 190px;
            border-radius: 15px;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2);
            display: flex;
            justify-content: space-between;
        }
          .el-card{
            border-radius: 15px;
            .el-card__body{
              display: flex;
              img{
                height: 250px;
              }
              .zhihuipeizhi{
                  margin: 20px 0;
                  display: table-caption;
              }
            }
        }
    }
}
</style>