<template>
  <div>
    <div style="display: flex; justify-content: start">
      <div>
        <a-divider style="height: 24px; width: 5px; background-color: #2a82e4" />
      </div>
      <span style="padding-left: 10px">子流程选择</span>
    </div>
    <a-spin :spinning="loading">
      <a-form ref="formRef" :model="formData" :rules="rules" style="padding-top: 10px">
        <a-form-item name="subDefinitionId" style="margin-top: 20px">
          <a-select v-model:value="formData.subDefinitionId" show-search :filterOption="filterOption" placeholder="请选择子流程">
            <a-select-option
              :value="item.latestDefinitionId"
              v-for="item in definitionSelectList"
              :key="item.latestDefinitionId"
              :label="item.categoryName + '/' + item.modelName"
              >{{ item.categoryName + '/' + item.modelName }}</a-select-option
            >
          </a-select>
        </a-form-item>

        <div style="display: flex; justify-content: start">
          <div>
            <a-divider style="height: 24px; width: 5px; background-color: #2a82e4" />
          </div>
          <span style="padding-left: 10px">部门会签</span>
        </div>

        <a-form-item name="deptCounterSignFlag" label="开启部门会签" style="margin-top: 20px">
          <a-radio-group name="fieldRequired" v-model:value="formData.deptCounterSignFlag">
            <a-radio :value="true">是</a-radio>
            <a-radio :value="false">否</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item name="deptCounterSignType" label="部门选择方式" v-if="formData.deptCounterSignFlag">
          <a-radio-group name="fieldRequired" v-model:value="formData.deptCounterSignType">
            <a-radio :value="1">来自表单元素</a-radio>
            <a-radio :value="2">来自流程变量</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item
          name="deptCounterSignFormDefinitionId"
          label="选择表单"
          v-if="formData.deptCounterSignFlag && formData.deptCounterSignType == 1"
        >
          <a-select
            v-model:value="formData.deptCounterSignFormDefinitionId"
            style="width: 100%"
            placeholder="请选择"
            @change="deptFormDefinitionIdChange"
          >
            <a-select-option :value="fItem.formDefinitionId" v-for="(fItem, fIndex) in formDefinitionList" :key="fIndex">{{
              fItem.formName
            }}</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item
          name="deptCounterSignFormVariableCode"
          label="选择元素"
          v-if="formData.deptCounterSignFlag && formData.deptCounterSignType == 1"
        >
          <a-select v-model:value="formData.deptCounterSignFormVariableCode" style="width: 100%" placeholder="请选择">
            <a-select-option :value="fieItem.fieldCode" v-for="(fieItem, fieIndex) in deptFieldList" :key="fieIndex">{{
              fieItem.itemLabelName
            }}</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item
          name="deptCounterSignModelVariableCode"
          label="选择流程变量"
          v-if="formData.deptCounterSignFlag && formData.deptCounterSignType == 2"
        >
          <a-select v-model:value="formData.deptCounterSignModelVariableCode" style="width: 100%" placeholder="请选择">
            <a-select-option :value="mItem.variableCode" v-for="(mItem, mIndex) in modelVariableList" :key="mIndex">{{
              mItem.variableName
            }}</a-select-option>
          </a-select>
        </a-form-item>

        <div style="display: flex; justify-content: start">
          <div>
            <a-divider style="height: 24px; width: 5px; background-color: #2a82e4" />
          </div>
          <span style="padding-left: 10px">发起人配置</span>
        </div>

        <a-form-item name="submitterType" label="发起人选择" style="margin-top: 20px">
          <a-radio-group name="fieldRequired" v-model:value="formData.submitterType">
            <a-radio :value="1">主流程发起人</a-radio>
            <a-radio :value="2">指定成员</a-radio>
            <a-radio :value="3">来自表单字段</a-radio>
            <a-radio :value="4">来自流程变量</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item name="submitterUserName" label="选择发起人" v-if="formData.submitterType == 2">
          <a-input v-model:value="formData.submitterUserName" placeholder="请选择发起人" @focus="submitterUserNameFocus"></a-input>
        </a-form-item>

        <a-form-item name="submitterFormDefinitionId" label="选择表单" v-if="formData.submitterType == 3">
          <a-select
            v-model:value="formData.submitterFormDefinitionId"
            style="width: 100%"
            placeholder="请选择"
            @change="submitterFormDefinitionIdChange"
          >
            <a-select-option :value="fItem.formDefinitionId" v-for="(fItem, fIndex) in formDefinitionList" :key="fIndex">{{
              fItem.formName
            }}</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item name="submitterFormVariableCode" label="选择发起人字段" v-if="formData.submitterType == 3">
          <a-select v-model:value="formData.submitterFormVariableCode" style="width: 100%" placeholder="请选择">
            <a-select-option :value="fieItem.fieldCode" v-for="(fieItem, fieIndex) in subMitFieldList" :key="fieIndex">{{
              fieItem.itemLabelName
            }}</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item name="submitterModelVariableCode" label="选择流程变量" v-if="formData.submitterType == 4">
          <a-select v-model:value="formData.submitterModelVariableCode" style="width: 100%" placeholder="请选择">
            <a-select-option :value="mItem.variableCode" v-for="(mItem, mIndex) in modelVariableList" :key="mIndex">{{
              mItem.variableName
            }}</a-select-option>
          </a-select>
        </a-form-item>

        <div style="display: flex; justify-content: start">
          <div>
            <a-divider style="height: 24px; width: 5px; background-color: #2a82e4" />
          </div>
          <span style="padding-left: 10px">变量传递</span>
        </div>

        <a-form-item name="paramSendSubFlag" label="父流程变量传入子流程" style="margin-top: 20px">
          <a-radio-group name="fieldRequired" v-model:value="formData.paramSendSubFlag">
            <a-radio :value="true">是</a-radio>
            <a-radio :value="false">否</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item name="paramSendParentFlag" label="子流程变量传入父流程">
          <a-radio-group name="fieldRequired" v-model:value="formData.paramSendParentFlag">
            <a-radio :value="true">是</a-radio>
            <a-radio :value="false">否</a-radio>
          </a-radio-group>
        </a-form-item>

        <div style="display: flex; justify-content: start">
          <div>
            <a-divider style="height: 24px; width: 5px; background-color: #2a82e4" />
          </div>
          <span style="padding-left: 10px">子流程节点离开规则</span>
        </div>

        <a-form-item name="leaveType" label="" style="margin-top: 20px">
          <a-radio-group name="fieldRequired" v-model:value="formData.leaveType">
            <a-radio :value="1" style="width: 100%; margin-bottom: 20px">等待子流程执行完毕，进入下一个节点</a-radio>
            <a-radio :value="2" style="width: 100%">无需等待子流程，直接进入下一节点</a-radio>
          </a-radio-group>
        </a-form-item>

        <div style="display: flex; justify-content: start">
          <div>
            <a-divider style="height: 24px; width: 5px; background-color: #2a82e4" />
          </div>
          <span style="padding-left: 10px">循环执行子流程</span>
        </div>

        <a-form-item name="cycleType" label="循环模式" style="margin-top: 20px">
          <a-radio-group name="fieldRequired" v-model:value="formData.cycleType">
            <a-radio :value="1">指定次数</a-radio>
            <a-radio :value="2">无限循环</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item name="cycleNumber" label="循环次数" v-if="formData.cycleType == 1">
          <a-input-number v-model:value="formData.cycleNumber" style="width: 100%" placeholder="请输入循环次数"></a-input-number>
        </a-form-item>

        <a-form-item style="margin-top: 10px">
          <a-button type="primary" @click="handleSave" class="border-radius">确定</a-button>
        </a-form-item>
      </a-form>
    </a-spin>

    <!-- 选择人员 -->
    <Selection
      v-model:visible="visibleFlowPick"
      v-if="visibleFlowPick"
      :data="selectedData"
      :showTab="['user']"
      title="选择发起人"
      @done="closeFlowPick"
    ></Selection>
  </div>
