<template>
	<!-- 上传产品 酒店的！！！ ！！  添加和修改 同一个方法 -->
	<!-- addpr 嘿嘿 -->
	<view class="addProjuct yicode">
		
		
		<!-- 表特和类目 -->
		<view class="noecellbox">
			<view class="title">房间标题</view>
			<view class="inputbox flex">
				<input class="input flex1" maxlength="15" type="text" v-model="parameter.title" value="" placeholder-class="plclass" placeholder="请填写产品标题"  />
				<text class="text">{{parameter.title.length}}/15</text>
			</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>
		<!-- 添加图片end -->
		
		<!-- 选择价格和规格 -->
		

		
		<view class="Specificationsbox">
			
			<!-- 多选列表 -->
			<view class="checkboxs" style="margin-top: 0;margin-bottom: 0;">
				<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="sort flex ali-c ">
				<view class="name">房间价格</view>
				<view class="inputs">
					<input type="number"  value="" v-model="parameter.price" placeholder="请输入数字"   class="inpus" />
					<!-- <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 ">
					<input type="number"  value="" v-model="parameter.sku" placeholder="请输入数字"  class="inpus" />
				</view>
			</view>

			<view class="sort flex ali-c ">
				<view class="name">房间类型</view>
	
				<!-- <picker @change="bindPickerChange1" name="type" :value="index" :range="typeList" range-key="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="typeList" :value='index' range-key="name" :props="myProps" @confirm='bindPickerChange1'></lb-picker>
				
				
			</view>
			
		</view>
		<!-- end -->
		
		<view v-show="room_id==''" class="submits active" @tap="create_productFun">发布产品</view>
		
		<view v-show="room_id!=''" class="submits active" @tap="create_productFun">提交修改</view>
		
		
		
	</view>
</template>

