<template>
  <a-modal
    :width="600"
    :maskClosable="false"
    :visible="visible"
    :confirm-loading="loading"
    :forceRender="true"
    title="退回审批"
    :body-style="{ paddingBottom: '8px' }"
    @update:visible="updateVisible"
    @ok="save"
    @close="updateVisible(false)"
  >
    <a-form ref="formRef" :model="form" :rules="rules" :label-col="{ span: 5 }">
      <a-form-item label="流程实例名称:">
        <span>{{ getFlowName() }}</span>
      </a-form-item>
      <a-form-item label="审批意见:" name="suggestContent">
        <a-textarea v-model:value="form.suggestContent" placeholder="请输入审批意见" :rows="4" />
      </a-form-item>
      <a-form-item label="退回类型:" name="backType">
        <a-radio-group v-model:value="form.backType" @change="backTypeChange">
          <a-radio :value="1">退回到发起人</a-radio>
          <a-radio :value="2">退回到指定节点</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="指定退回节点:" name="backNodeId" v-if="form.backType == 2">
        <a-select v-model:value="form.backNodeId" style="width: 100%" placeholder="请选择指定退回节点" allowClear>
          <a-select-option :value="item.nodeId" v-for="item in roamLogList" :key="item.nodeId">{{ item.nodeName }}</a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup name="BackOperate">
import { ref, onMounted, reactive } from 'vue';
import { FlowTaskApi } from '../../api/FlowTaskApi';
import { message } from 'ant-design-vue';

const props = defineProps({
  visible: Boolean,
  data: Array
});

const emits = defineEmits(['update:visible', 'done']);

// 弹框加载状态
const loading = ref(false);
// 表单数据
const form = ref({});
// 验证规则
const rules = reactive({
  suggestContent: [{ required: true, message: '请输入审批意见', type: 'string', trigger: 'blur' }],
  backType: [{ required: true, message: '请选择退回的节点', type: 'number', trigger: 'change' }],
  backNodeId: [{ required: true, message: '请选择指定退回节点', type: 'string', trigger: 'change' }]
});
// ref
const formRef = ref(null);
// 节点列表
const roamLogList = ref([]);

onMounted(() => {
  getRoamList();
  form.value.taskId = props.data[0].id;
});

// 切换弹框显示隐藏状态
const updateVisible = value => {
  emits('update:visible', value);
};

// 点击保存
const save = async () => {
  await formRef.value.validate();
  FlowTaskApi.ruTaskBack(form.value).then(res => {
    if (res.code == '00000') {
      message.success(res.message);
      emits('update:visible', false);
      emits('done');
    }
  });
};

// 获取流程名称
const getFlowName = () => {
  let name = '';
  if (props.data && props.data.length > 0) {
    name = props.data.map(item => item.definitionIdWrapper.modelName).join(',');
  }
  return name;
};

//类型改变
const backTypeChange = () => {
  form.value.backNodeId = null;
};

// 获取流转日志列表
const getRoamList = () => {
  FlowTaskApi.getBackReNodeList({ taskId: props.data[0].id }).then(res => {
    roamLogList.value = res;
  });
};
</script>

<style scoped></style>