</template>

<script setup name="SubWorkflowForm">
import { ref, onMounted, computed } from 'vue';
import { useWorkflowStore } from '@/store/modules/workflow';
import loadNodeData from '../../../../../utils/utils';
import { FlowDesignApi } from '../../../../../../mid/workflow/design/api/FlowDesignApi';

const emits = defineEmits(['close']);

// Store
const flowStore = useWorkflowStore();

// 公共方法
const { getNodeData, setNodeData } = loadNodeData();

// 绑定表单列表
const formDefinitionList = computed(() => {
  return flowStore.flowGlobalConfig.formDefinitionList.filter(item => item.formType == 1);
});

// 流程变量列表
const modelVariableList = computed(() => {
  return flowStore.flowGlobalConfig.modelVariableList;
});

// 加载状态
const loading = ref(false);
// ref
const formRef = ref();
// 表单数据
const formData = ref({});

// 流程定义下拉列表
const definitionSelectList = ref([]);

// 验证规则
const rules = ref({
  cycleNumber: [{ required: true, message: '请输入循环次数', type: 'number', trigger: 'blur' }],
  cycleType: [{ required: true, message: '请选择循环模式', type: 'number', trigger: 'blur' }],
  deptCounterSignFlag: [{ required: true, message: '请选择是否开启部门会签', type: 'boolean', trigger: 'blur' }],
  deptCounterSignType: [{ required: true, message: '请选择部门选择方式', type: 'number', trigger: 'blur' }],
  submitterType: [{ required: true, message: '请选择发起人类型', type: 'number', trigger: 'blur' }],
  submitterUserName: [{ required: true, message: '请选择发起人', type: 'string', trigger: 'change' }],
  deptCounterSignFormDefinitionId: [{ required: true, message: '请选择表单', type: 'string', trigger: 'change' }],
  submitterFormDefinitionId: [{ required: true, message: '请选择表单', type: 'string', trigger: 'change' }],
  deptCounterSignFormVariableCode: [{ required: true, message: '请选择元素', type: 'string', trigger: 'change' }],
  submitterFormVariableCode: [{ required: true, message: '请选择发起人字段', type: 'string', trigger: 'change' }],
  deptCounterSignModelVariableCode: [{ required: true, message: '请选择流程变量', type: 'string', trigger: 'change' }],
  submitterModelVariableCode: [{ required: true, message: '请选择流程变量', type: 'string', trigger: 'change' }],
  subDefinitionId: [{ required: true, message: '请选择子流程', type: 'string', trigger: 'change' }],
  paramSendSubFlag: [{ required: true, message: '请选择父流程变量传入子流程', type: 'boolean', trigger: 'blur' }],
  paramSendParentFlag: [{ required: true, message: '请选择子流程变量传入父流程', type: 'boolean', trigger: 'blur' }]
});

