<template>
  <div class="pmn-line">
    <div
      class="bpmn-line-item"
      v-for="item in lineList"
      :key="item.id"
      :class="[{ active: active == item.type }]"
      @click="getChangeCaseFileName(item)"
    >
      <a-tooltip placement="topLeft" :title="item.name">
        <img :src="activeIconSrc(item)" alt="" class="svg-img" />
      </a-tooltip>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { getBpmnFlowIcon } from '@/utils/common/util';
import { useWorkflowStore } from '@/store/modules/workflow';
import { Tooltip as ATooltip } from 'ant-design-vue';

const workflowStore = useWorkflowStore();

const iconList = ref(getBpmnFlowIcon());

// 操作线列表
const lineList = ref([
  {
    id: '250',
    type: 250,
    name: '默认顺序流',
    ref: '',
    icon: 'default-sequential-flow',
    data: {
      nodeId: '250',
      nodeType: 250,
      nodeName: '默认顺序流',
      shortContent: '',
      nodeData: {}
    }
  },
  // {
  //   id: '251',
  //   type: 251,
  //   name: '带条件顺序流',
  //   ref: '',
  //   icon: 'condition-sequential-flow',
  //   data: {
  //     nodeId: '251',
  //     nodeType: 251,
  //     nodeName: '带条件顺序流',
  //     shortContent: '',
  //     nodeData: {}
  //   }
  // },
  {
    id: '252',
    type: 252,
    name: '无逻辑消息流',
    ref: '',
    icon: 'no-logical-message-flow',
    data: {
      nodeId: '252',
      nodeType: 252,
      nodeName: '无逻辑消息流',
      shortContent: '',
      nodeData: {}
    }
  },
  {
    id: '253',
    type: 253,
    name: '带消息消息流',
    ref: '',
    icon: 'notice-flow',
    data: {
      nodeId: '253',
      nodeType: 253,
      nodeName: '带消息消息流',
      shortContent: '',
      nodeData: {}
    }
  },
  {
    id: '254',
    type: 254,
    name: '关联1',
    ref: '',
    icon: 'relation1',
    data: {
      nodeId: '254',
      nodeType: 254,
      nodeName: '关联1',
      shortContent: '',
      nodeData: {}
    }
  },
  {
    id: '255',
    type: 255,
    name: '关联2',
    ref: '',
    icon: 'relation2',
    data: {
      nodeId: '255',
      nodeType: 255,
      nodeName: '关联2',
      shortContent: '',
      nodeData: {}
    }
  }
]);

/**
 * 图标
 */
const activeIconSrc = computed(() => {
  return item => {
    const icon = iconList.value.find(t => t.name == item.icon);
    return icon ? icon.url : '';
  };
});

// 激活线
const active = computed(() => {
  return workflowStore.edgeType;
});

// 切换连线
const getChangeCaseFileName = item => {
  if (item.type != active.value) {
    workflowStore.setEdgeType(item.type);
  }
};
</script>

<style lang="less" scoped>
.pmn-line {
  position: absolute;
  right: 16px;
  top: 100px;
  background-color: #fff;
  z-index: 1;
  border-radius: 4px;
  box-sizing: border-box;
  box-shadow: 0 0 4px #ccc;
}
.bpmn-line-item {
  width: 60px;
  height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  justify-content: center;

  &:hover {
    background-color: #ccc;
  }
}
.active {
  background-color: #ccc;
}
</style>