<script>
	
	import {hotelroomType,addEditRoom,roomInfo} from "@/utils/api/hotel.js";
	import robbyImageUpload from '@/components/plan-image-upload/up_img';//上传资质图片组件
	
	export default {
		components:{
			robbyImageUpload,
		},
		data() {
			return {
				myProps: {
				      label: 'name',
				      value: 'cate_id',
				},
				index:0,//分类的vlaue
				title:"",//产品标题
				imageData : [],
				is_data:[],//三个多选的值
				specslist:[1],
				listchind:[
					{name:"是否有早餐",value:"1",checked:false},
					{name:"是否有宽带",value:"2",checked:false},
					{name:"是否可取消",value:"3",checked:false},
					// {name:"是否推荐",value:"4"},
				],
				ggss: ['件', '盒', '份', '张', '公斤', '千克'],
				typeList:[],//分类列表
				//上传的参数
				parameter:{
					action:"add",// add添加，edit修改
					//酒店的信息
					title: "",//标题
					photo: [],//图片 就只有 注意格式
					price: "",//价格
					type: 0,//选中 的id typelist 里面的id
					sku: "",//剩余数
					is_zc: 0,//早餐
					is_kd: 0,//宽带
					is_cancel: 0,//是否可以取消
					// room_id 修改的时候传
					
				},
				cate_name:"",
				is_submits:true,//防止重复点击
				
				//上传图片相关的
				c_pics: [],
				c_photos: [],
				c_formData: {
					model:"hotel",//"hotel",
					// shopphoto
				},
				room_id:"",//修改的id 房间id 产品id
				
			};
		},
		computed: {
			staticUrl () {//静态资源地址
				return this.$store.state.staticUrl;
			},
			uploadurl(){
				return this.$store.state.uploadurl;
			},
			uploadurl1(){
				return this.$store.state.uploadurl1;
			},
		},
		onLoad(opendata) {
			this.c_formData.user_token = this.$store.state.token;
			
			if(opendata.id!="" && opendata.id!=undefined && opendata.id!="undefined"){
				this.room_id = opendata.id;//修改id 需要修改的酒店id
				this.getroomInfo();
			}
			
			this.roomType();
		},
		methods:{
			pickerone(){
				this.$refs.picker.show() // 显示
			},
			bindPickerChange1(e){ //选择分类
				this.cate_name = e.item.name;
				this.parameter.type  = e.item.id;
				this.index = e.index;
			},
			//查询修改的信息原有的信息
		 	async getroomInfo(){
				let res = await roomInfo({
					room_id:this.room_id,
				});
				if(res.code==0){
					this.parameter = {
						action:"edit",// add添加，edit修改
						//酒店的信息
						title: res.data.title,//标题
						photo: res.data.photo,//图片 就只有 注意格式
						price: res.data.price,//价格
						type: res.data.type,//选中 的id typelist 里面的id
						sku: res.data.sku,//剩余数
						is_zc: res.data.is_zc,//早餐
						is_kd: res.data.is_kd,//宽带
						is_cancel: res.data.is_cancel,//是否可以取消
						room_id:this.room_id,
					};
					
					this.c_pics = [{code:0,data:res.data.photo,msg:"success",time:"1587802940",}];//模拟上传图片的数据
					this.c_photos = [res.data.photo];
					if(this.room_id!=''){ //发布新酒店
						this.cate_name = res.data.roomType;
					}
					let isarr = [];
					
					//早餐
					if(res.data.is_zc==1){
						this.listchind[0].checked = true;
						isarr.push(1);
					}else{
						this.listchind[0].checked = false;
					}
					//宽度
					if(res.data.is_zc==1){
						this.listchind[1].checked = true;
						isarr.push(2);
					}else{
						this.listchind[1].checked = false;
					}
					//是否可取消
					if(res.data.is_cancel==1){
						this.listchind[2].checked = true;
						isarr.push(3);
					}else{
						this.listchind[2].checked = false;
					}
					
					this.is_data = isarr;//赋值选中的列表
					
				}else{
					this.$api.msg(res.msg);
				}
			},
			// 获取商城商品分类
			async roomType(){
				let res = await hotelroomType({});
				let arr = [];
				 for(let i in res.data){
					arr.push({name:res.data[i],id:i});
				 }
				this.typeList =arr;//分类列表
				if(this.room_id==''){ //发布新酒店
					this.parameter.type = this.typeList[0].id;
					this.cate_name = this.typeList[0].name;
					
				}else{ //修改信息
					
				}
				
				
			
			},
			initdata(){
				this.parameter=  {
					is_cancel: 0,//是否可以取消
					is_kd: 0,//宽带
					is_zc: 0,//早餐
					photo: [],//图片 就只有
					price: "",//价格
					sku: "",//剩余数
					title: "",//标题
					type: 0,//选中 的id typelist 里面的id
				};
				
				this.imageData = [];
			},
			//添加酒店产品方法
			async create_productFun(){
				if(this.is_submits==true){
					this.is_submits = false;
					this.parameter.photo=this.c_photos[0];//赋值 图片
					
					
					this.is_data.forEach((item,index)=>{
						if (item==1){
							this.parameter.is_zc=1;
						} else if (item == 2){
							this.parameter.is_kd = 1;
						} else if (item == 3) {
							this.parameter.is_cancel = 1;
						}
					});
					
					
					// return false;
					
					let res = await addEditRoom(this.parameter)

					if(res.code==0){
						this.is_submits = true;
						// this.initdata();//初始化数据
						this.$api.msg(res.msg);
						//返回
						setTimeout(()=>{
							uni.navigateBack({
								
							})
						},1000)

					}else{
						this.is_submits = true;
						this.$api.msg(res.msg);
					}
				}
			},

			//多选列表
			checkboxChange(e){
				
				
				// this.parameter.is_data = e.detail.value;
				
				this.is_data = e.detail.value;
			},
			
			
			//图片上传
			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  "./addProjuct.scss"
</style>
