<template>
	<view class="u-p-30 safe-page">
		<myTabs :list="tabsList" @change="tabsChange"></myTabs>
		<view class="box">
			<view class="basic">
				<uni-forms :border="true" label-position="top"  err-show-type="undertext" validateTrigger="blur"
				 label-width="350" 
				ref="Forms"
					:model="FormData" :rules="rules">
					<view class="block">
						<uni-forms-item label="图片">
							<uni-file-picker v-model="FormData.images" file-mediatype="image" mode="grid" :limit="10"
								@progress="FileUploadprogress" @success="FileUploadsuccess" @fail="FileUploadail"
								@select="FileUploadselect" />
						</uni-forms-item>
						<uni-forms-item required name="goodsName" label="商品名称" >
							<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
								v-model="FormData.goodsName" placeholder="请输入商品名称" />
						</uni-forms-item>
						<uni-forms-item label="产品编码" required>
							<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
								v-model="FormData.goodsCode" placeholder="请输入商品编码" />
						</uni-forms-item>
						<uni-forms-item label="商品描述" required>
							<uni-easyinput :placeholderStyle="placeholderStyle" type="textarea"
								v-model="FormData.goodsDesc" placeholder="请填写商品简述" />
						</uni-forms-item>
						<uni-forms-item label="商品详情" required>
							<uni-easyinput :placeholderStyle="placeholderStyle" type="textarea"
								v-model="FormData.goodsDetail" placeholder="请填写商品详情" />
						</uni-forms-item>
						<uni-forms-item label="所属分类" required>
							<view style="display: none;"><uni-easyinput :inputBorder="inputBorder"
									v-model="FormData.category" placeholder="请选择所属分类" /></view>
							<picker @change="categoryChange" :value="category.defaultCateIndex" :range="category.list">
								<view class="u-flex u-row-between lh40">
									<view class="color-333">{{category.list[FormData.category]||'分类'}}</view>
									<uni-icons type="right"></uni-icons>
								</view>
							</picker>
						</uni-forms-item>
						<uni-forms-item label="规格模式" required>
							<uni-data-checkbox v-model="FormData.specificationsPattern"
								:localdata="specificationMode" />
						</uni-forms-item>
						<uni-forms-item label=" " required>
							<view class="u-flex u-row-between zuofa" @tap="go.to('PAGES_PRODUCT_GUIGE_ADD')">
								<view class="color-333">{{FormData.specificationsGroup||'添加规格组'}}</view>
								<uni-icons type="right"></uni-icons>
							</view>
						</uni-forms-item>

						<uni-forms-item label="底价（元）" required>
							<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
								v-model="FormData.floorPrice" placeholder="请输入底价（元）" />
						</uni-forms-item>
						<uni-forms-item label="售卖方式" required>
							<view style="display: none;"><uni-easyinput :inputBorder="inputBorder"
									v-model="FormData.salesMethod" placeholder="请选择售卖方式" /></view>
							<picker @change="salesMethodChange" :value="salesMethod.defaultIndex"
								:range="salesMethod.list">
								<view class="u-flex u-row-between lh40">
									<view class="color-333">{{salesMethod.list[FormData.salesMethod]||'售卖方式'}}</view>
									<uni-icons type="right"></uni-icons>
								</view>
							</picker>
						</uni-forms-item>
						<uni-forms-item label="" required>
							<view class="u-flex u-row-between lh40">
								<view class="label-title">库存</view>
								<switch :color="ColorMain" :checked="FormData.stock" class="my-switch" />
							</view>
						</uni-forms-item>
					</view>
					<view class="block">
						<view class="border-top-0">
							<uni-forms-item label="" required>
								<view class="u-flex u-row-between lh40">
									<view class="label-title">打折设置</view>
									<my-switch v-model="FormData.openDiscount" @change="openDiscountChange"></my-switch>
									<!-- <switch :color="ColorMain" :checked="openDiscount" class="my-switch" /> -->
								</view>
							</uni-forms-item>
						</view>
						<view class="border-top-0 none-label" v-if="FormData.openDiscount">
							<uni-forms-item label="" required>
								<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
									v-model="FormData.discountPrice" type="digit" placeholder="请填写折后价" />
							</uni-forms-item>
						</view>
						<uni-forms-item label="" required>
							<view class="u-flex u-row-between lh40">
								<view class="label-title">不参与会员折扣</view>
								<switch :color="ColorMain" :checked="FormData.isVipDiscount" class="my-switch" />
							</view>
						</uni-forms-item>
						<uni-forms-item label="会员价（元）" required>
							<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
								v-model="FormData.vipPrice" type="digit" placeholder="请输入会员价（元）" />
						</uni-forms-item>
						<uni-forms-item label="包装费（元）" required>
							<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
								v-model="FormData.packagingFee" type="digit" placeholder="请输入包装费（元）" />
						</uni-forms-item>
						<uni-forms-item label="重量（千克）" required>
							<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
								v-model="FormData.weight" type="digit" placeholder="请输入重量（千克）" />
						</uni-forms-item>
						<uni-forms-item label="赠送积分" required>
							<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
								v-model="FormData.integral" type="digit" placeholder="请输入赠送积分" />
						</uni-forms-item>

					</view>

					<view class="block">
						<view class="border-top-0">
							<uni-forms-item label="" required>
								<view class="u-flex u-row-between lh40">
									<view class="label-title">每日销量上限</view>
									<switch :color="ColorMain" :checked="FormData.stock" class="my-switch" />
								</view>
							</uni-forms-item>
						</view>
						<uni-forms-item label="" required>
							<view class="u-flex u-row-between lh40">
								<view class="label-title">每单限购</view>
								<switch :color="ColorMain" :checked="FormData.isVipDiscount" class="my-switch" />
							</view>
						</uni-forms-item>
						<uni-forms-item label="最低起售（件）" required>
							<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
								v-model="FormData.vipPrice" type="digit" placeholder="请输入最低起售（件）" />
						</uni-forms-item>
						<uni-forms-item label="包装费（元）" required>
							<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
								v-model="FormData.packagingFee" type="digit" placeholder="请输入包装费（元）" />
						</uni-forms-item>
						<uni-forms-item label="虚拟销量" required>
							<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
								v-model="FormData.virtualSales" type="digit" placeholder="虚拟销量" />
						</uni-forms-item>
						<uni-forms-item label="" required>
							<view class="u-flex u-row-between lh40">
								<view class="label-title">设为推荐</view>
								<switch :color="ColorMain" :checked="FormData.isRecommend" class="my-switch" />
							</view>
						</uni-forms-item>

					</view>
				</uni-forms>
				<view class="save-btn-box">
					<button class="save-btn" @click="save" hover-class="btn-hover-class">保存</button>
				</view>
				<view class="u-text-center color-red">
					<text>删除该商品</text>
				</view>
			</view>

			<view class="stock">

			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ColorMain
	} from '@/commons/color.js'
	import go from '@/commons/utils/go.js';
	import {
		onLoad
	} from '@dcloudio/uni-app';

	import {
		onBeforeUnmount,
		onUnmounted,
		reactive,
		ref,
		watch
	} from 'vue';
	import myTabs from '@/pageProduct/components/my-tabs.vue'
	import mySwitch from '@/pageProduct/components/my-switch.vue'
	const rules = {
		GoodsName: {
			rules: [{
					required: true,
					errorMessage: '请输入商品名称',
				},
				{
					minLength: 1,
					maxLength: 20,
					errorMessage: '商品名称长度在 {minLength} 到 {maxLength} 个字符',
				}
			]
		}
	}
	const tabsList = ['基础设置', '库存设置']
	const Forms=ref(null)
	// 表单样式
	const placeholderStyle = 'font-size:28rpx;'
	//规格模板类型
	const specificationMode = [{
			text: '普通',
			value: '普通'
		},
		{
			text: '图片式',
			value: '图片式'
		},
		{
			text: '规格模版',
			value: '规格模版'
		}
	]
	let myTest = ref(false)
	//表单边框
	const inputBorder = ref(false)
	//表单数据
	const FormData = reactive({
		goodsName: '',
		GoodsNum: '',
		images: [],
		category: '',
		salesMethod: 0,
		stock: false,
		isVipDiscount: false,
		packagingFee: 0,
		weight: 0,
		integral: 0,
		specificationsPattern: '',
		specificationsGroup: '',

		openDiscount: false,
		discountPrice: '',
		isVipDiscount: false,
		vipPrice: '',
		packagingFee: '',
		virtualSales: '',
		isRecommend: false
	})


	//售卖方式
	const salesMethod = reactive({
		list: ['现货', '预售', '仅展示商品'],
		defaultIndex: 0,
	})

	function salesMethodChange(e) {
		FormData.salesMethod = e.detail.value
		salesMethod.defaultIndex = e.detail.value
	}

	let option = {
		type: 'add'
	}
	// 判断是否为一个空对象
	function isEmpty(obj) {
		return obj && JSON.stringify(obj) !== '{}'
	}
	onLoad((params) => {
		if (isEmpty(params)) {
			option = params.type ? params : option
		}
		uni.setNavigationBarTitle({
			title: option.type === 'add' ? '添加商品' : '编辑商品'
		})

	})

	function openDiscountChange() {

	}

	//图片上次
	function FileUploadprogress() {

	}

	function FileUploadsuccess() {

	}

	function FileUploadail() {

	}

	function FileUploadselect() {

	}



	//分类
	const category = reactive({
		list: ['分类', '分类1', '分类2'],
		defaultCateIndex: 0,
	})

	function categoryChange(e) {
		FormData.category = e.detail.value
		category.defaultCateIndex = e.detail.value
	}



	function tabsChange(i) {
		console.log(i);
	}
	
	function save(){
		Forms.value.validate().then(res=>{
			console.log(res);
		}).catch(err=>{
			console.log(err);
		})
	}


	/**
	 *  监听规格保存,拿到数据
	 * @param {Boolean} open //控制开启或关闭监听
	 */
	function watchSpecificationsSave(open = true) {
		if (open) {
			uni.$on('emitspecificationsSave', function(data) {
				console.log(data);
			})
		} else {
			uni.$off('emitspecificationsSave', function(data) {
				console.log('emitspecificationsSave remove');
			})
		}

	}
	watchSpecificationsSave()
	onBeforeUnmount(() => {
		watchSpecificationsSave(false)
	})
</script>
<style scoped>
	page {
		background: #F9F9F9;
	}
</style>
<style lang="scss" scoped>
	.safe-page {
		background: #F9F9F9;
	}

	.my-switch {
		transform: scale(0.7);
	}

	.label-title {
		font-size: 28rpx;
		font-weight: bold;
		font-family: Source Han Sans CN, Source Han Sans CN;
	}

	.lh40 {
		line-height: 40rpx;
	}

	.box {
		margin-top: 70rpx;
		font-size: 28rpx;

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

	.save-btn-box {
		padding: 64rpx 110rpx 64rpx 110rpx;
	}

	::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;
	}
	::v-deep .none-label .uni-forms-item.is-direction-top {
		padding: 0!important;
		min-height: initial!important;
	}
	::v-deep .none-label .uni-forms-item .uni-forms-item__label{
		padding: 0!important;
	}
	
	.save-btn {
		background-color: $my-main-color;
		color: #fff;
		border-radius: 100rpx;
		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;
	}
</style>