<template>
  <DragModal
      :visible="visible"
      :title="$t('structural-analysis.right-boundary-map.property')"
      :width="1000"
      :destroyOnClose="true"
      :maskClosable="false"
      @cancel="handleCancel"
      :footer="null">
    <div>
      <a-form v-bind='formItemLayout'>
        <a-form-item :label="$t('structural-analysis.right-boundary-map.name')">
          <a-input
              allowClear
              v-model='linkName'
              :placeholder="$t('structural-analysis.right-boundary-map.please-enter-name')"
              disabled
          />
        </a-form-item>
        <a-form-item :label="$t('structural-analysis.right-boundary-map.connection-direction')">
          <a-radio-group
              v-model='linkDirect'
              @change='handleChangeLinkDirect'
          >
            <a-radio :value='1'>
              {{ $t('structural-analysis.right-boundary-map.unidirectional') }}
            </a-radio>
            <a-radio :value='2'>
              {{ $t('structural-analysis.right-boundary-map.two-way') }}
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item :label="$t('structural-analysis.right-boundary-map.connection-type')">
          <a-select
              :default-value="'P'"
              v-model='linkType'
              @change='handleChangeLinkType'
              :placeholder="$t('structural-analysis.right-boundary-map.select-connection-type')"
          >
            <a-select-option value='P'>
              {{ $t('global-dict.physical-contact') }}
            </a-select-option>
            <a-select-option value='E'>
              {{ $t('global-dict.energy-transfer') }}
            </a-select-option>
            <a-select-option value='I'>
              {{ $t('global-dict.information-exchange') }}
            </a-select-option>
            <a-select-option value='M'>
              {{ $t('global-dict.material-transfer') }}
            </a-select-option>
            <a-select-option value='HM'>
              {{ $t('global-dict.human-computer-interaction') }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label="$t('structural-analysis.right-boundary-map.connection-method')">
          <a-select
              :labelInValue='true'
              v-model='linkMethod'
              :placeholder="$t('structural-analysis.right-boundary-map.choose-connection-method')"
              @change='handleChangeLinkMethod'
          >
            <a-select-option v-for='data in linkMethodData' :key='data.interfaceId'>
              {{ data.connectWay }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label="$t('structural-analysis.right-boundary-map.connection-properties')">
          <a-select
              :default-value="1"
              v-model='linkProperty'
              @change='handleChangeLinkProperty'
              :placeholder="$t('structural-analysis.right-boundary-map.please-select-connection-properties')"
          >
            <a-select-option :value='1'>
              {{ $t('global-dict.necessary') }}
            </a-select-option>
            <a-select-option :value='2'>
              {{ $t('global-dict.desired') }}
            </a-select-option>
            <a-select-option :value='3'>
              {{ $t('global-dict.not-important') }}
            </a-select-option>
            <a-select-option :value='4'>
              {{ $t('global-dict.undesired') }}
            </a-select-option>
            <a-select-option :value='5'>
              {{ $t('global-dict.harmful') }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label="$t('structural-analysis.right-boundary-map.description')">
          <a-textarea
              allowClear
              v-model='remark'
              :rows='4'
              :maxLength="300"
              :placeholder="$t('structural-analysis.right-boundary-map.click-to-enter-description')"
          />
        </a-form-item>
      </a-form>
      <div slot="footer" class="mt10 text-right">
        <a-button
            @click='handleCancel'
            :loading="loading"
        >
          {{ $t('global-btn.cancel') }}
        </a-button>
        <a-button
            type='primary'
            class='ml10'
            @click='save'
            :loading="loading"
            v-preventReClick
        >
          {{ $t('global-btn.confirm') }}
        </a-button>
      </div>
    </div>
  </DragModal>
</template>
<script>

import {config} from '@/views/structure/assets/topology';

export default {
  name: 'PropertyEdgeModal',
  components: {},
  props: {},
  data() {
    return {
      /** 组件开关 */
      visible: false,
      /** 表单布局 */
      formItemLayout: {
        // xxl: '1600px',
        // xl: '1200px',
        // lg: '992px',
        // md: '768px',
        // sm: '576px',
        // xs: '480px',
        labelCol: {
          xxl: {span: 5},
          xl: {span: 5},
          lg: {span: 5},
          md: {span: 24},
          xs: {span: 24},
          sm: {span: 24}
        },
        wrapperCol: {
          xxl: {span: 10},
          xl: {span: 10},
          lg: {span: 10},
          md: {span: 24},
          xs: {span: 24},
          sm: {span: 24}
        }
      },
      /** 新增连线 */
      addLineFlag: false,
      /** 连线ID */
      linkId: undefined,
      /** 起始节点 */
      fromStruId: undefined,
      /** 目标节点 */
      toStruId: undefined,
      /** 连接性质 */
      linkProperty: 1,
      /** 名称 */
      linkName: '',
      /** 连接类型 */
      linkType: '1',
      /** 连接方向 */
      linkDirect: undefined,
      /** 连接方式 */
      linkMethod: {
        key: '',
        label: ''
      },
      /** 描述 */
      remark: '',
      /** 连接方式集合 */
      linkMethodData: [],
      /** 物理接触--集合 */
      apiLinkPList: [],
      /** 能量传递--集合 */
      apiLinkEList: [],
      /** 信息交换--集合 */
      apiLinkIList: [],
      /** 物质传递--集合 */
      apiLinkMList: [],
      /** 人机交互--集合 */
      apiLinkHMList: [],
      /** 加载loading... */
      loading: false,
    };
  },
  watch: {
    'visible'(val) {
      if (val) {
        this.init();
      }
    }
  },
  mounted() {
  },
  methods: {
    /**
     * 存储当前节点信息
     */
    setCheckedNode() {
      this.$emit('setCheckedNode');
    },
    /**
     * 刷新连线显示隐藏
     */
    refreshLineShowHide() {
      this.$emit('refreshLineShowHide');
    },
    /**
     * 处理连线曲线
     */
    handleEdgesCurve() {
      this.$emit('handleEdgesCurve');
    },
    /**
     * 处理连接方向，单选事件
     * @param e
     */
    handleChangeLinkDirect(e) {
      this.linkDirect = e.target.value;
    },
    /**
     * 处理连接类型，下拉选择事件
     * @param value
     */
    handleChangeLinkType(value) {
      this.linkType = value;
      switch (this.linkType) {
        case 'P':
          this.linkMethodData = this.apiLinkPList;
          if (this.apiLinkPList.length > 0) {
            this.linkMethod.key = this.apiLinkPList[0].interfaceId;
            this.linkName = this.apiLinkPList[0].connectWay;
          } else {
            this.linkMethod.key = '';
            this.linkName = '';
          }
          break;
        case 'E':
          this.linkMethodData = this.apiLinkEList;
          if (this.apiLinkEList.length > 0) {
            this.linkMethod.key = this.apiLinkEList[0].interfaceId;
            this.linkName = this.apiLinkEList[0].connectWay;
          } else {
            this.linkMethod.key = '';
            this.linkName = '';
          }
          break;
        case 'I':
          this.linkMethodData = this.apiLinkIList;
          if (this.apiLinkIList.length > 0) {
            this.linkMethod.key = this.apiLinkIList[0].interfaceId;
            this.linkName = this.apiLinkIList[0].connectWay;
          } else {
            this.linkMethod.key = '';
            this.linkName = '';
          }
          break;
        case 'M':
          this.linkMethodData = this.apiLinkMList;
          if (this.apiLinkMList.length > 0) {
            this.linkMethod.key = this.apiLinkMList[0].interfaceId;
            this.linkName = this.apiLinkMList[0].connectWay;
          } else {
            this.linkMethod.key = '';
            this.linkName = '';
          }
          break;
        case 'HM':
          this.linkMethodData = this.apiLinkHMList;
          if (this.apiLinkHMList.length > 0) {
            this.linkMethod.key = this.apiLinkHMList[0].interfaceId;
            this.linkName = this.apiLinkHMList[0].connectWay;
          } else {
            this.linkMethod.key = '';
            this.linkName = '';
          }
          break;
      }
    },
    /**
     * 处理连接性质，下拉选择事件
     * @param value
     */
    handleChangeLinkProperty(value) {
      this.linkProperty = value;
    },
    /**
     * 处理连接方式，下拉选择事件
     * @param value
     */
    handleChangeLinkMethod(value) {
      this.linkName = value.label;
    },
    /**
     * 获取属性相关数据
     * @returns {Promise<string>}
     */
    async init() {
      let _that = this;
      await _that.$api.getBoundaryLinkDetail({
        fmeaId: _that.$store.getters.rfmeaId,
        connectId: _that.linkId,
      }).then(res => {
        if (res.flag) {
          // 单双向
          _that.linkDirect = res.data.mfmeaChartConnectDTOS?.[0].linkDirect || undefined;
          // 连接类型
          _that.linkType = res.data.mfmeaChartConnectDTOS?.[0].linkType ? res.data.mfmeaChartConnectDTOS?.[0].linkType : 'P';
          _that.linkProperty = res.data.mfmeaChartConnectDTOS?.[0].linkProperty ? res.data.mfmeaChartConnectDTOS?.[0].linkProperty : 1;
          _that.remark = res.data.mfmeaChartConnectDTOS?.[0].remark || '';
          _that.apiLinkPList = res.data.apiLinkPList;
          _that.apiLinkEList = res.data.apiLinkEList;
          _that.apiLinkIList = res.data.apiLinkIList;
          _that.apiLinkMList = res.data.apiLinkMList;
          _that.apiLinkHMList = res.data.apiLinkHMList;
          _that.fromStruId = res.data.mfmeaChartConnectDTOS?.[0].fromStruId || undefined;
          _that.toStruId = res.data.mfmeaChartConnectDTOS?.[0].toStruId || undefined;
          switch (_that.linkType) {
            case 'P':
              _that.linkMethodData = res.data.apiLinkPList;
              break;
            case 'E':
              _that.linkMethodData = res.data.apiLinkEList;
              break;
            case 'I':
              _that.linkMethodData = res.data.apiLinkIList;
              break;
            case 'M':
              _that.linkMethodData = res.data.apiLinkMList;
              break;
            case 'HM':
              _that.linkMethodData = res.data.apiLinkHMList;
              break;
          }
          // 名称
          _that.linkName = res.data.mfmeaChartConnectDTOS?.[0].linkName || '';
          // 默认连接方式
          _that.linkMethod.key = _that.linkMethodData?.[0].interfaceId || '';
          // let filter = _that.linkMethodData.filter(o => o.linkId === _that.linkMethod.key);
          // if (_that.linkMethodData.length > 0 && filter.length === 0) {
          //   _that.linkMethod.key = _that.linkMethodData[0].linkId;
          // } else if (_that.linkMethodData.length > 0 && filter.length > 0) {
          //   _that.linkName = filter[0].linkName;
          // }
        }
      });
    },
    /**
     * 保存
     * @returns {Promise<void>}
     */
    save() {
      let _that = this;
      if (!_that.linkMethod.key || !_that.linkName) {
        _that.$message.warning(_that.$t('global-message.warn.connection-method'));
        return;
      }
      let edge = window.rightX6Graph.getCellById(_that.linkId);
      // 设置标签
      edge.setLabels([{
        attrs: {
          label: {
            text: _that.linkName,
            fontSize: 8,
          }
        },
      }]);
      let line = config.lineDict.find(item => item.key === _that.linkType);
      // let color = edge.attrs.line.color ? edge.attrs.line.color : line.color;
      let color = line.color;
      // 设置连线颜色、箭头
      edge.updateAttrs({
        line: {
          linkType: _that.linkType, // 连线类型
          color: color, // 连线颜色
          stroke: color, // 连线颜色
          strokeWidth: 1, // 连线宽度
          targetMarker: 'classic',
          sourceMarker: _that.linkDirect === 2 ? 'classic' : '',
          strokeDasharray: line.lineType === 'solid' ? '' : line.lineType === 'dashed' ? 5 : 2, // 线条样式「实线、虚线、点」
        }
      });
      // 默认连线
      // edge.prop({
      //   connector: {name: 'normal'}
      // })
      // 移除线段
      // if (edge.hasTool('segments')) {
      //   edge.removeTool('segments');
      // }
      _that.loading = true;
      _that.$api.saveBoundaryLinkData({
        linkName: _that.linkName,
        linkType: _that.linkType,
        linkMethod: _that.linkMethod.key,
        linkProperty: _that.linkProperty,
        linkDirect: _that.linkDirect,
        struId: _that.linkId,
        fmeaId: _that.$store.getters.rfmeaId,
        fromStruId: _that.fromStruId,
        toStructureId: _that.toStruId,
        remark: _that.remark,
        color: line.color,
        lineType: line.lineType,
        numberOfTime: 0, // 更新完接口信息后，将语言表数据更新：1
        chartFlag: 1, // 1：显示，0：隐藏
        options: JSON.stringify(edge) // x6信息
      }).then((res) => {
        if (res.flag) {
          _that.setCheckedNode();
          _that.refreshLineShowHide();
          _that.handleEdgesCurve();
        } else {
          _that.$message.error(res.message);
        }
      }).finally(() => {
        _that.visible = false;
        _that.loading = false;
      })
    },
    /**
     * 关闭模态框
     */
    handleCancel() {
      let _that = this;
      if (_that.addLineFlag) {
        _that.loading = true;
        _that.$api.deleteBoundary({
          fmeaId: _that.$store.getters.rfmeaId,
          struId: _that.linkId,
          connectId: _that.linkId,
          delFlag: 1
        }).then((res) => {
          if (res.flag) {
            window.rightX6Graph.removeEdge(_that.linkId);
          } else {
            _that.$message.error(res.message);
          }
        }).finally(() => {
          _that.visible = false;
          _that.loading = false;
        });
      } else {
        _that.visible = false;
      }
    },
  }
};
</script>
