<template>
  <div class="select-input">
    <div class="input-wrap">
      <WlInput
        :paddingLeft="0"
        v-model="inputValue"
        @onChange="onChange"
        :placeholder="placeholder"
        @focus="popoverVisible = false"
      />
    </div>
    <WlPopover
      v-model="popoverVisible"
      trigger="click"
      :actions="actions"
      placement="bottom-end"
      @select="onSelect"
      v-if="actions && actions.length > 0"
    >
      <template #reference>
        <div class="arrow-wrap">
          <WlPic :src="select_plat_icon" />
        </div>
      </template>
    </WlPopover>
  </div>
</template>

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

<script lang="ts" setup>
import { PopoverAction } from "vant";
import { watchEffect, ref } from "vue";
import { select_plat_icon } from "@mobileUI/utils/cdn";
import WlPic from "@mobileUI/components/WlPic/src/index.vue";
import WlInput from "@mobileUI/components/WlInput/src/index.vue";
import WlPopover from "@mobileUI/components/WlPopover/src/index.vue";

type Props = {
  modelValue?: string;
  placeholder?: string;
  actions?: PopoverAction[];
};
const props = withDefaults(defineProps<Props>(), {
  modelValue: "",
  placeholder: "",
  actions: null,
});

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

const inputValue = ref("");
const popoverVisible = ref(false);

watchEffect(() => {
  inputValue.value = props.modelValue;
});

const onChange = (val) => {
  emit("update:modelValue", val);
};

const onSelect = (data) => {
  popoverVisible.value = false;
  inputValue.value = data.text;
  emit("update:modelValue", data.text);
};
</script>

<style lang="scss">
.render-form[data-weiling-mobile-ui-bc-render-form] {
  .select-input {
    border-radius: j(8);
    display: flex;
    width: 100%;
    align-items: center;

    .input-wrap {
      flex: 1;
    }

    .arrow-wrap {
      width: j(20);
      height: j(20);
      padding: 0 j(5);
      cursor: pointer;
    }
  }
}
</style>
