<template>
  <div class="wh100">
    <a-input
      v-model:value="dataValueName"
      :disabled="props.readonly || props.disabled"
      class="w-full"
      :placeholder="props.record?.placeholderContent || placeholder"
      @focus="inputClick"
    ></a-input>

    <a-form-item-rest>
      <!-- 选择组件 -->
      <SelectModalDialog
        v-model:visible="showVisible"
        :dictList="dictList"
        :dataValue="dataValue"
        :valueType="valueType"
        v-if="showVisible"
        :isRadio="isRadio"
        @done="closeSelect"
      ></SelectModalDialog>
    </a-form-item-rest>
  </div>
</template>

<script setup name="FormSelectModal">
import Request from '@/utils/request/request-util';
import { ref, onMounted, watch } from 'vue';
import SelectModalDialog from './dialog/select-modal-dialog.vue';

const props = defineProps({
  value: {
    type: String,
    default: ''
  },
  // 当前行数据
  formData: {
    type: Object,
    default: {}
  },
  record: {
    type: Object,
    default: {}
  },
  //是否禁用
  disabled: {
    type: Boolean,
    default: false
  },
  placeholder: {
    type: String,
    default: '请选择'
  },
  // 是否只读
  readonly: {
    type: Boolean,
    default: false
  },
  // 是否是设计
  isDesgin: {
    type: Boolean,
    default: false
  },
  // ref
  formRef: {
    type: Object,
    default: null
  },
});

const emits = defineEmits(['update:value', 'onChange']);

// 是否单选
const isRadio = ref(true);

// 选中的值
const dataValue = ref([]);
// 名称
const dataValueName = ref('');

// 是否显示弹框
const showVisible = ref(false);

// 下拉取值 1: id;2: code
const valueType = ref(1);
// 数据来源
const dataFromType = ref(1);

// 可选中列表
const dictList = ref([]);

// 是否有关联字段
const linkFieldCode = ref('');

onMounted(() => {
  if (props.record?.formItemSelect?.valueType == 2) {
    valueType.value = 2;
  }
  if (props.record?.formItemSelect?.linkFieldCode) {
    linkFieldCode.value = props.record.formItemSelect.linkFieldCode;
  }
  if (props.record?.formItemSelect?.dataFromType) {
    dataFromType.value = props.record.formItemSelect.dataFromType;
  }

  if (props.record?.itemMultipleChoiceFlag) {
    isRadio.value = false;
  } else {
    isRadio.value = true;
  }
  getDictList();
  setValueData();
});

// 获取选择列表
const getDictList = searchText => {
  if (props.isDesgin || dataFromType.value != 1 || !props.record.formItemSelect.backendUrl) return;
  let params = {
    searchText: searchText
  };
  if (linkFieldCode.value) {
    params[linkFieldCode.value] = props.formData[linkFieldCode.value];
    params.valueType = valueType.value;
  }
  Request.get(props.record.formItemSelect.backendUrl, params).then(res => {
    props.record.dictList = res.data;
  });
};

// 设置值
const setValueData = () => {
  if (props.value) {
    dataValue.value = JSON.parse(props.value);
  } else {
    dataValue.value = [];
  }
  dataValueName.value = dataValue.value.map(item => item.name).join('；');
};

// 输入框点击
const inputClick = () => {
  showVisible.value = true;
};

// 关闭弹框
const closeSelect = data => {
  dataValue.value = data;
  dataValueName.value = data.map(item => item.name).join('；');
  dataValueChange();
};

// 更改值
const dataValueChange = () => {
  let valueData = [...dataValue.value];
  if (valueData?.length == 0) {
    valueData = '';
  } else {
    valueData = JSON.stringify(valueData);
  }
  emits('update:value', valueData);
  emits('onChange', props.record);
  checkField();
};

// 校验必填
const checkField = async () => {
  if (props.formRef?.validateFields) {
    await props.formRef.validateFields([props.record.fieldCode]);
  }
};

watch(
  () => props.value,
  val => {
    setValueData();
  },
  { deep: true }
);

watch(
  () => props.formData[linkFieldCode.value],
  val => {
    getDictList();
  },
  { deep: true }
);

watch(
  () => props.record.dictList,
  val => {
    if (val) {
      dictList.value = val;
    }
  },
  { deep: true, immediate: true }
);
</script>

<style></style>
