<template>
    <view>
        <picker range-key="text" @change="changeLatestHotestStatus" :value="rangeVal" :range="rangeOptions">
            <view class="uni-input">{{ rangeOptions[rangeVal].text }}</view>
        </picker>
    </view>
</template>

<script setup>
import { reactive, inject, watch, ref, onMounted, getCurrentInstance } from 'vue';
const rangeVal = ref(0);
const emit = defineEmits(['confirm', 'close']);
const rangeOptions = ref([
    { value: 0, text: '推荐' },
    { value: 1, text: '最热' },
    { value: 2, text: '最新发布' },
]);

function changeLatestHotestStatus(e) {
    const id = e.detail.value;
    rangeVal.value = id;
    const obj = rangeOptions.value.filter((item) => item.value === id)[0];
    emit('confirm', obj);
}
</script>

<style lang="stylus"></style>
