<template>
	<view class="page">
		<view class="box">
			<view>
				<uni-forms :model="category" :rules="rules" err-show-type="toast" ref="form" :border="true"
					label-position="top" label-width="350">
					<view class="block">
						<view class="input-padding-b-0 ">
							<uni-forms-item label="分组名称" required name="name">
								<view class="u-m-t-16 u-m-b-24">
									<uni-easyinput paddingNone :placeholderStyle="placeholderStyle"
										:inputBorder="inputBorder" v-model="category.name" placeholder="输入分组名称" />
								</view>
							</uni-forms-item>
						</view>
						<template v-if="option.type=='edit'">
							<uni-forms-item label="排序" required name="sort">
								<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
									v-model="category.sort" type="number" placeholder="排序越小越靠前" />
							</uni-forms-item>
						</template>

						<uni-forms-item label="">
							<view class="u-flex u-row-between u-col-center">
								<view class="label-title">分组状态</view>
								<view class="u-flex">
									<my-switch v-model="category.status"></my-switch>
								</view>
							</view>
						</uni-forms-item>
						<uni-forms-item label="">
							<view class="u-flex u-row-between u-col-center">
								<view class="label-title">售卖时间管控</view>
								<view class="u-flex">
									<my-switch v-model="category.useTime"></my-switch>
								</view>
							</view>
							<view v-if="category.useTime" class="u-flex u-row-between u-col-center u-m-t-16 ">
								<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>
						</uni-forms-item>
						<uni-forms-item label="排序方式" required name="name">
							<view class="u-m-t-24" >
								<up-radio-group v-model="category.sortMode" placement="row" @change="groupChange">
									<up-radio shape='circle' :customStyle="{marginBottom: '8px',marginRight: '30rpx'}" v-model:checked="ele.hasPermission"
										usedAlone v-for="(ele, index) in pageData.sortType" :key="index" :name="ele.value" :label="ele.label"
										style="margin-right: 40rpx;font-size: 28rpx;">
									</up-radio>
								</up-radio-group>
							</view>
						</uni-forms-item>
						<uni-forms-item label="分组排序" required name="name">
							<view class="u-m-t-24">
								<up-number-box v-model="category.sort" integer></up-number-box>
							</view>
						</uni-forms-item>
					</view>
				</uni-forms>
			</view>


			<view class="save-btn-box">
				<button class="save-btn" hover-class="btn-hover-class" @click="save">保存</button>
			</view>
		</view>
		<view class="bottom" ref="bottom"></view>


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

</template>

<script setup>
	import { reactive, ref, } from 'vue';
	import { onLoad, onReady } from '@dcloudio/uni-app';
	import go from '@/commons/utils/go.js';
	import { addProdGroup, updateProdGroup } from '@/http/api/product.js'

	const option = reactive({
		type: ''
	})
	
	// 构造分类的基础数据
	const category = reactive({
		id: '',
		name: '',
		status: 1,
		sort: 1,
		useTime: 0,
		saleEndTime:'',
		saleStartTime:'',
		sortMode: '0',
		childrenList: []
	})
	
	const pageData = reactive({
		sortType: [
			{label: '默认', value: '0'},
			{label: '价格从高到低', value: '1'},
			{label: '价格从低到高', value: '2'},
			{label: '销量由高到低', value: '3'},
			{label: '销量由低到高', value: '4'},
		],
	})

	
	// 表单样式
	const placeholderStyle = ref('font-size:28rpx;')
	//表单边框
	const inputBorder = ref(false)
	const form = ref(null)
	const bottom = ref(null)
	//表单验证
	const rules = {
		name: {
			rules: [{
				required: true,
				errorMessage: '输入分类名称'
			}]
		},
		sort: {
			rules: [{
				required: true,
				errorMessage: '输入排序'
			}]
		}
	}
	
	const time=reactive({
		show:false,
		val:'',
		key:''
	})
	onLoad(option => {
		
		uni.setNavigationBarTitle({
			title: option.type === 'add' ? '添加分组' : '编辑分组'
		})
	})

	
	/**
	 * 打开时间弹窗
	 * @param {Object} key
	 */
	function changeTime(key) {
		time.key=key;
		time.show=true;
	}
	
	/**
	 * 关闭时间弹窗
	 */
	function timeCancel(){
		time.show=false
	}
	
	/**
	 * 时间设置确定
	 * @param {Object} e
	 */
	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 groupChange  (n) {
	  console.log('groupChange ', n);
	};


	function returnValidateResult(obj) {
		const validateFuncObj = {
			name: (value) => {
				return {
					pass: value.length >= 1,
					errMeessage: '请输入分类名称'
				}
			},
			sort: (value) => {
				return {
					pass: value !== '',
					errMeessage: '请输入排序'
				}
			}
		}

		function validateFunc(key, value) {
			if (validateFuncObj.hasOwnProperty(key)) {
				const func = validateFuncObj[key]
				return func(value)
			}
			return {
				pass: true
			}
		}
		let resultArr = []
		for (let key in obj) {
			resultArr.push(validateFunc(key, obj[key]))
		}
		resultArr = resultArr.filter(v => !v.pass)
		return resultArr
	}
	let timer = null


	async function save() {
		const result = []
		result.push(...returnValidateResult(category))

		if (result.length) {
			return uni.$utils.showToast(result[0].errMeessage)
		}
		console.log(category)
		if (option.type === 'edit') {
			const res = await updateProdGroup({
				...category,
				childrenList: ''
			})
		} else {
			const res = await addProdGroup({
				...category,
				childrenList: ''
			})
		}

		uni.$utils.showToast(option.type === 'edit' ? '修改成功' : '添加成功')
		timer = setTimeout(() => {
			clearTimeout(timer)
			go.back()
		}, 1500);
	

	}
