<template>
  <div class="rf-area-select-wrap" data-weiling-mobile-ui-rf-area-select-wrap>
    <div class="rf-area-select" @click="onShow">{{ valueText }}</div>
    <WlArea v-model="popUpVisible" :value="modelValue" />
  </div>
</template>

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

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

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

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

const popUpVisible = ref(false);
const valueText = ref<string | number>("");

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

const onSelect = (date) => {
  emit("onSelect", new Date(date).getTime());
  emit("update:modelValue", new Date(date).getTime());
  onClose();
};

watchEffect(() => {
  valueText.value = props.modelValue
    
});
</script>

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