<template>
  <div v-if="props.controlType == 'input'">
    <a-input
      ref="myInput"
      v-model:value="inputValue"
      style="width: 100%"
      size="small"
      @press-enter="check"
      @blur="check"
    />
  </div>
  <div v-if="props.controlType == 'select'">
    <div>
      <a-select
        ref="myInput"
        v-model:value="inputValue"
        :options="selectOption"
        style="width: 88px"
        size="small"
        @change="check"
        @blur="check"
      />
    </div>
  </div>
  <div v-if="props.controlType == 'inputModal'">
    <a-button
      size="small" 
      @click="showModal"
    >
      填写
    </a-button>

    <a-modal
      v-model:open="modalVisible"
      title="填写默认值"
      ok-text="确认"
      cancel-text="取消"
      size="small"
      @ok="check"
    >
      <textarea
        v-model="inputValue" rows="16" cols="66" 
        size="small"
      />
    </a-modal>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, watch } from 'vue';
const props = defineProps({
  record: {
    type: Object,
    required: true,
  },
  paramName: {
    type: String,
    required: true,
  },
  controlType: {
    type: String,
    required: true,
  },
  selectData: {
    type: Array,
    default: () => [],
    required: false,
  },
});

const emit = defineEmits(['changeAll']);
const myInput = ref(null);
const newRecord = ref({});
const selectOption = ref([]);
const inputValue = ref('');
const modalVisible = ref(false);

watch(
  () => props,
  newData => {
    if (newData) {
      newRecord.value = JSON.parse(JSON.stringify(props.record));
      inputValue.value = newRecord.value[props.paramName];
      selectOption.value = JSON.parse(JSON.stringify(props.selectData));
    }
  },
  { immediate: true, deep: true },
);
const updateProperty = value => {
  if (value) {
    check();
  }
};

const showModal = () => {
  modalVisible.value = true;
};

const check = () => {
  modalVisible.value = false;
  newRecord.value[props.paramName] = inputValue.value;
  emit('changeAll', newRecord, props.paramName);
};
</script>

<style scoped>
</style>
