<template>
  <div class="pop">
         <div class="twoTitle" :text="popName">
           {{popName}}
           <img src="../assets/images/close.png" style="position: absolute;right:0" @click="close"/>
         </div>
         <div class="secondContent">
                 <el-table
                      :data="popData"
                      style="width:100%"
                       height="100%" 
                       stripe
                       v-if="tableShow == 1"
                      >
                      <el-table-column label="序号" align="center" width="50">
                        <template slot-scope="scop">
                          {{ scop.$index + 1 }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="xianqu"
                        label="区县"
                        >
                      </el-table-column>
                      <el-table-column
                        prop="yongdianliang"
                        label="用电量(kwh)"
                        >
                      </el-table-column>
                      <el-table-column
                        prop="tanpaifang"
                        label="碳排放量(kg)"
                        >
                      </el-table-column>
                      <el-table-column
                        prop="qiyeshuliang"
                        label="企业数量"
                       >
                      </el-table-column>
                  </el-table>
                  <el-table
                      :data="popData"
                      style="width:100%"
                       height="100%" 
                       stripe
                       v-if="tableShow == 2"
                      >
                      <el-table-column label="序号" align="center" width="50">
                        <template slot-scope="scop">
                          {{ scop.$index + 1 }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="地区"
                        label="地区"
                        >
                      </el-table-column>
                      <el-table-column
                        prop="电站数"
                        label="电站数"
                        >
                      </el-table-column>
                      <el-table-column
                        prop="集中式"
                        label="电站数(集中式)"
                        >
                      </el-table-column>
                      <el-table-column
                        prop="分布式"
                        label="电站数(分布式)"
                       >
                      </el-table-column>
                  </el-table>
                   <el-table
                      :data="popData"
                      style="width:100%"
                       height="100%" 
                       stripe
                       v-if="tableShow == 3"
                      >
                      <el-table-column label="序号" align="center" width="50">
                        <template slot-scope="scop">
                          {{ scop.$index + 1 }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="非统调电源类型"
                        label="非统调电源类型"
                        width="150"
                        >
                      </el-table-column>
                      <el-table-column
                        prop="座数"
                        label="座数"
                        >
                      </el-table-column>
                      <el-table-column
                        prop="台数"
                        label="台数"
                        >
                      </el-table-column>
                      <el-table-column
                        prop="实际并网容量"
                        label="实际并网容量(MW)"
                        width="150"
                       >
                      </el-table-column>
                  </el-table>
                   <el-table
                      :data="popData"
                      style="width:100%"
                       height="100%" 
                       stripe
                       v-if="tableShow == 4"
                      >
                      <el-table-column label="序号" align="center" width="80">
                        <template slot-scope="scop">
                          {{ scop.$index + 1 }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="地区"
                        label="地区"
                        >
                      </el-table-column>
                      <el-table-column
                        prop="光伏核准总装机容量"
                        label="光伏核准总装机容量(MW)"
                        >
                      </el-table-column>
                      <el-table-column
                        prop="光伏实际总装机容量"
                        label="光伏实际总装机容量(MW)"
                        >
                      </el-table-column>
                  </el-table>
                  <el-table
                      :data="popData"
                      style="width:100%"
                       height="100%" 
                       stripe
                       v-if="tableShow == 5"
                      >
                      <el-table-column label="序号" align="center" width="80">
                        <template slot-scope="scop">
                          {{ scop.$index + 1 }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="发电厂名称"
                        label="发电厂名称"
                        >
                      </el-table-column>
                      <el-table-column
                        prop="装机容量"
                        label="装机容量(MW)"
                        >
                      </el-table-column>
                      <el-table-column
                        prop="发电厂类型"
                        label="发电厂类型"
                        >
                      </el-table-column>
                      <el-table-column
                        prop="最高电压等级"
                        label="最高电压等级"
                        >
                      </el-table-column>
                      <el-table-column
                        prop="投运日期"
                        label="投运日期"
                        show-overflow-tooltip
                        >
                      </el-table-column>
                      <el-table-column
                        label="运行状态"
                        >
                        <template slot-scope="scop">
                          <span v-if="scop.row.运行状态 =='在运'">{{ scop.row.运行状态}}</span>
                          <span v-else-if="scop.row.运行状态 =='退运'" style="color:red">{{ scop.row.运行状态}}</span>
                          <span v-else-if="scop.row.运行状态 =='在建'" style="color:yellow">{{ scop.row.运行状态}}</span>
                        </template>
                      </el-table-column>
                  </el-table>
                   <el-table
                      :data="popData"
                      style="width:100%"
                       height="100%" 
                       stripe
                       v-if="tableShow == 6"
                      >
                      <el-table-column label="序号"  width="100">
                        <template slot-scope="scop">
                          {{ scop.$index + 1 }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="fadianchang"
                        label="发电厂名称"
                        >
                      </el-table-column>
                      <el-table-column
                        prop="shangwang"
                        label="上网电量(单位/万KWH)"
                        >
                      </el-table-column>
                  </el-table>
          </div>
     </div>
</template>

<script>
export default {
name:'pop',
props: {
    popName:{
      type: String,
    },
    popTableShow:{
      type:Number
    },
    popTableData1:{
      type:Array
    },
    popTableData2:{
      type:Array
    },
    popTableData3:{
      type:Array
    },
    popTableData4:{
      type:Array
    },
    popTableData5:{
      type:Array
    },
    popTableData6:{
      type:Array
    },
    popTableData7:{
      type:Array
    },
    popTableData8:{
      type:Array
    },
    popTableData9:{
      type:Array
    },
    popTableData10:{
      type:Array
    },
    popTableData11:{
      type:Array
    },
    popTableData12:{
      type:Array
    },
    popTableData13:{
      type:Array
    }
  },
    data(){
      return{
        tableShow:0,
         popData:[]
      }
    },
    mounted(){
      this.tableShow = this.popTableShow;
         if (this.popTableShow == 1) {
        this.popData = this.popTableData1;
      }else if (this.popTableShow == 2) {
        this.popData = this.popTableData2;
      }else if (this.popTableShow == 3) {
        this.popData = this.popTableData3;
      }else if (this.popTableShow == 4) {
        this.popData = this.popTableData4;
      }else if (this.popTableShow == 5) {
        if (this.popName == '风电') {
          this.popData = this.popTableData5;
        }else if (this.popName == '光伏') {
          this.popData = this.popTableData6;
        }else if (this.popName == '光热一体') {
          this.popData = this.popTableData7;
        }else if (this.popName == '火电') {
          this.popData = this.popTableData8;
        }else if (this.popName == '水电') {
          this.popData = this.popTableData9;
        }
      }else if (this.popTableShow == 6) {
          if (this.popName == '光伏发电') {
          this.popData = this.popTableData10;
        }else if (this.popName == '风力发电') {
          this.popData = this.popTableData11;
        }else if (this.popName == '余电上网光伏') {
          this.popData = this.popTableData12;
        }else if (this.popName == '电厂') {
          this.popData = this.popTableData13;
        }
      }
    },
    watch: {
      //  //监听内容
      //  popData(newVal,oldVal) {
      //   console.log(newVal,oldVal,"value发生了变化");
      //   if (newVal != oldVal && newVal != '') {
      //     this.popData = newVal
      //   }
      // }
    },
    methods:{
      close(){
        this.$parent.componentShow = "";
        this.$parent.modelOthers = false;
        this.$nextTick(()=>{
        this.$parent.cityActive = null;
        this.$parent.powerTypeAction = null
        })
      }
    }
}
</script>

<style lang="less" scoped>
.pop{
  width: 13%;
  height: 49%;
  background: url("../assets/images/kuang.png") no-repeat;
  background-size: 100% 100%;
   -webkit-animation: fadeInDown 0.3s;
  animation: fadeInDown 0.3s;
  position: absolute;
  left: 20%;
  .twoTitle{
        height: 8%;
        width: 100%;
        color: #ffffff;
        background: url("../assets/images/twoTitle.png") no-repeat;
        background-size: 100% 100%;
        font-size: 18px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: relative;
      }
      .twoTitle:before{
        content: attr(text);
        position: absolute;
        z-index: 10;
        color:rgb(11,243,194);
        -webkit-mask:linear-gradient(to top, rgb(11,243,194), transparent );
    }
    .secondContent{
      width: 100%;
      height: calc(100% - 8%);
      padding-top: 2%;
      box-sizing: border-box;
      /deep/ .el-table {
                  background-color: transparent !important;
                  height: 100%;
                  width: 100%;
                  overflow-y: auto;
                }
                /deep/ .el-table th {
                        background-color: transparent;
                      }
                      /deep/ .el-table__header {
                        height: 48px;
                        background: url("../assets/images/table.png") no-repeat ;
                        background-size: 100% 100%;
                      }
                      /deep/ .el-table__header th {
                        border: none;
                        padding: 0;
                        height: 48px;
                        .cell {
                          height: 100%;
                          display: flex;
                          align-items: center;
                        }
                        &.el-table__cell.is-leaf {
                          border: none !important;
                        }
                      }
                      /deep/ .el-table tr {
                        background-color: transparent;
                      }
                      /deep/ .el-table--enable-row-transition .el-table__body td,
                      .el-table .cell {
                        // background-color: transparent !important;
                        border: none;
                        color: rgb(4,237,174);
                      }
                      /deep/ .el-table__body td .cell {
                        white-space: nowrap !important;
                        // word-break: break-all;
                      }
                      /deep/ .el-table th.el-table__cell>.cell{
                        color: #FFFFFF;
                      }
                      /deep/.el-table::before{
                      background-color: transparent;
                    }
                    /deep/.el-table ::-webkit-scrollbar{
                      display:none;
                    }
                    // 表格斑马自定义颜色
                  
                  /deep/ .el-table tbody tr:hover > td {
                  background: rgb(6,168,127) !important;
                }
                /deep/.el-table--striped .el-table__body tr.el-table__row--striped td {
                    background: rgb(5, 70, 59);
                  }
    }
    
}
/**
下拉显示动画效果
*/
@keyframes fadeInDown {
  0% {
    -webkit-transform: translate3d(0, -20%, 0);
    transform: translate3d(0, -20%, 0);
    opacity: 0;
  }

  100% {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@-webkit-keyframes fadeInDown {
  0% {
    -webkit-transform: translate3d(0, -20%, 0);
    opacity: 0;
  }

  100% {
    -webkit-transform: none;
    opacity: 1;
  }
}
</style>