<template>
  <div class="ringMainUnit">
      <div class="top">
          <div class="title">{{ringMainUnit}}</div>
          <div class="close">
            <img
               @click="handleClose"
                src="@/assets/images/close.png"
                style="cursor: pointer"
                />
          </div>
      </div>
      <div class="main">
            <el-tabs v-model="activeName" @tab-click="handleClick" style="height:4%">
            <el-tab-pane label="设备信息" name="first">
            </el-tab-pane>
            <el-tab-pane label="红外视频/现场照片" name="second"></el-tab-pane>
        </el-tabs>
        <div  v-if="activeName == 'first'" style="height:100%;width:100%">
            <div class="basic">
                <div class="title" style="margin-top:10px">基本信息</div>
                <div class="content">
                    <div class="information">
                            <div class="informationContent">环网柜名称&nbsp;&nbsp;&nbsp;&nbsp;{{ringMainUnit}}</div>
                            <div class="informationContent">环网柜编号&nbsp;&nbsp;&nbsp;&nbsp;125-569-0321-0</div>
                            <div class="informationContent">IP地址&nbsp;&nbsp;&nbsp;&nbsp;192.134.0.0</div>
                            <div class="informationContent">总间隔&nbsp;&nbsp;&nbsp;&nbsp;XXXXXXXX</div>
                    </div>
                </div>
            </div>
            <div class="earlyWarning">
                <div class="title">预警信息</div>
                <div class="content">
                    <div class="information">
                            <div class="informationContent">
                                <img src="@/assets/images/shiliangIcon1.png"/>
                                电缆沟水位&nbsp;&nbsp;&nbsp;&nbsp;xxxxxxx</div>
                            <div class="informationContent">
                                <img src="@/assets/images/shiliangIcon2.png"/>
                                小电流接地故障报警&nbsp;&nbsp;&nbsp;&nbsp;报警</div>
                    </div>
                </div>
            </div>
            <div class="interval">
                <div class="title">间隔监测</div>
                <div class="table user_skills">
          <el-table
            :data="tableData"
            style="width: 100%; height: 100%"
            :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ 'text-align': 'center' }"
            stripe
          >
            <el-table-column  prop="name" label="" align="center" width="150">
            </el-table-column>
            <el-table-column prop="phase" label="相位" >
            </el-table-column>
            <el-table-column prop="interval1" label="间隔1">
            </el-table-column>
            <el-table-column prop="interval2" label="间隔2">
            </el-table-column>
            <el-table-column prop="interval3" label="间隔3">
            </el-table-column>
            <el-table-column prop="interval4" label="间隔4">
            </el-table-column>
            <el-table-column prop="interval5" label="间隔5">
            </el-table-column>
            <el-table-column prop="interval6" label="间隔6">
            </el-table-column>
            <el-table-column prop="interval7" label="间隔7">
            </el-table-column>
            <el-table-column prop="interval8" label="间隔8">
            </el-table-column>
          </el-table>
         </div>
            </div>
            <div class="intervalData">
                <el-tabs v-model="intervalName" @tab-click="intervalClick">
                    <el-tab-pane label="间隔1局放数据" name="first"></el-tab-pane>
                    <el-tab-pane label="间隔2局放数据" name="second"></el-tab-pane>
                    <el-tab-pane label="间隔3局放数据" name="three"></el-tab-pane>
                    <el-tab-pane label="间隔4局放数据" name="four"></el-tab-pane>
                    <el-tab-pane label="间隔5局放数据" name="five"></el-tab-pane>
                    <el-tab-pane label="间隔6局放数据" name="six"></el-tab-pane>
                    <el-tab-pane label="间隔7局放数据" name="seven"></el-tab-pane>
                    <el-tab-pane label="间隔8局放数据" name="eight"></el-tab-pane>
                </el-tabs>
                <div id="intervalShow"></div>
            </div>
        </div>
        
        <div class="InfraredVideo" v-if="activeName == 'second'" style="height:96%;width:100%">
            <div class="title">
                 <el-tabs :tab-position="tabPosition" v-model="InfraredName" style="height:100%">
                    <el-tab-pane label="间隔1" v-for="(item,index) in vectorgraphData" :key="index">
                    <span slot="label" style="display: flex;align-items: center;" @click="InfraredClick(index)">
                        <img :src="item.vectorgraph"/>
                        <span style="margin-left:10px;font-size:19px" :style="{ color: item.color}">{{item.name}}</span>
                    </span>
                    </el-tab-pane>
                    <div class="content" v-show="photoShow">
                      <div v-for="(item,index) in photoList" :key="index" style="margin-top:40px">
                          <img :src="item.photo"/>
                      </div>
                    </div>
                    <div class="content1" v-show="videoShow">
                          <video-player
                            class="video-player vjs-custom-skin"
                            style="heght:100%;width:100%"
                            ref="VideoPlayer"
                            :playsinline="true"
                            :options="playerOptions"
                            > 
                          </video-player>
                    </div>
                </el-tabs>
                
            </div>
            
        </div>
      </div>
  </div>
