<script setup>
import timeIcon from "../static/icons/time.png";

const modalValue = defineModel();
const {placeholder} = defineProps({
    placeholder: {
        type: String,
        default: "请选择时间",
    }
});

const success = ({detail: {value}}) => {
    modalValue.value = value;
}
</script>

<template>
    <picker mode="date" class="x-date-input" @change="success">
        <view>
            <image class="!size-[24rpx] !absolute left-[30rpx] top-1/2 -translate-y-1/2" :src="timeIcon"></image>
            <text v-if="!modalValue" class="text-[#666]">{{ placeholder }}</text>
            <text v-else>{{modalValue}}</text>
        </view>
    </picker>
</template>

<style lang="scss" scoped>
.x-date-input {
    background-color: #F2F3F5;
    padding: 14rpx 0;
    flex-grow: 1;
    text-align: center;
    border-radius: 4rpx;
    position: relative;
}
</style>
