<template>
	<!-- 规格商品 -->
	<view class="specsShop">
		
		<!-- <view>此处应有下拉切换 略</view>
		<view>这个页面还没弄完 </view> -->
		<!-- <picker :range="goodsSpec_goodsType" range-key="name" >
		
		</picker> -->
		
		
		<!-- <picker @change="bindPickerChange" :value="Typeindex" :range="goodsSpec_goodsType" range-key="name">
			<view class="specsmodel flex ali-c">
				<text class="title">规格模型:</text>
				<view class="modlename">{{goodsSpec_goodsType[Typeindex].name?goodsSpec_goodsType[Typeindex].name:""}}</view>
				<image class="dopicon" src="/static/news/dopicon.png" mode=""></image>
			</view>
		</picker> -->
		
		
		<view class="specsmodel flex ali-c" @tap='bindPickerChange'>
			<text class="title">规格模型:</text>
			<view class="modlename">{{goodsSpec_goodsType[Typeindex].name?goodsSpec_goodsType[Typeindex].name:""}}</view>
			<image class="dopicon" src="/static/news/dopicon.png" mode=""></image>
		</view>
		<lb-picker ref="picker" :list="goodsSpec_goodsType" :value='Typeindex' range-key="label" :props="myProps" @confirm='confirm'></lb-picker>
		
		
		<!-- 多选框列表 -->
		<view class="Checkboxboxmain">
			<yiCheckbox v-for="(item,suoying) in specList" :key="suoying" :chinddata="item" :isindex="suoying" @changecheckbox="changecheckbox" @changeSpecList="changeSpecList" ></yiCheckbox>
		</view>
		<!-- 多选框列表end -->


		<!-- specList -->
		
		
		<view class="specsShop_list">
			<view class="specsShop_list_item" v-for="(item,index) in endobjdata" :key="index">
				<view class="itemnames">{{item.key_name}}</view>
				
				<view class="cleelable flex ali-c">
					<view class="names"><text class="bitian">*</text> 售价</view>
					<view class="inputbox flex1">
						<input class="input" type="text" value="" v-model="item.price" placeholder="请输入售价" ></input>
					</view>
				</view>
				<view class="cleelable flex ali-c">
					<view class="names"><text class="bitian">*</text> 库存</view>
					<view class="inputbox flex1">
						<input class="input" type="text" v-model="item.store_count" value="" placeholder="请输入库存" ></input>
					</view>
				</view>
				<!-- <QSInput :name="name"  titleColor="#000000" variableName="shoptitle" required layout="row" title="库存" v-model="form.shoptitle"></QSInput> -->
				<!-- <QSInput :name="name"  titleColor="#000000" variableName="shoptitle" required layout="row" title="售价" v-model="form.shoptitle"></QSInput> -->
				<!-- <QSPics :name="name"  variableName="pics" title="商品图片" v-model="form.pics"></QSPics> -->
				
				<!-- 上传图片 -->
				<view class="uploadboxs flex ali-c ">
					<view class="uploadsnames">商品图片</view>
					<view class="uptoimglist flex1 jus-e">
						
						<!-- spec_img -->
						<image  @tap="uploadimgfun(index)" v-if="item.spec_img!='' && item.spec_img!=null  && item.spec_img!=undefined" class="uploabtns" :src="staticUrl+item.spec_img" mode=""></image>
						<view v-else class="uploabtns" @tap="uploadimgfun(index)"></view>
					</view>
				</view>
				
			</view>
		</view>
		
		
		<view class="submitbtn active"  @tap="addEditProductSpecfun">
			提交
		</view>
	
		
	</view>
</template>

