<template>
  <div class="flow-helper isSelected" id="flow-helper">
    <a-space :size="16">
      <div id="flow-helper-form" class="flow-helper-form" @click="drawerClick('form')">
        <svg class="svg-img" aria-hidden="true">
          <use xlink:href="#iflow-bangdingbiaodan"></use>
        </svg>
        <span class="flow-helper-title">绑定表单</span>
      </div>
      <div id="flow-attr" class="flow-attr" @click="drawerClick('attr')">
        <svg class="svg-img" aria-hidden="true">
          <use xlink:href="#iflow-liuchengbianliang"></use>
        </svg>
        <span class="flow-helper-title">流程属性</span>
      </div>
      <div id="flow-helper-timer" class="flow-helper-timer" @click="drawerClick('timer')">
        <svg class="svg-img" aria-hidden="true">
          <use xlink:href="#iflow-dingshirenwu"></use>
        </svg>
        <span class="flow-helper-title">定时任务</span>
      </div>
      <div id="flow-helper-global" class="flow-helper-global" @click="drawerClick('global')">
        <svg class="svg-img" aria-hidden="true">
          <use xlink:href="#iflow-quanjushijian"></use>
        </svg>
        <span class="flow-helper-title">全局事件</span>
      </div>
    </a-space>

    <!-- 绑定表单 -->
    <FlowFormDrawer ref="flowFormDrawer" :z-index="formIndex" />
    <!-- 流程属性 -->
    <FlowAttrDrawer ref="flowAttrDrawer" :z-index="attrIndex" />
    <!-- 全局事件 -->
    <FlowGlobalDrawer ref="flowGlobalDrawer" :z-index="globalIndex" />
    <!-- 定时任务 -->
    <FlowTimerDrawer ref="flowTimerDrawer" :z-index="timerIndex" />
  </div>
</template>
<script setup name="FlowHelper">
import { ref } from 'vue';
import FlowFormDrawer from './form/FlowFormDrawer.vue';
import FlowGlobalDrawer from './global/FlowGlobalDrawer.vue';
import FlowTimerDrawer from './timer/FlowTimerDrawer.vue';
import FlowAttrDrawer from './attr/FlowAttr.vue';

// ref
const flowFormDrawer = ref();
const flowAttrDrawer = ref();
const flowGlobalDrawer = ref();
const flowTimerDrawer = ref();

// index
const formIndex = ref(1000);
const attrIndex = ref(1000);
const globalIndex = ref(1000);
const timerIndex = ref(1000);
const commonIndex = ref(1000);

// 点击
const drawerClick = type => {
  commonIndex.value++;
  switch (type) {
    case 'form':
      formIndex.value = commonIndex.value;
      flowFormDrawer.value.show();
      break;
    case 'attr':
      attrIndex.value = commonIndex.value;
      flowAttrDrawer.value.show();
      break;
    case 'global':
      globalIndex.value = commonIndex.value;
      flowGlobalDrawer.value.show();
      break;
    case 'timer':
      timerIndex.value = commonIndex.value;
      flowTimerDrawer.value.show();
      break;
  }
};
</script>

<style scoped lang="less">
// 流程帮助
.flow-helper {
  top: 12px;
  position: absolute;
  left: 16px;
  .flow-helper-form,
  .flow-attr,
  .flow-helper-global,
  .flow-helper-timer {
    color: #43505e;
    position: relative;
    z-index: 8;
    display: flex;
    height: 46px;
    display: flex;
    cursor: pointer;
    align-items: center;
    background: #fff;
    align-items: center;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    padding: 12px 16px;
    font-size: 16px;
    border-radius: 4px;
    border: 1px solid rgba(197, 207, 209, 0.6);
    box-shadow: 0 0px 2px rgba(197, 207, 209, 0.6);
  }

  .flow-helper-title {
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    margin: 0 10px 0 6px;
  }

  .flow-helper-drawer-header {
    padding-left: 8px;

    .flow-helper-drawer-header-title {
      font-size: 18px;
      line-height: 25px;
      font-family: PingFangSC-Medium;
      color: #111f2c;
    }

    .flow-helper-drawer-header-content {
      font-size: 12px;
      line-height: 20px;
      color: rgba(17, 31, 44, 0.4);
    }
  }

  .flow-helper-drawer-item {
    display: inline-flex;
    align-items: center;
    background: #f2f2f7;
    padding: 12px;
    border-radius: 4px;
    margin: 6px 0;
    width: 256px;
    cursor: pointer;

    .flow-helper-drawer-item-icon {
      font-size: 22px;
      margin-right: 12px;
    }

    .flow-helper-drawer-item-title {
      font-size: 15px;
      line-height: 22px;
      color: #191f25;
    }

    .flow-helper-drawer-item-content {
      line-height: 20px;
      font-size: 12px;
      color: rgba(17, 31, 44, 0.4);
    }
  }

  .flow-helper-drawer-row {
    display: flex;
    align-items: center;
    padding-left: 8px;
    margin-top: 10px;
    margin-bottom: 10px;

    .flow-helper-drawer-row-title {
      font-size: 15px;
      color: #171a1d;
      line-height: 22px;
      vertical-align: middle;
      margin-right: 10px;
    }

    .flow-helper-drawer-row-foot-text {
      margin-top: 5px;
      padding-left: 8px;
    }
  }
}
.svg-img {
  width: 20px;
  height: 20px;
}
</style>
