<template>
	<view class="page min-page">
		<view class="box">
			<view class="block border-top-0 u-p-t-32 u-p-b-32">
				<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="sort" borderBottom >
						<up-input v-model="vdata.formData.sort" 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>
	
	</view>
</template>

<script setup>
	import { reactive, ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import infoBox from '@/commons/utils/infoBox.js'
	import { updateSpec } from '@/api/product.js'
	
	const option = {
		type: 'add',
		id: undefined
	}
	const formRef = ref(null)
	const vdata = reactive({
		formData: {
			id: null,
			name: "",
			level: "",
			sort: "",
			pid: "",
		},
		rules: {
			"name": {  
				required: true,  
				message: '请输入规格名称',  
				trigger: ['blur', 'change'],  
			},
			"sort": {  
				required: true,  
				message: '请输入排序',  
				trigger: ['blur', 'change'],  
			},
		},
	})

	onLoad(opt => {
		if (opt && JSON.stringify(opt) !== '{}' && opt.type) {
			const data = uni.getStorageSync('spec')
			uni.removeStorageSync('spec')
			if(data){
				vdata.formData.id = data.id
				vdata.formData.name = data.name
				vdata.formData.sort = data.sort
				vdata.formData.level = data.level
				vdata.formData.pid = data.pid
			}
		}
		uni.setNavigationBarTitle({
			title: '编辑规格模版'
		})
	})
	
	/**
	 * 保存
	 */
	async function save() {
		updateSpec(vdata.formData).then(res => {
			infoBox.showToast('修改成功')
			setTimeout(() => {
				uni.navigateBack()
			}, 1500)
		})
	}

	
</script>
<style scoped>
	page {
		background: #F9F9F9;
	}
</style>
<style lang="scss" scoped>

	.page {
		background: #F9F9F9;
		padding: 32rpx 30rpx 0 30rpx;
		padding-bottom: 200rpx;
	}
	::v-deep .uni-forms-item--border {
		padding-top: 12px;
		padding-bottom: 12px;
	}

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


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

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

	.option {
		padding: 8rpx 24rpx 32rpx 24rpx;
		background: #F9F9F9;
	}

	
</style>