<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="请填写产品名称" />
			</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>
				 <view class="inputs" @tap='opencatesel'>
					<input type="text" disabled="disabled" v-model="parent_name" class="inpus" />
				</view>
			</view>
		</view>
		<!-- end -->

		<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="catindex" :range="shopCateData"
					range-key="cate_name">
					<view class="inputs">
						<input type="text" disabled="disabled" value="" v-model="shopcate_name" class="inpus" />
					</view>
				</picker>
			</view>
		</view>

		<!-- 添加产品图 -->
		<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">会员价(PLUS) ￥</view>
			<view class="inputbox flex">
				<input class="input flex1" maxlength="15" type="number" v-model="canform.min_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="noecellbox noecellboxtwo">
			<view class="title">运费 ￥</view>
			<view class="inputbox flex">
				<input class="input flex1" maxlength="15" type="number" v-model="canform.goods_freight" value=""
					placeholder-class="plclass" placeholder="请填写产品运费" />
			</view>
		</view>

		<view class="noecellbox noecellboxtwo">
			<view class="title">排序</view>
			<view class="inputbox flex">
				<input class="input flex1" type="number" v-model="canform.orderby" maxlength="3" value="0"
					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 -->


		<view class="addmigs pt0s">
			<jinedit ref="jinedit"  placeholder="请输入商品详情内容" @editOk="editOk" fileKeyName="img"
				:uploadFileUrl="uploadurl1+'merchant.php/FileUpload/uploadify'"></jinedit>
		</view>

		<!-- 富文本 -->
		<view class="noecellbox" v-show="money_type==3">
			<view class="title">佣金金额</view>
			<view class="inputbox flex">
				<input class="input flex1" type="text" v-model="canform.money" value="" placeholder-class="plclass"
					placeholder="请填写产品名称" />
			</view>
		</view>

		<!-- 多选列表  勾选的位置 -->
		<view class="checkboxs">
			<view class="title">标识：</view>
			<!-- 表特和类目 -->
			<!-- ali-c flex flex-wrap -->
			<view class="chindlost ">
				<checkbox-group @change="checkboxChange">
					<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>
				</checkbox-group>
				<label class="lableitem flex ali-c">
					<view>
						<checkbox-group @change="changetuijian">
							<checkbox color="#FF6900" value="1" :checked="canform.is_tuijian==1" />
						</checkbox-group>
					</view>
					<view class="titles">是否首页展示</view>
				</label>
				<label class="lableitem flex ali-c">
					<view>
						<checkbox-group @change="changeviptag">
							<checkbox color="#FF6900" value="2" :checked="canform.is_member==2" />
						</checkbox-group>
					</view>
					<view class="titles">是否会员产品</view>
				</label> 
				
				<!-- <label class="lableitem flex ali-c">
					<view>
						<checkbox-group @change="changedhshoptag">
							<checkbox color="#FF6900" value="2" :checked="canform.is_discount==2" />
						</checkbox-group>
					</view>
					<view class="titles">是否抵扣产品</view>
				</label>
				-->
			</view>
		</view>


		<!-- 多选end -->
		<view class="submits active" @tap="geteditOk">发布商品</view>
		<!-- create_goods -->
		
		<aui-picker ref="auipicker" title="选择商品分类" :layer="6" :data="goodsCate"
			@callback="pickerCallback"></aui-picker>
		<!-- 无限极分类 -->

	</view>
</template>

