<template>
	<up-popup :show="popShow" @close="close" @open="open" mode="center" :round="9">
		<view class="u-p-32 box u-font-28">
			<view class="u-flex u-relative u-row-center">
				<view class="u-font-32">编辑</view>
				<view class="u-absolute close">
					<up-icon @click="close" :size="16" color="#000" name="close-circle-fill"></up-icon>
				</view>
			</view>
			<view class="u-m-t-36">
				<view class="u-flex u-row-between">
					<view class="">
						售卖时间管控
					</view>
					<my-switch v-model="category.useTime"></my-switch>
				</view>
				<view v-if="category.useTime" class="u-flex u-row-between u-col-center u-m-t-30 u-p-b-12">
					<view class="u-flex timesel" @click="changeTime('start')">
						<up-icon name="clock" size="14"></up-icon>
						<view class="u-m-l-20">
							<text v-if="!category.saleStartTime" class="color-999">起始时间</text>
							<text v-else>{{category.saleStartTime}}</text>
						</view>
					</view>
					<view class="u-p-l-30 u-p-r-30">至</view>
					<view class="u-flex timesel" @click="changeTime('end')">
						<up-icon name="clock" size="14"></up-icon>
						<view class="u-m-l-20">
							<text v-if="!category.saleEndTime" class="color-999">结束时间</text>
							<text>{{category.saleEndTime}}</text>
						</view>
					</view>
				</view>
				<view class="u-m-t-38">
					<view class="u-m-b-32">
					</view>

					<view class="u-m-t-60">
						<my-button type="primary" shape="circle" @tap="save">
							<view class="u-font-32">
								保存
							</view>
						</my-button>

					</view>
				</view>
			</view>
			<up-datetime-picker @cancel="timeCancel" @confirm="timeConfirm" format="HH:mm" :show="time.show" v-model="time.val" mode="time"></up-datetime-picker>
		</view>
	</up-popup>
</template>

<script setup>
	import { reactive, ref, watch, computed } from 'vue';
	import infoBox from '@/commons/utils/infoBox.js'
	const props = defineProps({
		show: {
			type: Boolean,
			default: false
		},
		item: {
			type: Object,
			default: () => {
				name: ''
			}
		}
	})
	
	const category =reactive({
		useTime: 0,
		saleEndTime:'',
		saleStartTime:'',
	}) 
	
	const time=reactive({
		show:false,
		val:'',
		key:''
	})
	function timeCancel(){
		time.show = false
	}
	function timeConfirm(e){
		console.log(e);
		if(time.key=='start'){
			category.saleStartTime=e.value+':00'
		}else{
			category.saleEndTime=e.value+':00'
		}
		time.val=''
		time.show=false
	}
	function changeTime(key) {
		time.key=key;
		time.val=key=='start'?category.saleStartTime:category.saleEndTime
		time.show=true;
	}

	const data = ref(props.item)
	const emits = defineEmits(['update:show', 'save'])

	let popShow = ref(props.show)

	watch(() => props.show, (newval) => {
		popShow.value = newval
		if (newval) {
			data.value = props.item
			Object.assign(category,props.item)
		}
	})
	const isSku = computed(() => {
		// return data.value.typeEnum == '多规格'
		return false
	})
	watch(() => popShow.value, (newval) => {
		emits('update:show', newval)
	})

	function close() {
		popShow.value = false
	}

	function open() {

	}

	function save() {
		if(category.useTime){
			if(!category.saleStartTime){
				return infoBox.showToast('请选择起始时间')
			}
			if(!category.saleEndTime){
				return infoBox.showToast('请选择结束时间')
			}
		}
		emits('save', {
			...data.value,...category
		})
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 600rpx;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		box-sizing: border-box;
	}
	
	.timesel {
		border: 1px solid #eee;
		border-radius: 10rpx;
		padding: 10rpx 20rpx;
		flex: 1;
	}
	.close {
		position: absolute;
		right: 0;
	}

	.number {
		color: #EE4646;
	}
</style>