<template>
	<view class="container">
		<form @submit="onSubmit">

			<view class="goods-img-block flex flex-center">
				<view class="add-btn" @click="ChooseImage">
					<image v-if="cove_image" class="logo-img" :src="cove_image">
					</image>
					<image v-else-if="thumb" class="logo-img" :src="URL+''+thumb">
					</image>
					<image v-else src="../static/images/icon_18.png" mode="aspectFit" class="add-img-btn"></image>
					<view class="btn-name">添加商品主图</view>
				</view>
			</view>

			<view class="page-block">
				<view class="page-title-block">
					<view class="title">基本信息</view>
				</view>
				<view class="content">
					<view @click="bindCommodity" class="cell flex flex-y-center arr-r" v-if="!id">
						<view class="title-block ">
							<text>商品库</text>
						</view>
						<view class="desc"></view>
					</view>
					<view class="cell flex flex-y-center">
						<view class="title-block required">
							<text>商品名称</text>
						</view>
						<view class="desc">
							<input type="text" :value="info.name" name="name" class="input-box" placeholder="请输入商品名称"
								placeholder-class="desc-placeholder">
						</view>
					</view>
					<view class="cell flex flex-y-center arr-r">
						<view class="title-block required">
							<text>商品分类</text>
						</view>
						<view class="desc">
							<picker mode="selector" :range="goodsTypeList" @change="onGoodsTypeChange"
								:range-key="'title'">
								<view :class="[goodsType?'':'desc-placeholder','input-box']">{{goodsType || '请选择'}}
								</view>
							</picker>
						</view>
					</view>

					<view class="cell flex flex-y-center arr-r">
						<view class="title-block">
							<text>打印标签</text>
						</view>
						<view class="desc">
							<picker mode="selector" :range="listlabel" @change="onlabelTypeChange"
								:range-key="'tag_name'">
								<view :class="[labelType?'':'desc-placeholder','input-box']">{{labelType || '请选择'}}
								</view>
							</picker>
						</view>
					</view>

					<view class="cell flex flex-y-center">
						<view class="title-block">
							<text>商品条形码</text>
						</view>
						<view class="desc">
							<input :value="info.bar_number" name="bar_number"
							class="input-box" placeholder="请输入"
							placeholder-class="desc-placeholder">
						</view>
					</view>
					
					<view class="cell flex flex-y-center">
						<view class="title-block">
							<text>商品销量</text>
						</view>
						<view class="desc">
							<input type="number" :value="info.sales" name="sales" class="input-box" placeholder="请输入"
								placeholder-class="desc-placeholder">
						</view>
					</view>
					
					<view class="cell flex flex-y-center">
						<view class="title-block">
							<text>商品单位</text>
						</view>
						<view class="desc">
							<input type="text" :value="info.unit" name="unit" class="input-box" placeholder="请输入"
								placeholder-class="desc-placeholder">
						</view>
					</view>

					<view class="cell flex flex-y-center">
						<view class="title-block">
							<text>商品状态</text>
						</view>
						<view class="desc">
							<view class="desc flex-center">
								<view class="checklist-box " @click="choicepay(index)"
									v-for="(item,index) of goods_list" :key='index' :class="is_goods==index?'actt':''">
									<view class="radio__inner" :class="is_goods==index?'act_border':''">
										<view :class="is_goods==index?'is-default-checked':''"
											class="radio__inner-icon radio__inner-icon ">
										</view>
									</view> 
									<text class="checklist-text">{{item}}</text>
								</view>
							</view>
						</view>
					</view>

					<view class="cell flex flex-y-center">
						<view class="title-block">
							<text>是否开启起购</text>
						</view>
						<view class="desc">
							<view class="desc flex-center">
								<view class="checklist-box " @click="choiceRebate(index)"
									v-for="(item,index) of rebate_list" :key='index' :class="is_rebate==index?'actt':''">
									<view class="radio__inner" :class="is_rebate==index?'act_border':''">
										<view :class="is_rebate==index?'is-default-checked':''"
											class="radio__inner-icon radio__inner-icon ">
										</view>
									</view> 
									<text class="checklist-text">{{item}}</text>
								</view>
							</view>
						</view>
					</view>

                   <view v-show="is_rebate==1">  
					  <view class="cell flex flex-y-center">
							<view class="title-block">
								<text>第一份商品金额</text>
							</view>
							<view class="desc">
								<input type="text" :value="info.first_price" name="first_price" class="input-box" placeholder="请输入"
									placeholder-class="desc-placeholder">
							</view>
					  </view>
			  
			  
					  <view class="cell flex flex-y-center">
							<view class="title-block">
								<text>第几折</text>
							</view>
							<view class="desc">
								<input type="text" :value="info.rebate" name="rebate" class="input-box" placeholder="请输入"
									placeholder-class="desc-placeholder">
							</view>
					  </view>
					  
					  <view class="cell flex flex-y-center">
							<view class="title-block">
								<text>第几件商品起购</text>
							</view>
							<view class="desc">
								<input type="text" :value="info.many_rebate" name="many_rebate" class="input-box" placeholder="请输入"
									placeholder-class="desc-placeholder">
							</view>
					  </view>
					  
					<view class="cell flex flex-y-center">
								<view class="title-block">
									<text>虚拟销量</text>
								</view>
								<view class="desc">
									<input type="text" :value="info.fictitious" name="fictitious" class="input-box" placeholder="请输入"
										placeholder-class="desc-placeholder">
								</view>
					</view>
				</view>
				
					<view class="cell flex flex-y-center">
						<view class="title-block">
							<text>必选商品</text>
						</view>
						<view class="desc">
							<view class="desc flex-center">
								<view class="checklist-box " @click="choicepayBx(index)"
									v-for="(item,index) of mandatory_list" :key='index'
									:class="is_mandatory==index?'actt':''">
									<view class="radio__inner" :class="is_mandatory==index?'act_border':''">
										<view :class="is_mandatory==index?'is-default-checked':''"
											class="radio__inner-icon radio__inner-icon ">
										</view>
									</view>
									<text class="checklist-text">{{item}}</text>
								</view>
							</view>
						</view>
					</view>
					
					<block v-if="is_mandatory==1">
						<view class="cell flex flex-y-center">
							<view class="title-block">
								<text>外卖必选</text>
							</view>
							<view class="desc">
								<view class="desc flex-center">
									<view class="checklist-box " @click="choiceOutside(index)"
										v-for="(item,index) of outside_list" :key='index'
										:class="is_outside==index?'actt':''">
										<view class="radio__inner" :class="is_outside==index?'act_border':''">
											<view :class="is_outside==index?'is-default-checked':''"
												class="radio__inner-icon radio__inner-icon ">
											</view>
										</view>
										<text class="checklist-text">{{item}}</text>
									</view>
								</view>
							</view>
						</view>
						
						<view class="cell flex flex-y-center">
							<view class="title-block">
								<text>堂食必选</text>
							</view>
							<view class="desc">
								<view class="desc flex-center">
									<view class="checklist-box " @click="choiceCanteen(index)"
										v-for="(item,index) of canteen_list" :key='index'
										:class="is_canteen==index?'actt':''">
										<view class="radio__inner" :class="is_canteen==index?'act_border':''">
											<view :class="is_canteen==index?'is-default-checked':''"
												class="radio__inner-icon radio__inner-icon ">
											</view>
										</view>
										<text class="checklist-text">{{item}}</text>
									</view>
								</view>
							</view>
						</view>
						
						<view class="cell flex flex-y-center">
							<view class="title-block">
								<text>自提必选</text>
							</view>
							<view class="desc">
								<view class="desc flex-center">
									<view class="checklist-box " @click="choiceTake(index)"
										v-for="(item,index) of take_list" :key='index'
										:class="is_take==index?'actt':''">
										<view class="radio__inner" :class="is_take==index?'act_border':''">
											<view :class="is_take==index?'is-default-checked':''"
												class="radio__inner-icon radio__inner-icon ">
											</view>
										</view>
										<text class="checklist-text">{{item}}</text>
									</view>
								</view>
							</view>
						</view>
					</block>
					
					<view class="cell flex flex-y-center">
						<view class="title-block">
							<text>无限库存</text>
						</view>
						<view class="desc">
							<view class="desc flex-center">
								<view class="checklist-box " @click="choicepayKc(index)"
									v-for="(item,index) of pion_list" :key='index' :class="is_pion==index?'actt':''">
									<view class="radio__inner" :class="is_pion==index?'act_border':''">
										<view :class="is_pion==index?'is-default-checked':''"
											class="radio__inner-icon radio__inner-icon ">
										</view>
									</view>
									<text class="checklist-text">{{item}}</text>
								</view>
							</view>
						</view>
					</view>

				    <view class="cell flex flex-y-center">
						<view class="title-block">
							<text>是否启用规格</text>
						</view>
						<view class="desc">
							<view class="desc flex-center">
								<view class="checklist-box " @click="choicepaySpec(index)"
									v-for="(item,index) of spec_list" :key='index' :class="is_gg==index?'actt':''">
									<view class="radio__inner" :class="is_gg==index?'act_border':''">
										<view :class="is_gg==index?'is-default-checked':''"
											class="radio__inner-icon radio__inner-icon ">
										</view>
									</view>
									<text class="checklist-text">{{item}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="page-block" @click="onSpec" v-if="is_gg==1">
				<view class="page-title-block">
					<view class="title">商品规格</view>
				</view>
				<view class="content ">
					<view class="cell flex flex-y-center box-pack-between">
						<view class="title-block">
							<text>商品规格</text>
						</view>
						<view class="flex-y-center" style="font-size: 26rpx;color: #999;">
							<text>{{tableList.length?'已设置':'未设置'}}</text>
							<text class="iconfont icongengduo"></text>
						</view>
				    </view>
				</view>
				<view class="ft24" style="padding: 20rpx;color:red;">
					*商品规格设置完成，需提交才可生效
				</view>
			</view>	
			<!--  -->
			<view class="page-block">
				<view class="page-title-block">
					<view class="title">商品价格</view>
				</view>
				
				<view class="content">
					<view class="cell flex flex-y-center">
						<view class="title-block required">
							<text>商品售价</text>
						</view>
						<view class="desc">
							<input type="digit" :value="info.price" name="price" class="input-box" placeholder="请输入商品售价"
								placeholder-class="desc-placeholder">
						</view>
					</view>
					
					<view class="cell flex flex-y-center">
						<view class="title-block required">
							<text>商品库存</text>
						</view>
						<view class="desc">
							<input type="number" :value="info.stock" name="stock" class="input-box"
								placeholder="请输入商品库存" placeholder-class="desc-placeholder">
						</view>
					</view>
					<view class="cell">
						<view class="flex flex-y-center">
							<view class="title-block">
								<text>包装费</text>
							</view>
							<view class="desc">
								<input type="number" :value="info.box_fee" name="box_fee" class="input-box"
									placeholder="请输入包装费" placeholder-class="desc-placeholder">
							</view>
						</view>
						<view  class="ft22" style="color: red;">说明: 只限外卖自提订单</view>
					</view>
					<view class="cell flex flex-y-center">
						<view class="title-block">
							<text>智豆规则</text>
						</view>
						<view class="desc">
							<view class="desc flex-center">
								<view class="checklist-box " @click="choiceZhidou(index)"
									v-for="(item,index) of zhidou_list" :key='index' :class="is_zhidou==index?'actt':''">
									<view class="radio__inner" :class="is_zhidou==index?'act_border':''">
										<view :class="is_zhidou==index?'is-default-checked':''"
											class="radio__inner-icon radio__inner-icon ">
										</view>
									</view>
									<text class="checklist-text">{{item}}</text>
								</view>
							</view>
						</view>
					</view>
					
			        <view class="cell">
						<view class="flex flex-y-center">
							<view class="title-block">
								<text>赠送智豆</text>
							</view>
							<view class="desc">
								<input type="number" :value="info.zhidou" name="zhidou" 
								class="input-box" placeholder="请输入赠送智豆"
									placeholder-class="desc-placeholder">
							</view>
						</view>
						<view class="ft22" style="color: red;">说明: 如果商户智豆不足，则智豆无法成功赠送给消费者。</view>
					</view>
					
					<view class="cell">
						<view class="flex flex-y-center">
							<view class="title-block">
								<text>佣金比例</text>
							</view>
							<view class="desc">
								<input type="number" :value="info.shared_commission" name="shared_commission" 
								class="input-box" placeholder="请输入佣金比例"
									placeholder-class="desc-placeholder">
							</view>
						</view>
						<view  class="ft22" style="color: red;">说明 : 应用于合伙人商品佣金；%,若是开启了分账打款的话不能超过25%</view>
					</view>

					<view class="cell flex flex-y-center">
						<view class="title-block">
							<text>排序</text>
						</view>
						<view class="desc">
							<input type="number" :value="info.sort" name="sort" class="input-box" 
							placeholder="请输入排序"
								placeholder-class="desc-placeholder">
						</view>
					</view>

				</view>
			</view>
			

			
			<view class="page-block">
				<view class="page-title-block">
					<view class="title">视频号</view>
				</view>
				<view class="content">
					<view class="cell flex flex-y-center">
						<view class="title-block">
							<text>视频号主页id</text>
						</view>
						<view class="desc">
							<input :value="info.finder" name="finder" class="input-box" 
							    placeholder="请输入视频号主页id"
								placeholder-class="desc-placeholder">
						</view>
				    </view>
					 <view class="cell flex flex-y-center">
					 	<view class="title-block">
					 		<text>视频号视频id</text>
					 	</view>
					 	<view class="desc">
					 		<input :value="info.feedid" name="feedid" class="input-box" placeholder="请输入视频号视频id"
					 			placeholder-class="desc-placeholder">
					 	</view>
					</view>
				</view>
			</view>
				
			<view class="page-block">
				<view class="page-title-block"></view>
				<view class="content">
					<view class="cell flex flex-y-center  box-pack-between">
						<view class="title-block">
							<text>商品详情</text>
						</view>
						<view class="flex-center" v-if="id" @click="getEnit">
							<text style="color: #007AFF;">{{is_enit?'取消编辑':'编辑'}}</text>
							<text class="iconfont icongengduo"></text>
						</view>
					</view>
				</view>
				<view class="content">
					<view v-if="id">
						<block v-if="is_enit">
							<textarea style="width: 100%;" :value="info.description" name="description"
								placeholder="输入商品详情" />
						</block>
						<block v-else>
							<rich-text :nodes="info.description"></rich-text>
							<textarea style="width: 100%;display: none;" :value="info.description" name="description"
								placeholder="" />
						</block>
					</view>
					<block v-else>
						<textarea style="width: 100%;" :value="info.description" name="description"
							placeholder="输入商品详情" />
					</block>
				</view>
			</view>
			<!--  -->
			<view style="height: 30rpx;"></view>
			<!--  -->
			<view class="footer-bar">
				<view class="content flex flex-center" style="background: none;position: relative;">
					<button class="btn" hover-class="none" form-type="submit">
						立即提交
					</button>
				</view>
			</view>
			<!--  -->
		</form>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				URL: getApp().globalData.URL,
				thumb: "",
				store_id: "",
				imgid: "",
				goods_list: [
					"下架", "上架",
				],
				is_goods: 0,
				
				rebate_list:[
					"不启用", "启用",
				],
				is_rebate:0,
				
		
				mandatory_list: [
					"不启用", "启用",
				],
				is_mandatory: 0,
				
				outside_list: [
					"不启用", "启用",
				],
				is_outside: 0,
				
				canteen_list: [
					"不启用", "启用",
				],
				is_canteen: 0,
				
				take_list: [
					"不启用", "启用",
				],
				is_take: 0,

				pion_list: [
					"不启用", "启用",
				],
				is_pion: 0,
                    
				zhidou_list: [
					"数量", "百分比",
				],		
				is_zhidou: 0,
				
				spec_list:[
				   "不启用","启用",
				],
				is_gg:0,
				goodsTypeList: [],
				goodsType: "",
				goodsTypeid: "",
				listlabel: [],
				labelType: "",
				labelTypeid: "",
				info: {},
				id: "",
				is_enit: false,
				is_out:true,
				tableList:null,
				edit_value:null,
				mySpecList:null,
				cove_image:'',
			}
		},

		onLoad(e) {
			this.store_id = uni.getStorageSync("store_id");
			this.storeinfo();
			this.getData();
			if (e.id) {
				this.id = e.id;
				this.goodsinfo(e.id);
			}
		},

		methods: {
			bindCommodity(){
				uni.navigateTo({
					url:"./goods"
				})
			},
			onSpec(){
				let id = '';
				if(this.tableList && this.mySpecList){
					id = 'spec'
					uni.setStorageSync('obj'+id,{
						edit_value: this.edit_value,spec:JSON.parse(this.mySpecList),spec_val:JSON.parse(this.tableList),
					})	
				}else{
					if(this.id){
						let {edit_value,spec,spec_val } = this.info
						id = this.info.id
						uni.setStorageSync('obj'+id,{
							edit_value,spec,spec_val,
						})
					}
				}
				uni.navigateTo({
					url:'./specs?id='+ id
				})
			},
			
			getEnit() {
				this.is_enit = !this.is_enit;
			},

			onGoodsTypeChange(e) {
				this.goodsType = this.goodsTypeList[e.detail.value].title;
				this.goodsTypeid = this.goodsTypeList[e.detail.value].id;
			},
			onlabelTypeChange(e) {
				this.labelType = this.listlabel[e.detail.value].tag_name;
				this.labelTypeid = this.listlabel[e.detail.value].id;
			},

			storeinfo() {
				this.request({
					url: 'Smdcshop/cygoods_category_index',
					data: {
						store_id: uni.getStorageSync("store_id")
					}
				}).then(res => {
					if (res.code == 200) {
						this.goodsTypeList = res.data
					}
				})
			},

			goodsinfo(id) {
				this.request({
					url: 'Smdcshop/goodsinfo',
					data: {
						id,
					}
				}).then(res => {
					if (res.code == "200") {
						this.info = res.data
						this.thumb = res.data.thumb;
						for (let i of this.goodsTypeList) {
							if (i.id == res.data.category_id) {
								this.goodsType = i.title
							}
						}
						this.goodsTypeid = res.data.category_id
						for (let i of this.listlabel) {
							if (i.id == res.data.label_id) {
								this.labelType = i.tag_name
							}
						}
						this.labelTypeid = res.data.label_id
						this.is_goods = res.data.status;
						this.is_mandatory = res.data.mandatory;
						this.is_outside = res.data.outside;
						this.is_canteen=res.data.canteen;
						this.is_take=res.data.take;
						this.is_rebate=res.data.is_rebate;
						this.is_pion = res.data.pion;
						this.is_zhidou = Number(res.data.is_zhidou)-1;
						this.is_gg= Number(res.data.is_gg)-1;
						this.edit_value = res.data.edit_value
						this.tableList = JSON.stringify(res.data.spec_val);
						
					}
				})
			},

			getData() {
				this.request({
					url: 'Smdcshop/print_tag',
					data: {
						store_id: uni.getStorageSync("store_id")
					}
				}).then(res => {
					if (res.code == "200") {
						this.listlabel = res.data
					}
				})
			},


			choiceRebate(index) {
				this.is_rebate = index;
			},
			
			choicepay(index) {
				this.is_goods = index;
			},

			choicepayBx(index) {
				this.is_mandatory = index;
			},
			
			choiceOutside(index){
				this.is_outside = index;
			},
			
			choiceTake(index){
				this.is_take=index;
			},
			
			choiceCanteen(index){
				this.is_canteen = index;
			},
			
			choicepayKc(index) {
				this.is_pion = index;
			},
			
			choiceZhidou(index) {
				this.is_zhidou = index;
			},
			
			choicepaySpec(index) {
				this.is_gg = index;
			},

			ChooseImage(e) {
				// let type = e.currentTarget.dataset.type;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original','compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: (res) => {
						console.log(res)
						this.cove_image ='';
						// var tempFilesSize = res.tempFiles[0].size;//获取图片的大小，单位B
						res.tempFilePaths.forEach((v, i) => {
							// console.log(v)
							this.Upload({
								url: "Smdcshop/upload",
								data: {
									url: v,
									type: "",
									token: "",
									admin_id: uni.getStorageSync("admin_id")
								}
							}).then(res => {
								console.log(res, "res")
								this.imgid = res.id;
								this.thumb = res.src;
							}).catch(err => {
								uni.showToast({
									title: err.message,
									icon: 'none'
								})
							});
						})
					},
				});
			},

			onSubmit(e) {
				// console.log(this.tableList,"tableList")
				let params = {
						category_id: this.goodsTypeid,
						label_id: this.labelTypeid,
						status: this.is_goods,
						admin_id: uni.getStorageSync("admin_id"),
						store_id: this.store_id,
						
						thumb: this.cove_image ?'':this.imgid,
						
						image:this.cove_image||'',
						
						is_rebate:this.is_rebate,
						mandatory: this.is_mandatory,
						outside:this.is_outside,
						canteen:this.is_canteen,
						take:this.is_take,
						pion: this.is_pion,
						bar_number:this.bar_number,
						is_zhidou: Number(this.is_zhidou) +1,
					
						spec:this.tableList,
						edit_value:this.edit_value,
						is_gg: this.is_gg + 1,
						// mySpecList:this.mySpecList
					},
					
					url= "Smdcshop/goods_save";
				var data = Object.assign(params, e.detail.value);
				// console.log(data, "data")
				if (this.info.id) {
					data.id = this.info.id
					// url = "Smdcshop/goods_save"
				}
				//  else {
				// 	url = 'Smdcshop/goods_save'
				// }
				if (!data.name || !data.category_id || !data.price || !data.stock) {
					uni.showToast({
						title: "必填项不能为空",
						icon: 'none'
					})
					return false
				}
				// if(!this.is_out){
				// 	setTimeout(()=>{
				// 		this.is_out=true;
				// 	},1000)
				// 	return
				// }
				// this.is_out=false;
				this.request({
					url,
					data: data
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 3000)
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				});
			},

		},



	}