</script>
<style scoped>
	page {
		background: #F9F9F9;
	}
</style>
<style lang="scss" scoped>
	@import '@/commons/style/reset-uni-form.scss';
	$icon-size: 34rpx;
	$icon-line-width: 20rpx;
	$icon-line-height: 4rpx;

	.category-icon {
		width: 60rpx;
		height: 60rpx;
	}

	.page {
		background: #F9F9F9;
		padding: 30rpx;
		padding-bottom: 200rpx;
	}

	.my-switch {
		transform: scale(0.7);
	}

	::v-deep .uni-forms-item__error {
		display: none !important;
	}
	
	::v-deep .option .uni-forms-item {
		padding: 0;
		min-height: inherit;
		background-color: transparent;
		border-top: none;
	}

	.icon {
		width: $icon-size;
		height: $icon-size;
		position: relative;
		border-radius: 50%;

		&:before,
		&::after {
			position: absolute;
			display: block;
			content: '';
			background-color: #fff;
		}
	}

	.icon-add {
		background-color: $my-main-color;

		&::before {
			width: $icon-line-height;
			height: $icon-line-width;
			top: calc(($icon-size /2) - ($icon-line-width / 2));
			left: calc(($icon-size /2) - ($icon-line-height / 2));
		}

		&::after {
			width: $icon-line-width;
			height: 4rpx;
			top: calc(($icon-size /2) - ($icon-line-height / 2));
			left: calc(($icon-size /2) - ($icon-line-width / 2));
		}
	}

	.icon-reduce {
		background-color: $my-red-color;

		&::after {
			width: $icon-line-width;
			height: $icon-line-height;
			top: calc(($icon-size /2) - ($icon-line-height / 2));
			left: calc(($icon-size /2) - ($icon-line-width / 2));
		}
	}

	.label-title {
		font-size: 28rpx;
		font-weight: bold;
		font-family: Source Han Sans CN, Source Han Sans CN;
	}

	.lh40 {
		line-height: 40rpx;
	}
	::v-deep .uni-forms-item.is-direction-top .uni-forms-item__label{
		padding: 0;
	}
	::v-deep .uni-forms-item{
		min-height: inherit;
	}
	::v-deep  .input-padding-b-0 .uni-forms-item--border{
		padding-bottom: 0;
		padding-top: 0;
	}
	::v-deep .uni-forms-item--border{
		padding-top: 12px;
		padding-bottom: 12px;
	}
	.box {
		font-size: 28rpx;

		.block {
			background: #FFFFFF;
			border-radius: 12rpx 18rpx 0 18rpx;
			padding: 32rpx 24rpx 8rpx 24rpx;
			margin-bottom: 32rpx;
		}
	}

	.save-btn-box {
		position: fixed;
		font-size: 16px;
		font-weight: 700;
		left: 30rpx;
		right: 30rpx;
		bottom: 60rpx;

	}

	::v-deep.uni-forms-item {
		align-items: inherit;
	}

	::v-deep .uni-forms-item .uni-forms-item__label {
		text-indent: 0;
		font-size: 28rpx !important;
		font-weight: bold;
		color: #333;
	}

	::v-deep .border-top-0 .uni-forms-item.is-direction-top {
		border-color: transparent !important;
	}

	.save-btn {
		background-color: $my-main-color;
		color: #fff;
		border-radius: 12rpx;
		font-size: 28rpx;
	}

	.btn-hover-class {
		opacity: .6;
	}

	.zuofa {
		padding: 28rpx 0;
		background: #F9F9F9;
		padding-left: 42rpx;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
	}

	::v-deep .uni-input-placeholder {
		font-size: 28rpx;
	}

	.option {
		padding: 26rpx 30rpx 24rpx 24rpx;
		background: #F9F9F9;
	}

	.timesel {
		border: 1px solid #eee;
		border-radius: 10rpx;
		padding: 10rpx 20rpx;
		flex: 1;
	}

	.option-item {
		margin-bottom: 34rpx;
	}
</style>