<template>
  <a-form ref="formRef" :model="form" :rules="rules" layout="vertical">
    <a-row :gutter="20">
      <a-col :span="24">
        <a-form-item label="业务名称:" name="businessName">
          <a-input v-model:value="form.businessName" allow-clear placeholder="请输入业务名称" />
        </a-form-item>
      </a-col>
      <a-col :span="24">
        <a-form-item label="业务编码:" name="businessCode">
          <a-input v-model:value="form.businessCode" allow-clear placeholder="请输入业务编码" />
        </a-form-item>
      </a-col>
      <a-col :span="24">
        <a-form-item label="流程分类:" name="flowCategoryId">
          <a-select v-model:value="form.flowCategoryId" style="width: 100%" placeholder="请选择流程分类" @change="flowCategoryIdChange">
            <a-select-option
              :value="item.businessCategoryId"
              v-for="(item, index) in categoryList"
              :key="index"
              :title="item.categoryName"
              >{{ item.categoryName }}</a-select-option
            >
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="24">
        <a-form-item label="流程选择:" name="flowModelId">
          <a-select v-model:value="form.flowModelId" style="width: 100%" placeholder="请选择流程选择">
            <a-select-option :value="mitem.modelId" v-for="(mitem, index) in modelList" :key="index" :title="mitem.modelName">{{
              mitem.modelName
            }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="24">
        <a-form-item label="排序:" name="fldSort">
          <a-input-number
            v-model:value="form.fldSort"
            :min="0"
            style="width: 100%"
            placeholder="请输入排序"
            allow-clear
            autocomplete="off"
          />
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<script setup name="AssociationForm">
import { onMounted, reactive, ref } from 'vue';
import { FlowModelApi } from '../../model/api/FlowModelApi';
import { BusinessCategoryApi } from '../../../app/list/api/BusinessCategoryApi';

const props = defineProps({
  // 表单数据
  form: Object
});

// 验证规则
const rules = reactive({
  businessName: [{ required: true, message: '请输入模型名称', type: 'string', trigger: 'blur' }],
  businessCode: [{ required: true, message: '请输入模型编码', type: 'string', trigger: 'blur' }],
  fldSort: [{ required: true, message: '请输入排序', type: 'number', trigger: 'blur' }],
  flowCategoryId: [{ required: true, message: '请选择流程分类', type: 'string', trigger: 'change' }],
  flowModelId: [{ required: true, message: '请选择流程', type: 'string', trigger: 'change' }]
});

// 分类列表
const categoryList = ref([]);

// 流程选择列表
const modelList = ref([]);

onMounted(() => {
  getCategoryList();
});

// 获取分类列表
const getCategoryList = async () => {
  categoryList.value = await BusinessCategoryApi.list();
};

// 分类改变
const flowCategoryIdChange = val => {
  getModelList(val, true);
};

// 获取流程选择列表
const getModelList = async (businessCategoryId, flag = false) => {
  if (flag) {
    props.form.flowModelId = null;
  }
  const res = await FlowModelApi.modelList({ businessCategoryId: businessCategoryId });
  if (res.data && res.data.length > 0) {
    modelList.value = res.data[0].modelList ?? [];
  } else {
    modelList.value = [];
  }
};

defineExpose({
  getModelList
});
</script>

<style></style>