<script>
	import robbyImageUpload from '@/components/plan-image-upload/up_img'; //上传资质图片组件
	import {
		getGoodsCate,
		addEditGoods,
		goodsDetails,
		shopCate as shopCatemethod
	} from "@/utils/api/api.js";
	import jinedit from "@/components/jinedit/jinedit.vue";
	import {
		getActivityList
	} from '@/utils/api/merchant.js';

	import auiPicker from '@/components/aui-picker/aui-picker.vue';

	export default {
		components: {
			jinedit,
			robbyImageUpload
		},
		computed: {
			staticUrl() { //静态资源地址
				return this.$store.state.staticUrl;
			},
			uploadurl() {
				return this.$store.state.uploadurl;
			}
		},
		data() {
			return {
				catindex: 0,
				shopcate_name: "",

				ischeckedtime: [0],
				money_type: "", //佣金
				myProps: {
					label: 'value',
					value: 'cate_id',
				},
				myProps1: {
					label: 'value',
					value: 'cate_id',
				},
				title: "", //产品标题
				imageData: [], //主图
				imageData1: [], //详情图
				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: "",
				icp: "", //上传的图片 原来的

				//表单的数据
				canform: {
					goods_id: "", //修改传值产品id
					title: "", //产品名称
					intro: "", //产品描述
					cate_id: "", //	产品分类
					photo: "", //产品图片
					num: "", //库存 num
					price: "", // 市场价
					market_price:"",//市场价
					mall_price: "", //商城价
					min_price:"",//会员价
					is_agent_price: "", //代理价
					goods_freight: 0, //运费
					orderby: 100, //排序
					shopcate_id: 0, //商城分类id
					instructions: "", //购买须知
					photos: "", //更多详情图
					details: '', ///商品详情（编辑器插件）
					is_new: "0", //0 1 是否新产品
					is_hot: "0", //0 1 是否热卖产品
					is_tuijian: "0", //0 1是否首页推荐 
					is_member:"1",//是否是会员产品 1否 2是
					is_discount:"1",//是否抵扣专区商品:1=否,2=是
					is_seckill: "0", //0 1 是否秒杀产品
					activity_id: '0', //秒杀activity_id
					activity_list: '', //秒杀列表

					action: "add", //方式（添加：add，修改:edit）
					money: '',
				},
				goodsCate: [],
				shopCate: [],
				cate_name: "", //一级分类的名称
				parent_name: "", //二级分类的名称
				datachind: [], //分类的二级数据的
				c_photos: [], //主图的数据 单张的 存储数据 提交的数据需要转换
				c_photosTwo: [], //更多图里面的数据
				c_pics: [], //主图的数据
				c_picsTwo: [], //更多详情图
				issubmit: true, //重复提交开关
				selchildList: [], //勾选列表选中的值
				isjiumodelshop: {}, //修改信息的时候 默认的信息
				shopCateData: [], //商城分类
			};
		},
		computed: {
			uploadurl1() {
				return this.$store.state.uploadurl1;
			},
			//上传图片传的参数
			c_formData() {
				let obj = {
					model: "goods",
					user_token: this.$store.state.token,
				}
				return obj;
			}
		},
		onLoad(opdata) {
			this.money_type = opdata.money_type

			if (opdata.id != "" && opdata.id != undefined) {
				this.canform.goods_id = opdata.id; //修改的商品id
				this.canform.action = "edit";

				uni.setNavigationBarTitle({
					title: "编辑产品"
				})
			}
			//获取下拉分类选择
			this.goods_type();
		},
		methods: {
			//打开分类选择
			opencatesel(){
				this.$refs.auipicker.open().then(() =>{
					console.log('picker打开');
				});
			},
			pickerCallback(e){
				console.info("分类选择完成e",e);
				let len = e.data.length;
				
				this.parent_name =  e.data[len-1].name;
				this.canform.cate_id = e.data[len-1].id;
				console.info("选中的id",e.data[len-1].id);
			},
			//是否推荐
			changetuijian(e) {
				console.info(e, "eee");
				if (e.target.value.indexOf("1") != -1) { //选中了
					this.canform.is_tuijian = "1";
				} else {
					this.canform.is_tuijian = "0";
				}
			},
			changeviptag(e){
				if (e.target.value.indexOf("2") != -1) { //选中了
					this.canform.is_member = "2";
				} else {
					this.canform.is_member = "1";
				}
			},
			changedhshoptag(e){
				if (e.target.value.indexOf("2") != -1) { //选中了
					this.canform.is_discount = "2";
				} else {
					this.canform.is_discount = "1";
				}
			},
			//获取原来的商品详情信息
			async goodsDetailsfun() {
				let res = await goodsDetails({
					goods_id: this.canform.goods_id,
				});
				if (res.code == 0) {

					console.log("-------------------------------------------")
					console.log(res,"商品详情66")
					console.log("-------------------------------------------")

					this.isjiumodelshop = res.data; //赋值

					this.canform.title = res.data.title;
					this.canform.intro = res.data.intro;
					this.canform.price = res.data.f_market_price; // 市场价 f_market_price
					this.canform.market_price = res.data.f_market_price; // 市场价 f_market_price
					this.canform.mall_price = (res.data.mall_price / 100).toFixed(2); //商城价
					this.canform.min_price = (res.data.f_min_price / 100).toFixed(2); //会员价
					this.canform.is_agent_price = (res.data.is_agent_price / 100).toFixed(2); //代理价
					this.canform.goods_freight = (res.data.goods_freight / 100).toFixed(2); //运费
					this.canform.orderby = res.data.orderby; //排序
					this.canform.shopcate_id = res.data.shopcate_id; //商城分类id
					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; //产品分类 
					this.canform.money = res.data.money; //佣金
					this.canform.activity_id = res.data.activity_id;
					this.canform.is_tuijian = res.data.is_tuijian ? res.data.is_tuijian : '0'; //是否推荐 是否首页推荐
					this.canform.is_member = res.data.is_member?res.data.is_member:"1";
					this.canform.is_discount = res.data.is_discount?res.data.is_discount:"1";
					
					
					
					//处理分类初始值
					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++) {
							let itemtwo = this.goodsCate[i].children[j];
							
							if(itemtwo.children){
								for(let k = 0;k<itemtwo.children.length;k++){
									let itemsan = itemtwo.children[k]
									
									if(itemsan.cate_id==this.canform.cate_id){
										console.info("找到名字了",itemsan.cate_name);
										this.parent_name = itemsan.cate_name; //二级名称
										break;
									}
								}
							}else{
								if(itemtwo.cate_id==this.canform.cate_id){
									console.info("找到名字了",itemtwo.cate_name);
									this.parent_name = itemtwo.cate_name; //二级名称
									break;
								}
							}
							
						}
					}

					//处理产品主图
					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;



					//处理商城分类本地初始值
					this.shopCateData.forEach((item, index) => {
						if (item.cate_id == this.canform.shopcate_id) {
							this.catindex = index;
							this.shopcate_name = item.cate_name;

						}
					})

					//2021年8月24日11:08:58 change
					if(res.data.is_new==1){
						this.selchildList.push("is_new");
					}
					if(res.data.is_hot==1){
						this.selchildList.push("is_hot");
					}
					
					this.$refs.jinedit.initval(this.canform.details);//初始化html

				} 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({

				})
				console.info(res,"商城分类~~");
				if (res.code == 0) {
					this.goodsCate = res.data.goodsCate; //二级商品分类
					this.shopCate = res.data.shopCate; //商家分类

					this.shopCatemethodFun();


				} else {

				}
			},
			//获取商城分类
			async shopCatemethodFun() {
				let res = await shopCatemethod({

				});
				if (res.code == 0) {
					this.shopCateData = res.data;
				}

				//请求初始化的数据信息
				if (this.canform.goods_id != "" && this.canform.goods_id != undefined) {
					this.goodsDetailsfun();
				}
			},
			geteditOk() { //1.xxx
				this.$refs.jinedit.release(true);
			},
			//富文本处理完毕 事件 获取最后的html 数据 子组件调用的
			editOk(e) { //2.xxxx
				console.info("col666", e.html);

				//调用完毕 调用 create_goods
				let htaltag = e.html
				let newStr = htaltag.replace(new RegExp(/\"/g), "");
				// console.log(newStr);
				this.canform.details = newStr; //e.html
				
				console.info("this.canform.details",this.canform.details);

				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;
					console.log(selchildList)
					selchildList.forEach((item, index) => { //勾选的两个
						if (item == "is_new") {
							this.canform.is_new = "1";
						}
						if (item == "is_hot") {
							this.canform.is_hot = "1";
						}
					})
					//添加
					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;
					}
					this.canform.is_tuijian = parseInt(this.canform.is_tuijian);
					this.canform.is_member  = parseInt(this.canform.is_member);
					this.canform.is_discount =  parseInt(this.canform.is_discount);
					this.canform.market_price = this.canform.price;//...
					console.info("i", this.canform);
					console.info("this.canform.is_tuijian", this.canform.is_tuijian);
					
					


					let res = await addEditGoods(this.canform)
					console.info("res", res);

					this.issubmit = true;
					if (res.code == 0) {
						this.$api.msg(res.msg);
						this.initdata(); //初始化数据
						setTimeout(() => {
							uni.navigateBack({

							})
						}, 1000)
					} else {
						this.$api.msg(res.msg);

					}
					this.issubmit = true;
				}

			},
			//多选 勾选 列表
			checkboxChange(e) {
				console.log(this.canform.activity_list)
				this.selchildList = e.detail.value;
			},
			// 改变下拉选项 一级的
			//商城分类
			bindPickerChange(event) {
				console.info(event.detail.value);
				this.catindex = event.detail.value;
				this.shopcate_name = this.shopCateData[event.detail.value].cate_name;
				this.canform.shopcate_id = this.shopCateData[event.detail.value].cate_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) {
				console.info(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
				}
				console.log(this.c_photos)
			},
			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>
