<template>
  <div class="wh100">
    <div class="describe">说明：配置流程标题的生成，支持使用流程变量，或自定义的方式进行流程标题生成。</div>
    <div class="m-20">
      <FlowSubTitle name="流程标题生成方式" />
    </div>
    <a-form :model="modelTitleConfig" ref="formRef" :rules="rules" layout="vertical">
      <div class="m-20">
        <a-form-item name="flowTitleType" label="">
          <a-radio-group v-model:value="modelTitleConfig.flowTitleType" @change="flowTitleTypeChange">
            <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>
      </div>
      <!-- 固定值 -->
      <div class="m-20" v-if="modelTitleConfig?.flowTitleType == 1">
        <FlowSubTitle name="流程标题值" />
        <a-form-item name="titleConfigValue" label="">
          <a-input v-model:value="modelTitleConfig.titleConfigValue" placeholder="请输入流程标题值" style="margin-top: 20px"></a-input>
        </a-form-item>
      </div>
      <!-- 表单变量 -->
      <div class="m-20" v-if="modelTitleConfig?.flowTitleType == 2">
        <FlowSubTitle name="表单变量选择" />
        <a-form-item name="formDefinitionId" label="表单选择" style="margin-top: 10px">
          <a-select
            v-model:value="modelTitleConfig.formDefinitionId"
            style="width: 100%"
            placeholder="请选择"
            @change="formDefinitionIdChange"
          >
            <a-select-option :value="fItem.formDefinitionId" v-for="(fItem, fIndex) in props.formDefinitionList" :key="fIndex">{{
              fItem.formName
            }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item name="formVariableCode" label="表单字段选择">
          <a-select v-model:value="modelTitleConfig.formVariableCode" style="width: 100%" placeholder="请选择">
            <a-select-option :value="fieItem.fieldCode" v-for="(fieItem, fieIndex) in fieldList" :key="fieIndex">{{
              fieItem.itemLabelName
            }}</a-select-option>
          </a-select>
        </a-form-item>
      </div>
      <!-- 流程变量 -->
      <div class="m-20" v-if="modelTitleConfig?.flowTitleType == 3">
        <FlowSubTitle name="流程变量选择" />
        <a-form-item name="modelVariableCode" label="选择流程变量" style="margin-top: 10px">
          <a-select v-model:value="modelTitleConfig.modelVariableCode" style="width: 100%" placeholder="请选择">
            <a-select-option :value="mItem.variableCode" v-for="(mItem, mIndex) in props.modelVariableList" :key="mIndex">{{
              mItem.variableName
            }}</a-select-option>
          </a-select>
        </a-form-item>
      </div>
      <!-- 组合 -->
      <div class="m-20" v-if="modelTitleConfig?.flowTitleType == 4">
        <FlowSubTitle name="组合值填充" />
        <a-form-item name="titleConfigValue" label="">
          <a-textarea v-model:value="modelTitleConfig.titleConfigValue" placeholder="请输入" :rows="12" style="margin-top: 20px" />
        </a-form-item>
        <div class="describe">说明：组合填充可以自定义文字，也可以使用流程变量和流程表单中的值进行配置。</div>
        <div class="describe">同时提供特定流程变量：{submitUser}代表发起人的姓名，{modelName}代表流程模型名称。</div>
      </div>
    </a-form>
    <div class="add"><a-button type="primary" class="border-radius" @click="onSave">确定</a-button></div>
  </div>
</template>

<script setup name="FlowTitleDrawer">
import { ref, reactive } from 'vue';
import FlowSubTitle from '../../../layout/right/panel/common/FlowSubTitle.vue'
import { useWorkflowStore } from '@/store/modules/workflow';
import { FlowDesignApi } from '../../../../mid/workflow/design/api/FlowDesignApi';
import { deepClone } from '@/utils/common/util';

const props = defineProps({
  //  流程变量列表
  modelVariableList: {
    type: Array,
    default: []
  },
  // 流程表单列表
  formDefinitionList: {
    type: Array,
    default: []
  },
});

const emits = defineEmits('save');

// ref
const formRef = ref(null);

// 流程标题配置
const modelTitleConfig = ref({
  flowTitleType: 1
});

// 验证规则
const rules = reactive({
  titleConfigValue: [{ required: true, message: '请输入', type: 'string', trigger: 'blur' }],
  formDefinitionId: [{ required: true, message: '请选择表单', type: 'string', trigger: 'change' }],
  formVariableCode: [{ required: true, message: '请选择表单字段', type: 'string', trigger: 'change' }],
  modelVariableCode: [{ required: true, message: '请选择流程变量', type: 'string', trigger: 'change' }]
});

// 表单字段列表
const fieldList = ref([]);

// Store
const flowStore = useWorkflowStore();

// 显示侧边
const show = async () => {
  modelTitleConfig.value = deepClone(flowStore.flowGlobalConfig.modelTitleConfig);
  if (!modelTitleConfig.value) {
    modelTitleConfig.value = {};
  }
  if (modelTitleConfig.value?.formDefinitionId) {
    formDefinitionIdChange(modelTitleConfig.value?.formDefinitionId, true);
  }
};

// 标题类型改变
const flowTitleTypeChange = () => {
  Object.keys(modelTitleConfig.value).forEach(key => {
    if (key != 'flowTitleType') {
      modelTitleConfig.value[key] = null;
    }
  });
};

// 表单改变
const formDefinitionIdChange = (val, init = false) => {
  if (!init) {
    modelTitleConfig.value.formVariableCode = null;
  }
  getFormFieldList(val);
};

// 获取表单字段列表
const getFormFieldList = async formDefinitionId => {
  const res = await FlowDesignApi.getFormFieldList({ formDefinitionId: formDefinitionId });
  fieldList.value = res.data;
};

// 侧边保存
const onSave = async () => {
  emits('save');
};

defineExpose({
  show,
  modelTitleConfig
});
</script>

<style scoped lang="less">
.describe {
  color: #a6a6a6;
}
.m-20 {
  margin: 20px 0;
}
</style>
