<template>
  <common-drawer :width="drawerWidth()" mask :visible="visible" @close="onClose" title="全局事件" :z-index="props.zIndex">
    <a-tabs v-model:activeKey="tabsActiveKey">
      <a-tab-pane forceRender key="1" tab="流程事件">
        <div class="describe">说明：针对整个流程运行过程中的相关事件进行监听。</div>
        <div class="add"><a-button type="primary" class="border-radius" @click="addEvent">新增事件</a-button></div>
        <a-table :dataSource="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 == 'definitionEventType'">
              <a-select v-model:value="record.definitionEventType" style="width: 100%" placeholder="请选择">
                <a-select-option :value="10">流程开始</a-select-option>
                <a-select-option :value="20">流程结束</a-select-option>
                <a-select-option :value="30">流程挂起</a-select-option>
                <a-select-option :value="40">流程激活</a-select-option>
                <a-select-option :value="50">流程撤回</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 class="add"><a-button type="primary" class="border-radius" @click="onSave">确定</a-button></div>
      </a-tab-pane>
      <a-tab-pane forceRender key="2" tab="任务事件">
        <div class="describe">说明：针对整个任务运行过程中的相关事件进行监听。</div>
        <div class="add"><a-button type="primary" class="border-radius" @click="addTask">新增任务</a-button></div>
        <a-table :dataSource="taskEventList" :columns="taskColumns" bordered size="small" :pagination="false">
          <template #bodyCell="{ column, record, index }">
            <template v-if="column.dataIndex == 'index'">
              {{ index + 1 }}
            </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>
            </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 taskActionClassList" :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="removeTask(index)"></icon-font>
            </template>
          </template>
        </a-table>
        <div class="add"><a-button type="primary" class="border-radius" @click="onSave">确定</a-button></div>
      </a-tab-pane>
    </a-tabs>
  </common-drawer>
</template>

<script setup name="FlowGlobalDrawer">
import { ref, computed } from 'vue';
import { useWorkflowStore } from '@/store/modules/workflow';
import { FlowDesignApi } from '../../../mid/workflow/design/api/FlowDesignApi';
import { isMobile, deepClone } from '@/utils/common/util';

const props = defineProps({
  zIndex: {
    type: Number,
    default: 1000
  }
});

// 侧边显示隐藏
const visible = ref(false);

// tab选中
const tabsActiveKey = ref('1');

/**
 * 侧边宽度
 * @returns
 */
const drawerWidth = computed(() => {
  return width => {
    if (!width) {
      width = '40%';
    }
    return isMobile() ? '100%' : width;
  };
});

// Store
const flowStore = useWorkflowStore();

// 显示侧边
const show = async () => {
  getActionClassList();
  modelEventList.value = deepClone(flowStore.flowGlobalConfig.modelEventList);
  if (flowStore.flowGlobalConfig?.taskEventList) {
    taskEventList.value = deepClone(flowStore.flowGlobalConfig.taskEventList);
  }
  visible.value = true;
};

// 事件
const emit = defineEmits(['close']);

// 全局事件列表
const modelEventList = ref([]);

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

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

// 任务事件列表
const taskEventList = ref([]);
// 任务表格配置
const taskColumns = ref([
  {
    title: '序号',
    width: 60,
    dataIndex: 'index'
  },
  {
    title: '流程的动作类型',
    width: 150,
    ellipsis: true,
    dataIndex: 'actionType'
  },
  {
    title: '动作配置的类名称',
    width: 150,
    ellipsis: true,
    dataIndex: 'actionClass'
  },
  {
    title: '操作',
    width: 60,
    dataIndex: 'action'
  }
]);

// 关闭侧边
const onClose = () => {
  visible.value = false;
  emit('close');
};

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

// 侧边保存
const onSave = () => {
  flowStore.setModelEventList(modelEventList.value);
  flowStore.setTaskEventList(taskEventList.value);
  visible.value = false;
};

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

// 删除事件
const remove = index => {
  modelEventList.value.splice(index, 1);
};

// 删除任务
const removeTask = index => {
  taskEventList.value.splice(index, 1);
};

// 新增任务
const addTask = () => {
  let obj = {
    actionType: 10,
    actionClass: null
  };
  taskEventList.value.push(obj);
};

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

defineExpose({
  show,
  onSave
});
</script>

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