<template>
  <div class="w-full flex flex-col justify-start items-center  overflow-hidden ">
    <div class="w-full flex justify-between items-center border-b py-2 px-5">
      <h3 class="text-lg">成长树</h3>

      <el-select class="w-400px" v-model="xh" filterable remote reserve-keyword placeholder="请输入学生姓名"
        :remote-method="remoteMethod" :loading="loading" @change="xhChange" clearable @clear="remoteMethod" >
        <el-option v-for="item in options" :key="item.xdxx_xsxh" :label="item.xdxx_xsxm + ' ' + item.xdxx_xsxh"
          :value="item.xdxx_xsxh" />
      </el-select>
    </div>
    <div id="d3" v-show="this.treeData"></div>
    <el-empty v-show="!this.treeData"></el-empty>
  </div>
</template>

<script>
import request from '@/utils/request';
import * as d3 from 'd3'
console.log('d3 : ', d3)
export default {
  data() {
    return {
      treeData: null,
      loading: false,
      options: [],
      xh: undefined
    }
  },
  methods: {
    // 获取树形数据
    getTreeData() {
      if (!this.xh) return;
      request({
        url: '/xddy/dygl_wypj_pjjl/tree_pjjl',
        data: {
          wdwp_xs_xjh: this.xh
        }
      }).then(res => {
        if (res.code == '1') {
          if (res.data.data?.length === 0) return;
          this.treeData = {
            name: '',
            children: [{
              name: '',
              children: res.data.data.map(({ xdww_name, pfx_list }) => ({ name: xdww_name, children: pfx_list.map(({ xdwwp_name, wdwp_xs_df }) => ({ name: xdwwp_name + ' (' + wdwp_xs_df + ')' })) }))
            }]
          }



          // Specify the chart’s dimensions.
          const width = 820;
          const height = 450;
          const cx = width * 0.5; // adjust as needed to fit
          const cy = height; // adjust as needed to fit
          const radius = 360;

          // Create a radial tree layout. The layout’s first dimension (x)
          // is the angle, while the second (y) is the radius.
          const tree = d3.tree()
            .size([5 / 6 * Math.PI, radius])
            .separation((a, b) => (a.parent == b.parent ? 1 : 2) / a.depth);

          // Sort the tree and apply the layout.
          const root = tree(d3.hierarchy(this.treeData)
            .sort((a, b) => d3.ascending(a.data.name, b.data.name)));

          // Creates the SVG container.
          const svg = d3.select("#d3")
            .append("svg")
            .attr("width", width)
            .attr("height", height)
            .attr("viewBox", [-cx, -cy, width, height])
            .attr("style", "width: 100%; height: auto; font: 10px sans-serif;")
          // .attr("transform", "rotate(-70)");

          // Append links.
          svg.append("g")
            .attr("fill", "none")
            .attr("stroke", "rgb(134,61,34)")
            .attr("stroke-opacity", 1)
            .attr("stroke-linejoin", "round")
            .selectAll()
            .data(root.links())
            .join("path")
            .attr("d", d3.linkRadial()
              .angle(d => d.x)
              .radius(d => d.y))
            .attr("stroke-width", (d) => (3 - d.source.depth) * 8)
            .attr("stroke-linejoin", "round")
            .attr("transform", "rotate(-70)");

          // Append nodes.
          svg.append("g")
            .selectAll()
            .data(root.descendants())
            .join("circle")
            .attr("transform", d => `rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0)`)
            .attr("fill", "rgb(134,61,34)")
            .attr("r", 0)

          // Append labels.
          svg.append("g")
            .attr("stroke-linejoin", "round")
            .attr("stroke-width", 3)
            .selectAll()
            .data(root.descendants())
            .join("text")
            .attr("transform", d => `rotate(-70) rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0) rotate(${d.x >= Math.PI ? 180 : 0})`)
            .attr("dy", "0.51em")
            .attr("x", d => d.x < Math.PI === !d.children ? 3 : -3)
            .attr("text-anchor", d => d.x < Math.PI === !d.children ? "start" : "end")
            .attr("paint-order", "stroke")
            .attr("stroke", "white")
            .attr("fill", "currentColor")
            .text(d => d.data.name);


          svg.node();

        }

      })
    },
    remoteMethod(keyword) {
      this.loading = true
      request({
        url: '/xddy/dygl_xsczda_xs/index',
        data: {
          keyword
        }
      }).then(res => {
        if (res.code == '1') {
          this.options = res.data.page_data
        }

        this.loading = false
      })
    },
    xhChange(val) {
      if (!val) {
        this.treeData = null
        return;
      }
      this.getTreeData()
    }
  },
  mounted() {
    this.getTreeData()
  }
}
</script>