<template>
  <div class="input-group">
    <input type="text" v-model="value.data" class="form-control" placeholder="Sold to code" />
    <button class="btn btn-outline-secondary" type="button" id="button-addon2" @click="openSoldToCodePopop">Search</button>    
  </div>
</template>
<script setup lang="ts">
import _ from 'lodash';
import { SDLUtil } from '@/utils';
import { ref, onMounted } from 'vue';
import { computed } from 'vue';
import SoldToCodePopup from '@/components/popup/SoldToCodePopup.vue';

const props = defineProps({ modelValue: { type: Object, required: true } });
const emit = defineEmits(['update:modelValue']);

//const submittedText = ref('');

const value = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit('update:modelValue', value.value);
  },
});

const setValue = args => {
  console.log('args', args);
};

const openSoldToCodePopop = param => {
  SDLUtil.show(
    SoldToCodePopup,
    {
      userStatus: true,
      knoxSearch: false,
      singleMode: true,
      rtnFunc: args => {
        if (!_.isEmpty(args)) {
          props.modelValue.data = args[0].userName;//sample
        }

        console.log('args', args);
      },
    }, // component에서 props 로 선언한 인자 전달
    {
      width: 850,
      height: 'auto',
    }, // 모달로 전달할 Properties
  );
  console.log('openSoldToCodePopop');
};

onMounted(() => {
  console.log('   onMounted     ', props.modelValue); // don't use this keyword
});
</script>

<style scoped>
.select-input {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 200px;
}
</style>
