<template >
  <div class="lshs-content">
    <div id="mountNode" ref="containerWidth"></div>
    <div id="mountNodeRight">
        <div><span class="tip-title">详细信息</span></div>
        <el-divider></el-divider>
        <div style="line-height: 40px">
            <el-row>
                <el-col :span="6"><div class="grid-left">项目名称</div></el-col>
                <el-col :span="18"><div class="grid-right">{{result.xmmc}}</div></el-col>
            </el-row>
            <el-row>
                <el-col :span="6"><div class="grid-left">宗地代码</div></el-col>
                <el-col :span="18"><div class="grid-right">{{result.zddm}}</div></el-col>
            </el-row>
            <el-row>
                <el-col :span="6"><div class="grid-left">不动产单元号</div></el-col>
                <el-col :span="18"><div class="grid-right">{{result.bdcdyh}}</div></el-col>
            </el-row>
            <el-row>
                <el-col :span="6"><div class="grid-left">不动产权证号</div></el-col>
                <el-col :span="18"><div class="grid-right">{{result.bdcdyh}}</div></el-col>
            </el-row>
            <el-row>
                <el-col :span="6"><div class="grid-left">自然幢号</div></el-col>
                <el-col :span="18"><div class="grid-right">{{result.zrzh}}</div></el-col>
            </el-row>
            <el-row>
                <el-col :span="6"><div class="grid-left">权利人</div></el-col>
                <el-col :span="18"><div class="grid-right">{{result.qlr}}</div></el-col>
            </el-row>           
            <el-row>
                <el-col :span="6"><div class="grid-left">权利性质</div></el-col>
                <el-col :span="18"><div class="grid-right">{{result.qlxz}}</div></el-col>
            </el-row>

            <el-row>
                <el-col :span="6"><div class="grid-left">土地用途</div></el-col>
                <el-col :span="18"><div class="grid-right">{{result.fwyt}}</div></el-col>
            </el-row>
            <el-row>
                <el-col :span="6"><div class="grid-left">坐落</div></el-col>
                <el-col :span="18"><div class="grid-right">{{result.zl}}</div></el-col>
            </el-row>
            <el-row>
                <el-col :span="6"><div class="grid-left">宗地面积</div></el-col>
                <el-col :span="18"><div class="grid-right">{{result.zdmj}}</div></el-col>
            </el-row>
            <el-row>
                <el-col :span="6"><div class="grid-left">宗地四至-北至</div></el-col>
                <el-col :span="18"><div class="grid-right">{{result.zdszb}}</div></el-col>
            </el-row>
            <el-row>
                <el-col :span="6"><div class="grid-left">宗地四至-东至</div></el-col>
                <el-col :span="18"><div class="grid-right">{{result.zdszd}}</div></el-col>
            </el-row>
            <el-row>
                <el-col :span="6"><div class="grid-left">宗地四至-南至</div></el-col>
                <el-col :span="18"><div class="grid-right">{{result.zdszn}}</div></el-col>
            </el-row>
            <el-row>
                <el-col :span="6"><div class="grid-left">宗地四至-西至</div></el-col>
                <el-col :span="18"><div class="grid-right">{{result.zdszx}}</div></el-col>
            </el-row>
        </div>
    </div>
  </div>
</template>

<script>

  import G6 from '@antv/g6';
  import insertCss from 'insert-css';
  import { getLshs } from "@api/fwsxbg";
  import { getQjZdjbxxDetailById } from "@api/zd";
  import { getZrzDetailByBsm } from "@api/zrz";
  import { getDzDetailByBsm } from "@api/dz";