</template>

<script>
import {getDevice} from "../../api/index.js";
export default {
   name:"ringMainUnit",
   props:['ringMainUnit'],
   data(){
       return {
         photoShow: true,
         videoShow: false,
         deviceId:'',
        tabPosition: 'left',
        activeName: 'first',
        intervalName:'first',
        InfraredName:'first',
        vectorgraphData:[
            {
                vectorgraph:require("@/assets/images/shiliangIcon4.png"),
                name:'间隔1',
                color:'rgb(60,127,127)'
            },
            {
                vectorgraph:require("@/assets/images/shiliangIcon4.png"),
                name:'间隔2',
                color:'rgb(60,127,127)'
            },
            {
                vectorgraph:require("@/assets/images/shiliangIcon4.png"),
                name:'间隔3',
                color:'rgb(60,127,127)'
            },
            {
                vectorgraph:require("@/assets/images/shiliangIcon4.png"),
                name:'间隔4',
                color:'rgb(60,127,127)'
            },
            {
                vectorgraph:require("@/assets/images/shiliangIcon4.png"),
                name:'间隔5',
                color:'rgb(60,127,127)'
            },
            {
                vectorgraph:require("@/assets/images/shiliangIcon4.png"),
                name:'间隔6',
                color:'rgb(60,127,127)'
            },
            {
                vectorgraph:require("@/assets/images/shiliangIcon4.png"),
                name:'间隔7',
                color:'rgb(60,127,127)'
            },
            {
                vectorgraph:require("@/assets/images/shiliangIcon4.png"),
                name:'间隔8',
                color:'rgb(60,127,127)'
            },
        ],
        
        tableData:[
            {
                name:'',
                phase:'A',
                interval1:'25',
                interval2:'25',
                interval3:'25',
                interval4:'25',
                interval5:'25',
                interval6:'25',
                interval7:'25',
                interval8:'25',
            },
             {
                name:'电压/KV',
                phase:'B',
                interval1:'25',
                interval2:'25',
                interval3:'25',
                interval4:'25',
                interval5:'25',
                interval6:'25',
                interval7:'25',
                interval8:'25',
            },
             {
                name:'',
                phase:'C',
                interval1:'25',
                interval2:'25',
                interval3:'25',
                interval4:'25',
                interval5:'25',
                interval6:'25',
                interval7:'25',
                interval8:'25',
            },
        ],
        echartsData : {
        time: ["0点", "1点", "2点", "3点", "4点", "5点",
        "6点","7点","8点","9点","10点","11点","12点","13点",
        "14点","15点","16点","17点","18点","19点","20点","21点",
        "22点","23点"
        ],
        num: ["-40", "-60", "-22", "-85", "-50", "-40",
        "-40", "-60", "-22", "-85", "-50", "-40",
        "-40", "-60", "-22", "-85", "-50", "-40",
        "-40", "-60", "-22", "-85", "-50", "-40",
        ],
        },
        photoList:[
            {
                photo: '',
            },
        ],
         playerOptions: {
        height: 400,
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        autoplay: false, // 如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: 'video/mp4', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
            src: require('../../assets/videos/video.mp4'), // url地址
          }
        ],
        poster: require('../../assets/images/sun.png'), // 你的封面地址
        // width: document.documentElement.clientWidth, //播放器宽度
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true // 全屏按钮
        }
         }
    }
   },
   mounted(){
       this.intervalShow()
      console.log(this.ringMainUnit);
   },
   methods:{
       handleClick(tab) {
         let that = this;
        if (tab.index == 0) {
            this.activeName =  'first'
        }else if (tab.index == 1) {
            this.activeName =  'second'
            getDevice({
              action : 'querydevice',
              device_name : that.ringMainUnit
            }).then((res)=>{
              console.log(res.data.data.device.devcie_id);
              let deviceId = res.data.data.device.devcie_id
              getDevice(
              {
                action : 'querymaterial',
                device_id : deviceId
              }).then((res)=>{
                console.log(res.data.data,"素材");
                this.photoList = Object.keys(res.data.data).map((item,index)=>{
                  let photoUrl = 'http://172.16.1.254:3111'+ res.data.data[index].url
                return {photo:photoUrl}
                })
              })
            })
            
            
        }
      },
      intervalClick(tab){
          if (tab.index == 0) {
            this.intervalName =  'first'
        }else if (tab.index == 1) {
            this.intervalName =  'second'
            // this.echartsData.time = ['lala','momo']
            // this.echartsData.num = ['12','90']
            // this.intervalShow()
        }else if (tab.index == 2) {
            this.intervalName =  'three'
        }else if (tab.index == 3) {
            this.intervalName =  'four'
        }else if (tab.index == 4) {
            this.intervalName =  'five'
        }else if (tab.index == 5) {
            this.intervalName =  'six'
        }else if (tab.index == 6) {
            this.intervalName =  'seven'
        }else if (tab.index == 7) {
            this.intervalName =  'eight'
        }
      },
      InfraredClick(index){
          Object.keys(this.vectorgraphData).forEach((key) => {
        this.vectorgraphData[key].vectorgraph = require("@/assets/images/shiliangIcon4.png");
        this.vectorgraphData[key].color = "rgb(60,127,127)";
        if (key == index) {
          this.vectorgraphData[
            index
          ].vectorgraph = require("@/assets/images/shiliangIcon3.png");
          this.vectorgraphData[index].color = "#56fefe";
          this.photoShow = false,
          this.videoShow = true
        }
      });
      },
       handleClose() {
      this.$parent.componentShow = "";
      this.$parent.modelOthers = false;
      // this.$emit("closeStatus", this.closeStatus)
      },
      //图
       intervalShow(){
      let that = this;
      var data = this.echartsData
      var myChart = this.$echarts.init(document.getElementById("intervalShow"));
      var option = {
        tooltip: {
            trigger: "axis",
         
    },
        grid: {
            top: "10%",
            left: "3%",
            right: "3%",
            bottom: "10%",
            // containLabel: true
        },
        xAxis: [
            {
            type: "category",
            boundaryGap: true,
            axisLine: {
                //坐标轴轴线相关设置。数学上的x轴
                show: true,
                lineStyle: {
                color: 'color:"#93dcfe"',
                },
            },
      axisLabel: {
        //坐标轴刻度标签的相关设置
        textStyle: {
          color: "#93dcfe",
          margin: 15,
        },
        formatter: function (data) {
          return data;
        },
      },
      axisTick: {
        show: false,
      },
      data: data.time,
    },
  ],
  yAxis: [
    {
    //   min: 0,
    //   max: 100,
    name: "dbm",
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(147,220,254,0.3)",
        },
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: "#93dcfe",
        },
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: "#93dcfe",
        },
        // formatter: function (value) {
        //   if (value === 0) {
        //     return value;
        //   }
        //   return value + "%";
        // },
      },
      axisTick: {
        show: false,
      },
    },
  ],
  series: [
    {
      name: "注册总量",
      type: "line",
      symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
      showAllSymbol: true,
      symbolSize: 8,
      lineStyle: {
        normal: {
          color: "#1f93fa", // 线条颜色
        },
        borderColor: "rgba(0,0,0,.4)",
      },
      itemStyle: {
        color: "#1f93fa",
        borderColor: "#1f93fa",
        borderWidth: 2,
      },
      label: {
        normal: {
          show: false,
          position: "top",
          formatter: [" {a|{c}%}"].join(","),
          rich: {
            a: {
              color: "#fff",
              align: "center",
            },
          },
        },
      },
      tooltip: {
        show: true,
      },
      
      data: data.num,
    },
  ],
};
      myChart.setOption(option);
    }
   }
}
</script>

