<template>
	<view style="padding: 20rpx;">
		<view style="padding: 20rpx 0;">
			<view v-for="(item, index) in multiSpecData.specList" :key="index">
				<view>
					{{item.spec_name}}
				</view>
				<view v-for="(itm, idx) in item.valueList" :key="idx">
					{{itm.spec_value}}
				</view>
				<view>
					<view class="gui-form-item gui-border-b">
						<text class="gui-form-label">规格名称</text>
						<view class="gui-form-body">
							<input type="text" class="gui-form-input" v-model="ggtj" placeholder="请输入规格名称"
								@input="onChangeSpecValueIpt" />
						</view>
						<text class="gui-form-icon gui-icons gui-text-center" style="color: #AB1581; "
							@click="handleAddSpecValue(index)">添加</text>
					</view>
				</view>


			</view>

			<view v-for="(item,index) in multiSpecData.skuList">
				<view>
					<view style="text-align: center;">{{multiSpecData.specList[0].valueList[index].spec_value}}</view>
					<view class="gui-flex gui-rows gui-nowrap gui-align-items-center gui-space-between"
						style="text-align: center;">
						<view style="width: 30%;">商品价格</view>
						<view style="width: 30%;">商品划线</view>
						<view style="width: 30%;">库存数量</view>
					</view>
					<view class="gui-flex gui-rows gui-nowrap gui-align-items-center gui-space-between">
						<view style="width: 30%;"><input type="text" class="gui-form-input" v-model="item.goods_price"
								placeholder="请输入商品价格"/></view>
						<view style="width: 30%;"><input type="text" class="gui-form-input" v-model="item.line_price"
								placeholder="请输入商品划线"  /></view>
						<view style="width: 30%;"><input type="text" class="gui-form-input" v-model="item.stock_num"
								placeholder="请输入库存数量" /></view>
					</view>
					<view>
						<view>套餐内容</view>
						<view>
							<view>
								<view class="gui-form-item gui-border-b">
									<text class="gui-form-label">规格名称</text>
									<view class="gui-form-body">
										<input type="text" class="gui-form-input" v-model="item.vname"
											placeholder="请输入规格名称" @input="jianting($event,index,'-1','vname')" />
									</view>
									<text class="gui-form-icon gui-icons gui-text-center" style="color: #AB1581; "
										 @click="tianjia(index)">添加</text>
								</view>
							</view>
							<view v-for="(items,indexs) in item.content">
								{{items.name}} <text style="margin-left:30px;color:red" @click="shanchu(index,indexs,-1)">删除</text>
								<view style="margin-left:10px" v-for="(it,inx) in items['chith']" class="gui-flex gui-rows gui-nowrap gui-align-items-center gui-space-between">
									<view style="width: 65%;">{{it.name}}</view>
									<view style="width: 10%;">{{it.sum}}{{it.unit}}</view>
									<view style="width: 15%;">￥{{it.money}}</view> 
									<view style="color:red" @click="shanchu(index,indexs,inx)">删除</view>
								</view>
								<view class="gui-flex gui-rows gui-nowrap gui-align-items-center gui-space-between">
									<view style="width: 24%;">名称</view>
									<view style="width: 24%;">数量</view>
									<view style="width: 24%;">单位</view>
									<view style="width: 24%;">价格</view>
								</view>
								<view class="gui-flex gui-rows gui-nowrap gui-align-items-center gui-space-between">
									<view style="width: 20%;">
										<input type="text" 
											placeholder="请输入名称" @change="jianting($event,index,indexs,'vname')" v-model="items.vname" />
											</view>
									<view style="width: 20%;">
										<input type="text"
											placeholder="请输入数量" @change="jianting($event,index,indexs,'vsum')" v-model="items.vsum" />
									</view>
									<view style="width: 20%;">
										<input type="text"  
											placeholder="请输入单位"  @change="jianting($event,index,indexs,'vunit')" v-model="items.vunit" />
									</view>
									<view style="width: 20%;">
										<input type="text" 
											placeholder="请输入价格" @change="jianting($event,index,indexs,'vmoney')" v-model="items.vmoney" />
									</view>
									<view @click="tianjia(index,indexs)">
										添加
									</view>
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>


 <view @click="quren">确认</view>
		</view>
	</view>
</template>
<script>
	import MultiSpecModel from './MultiSpec'
	export default {

		data() {
			return {
				MultiSpecModel: new MultiSpecModel(),
				multiSpecData: {
					// 规格列表
					specList: [],
					// SKU列表
					skuList: []
				},
				ggtj: '',
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.getData()
			this.MultiSpecModel.handleAddSpecGroup()
			console.log(this.MultiSpecModel)
		},


		methods: {
			quren(){
				let specList = this.multiSpecData.specList
				let skuList = this.multiSpecData.skuList
				let specData = []
				specData['specList'] = specList
				specData['skuList'] = skuList
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2]; //上一个页面
				prevPage['specData'] = specData
				prevPage['newSpecList'] = specList
				prevPage['newSkuList'] = skuList
				uni.navigateBack();
			},
			shanchu(index,indexs,inx){
				if(inx > -1){
					this.multiSpecData.skuList[index].content[indexs].chith.splice(inx, 1)
					return false;
				}
				
				
				this.multiSpecData.skuList[index].content.splice(indexs, 1)
			},
			
			jianting(e, index, indexs, type) {
				let _this = this
				if(indexs > -1){
					_this.multiSpecData.skuList[index].content[indexs][type] =  e.detail.value
					return false;
				}
				_this.multiSpecData.skuList[index][type] =  e.detail.value
			},
			onChangeSpecValueIpt(event, itm) {
				// 更新skuList
				this.MultiSpecModel.onUpdate(true)
				// console.log(this.MultiSpecModel)
			},
			handleAddSpecValue(groupIndex) {
				this.MultiSpecModel.handleAddSpecValue(groupIndex, this.ggtj)
				this.ggtj = ''
				console.log(this.MultiSpecModel)
			},
			getData() {
				const {
					defaultSpecList,
					defaultSkuList
				} = this
				this.multiSpecData = this.MultiSpecModel.getData(defaultSpecList, defaultSkuList)
			},
			ggtjinput(e) {
				this.ggtj = e.detail.value
			},
			tianjia(index,indexs){
				if(indexs > -1){
					this.multiSpecData.skuList[index].content[indexs].chith.push({
						name:this.multiSpecData.skuList[index].content[indexs].vname,
						sum:this.multiSpecData.skuList[index].content[indexs].vsum,
						unit:this.multiSpecData.skuList[index].content[indexs].vunit,
						money:this.multiSpecData.skuList[index].content[indexs].vmoney
					})
					
					this.multiSpecData.skuList[index].content[indexs].vname = ''
					this.multiSpecData.skuList[index].content[indexs].vsum = 1
					this.multiSpecData.skuList[index].content[indexs].vunit = ''
					this.multiSpecData.skuList[index].content[indexs].vmoney = 0
					return false;
				}
				console.log(this.multiSpecData.skuList[index])
				this.multiSpecData.skuList[index].content.push({
					name:this.multiSpecData.skuList[index].vname,
					vname:'',
					chith:[],
					vsum:1,
					vunit:'',
					vmoney:0
				})
				this.multiSpecData.skuList[index].vname = ''
			},

		},


	}
</script>

<style>

</style>