<template>
	<!-- 上传商品 商城的 -->
	<!-- adds -->
	<view class="addProjuct yicode">
		
		
		<!-- 表特和类目 -->
		<view class="noecellbox">
			<view class="title">产品名称</view>
			<view class="inputbox flex">
				<input class="input flex1"  type="text" v-model="canform.title" value="" placeholder-class="plclass" placeholder="请填写产品名称"  />
				<!-- <text class="text">{{canform.title.length}}/15</text> -->
				<!-- maxlength="15" -->
			</view>
		</view>
		
		<view class="briefIntroduction">
			<view class="title">产品描述</view>
			<textarea class="textarea" v-model="canform.intro" placeholder="请输入产品描述"/>
		</view>
		
		<!-- 规格 库存 分类 -->
		<view class="Specificationsbox">
			<view class="splcsinfo flex ali-c jus-b">
				<view class="name">产品分类</view>
				<view class="ali-c">
					<text></text>
					<image class="imgs" src="/static/news/xiamassfd.png" mode=""></image>
				</view>
			</view>
			<view class="sort flex ali-c ">
				<view class="name">分类</view>
				<picker @change="bindPickerChange" name="parent_id" :value="index" :range="goodsCate" range-key="value">
				<view class="inputs">
					<input type="text" disabled="disabled" value="" v-model="cate_name"  class="inpus" />
					<image class="imgs"  src="/static/news/xiamassfd.png" mode=""></image>
				</view>
				</picker>
				<picker @change="bindPickerss"  name="cate_id"   :value="index" :range="datachind" range-key="value">
				<view class="inputs inputs1">
					<input type="text" disabled="disabled" value="" v-model="parent_name" class="inpus" />
					<image class="imgs" src="/static/news/xiamassfd.png" mode=""></image>
				</view>
				</picker>
			</view>
		</view>
		<!-- end -->
		
		
		
		
		<!-- 添加产品图 -->
		<view class="addmigs">
			<view class="titlehe">添加商品主图</view>
			<robby-image-upload fileKeyName="img" :value="c_pics" :server-url="uploadurl1+'/merchant.php/FileUpload/uploadify'" :form-data="c_formData" :server-url-delete-image="uploadurl1"
			 @delete="c_delImage" @add="c_onImg" @move="onMove_c" :limit="1"></robby-image-upload>
		</view>
		<!-- 添加图片end -->
		

		<!-- 产品图片 -->
		
		<view class="noecellbox noecellboxtwo">
			<view class="title">产品库存</view>
			<view class="inputbox flex">
				<input class="input flex1" maxlength="15" type="number" v-model="canform.num" value="" placeholder-class="plclass" placeholder="请填写产品库存"  />
			</view>
		</view>
		
		<view class="noecellbox noecellboxtwo">
			<view class="title">商城卖价 ￥</view>
			<view class="inputbox flex">
				<input class="input flex1" maxlength="15" type="number" v-model="canform.mall_price" value="" placeholder-class="plclass" placeholder="请填写产品商城价"  />
			</view>
		</view>
		
		<view class="noecellbox noecellboxtwo">
			<view class="title">市场价 ￥</view>
			<view class="inputbox flex">
				<input class="input flex1" maxlength="15" type="number" v-model="canform.price" value="" placeholder-class="plclass" placeholder="请填写产品市场价"  />
			</view>
		</view>
		
		<view class="noecellbox noecellboxtwo">
			<view class="title">代理价 ￥</view>
			<view class="inputbox flex">
				<input class="input flex1" maxlength="15" type="number" v-model="canform.is_agent_price" value="" placeholder-class="plclass" placeholder="请填写产品代理价"  />
			</view>
		</view>
		
		
		
		
		<view class="briefIntroduction">
			<view class="title">购买须知</view>
			<textarea class="textarea" v-model="canform.instructions" placeholder="请输入购买须知"/>
		</view>
		
		
		<!-- photos 更多详情图 -->
		<!-- 添加产品图 -->
		<view class="addmigs ">
			<view class="titlehe">商品图册</view>
			<robby-image-upload fileKeyName="img" :value="c_picsTwo" :server-url="uploadurl1+'/merchant.php/FileUpload/uploadify'" :form-data="c_formData" :server-url-delete-image="uploadurl1"
			 @delete="c_delImagetwo" @add="c_onImgtwo" @move="onMove_ctwo" :limit="9"></robby-image-upload>
		</view>
		<!-- 添加图片end -->
		
		
		<!-- 先不用富文本 时间太赶了 -->
		<!-- 商品详情（编辑器插件） details -->
		<!-- 先不要 -->
		<!-- <view class="briefIntroduction">
			<view class="title">商品详情</view>
			<textarea class="textarea" v-model="canform.details" placeholder="请输入商品详情"/>
		</view> -->
		
		<!-- <jinedit ref="jinedit" placeholder="请输入内容" @editOk="editOk" uploadFileUrl="/#" ></jinedit> -->
		
		<view class="addmigs pt0s" >
			<jinedit ref="jinedit" placeholder="请输入商品详情内容" @editOk="editOk" fileKeyName="img" :uploadFileUrl="uploadurl1+'/merchant.php/FileUpload/uploadify'" ></jinedit>
		</view>
		
		<!-- 富文本 -->
		

		<!-- 多选列表  勾选的位置 -->
		<view class="checkboxs">
			<view class="title">标识：</view>
			
			<checkbox-group @change="checkboxChange">
				<view class="chindlost ali-c flex flex-wrap">
					<label class="lableitem flex ali-c" v-for="(item,index) in listchind" :key="index">
						<view>
							<checkbox color="#FF6900" :value="item.value" :checked="item.checked" />
						</view>
						<view class="titles">{{item.name}}</view>
					</label>
				</view>
			</checkbox-group>
		</view>
		<!-- 多选end -->

		
		<view class="submits active" @tap="geteditOk">发布商品</view>
		<!-- create_goods -->
		
	</view>
