<template>
	<view class="page min-page">
		<view class="box">
			<view class="block border-top-0 u-p-t-32 u-p-b-32">
				
				<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
				<up-form ref="formRef" labelPosition="top" :model="vdata.formData" :rules="vdata.rules" labelWidth="80" :labelStyle="{fontWeight:'bold'}">
					<up-form-item label="规格名称" prop="name"  borderBottom >
						<up-input v-model="vdata.formData.name" border="none" placeholder="规格名称,如:衣服" ></up-input>
					</up-form-item>
					<up-form-item label="规格级别" prop="level" borderBottom @click="vdata.showLevel = true;">
						<up-input v-model="vdata.levelName" readonly border="none" placeholder="请选择规格级别" ></up-input>
					</up-form-item>
					<up-form-item label="排序" prop="sort" borderBottom >
						<up-input v-model="vdata.formData.sort" border="none" placeholder="请输入排序" ></up-input>
					</up-form-item>
					<up-form-item label="上级规格" prop="pid" borderBottom @click="vdata.showSpec = true;">
						<up-input v-model="vdata.pidName" readonly border="none" placeholder="请选择上级规格" ></up-input>
					</up-form-item>
				</up-form>
			</view>
			

			<view class="save-btn-box">
				<button class="save-btn " hover-class="btn-hover-class" @click="save">保存</button>
			</view>
		</view>
		
		<up-action-sheet
			:show="vdata.showLevel"
			:actions="vdata.levelList"
			title="请选择规格级别"
			@close="vdata.showLevel = false"
			@select="levelSelect"
		></up-action-sheet>
		<up-action-sheet
			:show="vdata.showSpec"
			:actions="vdata.specList"
			title="请选择规格级别"
			@close="vdata.showSpec = false"
			@select="specSelect"
		></up-action-sheet>
	</view>
</template>

<script setup>
	import { reactive, nextTick, ref } from 'vue';
	import { onLoad, onReady, } from '@dcloudio/uni-app';

	import infoBox from '@/commons/utils/infoBox.js'
	import { getSpecList, addSpec, updateSpec } from '@/api/product.js'
	
	const option = {
		type: 'add',
		id: undefined
	}
	const formRef = ref(null)
	const vdata = reactive({
		showLevel: false,
		showSpec: false,
		levelList: [
			{ name: "一级", value: 1},
			{ name: "二级", value: 2},
			{ name: "三级", value: 3}
		],
		levelName: "",
		pidName: "",
		formData: {
			id: null,
			name: "",
			level: "",
			sort: "",
			pid: "", 
		},
		rules: {
			"name": {  
				required: true,  
				message: '请输入规格名称',  
				trigger: ['blur', 'change'],  
			},
			"level": {  
				required: true,  
				message: '请选择规格级别',  
				trigger: ['blur', 'input'],  
			},
			"sort": {  
				required: true,  
				message: '请输入排序',  
				trigger: ['blur', 'change'],  
			},
			"pid": {  
			    required: true,  
			    message: '请选择上级规格',  
			    trigger: ['blur', 'input'],  
			},
		},
		specList: []
	})
	
	onReady(()=>{
	})
	//表单验证
	onLoad(opt => {
		console.log(opt);
		if (opt && JSON.stringify(opt) !== '{}' && opt.type) {
			option.type = opt.type
			const data = uni.getStorageSync('spec')
			uni.removeStorageSync('spec')
			if(data){
				vdata.formData.id = data.id
				vdata.formData.name = data.name
				vdata.formData.level = data.level
				vdata.formData.sort = data.sort
				vdata.formData.pid = data.pid
				vdata.levelName = vdata.levelList.filter(item => item.value == vdata.formData.level)[0].name
			}
		}
		uni.setNavigationBarTitle({
			title: option.type === 'edit' ? '编辑规格模版' : '添加规格模版'
		})
		getSpecData()
	})
	
	/**
	 * 获取规格列表
	 */
	function getSpecData(){
		getSpecList({page: 0, size:10}).then(res=>{
			vdata.specList = [{name: '顶级',id: 0},...res]
			if(vdata.formData.id){
				vdata.pidName = vdata.specList.filter(item => item.id == vdata.formData.pid)[0].name
			}
		})
	}
	
	function levelSelect (e) {
		console.log(e)
		vdata.levelName = e.name;
		vdata.formData.level = e.value;
	}
	
	function specSelect (e) {
		console.log(e)
		vdata.pidName = e.name;
		vdata.formData.pid = e.id;
	}
	
	/**
	 * 保存
	 */
	async function save() {
		
		if (option.type === 'add') {
			return addSpec(vdata.formData).then(res => {
				infoBox.showToast('添加成功')
				settimeoutBack(1500)
			})
		}
		updateSpec(vdata.formData).then(res => {
			infoBox.showToast('修改成功')
			settimeoutBack(1500)
		})
	}
	let timer = null
	function settimeoutBack(time) {
		clearTimeout(timer)
		timer = setTimeout(() => {
			uni.navigateBack()
		}, time)
	}
	
</script>
<style scoped>
	page {
		background: #F9F9F9;
	}
</style>
<style lang="scss" scoped>
	$icon-size: 34rpx;
	$icon-line-width: 20rpx;
	$icon-line-height: 4rpx;

	.page {
		background: #F9F9F9;
		padding: 32rpx 30rpx 0 30rpx;
		padding-bottom: 200rpx;
	}
	::v-deep .uni-forms-item--border {
		padding-top: 12px;
		padding-bottom: 12px;
	}
	.my-switch {
		transform: scale(0.7);
	}
	::v-deep .uni-forms-item.is-direction-top .uni-forms-item__label{
		padding-bottom: 8px;
	}
	::v-deep .uni-easyinput__content-input{
			height: inherit;
	}
	::v-deep.uni-forms-item {
		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 18rpx 18rpx 18rpx;
			padding: 0 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: 8rpx 24rpx 32rpx 24rpx;
		background: #F9F9F9;
	}

	.option-item {
	}
</style>