<!-- "@antv/x6-vue-shape": "1.5.4", "@vue/composition-api": "^1.5.0", -->
<template>
  <el-popover
    placement="top"
    trigger="manual"
    v-model="popoverVisible">
    <div id="link-popover" :style="{height:popoverFlod?'20px':'unset'}">
      <div class="link-box">
        <div v-for="item in checkedLinkList" :key="item.RId" class="link-item">
          {{ item.Name }}
        </div>
      </div>
      <img src="~@/assets/img/sand_new/arrow_black_down.png" class="link-fold" 
      :style="{transform:popoverFlod?'':'rotate(180deg)'}" v-show="checkedLinkList.length>1"
      @click="foldLink"/>
    </div>
    <div id="link-reference" slot="reference">不可拖拽</div>
  </el-popover>
</template>

<script>
  export default {
    name:'linkPopover',
    inject: ["getGraph", "getNode"],
    data() {
      return {
        checkedLinkList:[],
        popoverFlod:true,
        node:null,
        popoverVisible:false
      }
    },
    mounted(){
      const self = this;
      this.node = this.getNode();
      const graph = this.getGraph()
      console.log(this.node,'this.node');
      graph.on("node:mouseenter", ({ node, e }) => {
        console.log(node, e);
        this.popoverVisible=true
        if(node.data){
          this.checkedLinkList = node.data.linkData || []
        }
        console.log(this.checkedLinkList);
      });
    },
    methods:{
      foldLink(){
        this.popoverFlod=!this.popoverFlod 
        if(this.node.data){
          this.node.data.linkFold = this.popoverFlod
        }
        this.popoverVisible=false
        this.$nextTick(()=>{
          this.popoverVisible=true
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  #link-popover{
    display: flex;
    justify-content: space-between;
    transition: all 0.3s ease;
    overflow: hidden;
    .link-box{
      .link-item{
        &:hover{
          text-decoration: underline;
          color: #0052D9;
          cursor: pointer;
        }
      }
    }
    .link-fold{
      transition: all 0.3s ease;
      height: 16px;
      width: 16px;
      cursor: pointer;
    }
  }
</style>