<template>
  <!-- 新增编辑 -->
  <a-modal
    :width="600"
    :maskClosable="false"
    :visible="props.visible"
    :confirm-loading="loading"
    :forceRender="true"
    style="top: 40px"
    :title="isUpdate ? '编辑列表字段' : '新增列表字段'"
    :body-style="{ paddingBottom: '8px' }"
    @update:visible="updateVisible"
    @ok="save"
    @close="updateVisible(false)"
  >
    <a-form ref="formRef" :model="form" :rules="rules" :labelCol="{ span: 5 }">
      <a-form-item label="字段名称:" name="fieldName">
        <a-input v-model:value="form.fieldName" allow-clear placeholder="请输入字段名称" />
      </a-form-item>
      <a-form-item label="列展示名称:" name="showName">
        <a-input v-model:value="form.showName" allow-clear placeholder="请输入列展示名称" />
      </a-form-item>
      <a-form-item label="转换器类型:" name="parserType">
        <a-radio-group v-model:value="form.parserType">
          <a-radio :value="1">通用转化器</a-radio>
          <a-radio :value="2">表单元素</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="转换器选择:" name="parserName" v-if="form.parserType == 1">
        <a-input v-model:value="form.parserName" allow-clear placeholder="请选择转换器" @focus="parserNameFocus" />
      </a-form-item>
      <a-form-item label="选择表单:" name="formDefinitionId" v-if="form.parserType == 2">
        <a-select
          v-model:value="form.formDefinitionId"
          placeholder="请选择"
          style="width: 100%"
          allowClear
          show-search
          :filterOption="filterOption"
          @change="formDefinitionIdChange"
        >
          <a-select-option
            :value="fItem.currentDefinitionId"
            v-for="(fItem, fIndex) in formList"
            :key="fIndex"
            :label="fItem.formModelName"
            >{{ fItem.formModelName }}</a-select-option
          >
        </a-select>
      </a-form-item>
      <a-form-item label="选择表单元素:" name="fieldCode" v-if="form.parserType == 2">
        <a-select
          v-model:value="form.fieldCode"
          placeholder="请选择"
          style="width: 100%"
          allowClear
          show-search
          :filterOption="filterOption"
        >
          <a-select-option
            :value="fiItem.fieldCode"
            v-for="(fiItem, fiIndex) in formFieldList"
            :key="fiIndex"
            :label="fiItem.itemLabelName"
            >{{ fiItem.itemLabelName }}</a-select-option
          >
        </a-select>
      </a-form-item>
    </a-form>

    <Exchange v-model:visible="showchange" v-if="showchange" @done="closeChange" :data="form" />
  </a-modal>
</template>

<script setup name="SearchAddEdit">
import { ref, onMounted, reactive } from 'vue';
import { getUUID } from '@/utils/common/util';
import Exchange from './exchange.vue';
import { SheetViewApi } from '../api/SheetViewApi';

const props = defineProps({
  visible: Boolean,
  data: Object,
  viewId: {
    type: String,
    default: ''
  }
});

const emits = defineEmits(['update:visible', 'done']);
// 弹框加载
const loading = ref(false);
// 是否是编辑状态
const isUpdate = ref(false);
// 表单数据
const form = ref({
  fieldId: getUUID(),
  columnShowFlag: true,
  picShowFlag: false,
  parserType: 1
});

const showchange = ref(false);

const formRef = ref();

// 验证规则
const rules = reactive({
  fieldName: [{ required: true, message: '请输入字段名称', type: 'string', trigger: 'blur' }],
  showName: [{ required: true, message: '请输入列展示名称', type: 'string', trigger: 'blur' }]
});

// 表单列表
const formList = ref([]);

// 表单元素列表
const formFieldList = ref([]);

onMounted(() => {
  getFormList();
  if (props.data) {
    isUpdate.value = true;
    form.value = Object.assign({}, props.data);
    if (form.value?.formDefinitionId) {
      formDefinitionIdChange(false);
    }
  } else {
    isUpdate.value = false;
  }
});

// 获取表单列表
const getFormList = async () => {
  formList.value = await SheetViewApi.getViewBusinessFormList({ viewId: props.viewId });
};

// 表单改变
const formDefinitionIdChange = (isNull = true) => {
  if (isNull) {
    form.value.fieldCode = null;
  }
  getFormFieldList();
};

// 获取表单元素列表
const getFormFieldList = async () => {
  formFieldList.value = await SheetViewApi.getFormFieldList({ formDefinitionId: form.value.formDefinitionId });
};

// 更改弹框状态
const updateVisible = value => {
  emits('update:visible', value);
};

// 接口输入过滤
const filterOption = (input, option) => {
  if ((option?.label ?? '').includes(input)) {
    return option;
  }
  return false;
};

// 点击保存
const save = async () => {
  await formRef.value.validate();
  emits('done', form.value);
  emits('update:visible', false);
};

// 显示转换器弹框
const parserNameFocus = () => {
  showchange.value = true;
};

// 关闭选择转换器
const closeChange = data => {
  form.value.parserName = data;
};
</script>

<style></style>
