<template>
    <view class="select_time">
        <template v-if="isEdit">
            <view class="time_list">
                <view
                    v-for="(i, idx) in sendTimeOpt"
                    :key="idx"
                    class="time_item"
                    @click="handleChooseSendTime(i)"
                >
                    <image
                        :src="
                            choosedTime.sendType === i.type
                                ? `${OSS_URL}/checked_icon.png`
                                : `${OSS_URL}/unchecked_icon.png`
                        "
                        mode=""
                        class="radio"
                    ></image>
                    {{ i.label }}
                </view>
            </view>
        </template>
        <template v-else>
            <!-- 查看 -->
            <view class="select_time_item">{{ dayjs(time).format('YYYY.MM.DD HH:mm') }}</view>
        </template>
        <DateTimePicker ref="dateRef" v-model="choosedTime.sendTime" @confirm="handleConfirmDate" />
    </view>
</template>

<script setup>
import { computed, nextTick, ref, watch } from 'vue';

import DateTimePicker from '@/pages/mine/Components/DateTimePicker/index.vue';
import dayjs from 'dayjs';
const props = defineProps({
    time: {
        type: String,
        default: '2024-6-20 10:00',
    },
    // 编辑查看
    isEdit: {
        type: Boolean,
        default: true,
    },
});
const emits = defineEmits(['getSendTime']);
const dateRef = ref(null);
const OSS_URL = import.meta.env.VITE_OSS_HOST;
const showDate = ref(false);
const sendTimeOpt = ref([
    {
        label: '立即发送',
        type: 1,
    },
    {
        label: '定时发送',
        type: 2,
    },
]);
const choosedTime = ref({
    sendType: 1,
    sendTime: '',
});

const datetimesingle = ref('');

// 选择发送时间
function handleChooseSendTime(i) {
    choosedTime.value.sendType = i.type;
    if (i.type === 1) {
        choosedTime.value.sendTime = '';
    } else {
        dateRef.value.open();
    }
    emits('getSendTime', choosedTime.value);
}

function handleConfirmDate(val) {
    choosedTime.value.sendTime = val;
    emits('getSendTime', choosedTime.value);
}
</script>
<style lang="scss" scoped>
.select_time {
    .time_list {
        display: flex;

        .time_item {
            display: flex;
            align-items: center;

            &:first-child {
                margin-right: 66rpx;
            }

            .radio {
                margin-right: 8rpx;
                width: 40rpx;
                height: 40rpx;
            }
        }
    }

    .select_time_item {
        position: relative;
        margin-top: 16rpx;
        padding: 24rpx 20rpx;
        box-sizing: border-box;
        height: 90rpx;
        background-color: #f9f9fb;
        border-radius: 16rpx;
        font-size: 30rpx;
        color: #333;

        .calendar_icon {
            position: absolute;
            right: 20rpx;
            width: 48rpx;
            height: 48rpx;
        }
    }
}
</style>
