<template>
  <div class="echart-box-wary">
    <div @click="update">测试修改</div>
    <div class="echart-box">
      <Relation
        :table-headers="TABLEHEADER['1']"
        show-btns="0x67"
        download-name="传播路径"
        :datas="propagationData"
        :callback="hanlderEchartCallback"
        :callbackmouseup="callbackmouseup"
        @chart="chart"
      >
        <!-- <span>传播路径</span> -->
      </Relation>
    </div>
  </div>
</template>

<script>
import { Relation } from '@p/index.js'
import TABLEHEADER from '@u/echartTableHeader.js'
export default {
  name: 'Relations',
  components: {
    Relation
  },
  data() {
    return {
      TABLEHEADER: TABLEHEADER,
      titleIcon: 'data:image/png;base64,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',
      propagationData: {
        links: [],
        nodes: []
      },
      s: 1,
      chartObj: '',
      linksTooltipDom: `<div class="tooltip-wary tooltip-wary-d">
                        <div class="tooltip-title">关系</div>
                        <div class="tooltip-About"><div>岁数大发生的</div></div>   
                        </div>`,
      tooltipDom: `<div class="tooltip-wary">
                     <div class="tooltip-title">苏巧慧</div>
                     <div class="tooltip-About"><div>苏巧慧，女，苏贞昌女儿，2015年03月18日，包括扁子陈致中、苏贞昌女儿苏巧慧、游锡堃之子游秉陶等投入民进党内“立委”初选，引发绿苏巧慧，女，苏贞昌女儿，2015年03月18日，包括扁子陈致中、苏贞昌女儿苏巧慧、游锡堃之子游秉陶等投入民进党内“立委”初选，引发绿营营</div></div>  
                     <div class="tooltip-tag"><p>涉台</p> <p>涉台1</p> <p>涉台2</p></div>   
                   </div>`
    }
  },
  mounted() {
    this.propagationData.links = [{
      source: '苏贞昌',
      target: '苏云梯',
      tooltip: this.linksTooltipDom,
      des: '222222'
    }, {
      source: '苏贞昌',
      target: '朱立伦',
      tooltip: this.linksTooltipDom,
      des: '222222'
    }, {
      source: '苏贞昌',
      target: '江宜桦',
      tooltip: this.linksTooltipDom,
      des: '222222'
    }, {
      source: '苏贞昌',
      target: '侯友宜',
      tooltip: this.linksTooltipDom,
      des: '222222'
    }, {
      source: '苏贞昌',
      target: '曾永权',
      tooltip: this.linksTooltipDom,
      des: '222222'
    }]
    this.propagationData.nodes = [{
      name: '苏贞昌',
      des: '为中华民国民主进步党籍政治人物、律师，现任行政院院长。苏贞昌出身屏东市 (省辖市)|省辖屏东市（今屏东县屏东市）公教家庭，从政前为执业律师。1981年县市长选举后投入政坛。',
      symbol: `image://${this.titleIcon}`,
      isSpread: true,
      tooltip: this.tooltipDom,
      fixed: true,
      x: 100,
      y: 110
    }, {
      symbol: `image://${this.titleIcon}`,
      name: '苏云梯',
      des: '汉东省省委常委，京州市市委书记。是一个正义无私的好官。<br/>33。',
      tooltip: this.tooltipDom
    }, {
      symbol: `image://${this.titleIcon}`,
      name: '朱立伦',
      des: '汉东省省委常委，京州市市委书记。是一个正义无私的好官。<br/>44',
      tooltip: this.tooltipDom
    }, {
      symbol: `image://${this.titleIcon}`,
      name: '江宜桦',
      des: '汉东省省委常委，京州市市委书记。是一个正义无私的好官。<br/>5有些无情。',
      tooltip: this.tooltipDom
    }, {
      symbol: `image://${this.titleIcon}`,
      name: '侯友宜',
      des: '汉东省省委常委，京州市市委书记。是一个正义无私的好官。<br/>但为4222。',
      tooltip: this.tooltipDom
    }, {
      symbol: `image://${this.titleIcon}`,
      name: '曾永权',
      des: '汉东省省委常委，京州市市委书记。是一个正义无私的好官。<br/>但333情。',
      tooltip: this.tooltipDom,
      x: 550,
      y: 100
    }]
  },
  methods: {
    chart(chart) {
      this.chartObj = chart
    },
    update() {
      const option = this.chartObj.getOption()
      console.log(option)
      option.series[0].lineStyle = {
        color: '#f00',
        curveness: 0,
        opacity: 0.5,
        width: 2
      }
      this.chartObj.setOption(option)
    },
    callbackmouseup(params) {
      const { dataType } = params
      console.log(params)
      if (dataType === 'node') {
        const option = this.chartObj.getOption()
        const { series } = option
        const { nodes } = series[0]
        nodes.forEach((item, i) => {
          if (item.name === params.name) {
            nodes[i] = {
              ...item,
              fixed: true
            }
          }
        })
        option.series[0]['nodes'] = nodes
        this.chartObj.setOption(option)
      }
    },
    hanlderEchartCallback(params, chart) {
      // console.log(chart.getOption())
      // console.log('params============', params)
      // this.propagationData.nodes[params.dataIndex].isSpread = true
      // if (!params.isSpread && params.dataType === 'node') {
      //   const names = params.name + '_' + this.s
      //   this.propagationData.nodes.push({
      //     name: names,
      //     des: '台湾屏东县盐埔乡仕绒村人，中华民国政治人物，毕业于逢甲大学纺织工程学系，曾任中国国民党中国国民党秘书长|秘书长。曾任国民大会代表、立法委员（1993年－2005年、2008年－2012年）、逢甲大学校友总会总会长、中华奥林匹克委员会副主席、立法院副院长、中国国民党副主席兼秘书长、总统府秘书长，1989年及1997年两度参选屏东县屏东县县长|县长，分别败于苏贞昌以及苏嘉全。2012年9月27日，接替林中森兼任国民党秘书长。2012年10月5日，获中华民国总统马英九亲自赠勋、颁发一等景星勋章',
      //     symbol: `image://${this.titleIcon}`
      //   })
      //   this.propagationData.links.push({
      //     source: params.name,
      //     target: names,
      //     name: '1111',
      //     des: '222222'
      //   })
      // }
    }
  }
}
</script>
<style lang="scss" scoped>
*{
  padding: 0;
}
.box {
  padding: 60px 60px 100px;
  background: var(--c-theme-bg-assist);
}

.echart-box {
  height: 1000px;
  width: 100%;
  margin-bottom: 120px;
}
.echart-box-wary{
  background: #F0F2F6;
  height: 100vh;
}
</style>
<style>
.tooltip-wary{
  width:260px;
  height: 217px;
}
.tooltip-wary-d{
  height: 117px;
}
.tooltip-title{
  font-size: 16px;
  font-weight:600;
  color: #1E1E1E;
  text-align:center;
   padding:8px 0;
}
.tooltip-About{
  height:90px;
  width:100%;
  overflow-y:auto;
  white-space: normal;
  padding:0 16px;
  box-sizing: border-box;
}
.tooltip-About::-webkit-scrollbar {
  display: none;
}
.tooltip-About div{
  height:auto;
  font-size: 14px;
  color: #1E1E1E;
  line-height: 22px;
}
.tooltip-tag{
 overflow:hidden;
 border-bottom:1px solid #F0F2F6;
}
.tooltip-tag p{
  font-size:12px;
  border-radius: 4px;
  display: inline-block;
  flex:1;
  padding:2px 8px;
  color:#2D82FD;
  background:#E5F0FE;
}
</style>