</script>



<style>
	@import url("../static/css/common.css");

	page {
		background-color: #f4f5f7;
	}

	.goods-img-block {
		width: 100vw;
		height: 70vw;
		background-color: #F4F6FA;
	}

	.goods-img-block .add-btn .add-img-btn {
		display: block;
		width: 64rpx;
		height: 64rpx;
		margin: 0 auto;
	}

	.goods-img-block .add-btn .btn-name {
		font-size: 32rpx;
		color: #999;
		line-height: 45rpx;
		margin-top: 16rpx;
	}


	.checklist-box {

		display: -webkit-box;
		display: -webkit-flex;
		display: flex;

		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		margin: 5px 0;
		margin-right: 22px;
	}

	.radio__inner {
		-webkit-flex-shrink: 0;
		flex-shrink: 0;

		display: -webkit-box;
		display: -webkit-flex;
		display: flex;

		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		position: relative;
		border: 1px solid #DCDFE6;
		border-radius: 2px;
		box-sizing: border-box;
		width: 16px;
		height: 16px;
		border-radius: 16px;
		background-color: #fff;
		z-index: 1;
		-webkit-transition: border-color .3s;
		transition: border-color .3s;
	}

	.radio__inner-icon {
		width: 8px;
		height: 8px;
		border-radius: 10px;
		opacity: 0;
		-webkit-transition: -webkit-transform .3s;
		transition: -webkit-transform .3s;
		transition: transform .3s;
		transition: transform .3s, -webkit-transform .3s;
	}

	.is-default-checked {
		opacity: 1;
		background-color: #007aff;
		-webkit-transform: rotate(45deg) scaleY(1);
		transform: rotate(45deg) scaleY(1);
	}

	page .act_border {
		border-color: #007aff;
	}

	.checklist-text {
		font-size: 28rpx;
		margin-left: 5px;
		-webkit-transition: color 0.2s;
		transition: color 0.2s;
		color: #000;
	}

	/*  */
</style>
