<template>
  <div style="">
   <div id='treeViews' v-if="sankeyFlag" v-loading="loading"></div>
   <div v-else class="noData">
      <div class="noData_title">业务接口分布</div>
      <div style="text-align: center;color: rgba(36, 41, 46, 0.75);font-size: 18px; width: 100%;line-height:4rem">No Data</div>
   </div>

   <div class="full">
      <span class="title_href" id='fullscreen_button'>
        <!-- <i class="el-icon-full-screen"></i> -->
        <svg-icon :icon-class="isFull?'exit-fullscreen':'fullscreen'" @click.native.prevent="clickFull" />
      </span>
    </div>
      <el-dialog
        :visible.sync="Visible"
        :fullscreen='true'
        center>
        <div v-if="sankeyFlag" ref="treeViews" id="treeViews1" style="width:100%;height:100vh"></div>
        <div v-else class="noData">
            <div class="noData_title">业务接口分布</div>
            <div style="text-align: center;color: rgba(36, 41, 46, 0.75);font-size: 18px; width: 100%;line-height:4rem">No Data</div>
        </div>
      </el-dialog>
  </div>
</template>

<script>
import screenfull from 'screenfull'
import resize from './mixins/resize'


// import * as echarts from 'echarts';
import storage from '@/utils/storage'
import { listSankey } from '@/api/mapping'
  // const formatUtil = this.$echarts5.format;
  function getLevelOption() {
    return [
      {
        itemStyle: {
          borderWidth: 0,
          gapWidth: 5
        }
      },
      {
        itemStyle: {
          gapWidth: 1
        }
      },
      {
        colorSaturation: [0.35, 0.5],
        itemStyle: {
          gapWidth: 1,
          borderColorSaturation: 0.6
        }
      }
    ];
  }

