<template>
  <picker
    :range="pickerList"
    :range-key="props?.key || 'name'"
    :disabled="props?.disabled"
    @change="onChange"
  >
    <view class="picker_select_btn">
      <view class="label">{{ selectValue || props?.placeholder }}</view>
      <uni-icons type="down" color="#333" size="12" />
    </view>
  </picker>
</template>
<script setup lang="ts">
import { getApiLoading } from "@/common/libraries/apiLoading";
import { onMounted, ref, watch } from "vue";
const props = defineProps([
  "Enums",
  "title",
  "pickerIndex",
  "value",
  "borderTop",
  "required",
  "disabled",
  "tip",
  "key",
  "des",
  "padding",
  "valueModel",
  "placeholder",
  "Apis",
]);
const pickerList = ref<any>([]);
const selectValue = ref("");
const emit = defineEmits(["change", "update:valueModel"]);
const onChange = (e: any) => {
  let selectData: any = pickerList.value[e?.detail.value];
  selectValue.value = selectData?.name;
  emit("update:valueModel", selectData?.id || "");
  emit("change", selectData);
};

const getPickerList = () => {
  getApiLoading(props?.Apis, {}).then((res) => {
    pickerList.value = [...[{ name: props?.placeholder, id: 0 }], ...res?.data];
    console.log(res);
  });
};

onMounted(() => {
  getPickerList();
});
</script>

<style lang="scss" scoped>
.picker_select_btn {
  background-color: #eee;
  padding: 14rpx 20rpx;
  border-radius: 100rpx;

  text-align: center;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  color: #333;
  margin-left: 30rpx;

  text {
    padding-right: 10rpx;
  }
  .label {
    white-space: nowrap; /* 防止文本换行 */
    overflow: hidden; /* 隐藏超出部分的内容 */
    text-overflow: ellipsis;
    min-width: 100rpx;
    max-width: 200rpx;
  }
}
</style>
