<template>
  <picker
    :range="pickerList"
    :range-key="props?.key || 'text'"
    @change="onChange"
    :disabled="props?.disabled"
  >
    <slot />
  </picker>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from "vue";

interface EnumItem {
  text?: string;
  value?: string;
  type?: string;
}
const props = defineProps([
  "Enums",
  "title",
  "pickerIndex",
  "value",
  "borderTop",
  "required",
  "tip",
  "key",
  "des",
  "padding",
  "valueModel",
  "disabled",
]);
const pickerList = ref<any>([]);
const emit = defineEmits(["change", "update:valueModel"]);
const onChange = (e: any) => {
  let selectData: any = pickerList.value[e?.detail.value];
  emit("update:valueModel", selectData?.value);
  emit("change", selectData);
};

const getEnums = (): any => {
  let list: EnumItem[] = Object.entries(
    props?.Enums as Record<string, EnumItem>
  ).map(([key, value]) => ({
    text: value.text,
    value: value.value,
    type: value?.type || "",
  }));
  pickerList.value = list;
};

watch(
  () => props?.Enums,
  () => {
    getEnums();
  }
);

onMounted(() => {
  getEnums();
});
</script>
<style lang="scss" scoped>
.rent_des {
  display: flex;
  align-items: center;
  color: #999;
  font-size: 20rpx;
  padding: 0 0 20rpx 0;
  text {
    padding-left: 10rpx;
  }
}
</style>