<script>
	import {goodsSpec,ajaxGetSpecSelect,addEditProductSpec} from "@/utils/api/api.js";
	import yiCheckbox from "@/components/yiCheckbox/yiCheckbox.vue";
	import config from "@/utils/config.js";
	/**
	 * 查询商品的规格 商品规格详情 goodsSpec
	 *  
	 * 
	 * */
	export default {
		components:{
			yiCheckbox,//多选的插件
		},
		data() {
			return {
				myProps: {
				      label: 'name',
				      value: 'cate_id',
				},
				
				
				name:"shops",
				form:{
					pics: [{name: '测试'}],
					shoptitle:"",
					checkbox:{
						
					},
					checkbox1:{
						
					},
					checkbox2:{
						
					}
				},
				
				goods_id:0,
				
				goodsSpec_goodsType:[{name:""}],//可选值列表
				goodsSpec_info:[],
				type_id:"",//二级分类id
				Typeindex:0,//二级分类选中索引
				
				//类型规格详情的数据
				items_ids:[],
				specList:[],
				
				goxuanlist:[
					// {name:"名称",child:[{name:"选中的名称",id:0}]},//第一个里面的选中的
					// {name:"名称",child:[{name:"选中的名称",id:0}]},//第一个里面的选中的
					// {name:"名称",child:[{name:"选中的名称",id:0}]},//第一个里面的选中的
					// {name:"名称",child:[{name:"选中的名称",id:0}]},//第一个里面的选中的
					// {name:"名称",child:[{name:"选中的名称",id:0}]},//第一个里面的选中的
				],//勾选的数据
				endobjdata:[],//最后的end 是组装出来的数据
			};
		},
		computed:{
			uploaddata(){
				return {model:"goods",user_token:this.$store.state.token,shop_id:this.$store.state.userInfo.shop_id}
			},
			staticUrl(){
				return this.$store.state.staticUrl;
			}
		},
		onLoad(opdata) {
			this.goods_id = opdata.id;
			
			this.goodsSpecfun();//商品规格详情
		},
		methods:{
			confirm(e){
				console.log(e)
				// this.parent_name=e.item.value;
				// this.canform.cate_id=;
				// this.cate_name = e.item.cate_name;
				this.type_id =e.item.id;
				this.Typeindex = e.index;
				this.ajaxGetSpecSelectfun();//获取选中的分类下面的规格
			},
			//分类选择触发后
			bindPickerChange(e){
				this.$refs.picker.show() // 显示
			},
			
			
			
			
			//上传图片的方法
			uploadimgfun(index){
				//上传图片方法
				// uploadimgs(){
				console.info("传图片~~~");
					
				uni.chooseImage({
					count:1,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: config.SiteBaseUrl+'FileUpload/uploadify', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'img',
							formData: this.uploaddata,
							success: (uploadFileRes) => {
								
								console.log(uploadFileRes.data,"上传成功后~");
								
								let resdata = JSON.parse(uploadFileRes.data);
								console.info(resdata,"resdata");
								console.info(resdata.data,"resdata.data");
								
								let endobjdatatwo = this.endobjdata;
								endobjdatatwo[index].spec_img = resdata.data;
								//this.endobjdata[index].spec_img = resdata.data;
								
								this.$set(this.endobjdata, index, endobjdatatwo[index]);//设置赋值
								
							}
						});
					}
				});
				
				// },
			},
			// 库存，图片，售价  添加规定的方法 最终提交的方法
			addEditProductSpecfun(){
				// addEditProductSpec
				let isbool = false;
				isbool = this.endobjdata.every((item,index)=>{
					return item.price!="" && item.price!="";
				})
				if(!isbool){
					this.$api.msg("规格填写有误");
					return false;
				}
				
				
				if(this.endobjdata.length==0){
					this.$api.msg("你必须填写规格才能提交");
					return false;
				}
				
				console.info("endobjdata",this.endobjdata);
				// return false;
				addEditProductSpec({
					goods_id:this.goods_id,//商品id
					type_id:this.type_id,//模型id
					item:this.endobjdata,
				}).then((res)=>{
					if(res.code==0){
						this.$api.msg(res.data);
						setTimeout(()=>{
							uni.navigateBack({
								
							})
						},1000)
					}else{
						this.$api.msg(res.data);
					}
				})
			},
			//商品规格详情 第一步 获取 一级
			async goodsSpecfun(){
				let res = await goodsSpec({
					goods_id:this.goods_id
				});
				if(res.code==0){
					this. goodsSpec_goodsType = res.data.goodsType;
					this. goodsSpec_info = res.data.info;
					
					let  endobjdata= res.data.info;
					endobjdata = endobjdata.map((item,index)=>{
						item.price = item.s_price;
						return item;
					});
					
					console.info(endobjdata,"endobjdata");
					
					this.endobjdata = endobjdata;//res.data.info;//之前的数据 默认值
				}else{
					this.$api.msg(res.msg);
				}
			},
	
			//获取类型规格详情 通过上面的那个接口 里面的 goodsSpec_goodsType里面的id去获取
			async ajaxGetSpecSelectfun(){
				let res = await ajaxGetSpecSelect({
					goods_id:this.goods_id,//商品id
					type_id:this.type_id,
				});
				if(res.code==0){
					//items_ids  商品规格key,将规格id遍历
					// specList  规格详情列表
					
					this.items_ids = res.data.items_ids; 
					
					let specListtwo = res.data.specList;
					
					specListtwo = specListtwo.map((item,index)=>{
						let arr = [];
						for(let s1 in item.spec_item){
							arr.push({name:item.spec_item[s1],id: s1,ischild:false});
							
						}
						item.spec_item = arr;
						return item;
					})
					
					this.specList = specListtwo;//处理数据~
					
					let goxuanlist = [];
					for(var i=0;i<this.specList.length;i++){
						goxuanlist.push({name:this.specList[i].name,child:[],specList_item_id:0,});// child {name:"选中的名称",id:0}
					}
					this.goxuanlist = goxuanlist;//初始化勾选的数据
					
					this.endobjdata = [];//重新选择后 原来的数据都清除
					
				}else{
					
				}
			},
			//单选点击后 修改对应的选项的状态
			changeSpecList(e){
				console.info(e);
				
				this.$set(this.specList, e.index, e.data);//设置赋值 用set 修改
			},
			//封装的规格对选器选中 或者取消改变后的回调方法
			changecheckbox(data){
				console.info(data,"rndata");
				let goxuanlist = this.goxuanlist;
				goxuanlist[data.indexsz].child = data.child;
				goxuanlist[data.indexsz].specList_item_id = data.specList_item_id;//id
				//this.goxuanlist = goxuanlist;//重新替换勾选后的数据集合
				
				
				this.$set(this.goxuanlist, data.indexsz, goxuanlist[data.indexsz]);//设置赋值 用set
				
				
				
				/*let arr = [
					{"name":"网络","child":[{"name":"3G","id":"12"},{"name":"4G","id":"11"}]},
					{"name":"内存","child":[{"name":"128G","id":"102"},{"name":"32G","id":"28"},{"name":"8G","id":"14"},{"name":"16G","id":"13"}]},
					{"name":"屏幕","child":[{"name":"文字屏","id":"23"},{"name":"触屏","id":"21"}]},
					{"name":"颜色","child":[{"name":"白色","id":"56"},{"name":"银色","id":"99"},{"name":"玫瑰金","id":"100"}]}];*/
					
				// let arr = this.goxuanlist.map((item,index)=>{
				// 	if(item.){
						
				// 	}
				// });
				
				
				let arr = [];
				this.goxuanlist.forEach((item,index)=>{
					if(item.child.length!=0){//处理选中的才 加入预组装
						arr.push(item);
					}
				});
					
				// let arr = this.goxuanlist;
				let sarr = [[]];
				let sarrobj = [[]];
				let sarrobjtwo = [[]];
				for (var i = 0; i < arr.length; i++) {
					var tarr = [];
					var tarrobj = [];//4g 的id
					var tarrobjtwo = [];//网络的id
					for (var j = 0; j < sarr.length; j++){
						for (var k = 0; k < arr[i]["child"].length; k++){
							tarr.push(sarr[j].concat(arr[i].name+":"+arr[i]["child"][k].name));
		
							//spec_id
							//arr[i]["child"][k].name
							tarrobj.push(sarrobj[j].concat(arr[i]["child"][k].id));
							
							tarrobjtwo.push(sarrobjtwo[j].concat(arr[i].specList_item_id))
						}
					}    
					sarr = tarr;
					sarrobj = tarrobj;
					sarrobjtwo = tarrobjtwo;
				}
				
				
				// console.info(sarr.join("\n"),"选中的名字组合");//名字列表
				// console.info(sarrobj.join("\n"),"key");//4G 的id 3G的id
				// console.info(sarrobjtwo.join("\n"),"keytwo");//网络的id
				
				console.info(sarrobj,"sarrobj");
				
				
				if(sarrobj[0].length!=0){
					let endobjdata = sarrobj.map((item,index)=>{
						// sarr[index].replace(/,/g,'_')
						let objsdata = {key_name:sarr[index].join(" "),spec_id:sarrobjtwo[index].join("_"),key:sarrobj[index].join("_"),price:"",store_count:"",sku:"",spec_img:"",cost_price:""};
						
						return objsdata;
					})
					
					// console.info(endobjdata,"endobjdata");
					
					this.endobjdata = endobjdata;
				}else{
					this.endobjdata =[];
				}
				
				
				
			},
			
			changeupdata(e){
				// console.info("数据改变后",e);
			},
			//初始化数据呀
			initdatalist(){
				var arr1 = [1,2,3];
				var arr2 = [4,5,6];
				var arr3 = [7,8,9];
				
				for(let i1 = 0;i1<arr1.length;i1++){
					for(let i2 = 0;i2<arr1.length;i2++){
						for(let i3 = 0;i3<arr1.length;i3++){
							// console.info(arr1[i1],arr1[i2],arr1[i3]);
						}
					}
				}
				
				
			},
			inititemdata(){
				
			}
		},
		watch:{
			form(e,c){
				console.info(e,c,"watch");
			}
		}
	}
</script>

<style lang="scss">
	@import  "./specsShop.scss";
</style>
