<template>
      <u-picker
        v-model="valueNameValue"
        :show="show"
        :columns="columns"
        :title="title"
        :closeOnClickOverlay="closeOnClickOverlay"
        :keyName="keyName"
        :defaultIndex="defaultIndex"
        @close="close"
        @cancel="cancel"
        @confirm="confirm"
        @change="change"
      ></u-picker>
      <u-input 
        v-model="valueNameValue" 
        :border="border" 
        :maxlength="maxlength" 
        :input-align="inputAlign" 
        :shape="shape"
        :clearable="clearable"
        :fontSize="fontSize"
        :color="color"
        :readonly="readonly"
        :disabled="disabled"
        :disabledColor="disabledColor"
        :placeholder="placeholder" 
        :placeholderStyle="placeholderStyle"
        :customStyle="customStyle"
        >
        <template #suffix>
          <u-button
            @tap="show = true"
            :text="rightText"
            :type="btnType"
            size="mini"
            :disabled="disabled || readonly"
          ></u-button>
        </template>
      </u-input>
</template>

<script setup lang="ts">
import { ref, reactive, computed, watch, watchEffect } from "vue";
interface Props {
  modelValue: any;
  columns: any[]; // 数据源 二维数组
  keyName?: string; //显示的属性名
  valueName?: string; //存储的属性名
  rightText?: string; //未选择时,右侧提示文字
  title?: string; // 顶部标题
  clearable?: boolean; // 清空
  closeOnClickOverlay?: boolean; //是否允许点击遮罩关闭选择器  ( 默认 false )
  
  border?: string; // surround四周有边框,bottom底部有边框,none没有边框
  maxlength?: string | number;
  inputAlign?: string; //对齐方式 left\center\right
  placeholderStyle?: string | object; 
  placeholder?: string; 
  shape?: string; 
  fontSize?: string;
  color?: string;
  btnType?: string; 
  customStyle?: any; 
  readonly?: boolean;
  disabled?: boolean;
  disabledColor?: string;
}
const props = withDefaults(defineProps<Props>(), {
  placeholder:'请输入或选择',
  border: "bottom",
  keyName: "name",
  valueName: "code",
  btnType: 'primary',
  rightText: '选择',
  clearable: false
});
//默认不弹出
const show = ref(false);
//选中后需要的值
const valueNameValue = ref('');
//默认选中索引[]
const defaultIndex = ref([]);
//选中后显示的值
const KeyNameValue = ref('');
//事件抛出
const emit = defineEmits(["close", "cancel", "confirm", "change",'update:modelValue']);
//确认
const confirm = (d: any) => {
  show.value = false;
  if(Object.prototype.toString.call(d.value[0])==='[object Object]'){
    valueNameValue.value = d.value[0][props.valueName];
    KeyNameValue.value = d.value[0][props.keyName];
  }else{
    valueNameValue.value = d.value[0];
    KeyNameValue.value = d.value[0]
  }
  emit("update:modelValue", valueNameValue.value);
  emit("confirm", valueNameValue.value);
};
//取消
const cancel = () => {
  show.value = false;
  emit("cancel");
};
//关闭
const close = () => {
  show.value = false;
  emit("close");
};
//改变
const change = (d: any) => {
  emit("change", d);
};
//v-model值发生变化时，再次更新v-model
watch(valueNameValue, () => {
  emit("update:modelValue", valueNameValue.value);
});

watchEffect(()=>{
  if(props.columns.length) {
    if(Object.prototype.toString.call(props.columns[0][0])==='[object Object]'){
        props.columns[0].map((item,index)=>{
          if(item[props.valueName] == props.modelValue){
            KeyNameValue.value = item[props.keyName]
            defaultIndex.value = [index]
          }
        })
    }else{
      props.columns[0].map((item,index)=>{
        if(item == props.modelValue){
          KeyNameValue.value = item
          defaultIndex.value = [index]
        }
      })
    }
  }
  if(props.modelValue) {
    valueNameValue.value = props.modelValue
  }
})
</script>

