<template>
  <div class="rf-select-wrap">
    <div class="chosed-value" @click="onShow">{{ fieldValue }}</div>
    <WlPicker
      v-model="popUpVisible"
      :columns="options"
      :pickerDefaultValue="fieldIndex"
      @onClose="onClose"
      @onConfirm="onConfirm"
    />
  </div>
</template>

<script lang="ts">
export default {
  name: "RfSelect",
};
</script>

<script lang="ts" setup>
import { ref, watchEffect } from "vue";
import type { PickerFieldNames } from "vant";
import WlPicker from "@mobileUI/components/WlPicker/src/index.vue";

type Props = {
  modelValue?: string | number;
  options?: PickerFieldNames[];
};
const props = withDefaults(defineProps<Props>(), {
  modelValue: "",
  options: null,
});

const emit = defineEmits<{
  (e: "update:modelValue", val: string);
  (e: "onSelect", val: PickerFieldNames);
  (e: "onClose");
}>();

const popUpVisible = ref(false);
const fieldValue = ref<string | number>("");
const fieldIndex = ref(0);

const onClose = () => {
  popUpVisible.value = false;
  emit("onClose");
};
const onShow = () => (popUpVisible.value = true);

const onConfirm = (val, indexs, { selectedOptions: item }) => {
  fieldValue.value = item.text;
  emit("update:modelValue", item.text);
  emit("onSelect", item);
};

watchEffect(() => {
  fieldValue.value = props.modelValue;
  fieldIndex.value = props.options.findIndex((ele) => ele === props.modelValue);
  fieldIndex.value = fieldIndex.value === -1 ? 0 : fieldIndex.value;
});
</script>

<style lang="scss">
.render-form[data-weiling-mobile-ui-bc-render-form] {
  .rf-select-wrap {
    width: 100%;
    .chosed-value {
      min-height: j(30);
      width: 100%;
      @extend %flex-middle;
    }
  }
}
</style>