export default {
  mixins: [resize],
  // props: {
  //   SankeyData: {
  //     type: Object,
  //     default:()=>{}
  //   }
  // },
  watch:{
    // option:{
    //   handler(newVal,oldVal){
    //     if (this.chart) {
		// 			if (newVal) {
    //         this.chart.setOption(newVal);
    //         } else {
    //         this.chart.setOption(oldVal);
    //         }
    //       } 
		// 		},
		// 		deep: true 
    // },
     '$store.state.time.globalTimes': {
        handler(newValue, oldValue) {
            if(newValue){
              this.queryParams.start_time = newValue.startTime;
              this.queryParams.end_time = newValue.endTime
              this.getListSankey('treeViews');
            }

            if(newValue.timeOut){
              if(newValue.timeOut == 1){
                clearInterval(this.sanKeyTimer);
              }else{
                clearInterval(this.sanKeyTimer);
                this.Refresh(newValue.timeOut);
              }
            }
        },
        // immediate: true,
        deep: true
    },
  },
  data() {
    return {
      sankeyFlag:true,
      isFull: false,
      Visible:false,
      sanKeyTimer:null,
      loading:true,
       queryParams: {
        // start_time:Math.round((new Date().getTime())/1000 - (5*60)),
        // end_time:Math.round(new Date().getTime()/1000),
        start_time:0,
        end_time:0,
        app_id:undefined,
      },
      SankeyData:{},
      chart: null,
      option :{
        title: {
          text: 'Sankey Diagram',
           textStyle:{
            fontSize:14
          },
        },
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove'
        },
        series: [
          {
            type: 'sankey',
            data: [],
            links: [],
            emphasis: {
              focus: 'adjacency'
            },
            levels: [
              {
                depth: 0,
                itemStyle: {
                  color: '#fbb4ae'
                },
                lineStyle: {
                  color: 'source',
                  opacity: 0.6
                }
              },
              {
                depth: 1,
                itemStyle: {
                  color: '#b3cde3'
                },
                lineStyle: {
                  color: 'source',
                  opacity: 0.6
                }
              },
              {
                depth: 2,
                itemStyle: {
                  color: '#ccebc5'
                },
                lineStyle: {
                  color: 'source',
                  opacity: 0.6
                }
              },
              {
                depth: 3,
                itemStyle: {
                  color: '#decbe4'
                },
                lineStyle: {
                  color: 'source',
                  opacity: 0.6
                }
              }
            ],
            lineStyle: {
              curveness: 0.5
            }
          }
        ]
      },
      appsItem:{}
    }
  },
  created(){
    // this.queryParams.start_time = this.$store.getters.globalTimes.startTime;
    // this.queryParams.end_time = this.$store.getters.globalTimes.endTime
    this.appsItem=storage.get('appsItem');
    // this.queryParams.app_id = this.appsItem.id;
    const start_time = this.$store.state.time.globalTimes.startTime
    const end_time = this.$store.state.time.globalTimes.endTime
    if(JSON.stringify(this.appsItem) !="{}"){
      this.queryParams.app_id = this.appsItem.id;
      this.queryParams.start_time = start_time;
      this.queryParams.end_time = end_time;
    }
    // if(this.$route.query.id !=undefined){
    //   this.queryParams.app_id = this.$route.query.id;
    //   this.getListSankey();
    // }
   
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.initChart()
    // })
    // setTimeout(()=>{
    //   this.initChart()
    // },500)

    this.getListSankey('treeViews');

    // const element = document.getElementById('treeViews');//指定全屏区域元素
    //   document.getElementById('fullscreen_button').addEventListener('click', () => {
    //     if (screenfull.isEnabled) {
    //       screenfull.request(element);
    //     }
    //   });//实现模块全屏

  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
     clearInterval(this.sanKeyTimer);
  },
  methods: {
    clickFull() {
        this.Visible=true;
        this.$nextTick(() => {
          // this.initGraph(this.graphData,'container1');
          this.getListSankey('treeViews1')
        });
    },
    Refresh(timeOut){
      this.sanKeyTimer = setInterval(()=>{
        this.getListSankey('treeViews1');
      },timeOut)
    },
    click(){
      // screenfull.toggle()
      let element = document.getElementById(treeViews);
      screenfull.request(element);
    },
    initChart() {
      this.chart = this.$echarts5.init(document.getElementById('treeViews'))
      this.chart.setOption(this.option,true)
    },
     //获取桑基图数据
    getListSankey(id){
      // this.chart = this.$echarts5.init(document.getElementById(id))
      // this.chart.showLoading();
      this.loading=true;
      let option;
      listSankey(this.queryParams).then(res => {
        // this.chart.hideLoading();
          if(res.code == 200){
            this.loading=false
            // this.SankeyData = res.data;
            if(res.data.nodes.length !=0){
              this.sankeyFlag = true;
              this.chart = this.$echarts5.init(document.getElementById(id))
            

              this.chart.setOption(
                (option = {
                  title: {
                    text: '业务接口分布',
                    textStyle:{
                      fontSize:14
                    },
                  },
                  tooltip: {
                    trigger: 'item',
                    triggerOn: 'mousemove'
                  },
                  // toolbox: {
                  //   show: false,
                  //   feature: {
                  //     myFull: {
                  //       show: true,
                  //       title: "全屏查看",
                  //       icon:
                  //         "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
                  //       onclick: () => {
                  //         this.fullFlag = true;
                  //         let element = document.getElementById("treeViews");

                  //         // 一些浏览器的兼容性
                  //         if (element.requestFullScreen) {
                  //           // HTML W3C 提议
                  //           element.requestFullScreen();
                  //         } else if (element.msRequestFullscreen) {
                  //           // IE11
                  //           element.msRequestFullScreen();
                  //         } else if (element.webkitRequestFullScreen) {
                  //           // Webkit (works in Safari5.1 and Chrome 15)
                  //           element.webkitRequestFullScreen();
                  //         } else if (element.mozRequestFullScreen) {
                  //           // Firefox (works in nightly)
                  //           element.mozRequestFullScreen();
                  //         }

                  //         // 退出全屏
                  //         if (element.requestFullScreen) {
                  //           document.exitFullscreen();
                  //         } else if (element.msRequestFullScreen) {
                  //           document.msExitFullscreen();
                  //         } else if (element.webkitRequestFullScreen) {
                  //           document.webkitCancelFullScreen();
                  //         } else if (element.mozRequestFullScreen) {
                  //           document.mozCancelFullScreen();
                  //         }
                  //       },
                  //     },
                  //   },
                  // },
                  series: [
                    {
                      type: 'sankey',
                      data: res.data.nodes,
                      links: res.data.links,
                      emphasis: {
                        focus: 'adjacency'
                      },
                      nodeAlign:'right',
                      levels: [
                        {
                          depth: 0,
                          itemStyle: {
                            color: '#fbb4ae'
                          },
                          lineStyle: {
                            color: 'source',
                            opacity: 0.6
                          }
                        },
                        {
                          depth: 1,
                          itemStyle: {
                            color: '#b3cde3'
                          },
                          lineStyle: {
                            color: 'source',
                            opacity: 0.6
                          }
                        },
                        {
                          depth: 2,
                          itemStyle: {
                            color: '#ccebc5'
                          },
                          lineStyle: {
                            color: 'source',
                            opacity: 0.6
                          }
                        },
                        {
                          depth: 3,
                          itemStyle: {
                            color: '#decbe4'
                          },
                          lineStyle: {
                            color: 'source',
                            opacity: 0.6
                          }
                        }
                      ],
                      lineStyle: {
                        color: 'source',
                        curveness: 0.5
                      }
                    }
                  ]
                })
              );

              // option&&this.chart.setOption(option)
            }else{
              this.sankeyFlag = false;
            }
            // this.$set(this.option.series,0,{data:res.data.nodes,links:res.data.links});
            // // this.$set(this.option.series,0,{links:res.data.links});
          }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
#treeViews{
    width: 100%;
    height: 4.525rem;
    background: #fff;
}
.noData{
    width: 100%;
    height: 4.525rem;
    background: #fff;
}
.noData_title{
    margin-bottom: 0px;
    padding: 2px 5px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.57143;
    font-family: Inter, Helvetica, Arial, sans-serif;
}

.full{
  width:32px;
  height:32px;
  position: absolute;
  top:10px;
  right:0px;
  display: block;
  i{
    font-size: 16px;
    color:#999;
  }
}
</style>
