<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 TreeData from '../treeData.json'

// 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],
  watch:{
     '$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
            }
          }
        ]
      }
    }
  },
 
  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;
    
    if(this.$route.query.id !=undefined){
      this.queryParams.app_id = this.$route.query.id;
      // this.getListSankey();
    }
   
  },
  mounted() {

    this.getListSankey('treeViews');
  },
  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.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'
                  },
                  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>
