<template>
    <div ref="rightDrawer" class="right-drawer">
      <div ref="miniMap" class="drawer-map"></div>
      <div class="right-drawer-content">
        <div class="right-drawer-title">属性面板</div>
        <div class="right-drawer-body">
          <div class="right-drawer-body-item">
            <div class="right-drawer-body-item-title">节点名称</div>
            <div class="right-drawer-body-item-content">
              <input class="normal-input" type="text" v-model="drawerNode.nodeText" @change="changeNodeText"/>
            </div>
          </div>
          <div class="right-drawer-body-item">
            <div class="right-drawer-body-item-title">线条文本</div>
            <div class="right-drawer-body-item-content">
              <input class="normal-input" type="text" v-model="drawerEdge.edgeText" @change="changeEdgeText"/>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  <script>
  export default {
    props: {
      drawerType: {
        type: String,
        default: 'grid'
      },
      selectCell: {
        type: Object | String,
        default: () => {}
      },
      graph: {
        type: Object | String,
        default: () => {}
      },
      grid: {
        type: Object
      },
    },
    data() {
      return {
        drawerNode: {
          fill: '',
          nodeText: '',
          fontSize: null,
          fontFill: '',
          strokeWidth: null,
          stroke: '',
          //其它参数
          nodeType: '',
          entityId: '',
          itemId: '',
          flowNodeType: '',
          groupIdentify: '',
          childFlowIdentify: '',
          methodName: '',
          methodParams: '',
          methodType: '',
          hasMethodParams: false,
          methodExp: '',
          flowJudges: [],
          // isJudgeNode: '0'
        },
        drawerEdge: {
          isCondition: false,
          edgeText: '',
          edgeSelect: true,
          edgeWidth: null,
          edgeColor: ''
        },
      }
    },
    watch: {
      selectCell: {
        handler(val) {
          if (val) {
            if (val.isNode()) { //节点
              this.drawerNode.fill = val.store.data.attrs.body.fill;
              this.drawerNode.nodeText = val.store.data.attrs.label.text;
              this.drawerNode.fontFill = val.store.data.attrs.label.fill;
              this.drawerNode.fontSize = Number(val.store.data.attrs.label.fontSize);
              this.drawerNode.strokeWidth = Number(val.store.data.attrs.body.strokeWidth);
              this.drawerNode.stroke = val.store.data.attrs.body.stroke;
              this.drawerNode.nodeType = val.store.data.attrs.nodeData.type;
              const flowNode = val.store.data.attrs.nodeData.flowNode;
              this.drawerNode.entityId = flowNode.entityId;
              this.drawerNode.itemId = flowNode.itemId;
              this.drawerNode.flowNodeType = flowNode.flowNodeType;
              this.drawerNode.groupIdentify = flowNode.groupIdentify;
              this.drawerNode.childFlowIdentify = flowNode.childFlowIdentify;
              this.drawerNode.methodExp = flowNode.methodExp;
              this.drawerNode.methodType = flowNode.methodType;
              this.drawerNode.flowJudges = flowNode.flowJudges;
            } else { //边
              this.drawerEdge.edgeText = val.store.data.labels ? val.store.data.labels[0].text != undefined ? val.store.data.labels[0].text : val.store.data.labels[0].attrs.label.text : '';
              console.log('his.drawerEdge.edgeText',this.drawerEdge.edgeText)
              this.drawerEdge.edgeWidth = Number(val.store.data.attrs.line.strokeWidth);
              this.drawerEdge.edgeColor = val.store.data.attrs.line.stroke;
              //处理条件连线
              let sourceNode = this.graph.getCellById(val.store.data.source.cell);
              // console.log(sourceNode, val)
              //判断源节点是否为条件节点
              // if (sourceNode.store.data.attrs.nodeData.type === 'polygon') {
              //   this.drawerEdge.isCondition = true;
              //   if (this.drawerEdge.edgeText === '') {
              //     this.drawerEdge.edgeText = this.drawerEdge.edgeSelect ? '是' : '否';
              //     //修改线条文本
              //     this.changeEdgeText();
              //   }
              //   this.drawerEdge.edgeSelect = this.drawerEdge.edgeText === '是' ? true : false;
              // } else {
              //   this.drawerEdge.isCondition = false;
              // }
            }
          }
        },
        immediate: true,
        deep: false
      },
    },
    methods: {
      // 节点设置
      changeNodeText() {
        this.selectCell.attr('label/text', this.drawerNode.nodeText);
      },
     // 边设置
     changeEdgeText() {
        // console.log(this.drawerEdge.edgeText);
        this.selectCell.setLabels(
          [{ attrs: { label: { text: this.drawerEdge.edgeText } } }]
        )
      },
    }
  }
  </script>
  <style lang="scss" scoped>
  .right-drawer{
    margin-left: 20px;
    flex: 1;
    .drawer-map{
      height: 150px;
    }
    .right-drawer-content{
      margin-top: 20px;
      .right-drawer-title{
        font-size: 16px;
        font-weight: bold;
        line-height: 30px;
        background-color: #e5f1f1;
      }
      .right-drawer-body-item-title{
        line-height: 24px;
      }
      .normal-input{
        width: 200px;
        padding: 5px 10px;
      }
    }
  }
  </style>