export default {
  name:"",
  components:{},
  props:{
      bsm: {
          type: String,
          default: "",
      },
      type: {
          type: String,
          default: "",
      },
  },
  data(){
    insertCss(`
    .g6-tooltip {
      border-radius: 6px;
      font-size: 12px;
      color: #fff;
      background-color: #000;
      padding: 2px 8px;
      text-align: center;
    }
  `);
    return {
        data : {},
        activeName: 'first',
        result:{},
    }
  },
  created(){

  },
  mounted(){
    this.getLshsData();
  },
  methods: {
    initG6() {
      const self=this;
      const data = this.data;
      const eWidth = this.$refs.containerWidth.clientWidth;
      const eHeight = this.$refs.containerWidth.clientHeight;

      // console.log(eWidth+":width")
      // console.log(eHeight+":height")

      G6.registerNode(
        'sql',
        {
          drawShape(cfg, group) {
            var dClor='#ffffff';
            if(cfg.id==self.bsm){
                dClor='#C6E5FF';
            }

            const rect = group.addShape('rect', {
              attrs: {
                x: -100,
                y: -25,
                width: 200,
                height: 50,
                radius: 10,
                stroke: '#5B8FF9',
                fill: dClor,
                lineWidth: 1,
              },
              name: 'rect-shape',
            });
            if (cfg.name) {
              group.addShape('text', {
                attrs: {
                  text: cfg.name,
                  x: 0,
                  y: 0,
                  fill: '#00287E',
                  fontSize: 14,
                  textAlign: 'center',
                  textBaseline: 'middle',
                  fontWeight: 'bold',
                },
                name: 'text-shape',
              });
            }
            return rect;
          },
        },
        'single-node',
      );
      G6.registerEdge(
        'polyline1',
        {
            afterDraw(cfg, group) {
                console.log(cfg.data+":cfg")
                console.log(group.toString()+"group")
            },
        },
        'polyline',
      );

      const tooltip = new G6.Tooltip({
        offsetX: 10,
        offsetY: 10,
        itemTypes: ['node', 'edge'],
        getContent: (e) => {
          const outDiv = document.createElement('div');
          outDiv.style.width = 'fit-content';
          outDiv.innerHTML = `
            <ul>
              <li> ${e.item.getModel().conf[0].label}:${e.item.getModel().conf[0].value}</li>
              <li> ${e.item.getModel().conf[1].label}:${e.item.getModel().conf[1].value}</li>
              <li> ${e.item.getModel().conf[2].label}:${e.item.getModel().conf[2].value}</li>
              <li> ${e.item.getModel().conf[3].label}:${e.item.getModel().conf[3].value}</li>
              <li> ${e.item.getModel().conf[4].label}:${e.item.getModel().conf[4].value}</li>
            </ul>`
          ;
          return outDiv;
        },
      });

      const container = document.getElementById('mountNode');
      console.log(container)
      const graph = new G6.Graph({
        container: 'mountNode',
        width:eWidth,
        height:eHeight,
        layout: {
          type: 'dagre',
          nodesepFunc: (d) => {
            return 100;
          },
          ranksep: 30,
          controlPoints: true,
        },
        defaultNode: {
          type: 'sql',
        },
        defaultEdge: {
          type: 'polyline1',
          style: {
            endArrow: true,
            radius: 10,
            offset: 10,
            // endArrow: true,
            lineWidth: 2,
            stroke: 'rgba(78,142,230,0.45)',
          },
        },
        nodeStateStyles: {
          selected: {
            stroke: '#d9d9d9',
            fill: '#5394ef',
          },
        },

        plugins: [tooltip],
        modes: {
          default: [
                  'drag-node',
                'drag-canvas',
                'zoom-canvas',
                'click-select',
          ],
        },

        fitView: true,
      });

      graph.data(data);
      graph.render();

      graph.on('node:click', e => {
          switch (this.type) {
              case "zrz":
                  getZrzDetailByBsm(e.item._cfg.id).then((res)=>{
                      if(res.code === 200){
                          self.result = res.result;
                      }
                  })
                  break;
              case "zd":
                  getQjZdjbxxDetailById(e.item._cfg.id).then((res)=>{
                      if(res.code === 200){
                          self.result = res.result;
                      }
                  })
                  break;
              case "dz":
                  getDzDetailByBsm(e.item._cfg.id).then((res)=>{
                      if(res.code === 200){
                          self.result = res.result;
                      }
                  })
                  break;
              default:
                  break;
          }


      });

      graph.on('node:mouseenter', e => {
        graph.setItemState(e.item, 'active', true)
      });
      graph.on('node:mouseleave', e => {
        graph.setItemState(e.item, 'active', false)
      });
      graph.on('edge:mouseenter', e => {
        graph.setItemState(e.item, 'active', true)
      });
      graph.on('edge:mouseleave', e => {
        graph.setItemState(e.item, 'active', false)
      });

      if (typeof window !== 'undefined')
        window.onresize = () => {
          if (!graph || graph.get('destroyed')) return;
          if (!container || !container.scrollWidth || !container.scrollHeight) return;
          graph.changeSize(container.scrollWidth, container.scrollHeight);
        };

    },

    getLshsData(){
          let _this = this;
          const data = {
            "bsm": this.bsm,
            "type": this.type
          };
          getLshs(data).then((res)=>{
            if(res.code===200){
              _this.data=res.result;
              //_this.data.nodes.length;// 判断个数
              if(_this.data.nodes.length==0){
                //暂无变更业务，没有历史回溯数据。

              }else{
                this.initG6();
              }              
            }
          });
        switch (this.type) {
            case "zrz":
                getZrzDetailByBsm(this.bsm).then((res)=>{
                    if(res.code === 200){
                        this.result = res.result;
                    }
                })
                break;
            case "zd":
                getQjZdjbxxDetailById(this.bsm).then((res)=>{
                    if(res.code === 200){
                        this.result = res.result;
                    }
                })
                break;
            case "dz":
                getDzDetailByBsm(this.bsm).then((res)=>{
                    if(res.code === 200){
                        this.result = res.result;
                    }
                })
                break;
            default:
                break;
        }
    }
  },
  computed: {},
  watch: {},
}
</script>
<style scoped  lang="less">

    .lshs-content{
        width: 100%;
        height: 100%;
    }

    #mountNode{
        /*height: calc(100% - 68px);*/
        margin: 20px 0 0 20px;
        width: 50%;
        height: 80%;
        border: 1px solid #E6E6E6;
        background: white;

        position:absolute;
        float: left;
        /*border: 1px solid red;*/
    }

    #mountNodeRight{
        margin: 20px 20px 0 0;
        width: 36%;
        float: right;
        height: 100%;
        border: 1px solid #E6E6E6;
        background: white;
        padding: 20px 20px 0 20px;
    }

    .slot{
        margin-left: 50px;
        margin-top: 20px;
        width: 300px;
    }

    .tip-title{
        font-weight: 700;
    }

    .grid-left{
        text-align: right;
        padding-right: 5%;
    }

    .grid-right{
        text-align: left;
        padding-left: 5%;
    }

</style>