<template>
	<view class="page min-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="border-top-0">
							<uni-forms-item label="图标">
								<my-upload-file ref="refFile" :limit="1" @change="onfileChange($event,category,'pic')"
									:images="category.pic"></my-upload-file>
							</uni-forms-item>
						</view>
						<view class="">
							<uni-forms-item label="分类名称" required name="name">
								<uni-easyinput padding-none :placeholderStyle="placeholderStyle"
									:inputBorder="inputBorder" v-model="category.name" placeholder="输入分类名称" />
							</uni-forms-item>
						</view>
						<template v-if="option.type==='edit'">
							<uni-forms-item label="排序" required name="sort">
								<uni-easyinput padding-none :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>
							<template #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.required"></my-switch>
									</view>
								</view>
							</template>
							<view class="u-m-t-20">
								<uni-easyinput :disabled="!category.required" :placeholderStyle="placeholderStyle"
									:inputBorder="inputBorder" v-model="category.requiredNumber"
									:placeholder="category.required?'输入必选商品数量':'开启后必选一个以上商品才能下单'" />

							</view>
						</uni-forms-item> -->
						<!-- <uni-forms-item @tap="toTimer(category.timers,-1)">
							<template #label>
								<view class="u-flex u-row-between u-col-center">
									<view class="label-title">定时上下架</view>
									<view class="u-flex">
										<uni-icons type="right"></uni-icons>
									</view>
								</view>
							</template>
							<view class="u-m-t-20">
								<template v-if=" category.timers.length">
									<view class="u-m-b-20" v-for="(item,index) in category.timers" :key="index">
										{{returnTimers(item)}}
									</view>
								</template>
								<template v-else>
									<view>无</view>
								</template>

							</view>
						</uni-forms-item> -->

					</view>
					<!-- <template v-if="option.type==='edit'"> -->
					<template v-if="false">
						<view class="font-bold u-m-t-32 u-m-b-32">子分类</view>
						<view class="block u-p-t-32 u-p-b-32" v-if=" category.childrenList.length">
							<view class="u-flex u-text-center u-font-24">
								<view class="u-flex-1  ">名称</view>
								<view class="u-flex-1">图片</view>
								<view class="u-flex-1">状态</view>
								<view class="u-flex-1">颜色</view>
								<view class="u-flex-1">操作</view>
							</view>
							<view class="bg-gray u-p-t-20 u-m-t-24">
								<view class="u-flex  u-p-t-10 u-p-b-10" v-for="(item,index) in category.childrenList"
									:key="index">
									<view class="u-flex-1 u-flex u-p-l-24 ">
										{{item.name}}
									</view>
									<view class="u-flex-1 u-flex u-row-center">
										<image class="category-icon" :src="item.pic" mode=""></image>
									</view>
									<view class="u-flex-1 u-flex u-row-center">
										<my-switch @change="" v-model="item.isShow"></my-switch>
									</view>

									<view class="u-flex-1 u-flex u-row-center">
										{{item.style}}
									</view>
									<view class="u-flex-1 u-flex u-row-right u-p-r-24 u-flex ">
										<my-button @tap="moreShow(item,index)" :width="100" :height="40">
											<view class="u-font-24 no-wrap">更多</view>
										</my-button>
									</view>

								</view>
							</view>

							<!-- <view class="border-top-0">
							<uni-forms-item  label="图标">
								<my-upload-file :limit="1" @change="onfileChange($event,item,pic)" :images="item.pic"></my-upload-file>
							</uni-forms-item>
						</view>
						<view class="border-top-0">
							<uni-forms-item label="子分类名称" required name="name">
								<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
									v-model="item.name" placeholder="输入子分类名称" />
							</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="item.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="item.isShow"></my-switch>
								</view>
							</view>
						</uni-forms-item> -->


							<!-- <uni-forms-item>
							<template #label>
								<view class="u-flex u-row-between u-col-center">
									<view class="label-title">必选分类</view>
									<view class="u-flex">
										<my-switch v-model="item.required"></my-switch>
									</view>
								</view>
							</template>
							<view class="u-m-t-20">
								<uni-easyinput :disabled="!item.required" :placeholderStyle="placeholderStyle"
									:inputBorder="inputBorder" v-model="item.requiredNumber"
									:placeholder="item.required?'输入必选商品数量':'开启后必选一个以上商品才能下单'" />
					
							</view>
						</uni-forms-item>
						<uni-forms-item @tap="toTimer(item.timers,index)">
							<template #label>
								<view class="u-flex u-row-between u-col-center">
									<view class="label-title">定时上下架</view>
									<view class="u-flex">
										<uni-icons type="right"></uni-icons>
									</view>
								</view>
							</template>
							<view class="u-m-t-20">
								<template v-if="item.timers.length">
									<view class="u-m-b-20" v-for="(item,index) in item.timers" :key="index">
										{{returnTimers(item)}}
									</view>
								</template>
								<template v-else>
									<view>无</view>
								</template>
					
							</view>
						</uni-forms-item> -->

						</view>
					</template>
				</uni-forms>
			</view>
			<!-- <template v-if="option.type==='edit'">
				<view class="u-flex block u-p-l-20 u-p-r-20 u-p-t-28 u-p-b-28" @click="addcategoryChildren">
					<view class="icon icon-add u-m-r-22 ">

					</view>
					<view class="color-main">添加子分类</view>
				</view>
			</template> -->


			<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>
		<!-- 更多操作 -->
		<my-action-sheet @itemClick="actionSheetClick" ref="refMoreSheet" :list="actionSheet.list"></my-action-sheet>
		<!-- 添加/编辑子分类 -->
		<my-model ref="refAddChilCate" :title="refAddChilCateTitle">
			<template #desc>
				<view class="u-p-l-32 u-m-t-8 u-p-r-32 u-text-left">
					<uni-forms :model="categoryChild" :rules="rules" err-show-type="toast" :border="true"
						label-position="top" label-width="350">
						<view class="border-top-0">
							<uni-forms-item label="图标">
								<my-upload-file ref="refFile" :limit="1"
									@change="onfileChange($event,categoryChild,'pic')"
									:images="categoryChild.pic"></my-upload-file>
							</uni-forms-item>
						</view>
						<view class="">
							<uni-forms-item label="分类名称" required name="name">
								<uni-easyinput padding-none :placeholderStyle="placeholderStyle"
									:inputBorder="inputBorder" v-model="categoryChild.name" placeholder="输入分类名称" />
							</uni-forms-item>
						</view>
						<template v-if="option.type==='edit'">
							<uni-forms-item label="排序" required name="sort">
								<uni-easyinput padding-none :placeholderStyle="placeholderStyle"
									:inputBorder="inputBorder" v-model="categoryChild.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="categoryChild.isShow"></my-switch>
								</view>
							</view>
						</uni-forms-item>
					</uni-forms>

				</view>

			</template>
			<template #btn>
				<view class="u-flex u-p-30">
					<view class="u-flex-1 u-p-r-16">
						<my-button shape="circle" type="default" @tap="refAddChilCateClose">取消</my-button>
					</view>
					<view class="u-flex-1 u-p-l-16">
						<my-button shape="circle" @tap="refAddChilCateConfirm">确认</my-button>
					</view>
				</view>
			</template>
		</my-model>

		<up-modal title="提示" content="确认删除该分类吗?" :show="modal.del" showCancelButton closeOnClickOverlay
			@confirm="confirmModelConfirm" @cancel="setModalShow('del',false)" @close="setModalShow('del',false)"
			width="300px"></up-modal>
	</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 mySwitch from '@/components/my-components/my-switch'
	import myButton from '@/components/my-components/my-button'
	import myActionSheet from '@/components/my-components/my-action-sheet';
	import myUploadFile from '@/components/my-components/my-upload-file'
	import {
		$productCategory
	} from '@/http/yskApi/goods.js'
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app';
	import {
		onMounted,
		reactive,
		nextTick,
		ref,
		onBeforeMount,
		watch
	} from 'vue';
	const modal = reactive({
		key: '',
		del: false
	})

	function confirmModelConfirm() {
		if (modal.key == 'del') {
			 $productCategory.del([selItem.data.id]).then(res => {
				category.childrenList.splice(selItem.index, 1)
				infoBox.showToast('删除成功')
				uni.setStorageSync('cateItem', category)
			})
			modal.del=false
			return
		}
	}

	function setModalShow(key = 'show', show = true) {
		modal.key = key
		modal[key] = show
		console.log(modal);
	}

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

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

	async function refAddChilCateConfirm() {
		let isAllPassForm = 0
		const formRules = {}
		const result = []
		console.log(categoryChild.value);
		console.log(returnValidateResult(categoryChild.value));
		result.push(...returnValidateResult(categoryChild.value))
		// for (let obj of category.childrenList) {
		// 	const res = returnValidateResult(obj)
		// 	result.push(...res)
		// }
		if (result.length) {
			return infoBox.showToast(result[0].errMeessage)
		}
		let res = ''
		if (refAddChilCateTitle.value === '编辑子分类') {
			res = await $productCategory.update({
				...categoryChild.value,
				pid: category.id
			})
			categoryChild[selItem.index] = res
		} else {
			res = await $productCategory.add({
				...categoryChild.value,
				pid: category.id
			})
			category.childrenList.push(res)
		}
		uni.setStorageSync('cateItem', category)
		infoBox.showToast(refAddChilCateTitle.value === '编辑子分类' ? '修改成功' : '添加成功')
		refAddChilCateClose()
	}


	let refMoreSheet = ref(null)
	let selItem = {
		data: '',
		index: ''
	}
	const actionSheet = reactive({
		list: ['编辑', '删除']
	})

	function moreShow(item, index) {
		refMoreSheet.value.open()
		selItem.data = item
		selItem.index = index
	}

	function actionSheetClick(index) {
		console.log(index);
		if (index === 0) {
			refAddChilCateTitle.value = '编辑子分类'
			categoryChild.value = selItem.data
			refAddChilCate.value.open()
			return
		}
		if (index === 1) {
			setModalShow('del', true)
			return
			// return uni.showModal({
			// 	title: '提示',
			// 	content: '确认删除该分类吗?',
			// 	success(res) {
			// 		if (res.confirm) {
			// 			$productCategory.del([selItem.data.id]).then(res => {
			// 				category.childrenList.splice(selItem.index, 1)
			// 				infoBox.showToast('删除成功')
			// 				uni.setStorageSync('cateItem', category)
			// 			})
			// 		}
			// 	}
			// })
		}
	}


	//文件上传
	const refFile = ref(null)
	// 表单样式
	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;
			}
		};
	}

	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 = {
		name: '',
		sort: 0,
		pic: '',
		style: '',
		isShow: 1,
		// requiredNumber: '',
		// timers: []
	}
	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)
			uni.$emit('update:pageCategoryIndex')
			go.back()
		}, 500);
		// const res = await form.value.validate().then(res => {
		// 	go.back()
		// })

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

	::v-deep .uni-forms-item--border {
		padding-top: 24rpx;
		padding-bottom: 24rpx;
	}

	::v-deep .uni-forms-item.is-direction-top .uni-forms-item__label {
		padding-bottom: 16rpx;
	}

	.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__content {
		min-height: inherit;
	}

	::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;
	}


	.box {
		font-size: 28rpx;

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

	.save-btn-box {
		position: fixed;
		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;
		border-radius: 100rpx;
	}

	.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;
	}

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