<template>
  <div>
    <a-drawer
        :title="$t('structural-analysis.top-btn.configuration')"
        placement="right"
        arrowPointAtCenter
        :closable="true"
        :visible="visible"
        @close="visible=false"
    >
      <a-form layout='inline'>
        <a-row :gutter='24'>
          <a-col>
            <a-form-item :label="$t('structural-analysis.top-switch.physical-contact')">
              <a-switch v-model='pSwitch'/>
            </a-form-item>
            <a-form-item :label="$t('structural-analysis.top-switch.energy-transfer')">
              <a-switch v-model='eSwitch'/>
            </a-form-item>
            <a-form-item :label="$t('structural-analysis.top-switch.information-exchange')">
              <a-switch v-model='iSwitch'/>
            </a-form-item>
            <a-form-item :label="$t('structural-analysis.top-switch.material-transfer')">
              <a-switch v-model='mSwitch'/>
            </a-form-item>
            <a-form-item :label="$t('structural-analysis.top-switch.human-computer-interaction')">
              <a-switch v-model='hmSwitch'/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-divider/>
        <a-row>
          <a-form-item :label="$t('structural-analysis.top-switch.connection-name')">
            <a-switch v-model='lineLabelSwitch'/>
          </a-form-item>
        </a-row>
      </a-form>
    </a-drawer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      /** Drawer 是否可见 */
      visible: false,
      /** 物理接触，switch开关 */
      pSwitch: true,
      /** 能量传递，switch开关 */
      eSwitch: true,
      /** 信息交换，switch开关 */
      iSwitch: true,
      /** 物质传递，switch开关 */
      mSwitch: true,
      /** 人机交互，switch开关 */
      hmSwitch: true,
      /** 连线名称，switch开关 */
      lineLabelSwitch: true,
    };
  },
  watch: {
    'visible'(val) {
      // 打开时，取消选中
      if (val) {
        this.setCheckedNode();
      }
    },
    'pSwitch'(val) {
      this.handleLineShowHide(val, 'P');
    },
    'eSwitch'(val) {
      this.handleLineShowHide(val, 'E');
    },
    'iSwitch'(val) {
      this.handleLineShowHide(val, 'I');
    },
    'mSwitch'(val) {
      this.handleLineShowHide(val, 'M');
    },
    'hmSwitch'(val) {
      this.handleLineShowHide(val, 'HM');
    },
    'lineLabelSwitch'(val) {
      this.handleLineShowHideLabel(val);
    },
  },
  methods: {
    /**
     * 刷新连线显示隐藏
     */
    refreshLineShowHide() {
      this.handleLineShowHide(this.pSwitch, 'P');
      this.handleLineShowHide(this.eSwitch, 'E');
      this.handleLineShowHide(this.iSwitch, 'I');
      this.handleLineShowHide(this.mSwitch, 'M');
      this.handleLineShowHide(this.hmSwitch, 'HM');
      this.handleLineShowHideLabel(this.lineLabelSwitch);
    },
    /**
     * 选中节点
     * @param node
     */
    setCheckedNode(node) {
      this.$emit('setCheckedNode', node);
    },
    /**
     * 处理连线类型
     * @param val
     * @param linkType
     */
    handleLineShowHide(val, linkType) {
      let edges = window.rightX6Graph.getEdges();
      if (edges && edges.length > 0) {
        edges.forEach(edge => {
          if (edge.attrs.line.linkType === linkType) {
            edge.setVisible(val);
          }
        });
      }
    },
    /**
     * 处理连线显示/隐藏标签名称
     * @param val
     */
    handleLineShowHideLabel(val) {
      const container = document.getElementById('rightX6');
      const labels = container.querySelectorAll('.x6-edge-labels');
      if (labels && labels.length > 0) {
        labels.forEach(label => {
          label.style.visibility = val ? '' : 'hidden';
        });
      }
    },
  }
};
</script>
<style lang="less" scoped>
</style>
