<template>
  <div>
    <FlowLine title="节点事件" />
    <div class="describe">说明：针对整个流程运行过程中的相关事件进行监听。</div>
    <div class="add"><a-button type="primary" class="border-radius" @click="addEvent">新增事件</a-button></div>
    <a-table :dataSource="props.modelEventList" :columns="columns" bordered size="small" :pagination="false">
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.dataIndex == 'index'">
          {{ index + 1 }}
        </template>
        <template v-if="column.dataIndex == 'nodeEventType'">
          <a-select v-model:value="record.nodeEventType" style="width: 100%" placeholder="请选择">
            <a-select-option :value="10">执行前</a-select-option>
            <a-select-option :value="20">执行成功后</a-select-option>
            <a-select-option :value="21">执行失败后</a-select-option>
            <a-select-option :value="30">审批全部通过后</a-select-option>
            <a-select-option :value="31">审批拒绝后</a-select-option>
          </a-select>
        </template>
        <template v-if="column.dataIndex == 'actionType'">
          <a-select v-model:value="record.actionType" style="width: 100%" placeholder="请选择">
            <a-select-option :value="10">本地方法</a-select-option>
            <!-- <a-select-option :value="20">外部RPC方法</a-select-option>
            <a-select-option :value="30">外部HTTP方法</a-select-option> -->
          </a-select>
        </template>
        <template v-if="column.dataIndex == 'actionClass'">
          <a-select v-model:value="record.actionClass" style="width: 100%" placeholder="请选择">
            <a-select-option :value="item" v-for="(item, index) in actionClassList" :key="index" :title="item">
              {{ getClassName(item) }}
            </a-select-option>
          </a-select>
        </template>
        <template v-if="column.dataIndex == 'action'">
          <icon-font iconClass="icon-opt-shanchu" font-size="24px" title="删除" color="#60666b" @click="remove(index)"></icon-font>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script setup name="FlowEvent">
import { ref, onMounted } from 'vue';
import FlowLine from '../../common/FlowLine.vue';
import { FlowDesignApi } from '../../../../../../mid/workflow/design/api/FlowDesignApi';

const props = defineProps({
  // 全局事件列表
  modelEventList: Array
});

// 显示侧边
onMounted(() => {
  getActionClassList();
});

// 事件动作配置列表
const actionClassList = ref([]);

// 表格配置
const columns = ref([
  {
    title: '序号',
    width: 60,
    dataIndex: 'index'
  },
  {
    title: '事件类型',
    width: 150,
    ellipsis: true,
    dataIndex: 'nodeEventType'
  },
  {
    title: '事件动作类型',
    width: 150,
    ellipsis: true,
    dataIndex: 'actionType'
  },
  {
    title: '事件动作配置',
    width: 200,
    ellipsis: true,
    dataIndex: 'actionClass'
  },
  {
    title: '操作',
    width: 60,
    dataIndex: 'action'
  }
]);

// 获取事件动作配置列表
const getActionClassList = async () => {
  actionClassList.value = await FlowDesignApi.listEventConsumers();
};

const getClassName = item => {
  let name = '';
  if (item) {
    let arr = item.split('.');
    name = arr[arr.length - 1];
  }
  return name;
};

// 新增事件
const addEvent = () => {
  let obj = {
    nodeEventType: null,
    actionType: null,
    actionClass: null
  };
  props.modelEventList.push(obj);
};

// 删除
const remove = index => {
  props.modelEventList.splice(index, 1);
};
</script>

<style scoped lang="less">
.describe {
  color: #a6a6a6;
}
.add {
  margin: 15px 0;
}
</style>
