<template>
      <div class="pd10" :style="`height:${vh}`" id="wtzb"> 
        <el-button  style="position:absolute;right:10px;z-index:20000"
                    type="text"
                    icon="el-icon-download"
                    title="生成图片"
                    @click="download"
                    >下载</el-button> 
               <div ref="fh"  id="steadzb"

              ></div>
              <!-- -->
         
    </div>
</template>
<script>
import yan from "@/assets/commjs/color";
import html2canvas from "html2canvas";
export default {
    data(){
    return{
       tableheight:undefined,
       device:1,
       titlename:'区域',
       titlenamex:'区域',
       //loadingd:this.loading,
       vh:null,
       zoom:'',
       myChartes:''
        }
    },
    props:{

        xdata:{
          type:Array,
          default:undefined
         },
         ydata:{
          type:Array,
          default:undefined 
         },
         valueData:{
          type:Array,
          default:undefined
         },
         title:{
          type:String,
          default:undefined  
         },
         classvalue:{
          type:String,
          default:undefined   
         },
         loading:{
          type:Boolean,
          default:undefined
         }
          
        },
     watch:{   
        classvalue:function(a,b){
       if(a=='Power_Network'){
         this.titlename ='区域'
         this.titlenamex ='区域'
       }else if (a=='Manufacturer'){
         this.titlename ='终端厂家'
         this.titlenamex ='终端\n厂家'
       }else if (a=='Voltage_Level'){
         this.titlename ='电压等级' 
         this.titlenamex ='电压\n等级' 
       }else if (a=='Load_Type'){
         this.titlename ='干扰源类型'
         this.titlenamex ='干扰\n源类型'
       }
     }
  },
    created(){
     
    },
    mounted(){
      this.resizeEchartd()
      this.zoom = 1 / document.body.style.zoom;
        this.vh =window.sessionStorage.getItem('appheight') - 125 + "px";
        window.addEventListener("resize", () => {
        this.zoom = 1 / document.body.style.zoom;
        if(this.myChartes !==''){
          this.myChartes.resize();
        }
        });
    },
    methods:{
      resizeEchartd(){
      var elementResizeDetectorMaker = require("element-resize-detector")
      if(document.getElementById("wtzb")){
     
      var erd = elementResizeDetectorMaker()
        erd.listenTo(document.getElementById("wtzb"), (element) => {
        let  domeId=document.getElementById("wtzb")
        let  domeId2=document.getElementById("steadzb")
        domeId2.style.width= domeId.offsetWidth - 10 + "px"
       if(this.myChartes !==''){
        this.myChartes.resize();
       }
      
      });
      }
    },
      download() {
    // 转换成canvas
    html2canvas(document.getElementById("wtzb"), {
      background:'#fff',
      scale: 1,
    }).then(function (canvas) {
      // 创建a标签，实现下载
      var creatIMg = document.createElement("a");
      creatIMg.download ="稳态指标符合性占比图表.png"; // 设置下载的文件名，
      creatIMg.href = canvas.toDataURL(); // 下载url
      creatIMg.click();
      creatIMg.remove(); // 下载之后把创建的元素删除
    });
  },
     steadyqualified(){
         const echarts = require('echarts')
         let domID1 = document.getElementById("steadzb")
         setTimeout(() => {
                        domID1.style.width = document.getElementById("wtzb").offsetWidth - 10 + "px",
                        domID1.style.height = window.sessionStorage.getItem('appheight') - 126 + "px";
                    }, 0);
         var myChartes = echarts.init(domID1)
         this.myChartes =myChartes
         myChartes.clear()
         let echartsColor = JSON.parse(window.localStorage.echartsColor);
        // app.title = '笛卡尔坐标系上的热力图';

        //var hours = ['1月', '2月', '3月', '4月', '5月', '6月','7月', '8月', '9月','10月','11月','12月'];
        //var ydata = ['江苏省', '浙江省', '福建省','江西省', '安徽省', '河北省', '海南省'];

       // var data = [[0,0,56],[0,1,78],[0,2,90],[0,3,10],[0,4,76],[0,5,32],[0,6,54],[0,7,65],[0,8,23],[0,9,23],[0,10,23],[0,11,23],
                    // [1,0,56],[1,1,78],[1,2,90],[1,3,10],[1,4,76],[1,5,32],[1,6,54],[1,7,65],[1,8,93],[1,9,53],[1,10,93],[1,11,23],
                    // [2,0,56],[2,2,78],[2,2,90],[2,3,10],[1,4,76],[1,5,32],[1,6,54],[1,7,65],[1,8,93],[2,9,53],[2,10,93],[2,11,23],
                    // [3,0,56],[3,3,78],[3,3,90],[3,3,10],[1,4,76],[3,5,32],[1,6,54],[1,7,65],[3,8,93],[3,9,53],[3,10,93],[3,11,23],
                    // [4,0,56],[4,4,78],[4,4,90],[4,3,10],[1,4,76],[1,5,32],[1,6,54],[4,7,65],[1,8,93],[4,9,53],[4,10,93],[4,11,23],]

    //     data = data.map(function (item) {
    //     if (item[2] == null) {
    //         return [item[1], item[0], item[2] || '-', item[3], item[4], item[2] || '-'];
    //     } else {
    //         return [item[1], item[0], item[2] || '0', item[3], item[4], item[2] || '0'];
    //     }

    // });
          var  option = {
                     title: {
                        text: '稳态指标符合性占比'+'(统计类型'+this.titlename+')',
                       // subtext: '统计类型:' + this.titlename,
                        x: 'center',
                        textStyle: {
                          fontSize: yan.EchartObject.titleNamefontSize1,
                          color: echartsColor.WordColor,
                        },
                    },
                    tooltip: {
                      trigger: "item",
                      axisPointer: {
                            type: "shadow",
                            label: {
                            color: "#fff",
                            fontSize: 16,
                            },
                        },
                        textStyle: {
                            color: "#fff",
                            fontStyle: "normal",
                            opacity: 0.35,
                            fontSize: 14,
                        },
                        borderColor:'#FFF',
                        backgroundColor: "rgba(0,0,0,0.35)",
                      // position: "top",
                      formatter: function (param) {
                         let msg=''
                        if(param.value[2]===0){
                          msg +=_this.ydata[param.value[1]]+'<br/>'
                          if(_this.xdata[param.value[0]].length==1 ){
                            msg += '时间:'+_this.xdata[param.value[0]]+'月<br/>'
                            msg +=param.seriesName+':暂无数据'
                          }else if(_this.xdata[param.value[0]].length==8){
                           let p=_this.xdata[param.value[0]].slice(0, 2)
                            msg += '时间:'+p+'月<br/>'
                            msg +=param.seriesName+':暂无数据'
                          }else if(_this.xdata[param.value[0]].length==12){
                           let r=_this.xdata[param.value[0]].slice(0, 5)
                            msg += '时间:'+r+'<br/>'
                            msg +=param.seriesName+':暂无数据'
                          }
                           else{
                            msg += '时间:'+_this.xdata[param.value[0]]+'<br/>'
                            msg +=param.seriesName+':暂无数据'
                          }



                          return msg
                        }else {
                          msg +=_this.ydata[param.value[1]]+'<br/>'
                          if(_this.xdata[param.value[0]].length==1 ){
                          
                            msg += '时间:'+_this.xdata[param.value[0]]+'月<br/>'
                            msg +=param.seriesName+':'+param.value[2]
                          }else if(_this.xdata[param.value[0]].length==8){
                            let p=_this.xdata[param.value[0]].slice(0, 2)
                            msg += '时间:'+p+'月<br/>'
                            msg +=param.seriesName+':'+param.value[2]
                          }else if(_this.xdata[param.value[0]].length==12){
                           let r=_this.xdata[param.value[0]].slice(0, 5)
                            msg += '时间:'+r+'<br/>'
                            msg +=param.seriesName+':'+param.value[2]
                          }
                          else{
                            msg += '时间:'+_this.xdata[param.value[0]]+'<br/>'
                            msg +=param.seriesName+':'+param.value[2]
                          }


                          return msg
                      }
                    },
                  },
                   // animation: true,
                    grid:yan.EchartObject.grid4,
                    // toolbox: yan.EchartObject.toolbox1,
                    xAxis: {
                         name: yan.EchartObject.time,
                         nameTextStyle:{
                          color: echartsColor.WordColor,
                         },
                        type: 'category',
                        data: this.xdata,
                        splitArea: {
                            show: true
                            
                        },
                        axisLabel: {
                          color: echartsColor.WordColor,
                        },
                       axisLine:{
                        show:false,
                       // symbol:['none', 'arrow']
                       }
                    },
                    yAxis: {
                        name:this.titlenamex,
                        nameTextStyle:{
                          color: echartsColor.WordColor,
                         },
                        type: 'category',
                        data: this.ydata,
                        splitArea: {
                            show: true
                        },
                     axisLine:{
                        show:false,
                        //symbol:['none', 'arrow']
                        lineStyle: {
                          color: echartsColor.thread,
                        },
                       },
                       axisLabel: {
                         color: echartsColor.WordColor,
                         formatter: function (value) {
                          if (value.length > 12) {
                            return `${value.slice(0, 8)}...`;
                          }
                          return value;
                        },
                      },
                    },
                    visualMap: {
                        min: 0,
                        max: 100,
                        text: ['', '稳态指标符合性占比(%)'],
                        //calculable: true,
                        orient: 'horizontal',
                        top: '0px',
                        right: '50px',
                        inRange: {
                            color: ['#ccc', yan.ColorObject.qualifiedRate3,yan.ColorObject.qualifiedRate1]
                        }
                    },
                    dataZoom:yan.EchartObject.dataZoom,
                    series: [{
                        name: '稳态指标符合性占比',
                        type: 'heatmap',
                        data: this.valueData,
                        itemStyle: {
                            normal: {
                              // 随机显示
                              //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                              // 定制显示（按顺序）
                              color: function (params) {
                              if (params.value == 3.14159 || params.value == 0) {
                                  return new echarts.graphic.LinearGradient(0,1,0,0,[{ offset: 1,color: "#ccc"}],false);
                                }
                              }
                            },
                          },
                        label: {
                            normal: {
                                show: true,
                                fontSize:yan.ColorObject.xNamefontSize,
                                color:'#fff'
                              
                            }
                        },
                       
                    }]
                   };
                   myChartes.setOption(option)
window.echartsArr.push(myChartes);
                   setTimeout(()=>{
                     myChartes.resize() 
                    },100)
                   
                   let _this = this
                  _this.$erd.listenTo(_this.$refs.fh, element => {
                  _this.$nextTick(() => {
                    domID1.style.width=document.getElementById("wtzb").offsetWidth -10+'px'
                        myChartes.resize();
                  })
                  })
                   window.onresize = function () {
                        myChartes.resize();
                   }
                    
     } 
    }
}
</script>
<style lang="less" scoped>
@import url("../../../styles/comStyle.less");
</style>