<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="conditionInputType">
        <a-radio-group v-model:value="form.conditionInputType" @change="conditionInputTypeChange">
          <a-radio value="text">文本输入</a-radio>
          <a-radio value="dict"> 字典选择 </a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="字典选择:" name="dictTypeId"  v-if="form.conditionInputType == 'dict'">
        <a-input v-model:value="form.dictTypeId" allow-clear placeholder="请选择字典" @focus="dictTypeIdFocus"/>
      </a-form-item>
      <a-form-item label="字典取值:" name="dictDataType" v-if="form.conditionInputType == 'dict'">
        <a-radio-group v-model:value="form.dictDataType">
          <a-radio value="id">字典id</a-radio>
          <a-radio value="code"> 字典code </a-radio>
        </a-radio-group>
      </a-form-item>
    </a-form>

    <!-- 字典类型选择 -->
    <DictTypeSelect
      v-model:visible="showchange"
      v-if="showchange && !dictUserTypeFlag"
      :data="form"
      @done="closeSelection"
    ></DictTypeSelect>

    <!-- 用户字典维护 -->
    <UserDict v-model:visible="showchange" v-if="showchange && dictUserTypeFlag" readonly @done="closeSelection"/>
  </a-modal>
</template>

<script setup name="ListAddEdit">
import { ref, onMounted, reactive, defineAsyncComponent } from 'vue';
import { getUUID } from '@/utils/common/util';
import { MetaUserDictApi } from '../../../../form/design/api/MetaUserDictApi';

const DictTypeSelect = defineAsyncComponent(() => import('./dict-type.vue'));
const UserDict = defineAsyncComponent(() => import('../../../../form/design/components/user-dict/index.vue'));

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

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

const showchange = ref(false);

const formRef = ref();

// 是系统还是用户字典  系统 false 用户 true
const dictUserTypeFlag = ref(false);

// 验证规则
const rules = reactive({
  fieldName: [{ required: true, message: '请输入字段名称', type: 'string', trigger: 'blur' }],
  showName: [{ required: true, message: '请输入列展示名称', type: 'string', trigger: 'blur' }],
  conditionInputType: [{ required: true, message: '请选择条件输入类型', type: 'string', trigger: 'change' }],
  dictDataType: [{ required: true, message: '请选择字典类型选择', type: 'string', trigger: 'change' }],
  dictTypeId: [{ required: true, message: '请选择字典选择', type: 'string', trigger: 'change' }],
});

onMounted(async() => {
  dictUserTypeFlag.value = await MetaUserDictApi.getDictUserTypeFlag();
  if (props.data) {
    isUpdate.value = true;
    form.value = Object.assign({}, props.data);
  } else {
    isUpdate.value = false;
  }
});

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

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

// 字典弹框
const dictTypeIdFocus = () => {
  showchange.value = true;
};

// 关闭选择转换器
const closeSelection = data => {
  form.value.dictTypeId = data.dictTypeId;
};

// 类型改变
const conditionInputTypeChange = () => {
  form.value.dictTypeId = null;
  form.value.dictDataType = null;
}
</script>

<style></style>
