<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="'font-size:28rpx;'" :inputBorder="false"
									v-model="category.name" placeholder="输入分类名称" />
							</uni-forms-item>
						</view>
						<view class="">
							<uni-forms-item label="退菜是否退库存" required name=" refundMode">
								<up-radio-group v-model="category.refundMode" placement="row">
									<up-radio v-for="(item, index) in refundModes" :key="index" :label="item.name"
										:name="item.value" activeColor="rgb(49, 138, 254)"></up-radio>
								</up-radio-group>
							</uni-forms-item>
						</view>
						<template v-if="option.type==='edit'">
							<uni-forms-item label="排序" required name="sort">
								<uni-easyinput padding-none :placeholderStyle="'font-size:28rpx;'" :inputBorder="false"
									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>

					</view>

				</uni-forms>
			</view>

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




	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import go from '@/commons/utils/go.js';
	import infoBox from '@/commons/utils/infoBox.js';
	import mySwitch from '@/components/my-components/my-switch'
	import myUploadFile from '@/components/my-components/my-upload-file'
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app';
	import {
		addCategory,
		putCategory
	} from '@/http/api/cateGory.js'
	const refundModes = [{
			name: "退菜退库存",
			value: 1
		},
		{
			name: "仅退菜不退库存",
			value: 2
		},
		{
			name: "每次询问-退菜后弹窗提示",
			value: 3
		},
	]

	// 构造分类的基础数据
	const category = reactive({
		name: '',
		sort: 0,
		pic: '',
		status: 1,
	})
	//表单验证
	const rules = {
		name: {
			rules: [{
				required: true,
				errorMessage: '输入分类名称'
			}]
		},
		sort: {
			rules: [{
				required: true,
				errorMessage: '输入排序'
			}]
		}
	}
	const option = reactive({
		type: ''
	})
	onLoad(params => {
		let cateItem = uni.getStorageSync('cateItem')
		if (isNoEmpty(params)) {
			option.type = params.type
		}
		if (option.type === 'edit' && isNoEmpty(cateItem)) {
			Object.assign(category, cateItem)
		}
		uni.setNavigationBarTitle({
			title: option.type === 'add' ? '添加分类' : '编辑分类'
		})
	})

	/**
	 * 校验是否有值
	 * @param {Object} obj
	 */
	function isNoEmpty(obj) {
		return obj && JSON.stringify(obj) !== '{}'
	}


	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
	}

	/**
	 * 图片选择
	 * @param {Object} val
	 * @param {Object} data
	 * @param {Object} key
	 */
	function onfileChange(val, data, key) {
		data[key] = val
	}

	/**
	 * 保存
	 */
	let timer = null
	async function save() {
		let isAllPassForm = 0
		const formRules = {}
		const result = []
		result.push(...returnValidateResult(category))

		if (result.length) {
			return infoBox.showToast(result[0].errMeessage)
		}
		console.log(option.type)
		if (option.type === 'edit') {
			const res = await putCategory({
				...category,
			})
		} else {
			const res = await addCategory({
				...category,
			})
		}

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


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