<template>
  <a-form ref="formRef" :model="props.form" :label-col="{ md: { span: 3 }, sm: { span: 24 } }">
    <a-row v-for="(item, index) in props.form.nextNodeList" :key="index" class="next-node-item">
      <a-col :span="24">
        <a-form-item label="下一节点：" :name="['nextNodeList', index, 'nextNodeName']">
          <a-input v-model:value="item.nextNodeName" disabled style="width: 500px" />
        </a-form-item>
      </a-col>
      <a-col :span="24">
        <a-form-item label="审判方式" :name="['nextNodeList', index, 'approverNodeType']">
          <a-select v-model:value="item.approverNodeType" placeholder="请选择节点类型" allowClear disabled style="width: 500px">
            <a-select-option :value="nodeType.type" v-for="nodeType in nodeTypeList" :key="nodeType.type">{{
              nodeType.name
            }}</a-select-option>
          </a-select>
          <a-tooltip>
            <template #title>
              单人活动：办理人只能选择一个 <br />
              多人单一：办理人可以选择多个，但只允许一个人办理<br />
              多人并行：办理人可以选择多个，多个办理人都要进行办理<br />
              多人顺序：办理人可以选择多个，多个办理人都要进行办理，并且有顺序要求</template
            >
            <question-circle-filled style="margin-left: 5px; font-size: 18px; color: #999999" />
          </a-tooltip>
        </a-form-item>
      </a-col>
      <a-col :span="24">
        <a-form-item
          :label="props.isProjectWork ? '办理人' : '节点审批人'"
          :name="['nextNodeList', index, 'approverPersons']"
          :rules="{
            required:
              item.approverNodeType == 10 && item.approverPersons && item.approverPersons.length > 1
                ? true
                : item.allowSelfSelect
                  ? true
                  : false,
            type: 'array',
            message: props.isProjectWork ? '请选择办理人' : '请选择节点审批人'
          }"
        >
          <FormSelectUser
            :disabled="
              item.approverNodeType == 10 && item.approverPersons && item.approverPersons.length > 1 ? false : !item.allowSelfSelect
            "
            :multiple="item.approverNodeType == 10 && item.approverPersons && item.approverPersons.length > 1 ? false : true"
            v-model:value="item.approverPersons"
            style="width: 500px"
            :isJson="false"
          />
        </a-form-item>
      </a-col>
    </a-row>
    <div v-show="!props.form.nextNodeList || props.form.nextNodeList.length == 0" class="next-node-toop">流程即将结束，无审批人节点</div>
  </a-form>
</template>

<script setup name="NextNodeSelect">
import { ref, provide } from 'vue';
import FormSelectUser from '../../../../../form/design/element/components/select-user.vue';

const props = defineProps({
  form: Object,
  // 是否是项目工作流程
  isProjectWork: {
    type: Boolean,
    default: false
  }
});

provide('formRef', null);

// 节点类型列表
const nodeTypeList = ref([
  {
    type: 10,
    name: '单人活动'
  },
  {
    type: 20,
    name: '多人单一'
  },
  {
    type: 30,
    name: '多人并行'
  },
  {
    type: 40,
    name: '多人顺序'
  }
]);
</script>

<style scoped lang="less">
.next-node-item {
  padding-top: 20px;
  border-top: 1px solid #ccc;
  &:first-child {
    border-top: 0px;
  }
}
.next-node-toop {
  color: #ccc;
  font-size: 16px;
}
</style>
