<template>
	<!-- 添加外卖商品 -->
	<view class="productpages">
		<!-- input -->
		
		<view class="noecellbox">
			<view class="title">产品名称</view>
			<view class="inputbox flex">
				<input class="input flex1"  type="text" v-model="form.product_name" value="" placeholder-class="plclass" placeholder="请填写产品名称"  />
				
			</view>
		</view>
		
		<view class="noecellbox">
			<view class="title">产品价格</view>
			<view class="inputbox flex">
				<input class="input flex1"  type="text" v-model="form.price" value="" placeholder-class="plclass" placeholder="请填写产品价格"  />
				
			</view>
		</view>
		
		<view class="briefIntroduction">
			<view class="title">产品描述</view>
			<textarea class="textarea" v-model="form.desc" placeholder="请输入产品描述"/>
		</view>
		
		<view class="noecellbox">
			<view class="title">餐盒费</view>
			<view class="inputbox flex">
				<input class="input flex1"  type="text" v-model="form.lunch_box_fee" value="0" placeholder-class="plclass" placeholder="请填写产品餐盒费"  />
				
			</view>
		</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="chindformList" range-key="cate_name">
					<view class="inputs">
						<view class="" style="padding-left: 15upx;">{{cate_name}}</view>
					</view>
				</picker> -->
				
				<view class="inputs" @tap='pickerone'>
					<view class="" style="padding-left: 15upx;">{{cate_name}}</view>
				</view>
				
				<lb-picker ref="picker" :list="chindformList" :value='index' range-key="label" :props="myProps" @confirm='confirm'></lb-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_onImg1" @move="onMove_c" :limit="1"></robby-image-upload>
		</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>

		<view class="submitbtn active" @tap="getForm">提交</view>

	</view>
</template>