</template>

<script>
	// https://ext.dcloud.net.cn/plugin?id=326
	
	// import { goods_type, goods_paren, create_goods} from "@/utils/api/store.js";
	import robbyImageUpload from '@/components/plan-image-upload/up_img';//上传资质图片组件
	
	import {getGoodsCate,addEditGoods,goodsDetails} from "@/utils/api/api.js";
	
	import jinedit from "@/components/jinedit/jinedit.vue";
	
	export default {
		components:{
			jinedit,
			robbyImageUpload
		},
		computed: {
			staticUrl () {//静态资源地址
				return this.$store.state.staticUrl;
			},
			uploadurl(){
				return this.$store.state.uploadurl;
			}
		},
		data() {
			return {
				title:"",//产品标题
				imageData : [],//主图
				imageData1:[],//详情图
				// serverUrl: 'api/Store/goods_picture',//上传图片的地址
				serverUrl: 'api/File_upload/uploadify',//上传图片的地址
				serverUrlDeleteImage: 'api/Store/del_goodsPicture',
				formData: {
					"imgtype": "comment"
				},
				indexsss:0,
				listchind:[
					{name:"是否新产品",value:"is_new",checked:false},
					{name:"是否热卖产品",value:"is_hot",checked:false},
				],
				index:0,
				idx:0,
				idj:0,
				ff:"",
				
				// serverUrl:  'up_img',
				// DelServelUrl: 'del_img',
				icp:"",//上传的图片 原来的
				
				
				//表单的数据
				canform:{
					goods_id:"",//修改传值产品id
					title:"",//产品名称
					intro:"",//产品描述
					cate_id:"",//	产品分类
					photo:"",//产品图片
					num:"",//库存 num
					price:"",// 市场价
					mall_price:"",//商城价
					is_agent_price:"",//代理价
					instructions:"",//购买须知
					photos:"",//更多详情图
					details:'',///商品详情（编辑器插件）
					is_new:"0",//0 1 是否新产品
					is_hot:"0",//0 1 是否热卖产品
					action:"add",//方式（添加：add，修改:edit）
					
				},
				goodsCate:[],
				shopCate:[],
				cate_name:"",//一级分类的名称
				parent_name:"",//二级分类的名称
				datachind:[],//分类的二级数据的
				c_photos: [],//主图的数据 单张的 存储数据 提交的数据需要转换
				c_photosTwo:[],//更多图里面的数据
				c_pics: [],//主图的数据
				c_picsTwo:[],//更多详情图
				issubmit:true,//重复提交开关
				selchildList:[],//勾选列表选中的值
				
				isjiumodelshop:{},//修改信息的时候 默认的信息
			};
		},
		computed: {
			uploadurl1(){
				return this.$store.state.uploadurl1;
			},
			//上传图片传的参数
			c_formData(){
				let obj = {
					model:"goods",
					user_token:this.$store.state.token,
				}
				return obj;
			} 
		},
		onLoad(opdata) {
			
			if(opdata.id!="" && opdata.id!=undefined){
				this.canform.goods_id = opdata.id;//修改的商品id
				this.canform.action = "edit";
				
				
				uni.setNavigationBarTitle({
					title:"编辑产品"
				})
			}
			
			//获取下拉分类选择
			this.goods_type();
		},
		methods:{
			//获取原来的商品详情信息
			async goodsDetailsfun(){
				let res = await goodsDetails({
					goods_id:this.canform.goods_id,
				});
				if(res.code==0){
					this.isjiumodelshop = res.data;//赋值
					
					this.canform.title = res.data.title;
					this.canform.intro = res.data.intro;
					this.canform.price = res.data.price/100;// 市场价
					this.canform.mall_price = res.data.mall_price/100;//商城价
					this.canform.is_agent_price = res.data.is_agent_price/100;//代理价
					this.canform.instructions = res.data.instructions;//购买须知
					this.canform.details = res.data.details;///商品详情（编辑器插件）
					this.canform.num = res.data.num;//库存 num
					this.canform.cate_id = res.data.cate_id;//产品分类
					
					
					//处理分类初始值
					for(let i=0;i<this.goodsCate.length;i++){
						let itemone = this.goodsCate[i].children;
						for(let j=0;j<this.goodsCate[i].children.length;j++){
							// console.info(this.goodsCate[i].children[j],"111111");
							let itemtwo = this.goodsCate[i].children[j];
							if(itemtwo.cate_id==this.canform.cate_id){
								// console.info("111这个才是",itemtwo);
								
								this.datachind=itemone;//二级赋值
								this.cate_name = this.goodsCate[i].value;//一级名称
								this.parent_name = itemtwo.value;//二级名称
								
							}
						}
					}
					
					//处理产品主图
					this.c_pics = [{code:0,data:res.data.photo,msg:"success",time:"1587021474"}];
					this.c_photos = [res.data.photo];//初始化
					//处理产品图列表
					let photos = res.data.photos;
					this.c_picsTwo = photos.map((item,index)=>{
						let obj = {
							code:0,
							data:"",
							msg:"success",
							time:"1587021687",

						};
						obj.data = item.photo;
						this.c_photosTwo.push(item.photo);//默认值
						return obj;
					});
					//photos


					// is_new:"0",//0 1 是否新产品
					// is_hot:"0",//0 1 是否热卖产品
					
					//处理复选
					
					let listchind= [
						{name:"是否新产品",value:"is_new",checked:res.data.is_new==1?true:false},
						{name:"是否热卖产品",value:"is_hot",checked:res.data.is_hot==1?true:false},
					];
					this.listchind = listchind;
					
					if(res.data.is_new==1){
						this.selchildList.push("is_new");
					}
					if(res.data.is_hot==1){
						this.selchildList.push("is_hot");
					}
					
					
					
				}else{
					this.$api.msg(res.msg);
				}
			},
			onEditorReady() {
				uni.createSelectorQuery().select('#editor').context((res) => {
					this.editorCtx = res.context
				}).exec()
			},
			undo() {
				this.editorCtx.undo()
			},
			initdata(){
				this.imageData = [];//主图
				this.imageData1=[];//详情图
			},
			// 获取商城商品分类 在用
			async goods_type(){
				let res = await getGoodsCate({
					
				})
				if(res.code==0){
					this.goodsCate = res.data.goodsCate;//二级商品分类
					this.shopCate = res.data.shopCate;//商家分类
					
					//请求初始化的数据信息
					if(this.canform.goods_id!="" && this.canform.goods_id!=undefined){
						this.goodsDetailsfun();
					}
					
				}else{
					
				}
			},
			geteditOk(){//1.xxx
				this.$refs.jinedit.release(true);
			},
			//富文本处理完毕 事件 获取最后的html 数据 子组件调用的
			editOk(e){//2.xxxx
				// console.info("col",e.html);
				
				//调用完毕 调用 create_goods
				let htaltag = e.html
				let newStr = htaltag.replace(new RegExp(/\"/g), "");
				// console.log(newStr);
				this.canform.details = newStr;//e.html
				
				this.create_goods();
			},
			//添加商品事件
			async create_goods(){//3.xxxx
				
				//首先先把富文本组件的数据同步到父组件
				//this.$refs.jinedit.release(true);
				
			
				
				if(this.issubmit==true){
					this.issubmit = false;
					
					
						
					if(this.c_photos.length!=0){
						this.canform.photo = this.c_photos[0];//主图单张
					}
					
					
					if(this.c_photosTwo.length!=0){
						this.canform.photos = this.c_photosTwo.join(";");//更多详情图 列表
					}

					let selchildList = this.selchildList;
					
					selchildList.forEach((item,index)=>{//勾选的两个
						if(item=="is_new"){
							this.canform.is_new="1";
						}
						if(item=="is_hot"){
							this.canform.is_hot= "1";
						}
						
					})
					
					// console.info(this.canform,"canform");
					// return false;
					
					//添加
					console.log(this.canform.mall_price)	
					console.log(this.canform.price)
					if(parseFloat(this.canform.price)<parseFloat(this.canform.mall_price)){
						this.$api.msg('商城价格不能大于市场价格');
						this.issubmit=true;
						return;
					}
					let res = await addEditGoods(this.canform)
					

					this.issubmit=true;
					if(res.code==0){
						this.$api.msg(res.msg);
						
						this.initdata();//初始化数据
						// //商品列表
						// uni.navigateTo({
						// 	url: '/pages/ProductManage/ProductManage'
						// });
						
						setTimeout(()=>{
							uni.navigateBack({
								
							})
						},1000)
					}else{
						this.$api.msg(res.msg);
					}
					
					this.issubmit=true;
				}
				
			},
			//多选 勾选 列表
			checkboxChange(e){
				// console.log(e);
				this.selchildList = e.detail.value;
			},
			// 改变下拉选项 一级的
			bindPickerChange (event) {
				// console.info(event.detail.value);
				this.parent_name = "";
				this.canform.cate_id = "";
				this.cate_name = this.goodsCate[event.detail.value].value;
				this.datachind = this.goodsCate[event.detail.value].children;//二级的数据据
			    
			},
			//二级分类选中后处理
			bindPickerss (event) {
				// console.log(event.detail.value);
				this.parent_name = this.datachind[event.detail.value].value;
				this.canform.cate_id = this.datachind[event.detail.value].cate_id;//分类id
			},
			//图片上传
			c_delImage(e) {
				let arr = []
				for (let k in e.allImages) {
					arr[k] = e.allImages[k].id
				}
				this.c_photos = arr
			},
			c_onImg(e) {
				this.c_pics = e.allImages
				const obj = e.allImages
				for (let index in obj) {
					let id = obj[index].data
					this.c_photos[index] = id
				}
			},
			onMove_c(e) {
				this.c_pics = e
				const obj = e
				for (let index in obj) {
					let id = obj[index].data
					this.c_photos[index] = id
				} 
			},
			//更多详情图
			c_delImagetwo(e) {
				let arr = []
				for (let k in e.allImages) {
					arr[k] = e.allImages[k].id
				}
				this.c_photosTwo = arr
			},
			c_onImgtwo(e) {
				this.c_picsTwo = e.allImages
				const obj = e.allImages
				for (let index in obj) {
					let id = obj[index].data
					this.c_photosTwo[index] = id
				}
			},
			onMove_ctwo(e) {
				this.c_picsTwo = e
				const obj = e
				for (let index in obj) {
					let id = obj[index].data
					this.c_photosTwo[index] = id
				} 
			},
			
		}
	}
</script>

<style lang="scss">
	@import  "./addProjuct.scss"
</style>
