<template>
  <common-drawer :width="drawerWidth()" mask :visible="visible" @close="onClose" title="定时任务" :z-index="props.zIndex">
    <div class="describe">说明：流程启动后，将会执行如下定时任务。</div>
    <div class="add"><a-button type="primary" class="border-radius" @click="addEvent">新增定时任务</a-button></div>
    <a-table :dataSource="modelTimerList" :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 == 'timerName'">
          <a-input v-model:value="record.timerName" placeholder="请输入"></a-input>
        </template>
        <template v-if="column.dataIndex == 'timerCron'">
          <a-input v-model:value="record.timerCron" placeholder="请输入"></a-input>
        </template>
        <template v-if="column.dataIndex == 'timerActionClass'">
          <a-select v-model:value="record.timerActionClass" style="width: 100%" placeholder="请选择">
            <a-select-option :value="item" v-for="(item, index) in timerActionClassList" :key="index" :title="item">{{
              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>
  </common-drawer>
</template>

<script setup name="FlowTimerDrawer">
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);

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

// Store
const flowStore = useWorkflowStore();

// 显示侧边
const show = async () => {
  getTimerActionClassList();
  modelTimerList.value = deepClone(flowStore.flowGlobalConfig.modelTimerList);
  visible.value = true;
};

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

// 定时任务列表
const modelTimerList = ref([]);

// 定时任务Job列表
const timerActionClassList = ref([]);

// 表格配置
const columns = ref([
  {
    title: '序号',
    width: 60,
    dataIndex: 'index'
  },
  {
    title: '任务名称',
    width: 150,
    ellipsis: true,
    dataIndex: 'timerName'
  },
  {
    title: '定时任务Job',
    width: 200,
    ellipsis: true,
    dataIndex: 'timerActionClass'
  },
  {
    title: 'Corn表达式',
    width: 150,
    ellipsis: true,
    dataIndex: 'timerCron'
  },
  {
    title: '操作',
    width: 60,
    dataIndex: 'action'
  }
]);

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

// 获取定时任务Job列表
const getTimerActionClassList = async () => {
  timerActionClassList.value = await FlowDesignApi.getActionClasses();
};

// 侧边保存
const onSave = () => {
  flowStore.setModelTimerList(modelTimerList.value);
  visible.value = false;
};

// 新增事件
const addEvent = () => {
  let obj = {
    timerName: null,
    timerActionClass: null,
    timerCron: null
  };
  modelTimerList.value.push(obj);
};

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

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

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