<style lang="less" scoped>
//表格
.user_skills {
  /deep/ .el-table {
    background-color: transparent !important;
  }
  /deep/ .el-table th {
    background-color: transparent !important;
  }
  /deep/ .el-table__header {
    height: 48px;
    background: url("../../assets/images/intervalTable.png") no-repeat;
    background-size: 100% 100%;
  }
  /deep/ .el-table__header th {
    border: none;
    padding: 0;
    height: 40px;
    .cell {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around
    }
    &.el-table__cell.is-leaf {
      border: none !important;
    }
  }
  /deep/ .el-table tr {
    background-color: transparent !important;
  }
  /deep/ .el-table--enable-row-transition .el-table__body td,
  .el-table .cell {
    background-color: transparent !important;
    border: none;
    color: #ffffff;
  }
  /deep/ .el-table__body td .cell {
    white-space: nowrap !important;
    // word-break: break-all;
  }
  /deep/ .el-table th.el-table__cell>.cell{
    color: rgb(86,254,226);
  }
/deep/.el-table .el-table__cell{
    padding: 3px 0
}
  &::before {
    //去除底部白线
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0px;
  }
}
 .el-table::before{
    background-color: transparent;
  }
::v-deep .el-table .el-table__body tr.el-table__row td{
  background: rgba(79, 218, 255, 0.1) !important;
}
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td{
  background: rgba(79, 218, 255, 0.06) !important;
}
.ringMainUnit{
  width: 1511px;
  height: 1071px;
  background: url("../../assets/images/ringMainUnitKuang.png") no-repeat;
  background-size: 100% 100%;
  -webkit-animation: fadeInDown 0.3s;
  animation: fadeInDown 0.3s;
  padding: 15px 25px;
  display: flex;
    flex-wrap: wrap;
    align-content: space-between;
  .top{
    height: 4%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title{
        font-size: 22px;
        font-weight: 700;
      color: transparent ;
      -webkit-background-clip: text;
      background-clip: text ;
      background-image: linear-gradient(to bottom, rgb(255,255,255), rgb(86,244,254))
    }
  }
  .main{
      height: 95%;
      width: 100%;
    //   border: 1px solid blue;
      .basic{
          height: 8.8%;
          width: 100%;
        //   border: 1px solid red;
          .title{
             height:  27%;
             width: 100%;
            //  border: 1px solid yellow;
             color:rgb(86,244,254);
             display: flex;
          }
          .content{
              height: 73%;
              width: 100%;
              background:url("../../assets/images/basicFrame.png")no-repeat;
              display: flex;
            background-size: 100% 100%;
            justify-content: space-around;
              .information{
                  color:#ffffff;
                      height: 100%;
                      width: 96%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .informationContent{
                        height: 35px;
                        background: url("../../assets/images/cardSquare.png") no-repeat;
                        background-size: 100% 100%;
                    }
              }
          }
      }
      .earlyWarning{
          height: 8.8%;
          width: 100%;
          margin-top: 10px;
        //   border: 1px solid red;
          .title{
             height:  27%;
             width: 100%;
            //  border: 1px solid yellow;
             color:rgb(86,244,254);
             display: flex;
          }
          .content{
              height: 73%;
              width: 100%;
              background:url("../../assets/images/basicFrame.png")no-repeat;
              display: flex;
            background-size: 100% 100%;
            justify-content: flex-start;
              .information{
                  color:#ffffff;
                      height: 100%;
                      width: 44%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    display: flex;
                    align-items: center;
                    -webkit-box-pack: justify;
                    padding-left: 24px;
                    .informationContent{
                        height: 35px;
                        background: url("../../assets/images/cardSquare.png") no-repeat;
                        background-size: 100% 100%;
                    }
              }
          }
      }
       .interval{
          height: 40%;
          width: 100%;
          margin-top: 10px;
          .title{
             height:  7%;
             width: 100%;
             color:rgb(86,244,254);
             display: flex;
          }
          .table{
              height: 85%;
            // border: 1px solid red;
              background: url("../../assets/images/intervalFrame.png") no-repeat;
              background-size: 100% 100%;
              padding: 15px 20px;
          }
      }
      .intervalData{
          height: 33%;
          margin-top: 10px;
          padding-left: 10px ;
           background: url("../../assets/images/intervalFrame.png") no-repeat;
         /deep/ .el-tabs__nav-wrap::after{
                background-color: transparent !important;
            }
            #intervalShow{
                width: 100%;
                height: calc(100% - 54px);
            }
      }
      .InfraredVideo{
          .title{
              height: 100%;
              .content{
                  display: flex;
                    flex-direction: row;
                    justify-content: space-around;
                    flex-wrap: wrap;
              }
          }
          /deep/ .el-tabs__item{
              margin-top: 20px;
              padding: 0 30px;
          }
      }
  }
}
/**
下拉显示动画效果
*/
@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>
<style lang="less">
.el-tabs__item:hover{
    color:#56fefe !important;
}
.el-tabs__item.is-active{
  color:#56fefe !important;
}
.el-tabs__item {
    color: rgb(60,127,127) !important;
}

.el-tabs__active-bar{
    background-color: transparent !important;
    background: url("../../assets/images/ringMainGH.png") no-repeat;
    background-size: 100% 100%;
    bottom: -5px !important;
    height: 19px !important;
}
.el-tabs__nav-wrap::after{
 background-color: rgb(38,114,120) !important;
}
</style>
