<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.isShow"></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">
								<uni-number-box :value="category.sort" />
							</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 tColorPicker from '@/components/t-color-picker/t-color-picker'
	import go from '@/commons/utils/go.js';
	import infoBox from '@/commons/utils/infoBox.js';
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app';
	import {
		onMounted,
		reactive,
		nextTick,
		ref,
		onBeforeMount,
		watch
	} from 'vue';
	import {
		tbProductGroupGet,
		tbProductGroupDelete,
		tbProductGroupPut,
		upGroupSort,
		tbProductGroupPost
	} from '@/http/yskApi/shop.js'

	const $productCategory = {
		add: tbProductGroupPost,
		del: tbProductGroupDelete,
		update: tbProductGroupPut,
		get: tbProductGroupGet
	}


	const refAddChilCate = ref(null)
	const refAddChilCateTitle = ref('添加子分类')

	function refAddChilCateClose() {
		refAddChilCate.value.close()
		categoryChild.value = {
			...categoryBasicData
		}
	}


	let refMoreSheet = ref(null)
	let selItem = {
		data: '',
		index: ''
	}



	// 表单样式
	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 refFiles = ref([])

	function setRefFile(index) {
		refFiles.value[index] = null;
		return (el) => {
			if (el) {
				refFiles.value[index] = el;
			}
		};
	}
	
	
	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
		}else{
			category.saleEndTime=e.value
		}
		time.val=''
		time.show=false
	}
	function changeTime(key) {
		time.key=key;
		time.show=true;
	}


	function toTimer(timer, index) {
		console.log(timer);
		uni.setStorageSync('timer', timer.map(v => {
			return {
				...v,
				cycleChecked: v.cycleChecked.map(v => v.value)
			}
		}))
		go.to('PAGES_CATEGORY_TIMER', {
			index: index
		})
	}

	function returnTimers(timers) {
		const {
			listingTime,
			offShelf,
			cycleChecked
		} = timers
		let len = cycleChecked.length
		if (len === 7) {
			return `每天 ${listingTime.value} - ${offShelf.value}`
		}
		let result = cycleChecked.reduce((prve, cur) => {
			return prve + cur.text.replace('星期', '周')
		}, '')
		return `${result} ${listingTime.value} - ${offShelf.value}`
	}
	//图片上传
	function FileUploadprogress() {

	}

	function FileUploadsuccess() {

	}

	function FileUploadail() {

	}

	function FileUploadselect(e) {
		// TEST
		// FormData.images.push(e)
	}


	function returnOptionsBasicData() {
		return {
			...categoryOptionsBasicData
		}
	}
	// 构造分类的基础数据
	const categoryBasicData = {
		id: '',
		name: '',
		isShow: 1,
		sort: 0,
		productIds: [],
		saleTime: [],
		useTime: 0,
		saleEndTime:'',
		saleStartTime:'',
		shopId: uni.getStorageSync('shopId')
	}
	const categoryChild = ref({
		...categoryBasicData
	})

	function onFieldChange(e) {
		console.log(e);
	}
	// 分类列表
	const category = reactive({
		...categoryBasicData,
		childrenList: []
	})
	//添加子分类
	function addcategoryChildren() {
		refAddChilCate.value.open()
		// category.childrenList.push({
		// 	...categoryBasicData
		// })
		// scrollPageBottom()
	}

	//页面滚动到最底部
	function scrollPageBottom() {
		nextTick(() => {
			uni.pageScrollTo({
				duration: 100, // 过渡时间
				scrollTop: 100000, // 滚动的实际距离
			})
		})
	}
	//设置表单验证规则
	function setFormRules() {
		form.value.setRules(rules)
	}
	const formRefs = ref([]);
	//绑定表单元素
	function setFormRef(index) {
		formRefs.value[index] = null;
		return (el) => {
			if (el) {
				formRefs.value[index] = el;
			}
		};
	}
	// 绑定option input元素
	const refFormInput = ref([])

	function setFormInputRef(index, index1) {
		const newIndex = index * 10000 + index1
		return (el) => {
			if (el) {
				if (!refFormInput.value[newIndex]) {
					refFormInput.value[newIndex] = el;
				}
			}
		}
	}
	// 当表单内容输入变化根据配置的rules进行验证
	function inpuChange(index, index1) {
		const newIndex = index * 10000 + index1
		console.log(refFormInput.value[newIndex]);
		refFormInput.value[newIndex].onFieldChange()
	}



	function triggerEvent(emitName, data) {
		if (emitName) {
			uni.$emit(emitName, data)
		}
	}
	const option = reactive({
		type: ''
	})

	function isNoEmpty(obj) {
		return obj && JSON.stringify(obj) !== '{}'
	}

	/**
	 *  监听定时器保存,拿到数据
	 * @param {Boolean} open //控制开启或关闭监听
	 */
	function watchTimerSave(open = true) {
		if (open) {
			uni.$on('timerSave', function(res) {
				const {
					index,
					data
				} = res
				console.log('timerSave get');
				console.log(res);
				if (index == -1) {
					category.timers = data
				} else {
					category.childrenList[index].timers = data
				}
			})
		} else {
			uni.$off('timerSave', function(data) {
				console.log('timerSave remove');
			})
		}

	}
	watchTimerSave()

	onLoad(params => {
		let cateItem = uni.getStorageSync('cateItem')
		if (isNoEmpty(params)) {
			option.type = params.type
		}
		if (option.type === 'edit' && isNoEmpty(cateItem)) {
			console.log(cateItem);
			for (let i in cateItem) {
				if (i.substring(0, 2) === 'is' && i.length > 2) {
					cateItem[i] = cateItem[i] * 1
				} else {
					cateItem[i] = cateItem[i] === 'null' ? '' : cateItem[i]
				}
			}
			Object.assign(category, cateItem)
		}
		console.log(category);
		uni.setNavigationBarTitle({
			title: option.type === 'add' ? '添加分组' : '编辑分组'
		})
	})

	function emitcategorySave() {
		// emitcategorySave  触发规格保存事件将数据给到添加商品页面
		// guigeEdit  触发规格保存事件将数据给到添加规格页面
		uni.removeStorageSync('guige')
		triggerEvent(emitName, category.list)
	}


	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

	function onfileChange(val, data, key) {
		data[key] = val
	}


	async function save() {
		let isAllPassForm = 0
		const formRules = {}
		const result = []
		result.push(...returnValidateResult(category))
		for (let obj of category.childrenList) {
			const res = returnValidateResult(obj)
			result.push(...res)
		}
		if (result.length) {
			return infoBox.showToast(result[0].errMeessage)
		}

		if (option.type === 'edit') {
			const res = await $productCategory.update({
				...category,
				childrenList: ''
			})
		} else {
			const res = await $productCategory.add({
				...category,
				childrenList: ''
			})
		}

		infoBox.showToast(option.type === 'edit' ? '修改成功' : '添加成功')
		timer = setTimeout(() => {
			clearTimeout(timer)
			go.back()
		}, 1500);
		// const res = await form.value.validate().then(res => {
		// 	go.back()
		// })

	}
</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>