<template>
	<view>
		<up-radio-group v-model="useTimeType" placement="row" v-if="showType">
			<up-radio v-for="item in useTimeTypeList" :key="item.value" :value="item.value" :name="item.value" :label="item.label" :customStyle="customStyle"></up-radio>
		</up-radio-group>
		<view class="container" v-if="useTimeType == 'custom' || !showType">
			<view class="u-flex u-m-t-30 box">
				<view class="u-flex u-flex-1">
					<view class="item" @click="pirckerShow(startValue, 'startValue')">
						<text class="u-m-r-12" v-if="!startValue">开始时间</text>
						<text class="u-m-r-12" v-else>{{ startValue }}</text>
					</view>
					<view class="u-m-l-8 u-m-r-8" style="padding: 0 30rpx">—</view>
					<view class="item" @click="pirckerShow(endValue, 'endValue')">
						<text class="u-m-r-12" v-if="!endValue">结束时间</text>
						<text class="u-m-r-12" v-else>{{ endValue }}</text>
					</view>
				</view>
				<up-icon name="clock"></up-icon>
			</view>
		</view>

		<up-datetime-picker :show="show" v-model="value1" closeOnClickOverlay @close="close" @cancel="close" @confirm="confirm" mode="time"></up-datetime-picker>
	</view>
</template>

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

const props = defineProps({
	showType: {
		type: Boolean,
		default: true
	}
});

function cancel() {
	union.navigateBack();
}
const customStyle = ref({
	marginRight: '15px'
});

const useTimeType = defineModel('useTimeType', {
	type: String,
	default: 'all'
});
const useTimeTypeList = [
	{
		value: 'all',
		label: '全时段可用'
	},
	{
		value: 'custom',
		label: '指定时间段可用'
	}
];
import dayjs from 'dayjs';
const startValue = defineModel('startValue', {
	type: String,
	default: ''
});
const endValue = defineModel('endValue', {
	type: String,
	default: ''
});

function close() {
	show.value = false;
}
const value1 = ref('');
const show = ref(false);
const nowKey = ref('');

function pirckerShow(date, key) {
	nowKey.value = key;
	show.value = true;
	value1.value = date || '';
}

function confirm(e) {
	console.log(e);

	if (nowKey.value == 'startValue') {
		startValue.value = e.value;
	} else if (nowKey.value == 'endValue') {
		endValue.value = e.value;
	}
	value1.value = e.value;
	show.value = false;
}
</script>

<style lang="scss" scoped>
.item {
	font-size: 28rpx;
	color: #666;
	line-height: 48rpx;
	padding: 0 12rpx;
	display: flex;
}
.box {
	border: 2rpx solid #dddfe6;
	padding: 16rpx 30rpx;
	box-sizing: border-box;
	width: 564rpx;
	border-radius: 4rpx;
	overflow: hidden;
}
</style>
