<template>
  <div class="list-box">
    <div class="opr-box">
      <NodeHead :nodeName="t('模板列表')" />
      <div class="button-box">
        <SelectDesign :single="false" :list="processInfo.relationProcessConfigs" @change="add">
          <a-button type="primary" class="!rounded">{{ t('添加流程') }}</a-button>
        </SelectDesign>
      </div>
    </div>
    <div class="list">
      <div :class="prefixCls">
        <a-table
          :dataSource="processInfo.relationProcessConfigs"
          :columns="configColumns"
          :pagination="false"
          size="middle"
        >
          <template #headerCell="{ column }">
            <div class="header-cell__custom-title">{{ column.title }}</div>
          </template>
          <template #bodyCell="{ column, record, index }">
            <template v-if="column.key === 'name'">
              <a-tooltip>
                <template #title>{{ record.name }}</template>
                {{ record.name }}
              </a-tooltip>
            </template>
            <template v-if="column.key === 'processStatus'">
              <a-select
                v-model:value="record.processStatus"
                style="width: 100px"
                :options="processStatusOptions"
              />
            </template>
            <template v-if="column.key === 'processAuth'">
              <a-select
                v-model:value="record.processAuth"
                style="width: 140px"
                :options="processAuthOptions"
              />
            </template>
            <template v-if="column.key === 'operation'">
              <div @click="deleteItem(index)" class="text-[#FF5461]">删除</div>
            </template>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { NodeHead } from '/@/components/ModalPanel/index';
  import SelectDesign from '/@bpmn/components/design/SelectDesign.vue';

  import { ProcessStatus, TaskPermissions } from '/@/enums/workflowEnum';
  import { RelationProcessConfig } from '/@/model/workflow/workflowConfig';
  import { useBpmnStore } from '/@bpmn/store/bpmn';
  import { storeToRefs } from 'pinia';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useDesign } from '/@/hooks/web/useDesign';
  const { prefixCls } = useDesign('basic-table');
  const { t } = useI18n();
  const store = useBpmnStore();
  const { processInfo } = storeToRefs(store);
  //任务状态
  const processStatusOptions = [
    {
      value: ProcessStatus.APPROVAL_INPROGRESS,
      label: t('审批中'),
    },
    {
      value: ProcessStatus.APPROVAL_COMPLETED,
      label: t('审批通过'),
    },
  ];
  //任务权限
  const processAuthOptions = [
    {
      value: TaskPermissions.LIMITED_TO_PROMOTER_INITIATED,
      label: t('限发起人发起'),
    },
    {
      value: TaskPermissions.EVERYONE_LAUNCHES,
      label: t('所有人发起'),
    },
  ];

  const configColumns = [
    {
      title: t('流程模板名称'),
      dataIndex: 'name',
      key: 'name',
      align: 'center',
    },
    {
      title: t('任务状态'),
      dataIndex: 'processStatus',
      key: 'processStatus',
      align: 'center',
    },
    {
      title: t('任务权限'),
      dataIndex: 'processAuth',
      key: 'processAuth',
      align: 'center',
    },
    {
      title: t('操作'),
      dataIndex: 'operation',
      key: 'operation',
      align: 'center',
      width: '108px',
    },
  ];
  //添加流程模板
  function add(tempList: Array<RelationProcessConfig>) {
    processInfo.value.relationProcessConfigs = tempList;
  }
  //删除流程模板
  function deleteItem(index: number) {
    processInfo.value.relationProcessConfigs.splice(index, 1);
  }
</script>

<style lang="less" scoped>
  .list-box {
    .opr-box {
      display: flex;
      justify-content: space-between;
      margin: 0 10px 10px;
    }
  }
</style>