// 当前节点的数据
const currentNodeData = ref(getNodeData());

// 部门表单字段列表
const deptFieldList = ref([]);
// 发起人表单字段列表
const subMitFieldList = ref([]);

// 是否显示选人弹框
const visibleFlowPick = ref(false);

// 总数据
const selectedData = ref({
  selectUserList: []
});

onMounted(() => {
  getDefinitionSelectList();
  if (currentNodeData.value?.data?.nodeData?.nodeSubFlow) {
    formData.value = Object.assign({}, currentNodeData.value.data.nodeData.nodeSubFlow);
  }

  // 部门字段
  if (formData.value?.deptCounterSignFormDefinitionId) {
    getFormFieldList(formData.value?.deptCounterSignFormDefinitionId, 'dept');
  }

  // 发起人字段
  if (formData.value?.submitterFormDefinitionId) {
    getFormFieldList(formData.value?.submitterFormDefinitionId, 'subMit');
  }
});

// 获取流程定义下拉列表
const getDefinitionSelectList = async () => {
  const res = await FlowDesignApi.getDefinitionSelectList();
  definitionSelectList.value = res.data;
};

/**
 * 保存
 */
const handleSave = async () => {
  await formRef.value.validate().then(() => {
    let saveData = getNodeData();
    saveData.data.nodeData.nodeSubFlow = formData.value;
    setNodeData(saveData);
    emits('close');
  });
};

// 子流程过滤
const filterOption = (input, option) => {
  if ((option?.label ?? '').includes(input)) {
    return option;
  }
  return false;
};

//  部门表单改变
const deptFormDefinitionIdChange = (val, init = false) => {
  if (!init) {
    formData.value.deptCounterSignFormVariableCode = null;
  }
  getFormFieldList(val, 'dept');
};

// 获取表单字段列表
const getFormFieldList = async (formDefinitionId, type) => {
  const res = await FlowDesignApi.getFormFieldList({ formDefinitionId: formDefinitionId });
  if (type == 'dept') {
    deptFieldList.value = res.data;
  } else {
    subMitFieldList.value = res.data;
  }
};

// 发起人表单改变
const submitterFormDefinitionIdChange = (val, init = false) => {
  if (!init) {
    formData.value.submitterFormVariableCode = null;
  }
  getFormFieldList(val, 'subMit');
};

// 选择发起人
const submitterUserNameFocus = () => {
  const { submitterUserId, submitterUserName } = formData.value;
  if (submitterUserId && submitterUserName) {
    selectedData.value.selectUserList = [{ bizId: submitterUserId, name: submitterUserName }];
  }
  visibleFlowPick.value = true;
};

// 关闭选择人员弹框
const closeFlowPick = data => {
  const valueData = data.selectUserList[0] || { bizId: '', name: '' };
  formData.value.submitterUserId = valueData.bizId;
  formData.value.submitterUserName = valueData.name;
};
</script>

<style scoped></style>