<script>
	// https://ext.dcloud.net.cn/plugin?id=652#QS-textarea 参照文档
	import QSApp from '@/components/QS-inputs-split/js/app.js';
	import {addEditEleProduct,typeManager,eleProductInfo} from "@/utils/api/api.js";
	import robbyImageUpload from '@/components/plan-image-upload/up_img';//上传资质图片组件
	export default {
		components:{
			robbyImageUpload
		},
		data() {
			return {
				myProps: {
				      label: 'cate_name',
				      value: 'cate_id',
				},
				name: 'product',
				form: {
					picker_custom2: {},
					piclist: [],//图
					checkbox: [],//断选
					product_id:"",//修改的时候的产品id
					product_name:"",//产品名称
					desc:"",//产品描述
					cate_id:"",//产品分类id
					photo:"",//产品图片
					lunch_box_fee:"",//餐盒费
					is_new:"",//是否新产品
					is_hot:"",//是否热卖产品
					action:"add",//	方式（添加：add，修改:edit）
					price:"",//价格
					
				},
				chindformList:[],
				//上传图片相关的
				c_pics: [],
				c_photos: [],
				c_formData: {
					model:"shopphoto",
				},
				product_id:"",//修改产品时候用的修改id
				defaultinfo:{},//修改的时候的默认初始数据
				listchind:[
					{name:"是否新产品",value:"is_new",checked:false},
					{name:"是否热卖产品",value:"is_hot",checked:false},
				],
				selchildList:[],
				cate_name:"",
				index:0,
			}
		},
		computed: {
			uploadurl1(){
				return this.$store.state.uploadurl1;
			},
			
		},
		onReady() {
			
		},
		onLoad(opdata) {
			this.c_formData.user_token = this.$store.state.token;
			
			if(opdata.id!=undefined){
				this.product_id = opdata.id;
				
				uni.setNavigationBarTitle({
					title:"修改外卖产品"
				})
			}else{
				uni.setNavigationBarTitle({
					title:"添加外卖产品"
				})
			}
			
			this.typeManagerfun();
		},
		methods: {
			confirm(e){
				console.log(e)
				// this.parent_name=e.item.value;
				// this.canform.cate_id=;
				this.cate_name = e.item.cate_name;
				this.form.cate_id =e.item.cate_id;
				this.index = e.index;
			},
			pickerone(){
				this.$refs.picker.show() // 显示
			},
			//分类选中
			bindPickerChange(e){
				// cate_name
				//from.cate_id
				console.info(e.detail.value);
				
				this.cate_name = this.chindformList[e.detail.value].cate_name;
				this.form.cate_id = this.chindformList[e.detail.value].cate_id;
				this.index = e.detail.value;
				
			},
			//标记选中属性列表
			checkboxChange(e){
				console.log(e);
				this.selchildList = e.detail.value;
			},
			//修改的时候赋初始值
		 	async eleProductInfofun(){
				let res = await eleProductInfo({
					product_id:this.product_id,
				});
				if(res.code==0){
					this.defaultinfo = res.data;
					this.form.product_name = res.data.product_name;//名称
					this.form.desc = res.data.desc;//描述
					this.form.lunch_box_fee = res.data.lunch_box_fee/100;//餐盒费
					this.form.price = res.data.price/100;//价格
					this.form.photo = res.data.photo;//图片
					
					this.form.cate_id = res.data.cate_id;//分类id
					//下拉分类 初始值
					this.chindformList.forEach((item,index)=>{
						if(item.cate_id==res.data.cate_id){
							this.index =index;
							this.cate_name = item.cate_name;
						}
					});
					
					//属性选默认值
					if(res.data.is_new==1){
						this.selchildList.push("is_new");
						this.listchind[0].checked = true;
					}else{
						this.listchind[0].checked = false;
					}
					if(res.data.is_hot==1){
						this.selchildList.push("is_hot");
						this.listchind[1].checked = true;
					}else{
						this.listchind[1].checked = false;
					}
					
					//处理上传的图片默认值
					//  res.data.photo
					this.c_pics = [{code:0,data:res.data.photo,msg:"success",time:"1587101904"}];
					this.form.photo = res.data.photo;
					this.c_photos = ["res.data.photo"]
					
				}else{
					this.$api.msg(res.msg);
				}
			},
			getForm() {
				
				if(this.c_pics.length==0){
					this.$api.msg("请先上传图片");
					return false;
				}
				
				let can = {
					product_name:this.form.product_name,//产品名称
					desc:this.form.desc,//产品描述
					lunch_box_fee:this.form.lunch_box_fee,//餐盒费
					action:this.form.action,//方式（添加：add，修改:edit）
					price:this.form.price,//价格
					cate_id:this.form.cate_id,
					// photo:"",
					//product_id
				};
				
				if(this.selchildList.includes("is_new")){
					can.is_new = 1;
				}else{
					can.is_new = 0;
				}
				
				if(this.selchildList.includes("is_hot")){
					can.is_hot = 1;
				}else{
					can.is_hot = 0;
				}
				
		
				
				if(this.c_pics.length!=0){
					can.photo = this.c_pics[0].data;//上传的图片
				}
				
				
				if(this.product_id!=""){
					can.action = "edit";
					can.product_id = this.product_id;
				}
				
				console.info(can,"can");
				//return false;
				
				//添加修改外卖产品
				addEditEleProduct(can).then((res1)=>{
					if(res1.code==0){
						this.$api.msg(res1.msg);
						setTimeout(()=>{
							uni.navigateBack({
								
							})
						},1000)
					}else{
						this.$api.msg(res1.msg);
					}
				})
			},
			//获取外卖分类列表 用于下拉选择
			async typeManagerfun(){
				let res = await typeManager({
					
				});
				if(res.code==0){
					this.chindformList = res.data;
					
					if(this.product_id!=undefined && this.product_id!=""){
						//这里调用
						this.eleProductInfofun();
					}
				}else{
					this.$api.msg(res.msg);
				}
			},
			//图片上传
			c_delImage(e) {
				let arr = []
				for (let k in e.allImages) {
					arr[k] = e.allImages[k].id
				}
				this.c_photos = arr
			},
			c_onImg1(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
				} 
			}
		},
		
	}
</script>


<style lang="scss">
	@import  "../edit/product/addProjuct.scss";
	page{
		background: #fff;
	}
	.productpages{
		background: #FFFFFF;
	}
	
	.submitbtn{
		margin: 60upx 24upx;
		height:88upx;
		line-height: 88upx;
		text-align: center;
		background:rgba(254,197,156,1);
		border-radius:6upx;
		font-size:32upx;
		color:rgba(255,255,255,1);
	}
	
	.submitbtn.active{
		background: #FF6900;
	}
	.briefIntroduction,.Specificationsbox,.addmigs,.checkboxs{
		border-bottom:1px solid #F5F2F2;
		border-radius: 0 !important;
	}
</style>

