<template>
	<view class="addGoods">
		<far-bottom></far-bottom>
		<view  style="overflow: auto;padding-bottom: 200upx;">
			<view class="b-f1">
				<view class="f-l">
					<text class="keys">商品名称</text><text class="xingxing">*</text>
				</view>
				<view class="f-r">
					<input class="uni-input" placeholder="请输入商品名称" style="text-align: right;" v-model="form.name" />
				</view>
			</view>
			<view class="b-f1">
				<view class="f-l">
					<text class="keys">商品分类</text><text class="xingxing">*</text>
				</view>
				<view class="f-r">
					<picker @change="bindPickerChange" :value="index" :range="array">
					    <view class="uni-input t-r f-34" style="color: #999999;">{{form.cateid}}</view>
					</picker>
				</view>
			</view>
			
			<view class="b-f1">
				<view class="f-l">
					<text class="keys">价格</text><text class="xingxing">*</text>
				</view>
				<view class="f-r">
					<input class="uni-input" placeholder="请输入销售价格" type="digit" style="text-align: right;" v-model="form.price" />
				</view>
			</view>
			<view class="b-f1">
				<view class="f-l">
					<text class="keys">市场价</text><text class="xingxing">*</text>
				</view>
				<view class="f-r">
					<input class="uni-input" type="digit" placeholder="请输入商品市场价" style="text-align: right;" cursor-spacing="140" v-model="form.oldprice" />
					<!-- <input placeholder="请输入商品市场价(元)" cursor-spacing="140" class="inputMain" type="digit" v-model="goodsInfo.goods.oldprice" @blur="handleoldprice"						 /> -->
				</view>
			</view>
			<view class="b-f1">
				<view class="f-l">
					<text class="keys">包装费</text><text class="xingxing">*</text>
				</view>
				<view class="f-r">
					<input class="uni-input" placeholder="请输入包装费" type="number" style="text-align: right;" v-model="form.deliveryprice" />
				</view>
			</view>
			<view class="uploadView diy-nav-list border-line b-f1">
				<view class="f-l" style="line-height: 150upx;"><text class="keys">缩略图</text></view>
				<view class="verMid uploadButton f-r" >
					<!-- 图片预览循环模板 -->
					<view class="imgPreview" v-if="form.thumb != ''" style="position: relative;display: inline-block;">
						<image :src="form.thumb" />
						<image :src="imgfixUrls + 'merchant/close.png'" style="width: 30upx;height: 30upx;" class="close" @click="closeImg(1)" />
					</view>
					<!-- 图片预览循环模板 -->
					<view class="userImgUpdata" @click="updataImg(1)" v-else>
						<image :src="imgfixUrls + 'merchant/addImg.svg'" />
					</view>
				</view>
			</view>
			<view class="uploadView b-f1">
				<view class="f-l" style="line-height: 150upx;"><text class="keys">轮播图</text></view>
				<view class="verMid uploadButton f-r dis-flex swiperBox" style="flex-wrap: wrap;justify-content: space-between;">
					<!-- 图片预览循环模板 -->
					<block v-for="(item, index) in form.thumbs" class="verMid" style="flex: 0.33;" v-if="item">
						<view class="imgPreview verMid" v-if="form.thumbs !== []" style="position: relative;">
							<image :src="item" />
							<image :src="imgfixUrls + 'merchant/close.png'" style="width: 30upx;height: 30upx;" class="close" @click="closeImg(2, index)" />
						</view>
					</block>
					<!-- 图片预览循环模板 -->
					<view class="userImgUpdata verMid" @click="updataImg(2)" v-if="form.thumbs.length < 6" >
						<image :src="imgfixUrls + 'merchant/addImg.svg'" />
					</view>
				</view>
			</view>
			<view class="b-f1">
				<view class="f-l">
					<text class="keys">状态</text><text class="xingxing">*</text>
				</view>
				<view class="f-r">
					<picker @change="shangjia" :value="indexis" :range="arrays">
					    <view class="uni-input t-r f-34" style="color: #999999;">{{status}}</view>
					</picker>
				</view>
			</view>
			<view class="b-f1">
				<view class="f-l">
					<text  class="keys">商品规格</text>
				</view>
				<view class="f-r t-r" style="font-size: 28upx; color: #999999;" @click="openguige">
					规格<text class="iconfont icon-right" style="font-size: 28upx;"></text>
				</view>
			</view>
			<view class="b-f1">
				<view class="f-l">
					<text  class="keys">商品详情</text>
				</view>
				<view class="f-r t-r" style="font-size: 28upx; color: #999999;" @click="openrithtext">
					详情编辑<text class="iconfont icon-right" style="font-size: 28upx;"></text>
				</view>
			</view>
			<view  style="position: fixed;left: 0;bottom: 0;width: 92%;padding: 30upx;">
				<button type="primary" @click="addGoods">确认{{addgood}}</button>
			</view>
		</view>
		
		<view class="popfixed" v-if="show">
			<view class="f-w" style="padding-bottom: 50upx;">
				商品规格<text class="f-20 col-9">(点击下列规格进行修改)</text> <text class="dis-il-block iconfont icon-close" style="float: right;padding: 0upx 20upx 20upx;" @click="closePop"></text>
			</view>
			<view  style="height: 700upx;overflow: auto;" v-if="form.optionArray.length > 0">
				<view  @click="modification(item,index)" 
				style="border: 1px solid #f8f8f8;border-radius: 15upx; padding: 50upx;background-color: #FFFFFF;margin-bottom: 30upx;position: relative;" v-for="(item,index) in form.optionArray" :key="index"  >
					<view class="iconfont icon-close" @click.stop="modificationClose(item.name,index)" style="position: absolute;right: 10upx;top: 10upx;color: #999999;">
						
					</view>
					<view class="dis-flex" style="padding-bottom: 10upx;border-bottom: 1px solid #f1f1f1;">
						<view class="flex-box" style="font-size: 30upx;">
							商品名称
						</view>
						<view class="flex-box t-r" style="font-size: 30upx;color: #999999;">
							{{item.name}}
						</view>
					</view>
					<view class="dis-flex" style="padding-bottom: 10upx;padding-top: 10upx;border-bottom: 1px solid #f1f1f1;">
						<view class="flex-box" style="font-size: 30upx;">
							商品价格
						</view>
						<view class="flex-box t-r" style="font-size: 30upx;color: #999999;">
							￥{{item.price}}
						</view>
					</view>
					<view class="dis-flex" style="padding-bottom: 10upx;padding-top: 10upx;border-bottom: 1px solid #f1f1f1;">
						<view class="flex-box" style="font-size: 30upx;">
							商品市场价
						</view>
						<view class="flex-box t-r" style="font-size: 30upx;color: #999999;">
							￥{{item.oldprice}}
						</view>
					</view>
					<view class="dis-flex" style="padding-bottom: 10upx;padding-top: 10upx;border-bottom: 1px solid #f1f1f1;">
						<view class="flex-box" style="font-size: 30upx;">
							单日库存
						</view>
						<view class="flex-box t-r" style="font-size: 30upx;color: #999999;">
							{{item.daystock}}
						</view>
					</view>
					<view class="dis-flex" style="padding-top: 10upx;">
						<view class="flex-box" style="font-size: 30upx;">
							全部库存
						</view>
						<view class="flex-box t-r" style="font-size: 30upx;color: #999999;">
							{{item.allstock}}
						</view>
					</view>
				</view>
				
			</view>
			<view  style="height: 700upx;overflow: auto;" v-else>
				<view class="f-40 t-c" style="color: #999999;" >
					暂无规格数据,请点击按钮进行添加~
				</view>
			</view>
			<view  style="height: 160upx;width: 100%;">
				
			</view>
			<view :class="android?'bottom-33':'bottom-30'" style="position: relative;z-index: 98;width: 90%;padding: 30upx;">
				<button type="primary" @click="addSpecification">添加规格</button>
			</view>
		</view>
		<popup-view :show="richText" type="center" @clickmask="richText = false">
			<view class="b-f" style="width: 80vw;height: 80vh;border-radius: 10upx;overflow: auto;" v-if="form.detail">
				<jinEdit placeholder="请输入内容" @editOk="editOk" uploadFileUrl="/#" :html="form.detail"></jinEdit> 
			</view>
		</popup-view>
		<popup-view :show="shows" type="center" @clickmask="onShows" :bottom="'0%'">
			<view class="b-f" style="padding: 30upx;width: 65vw;border-radius: 15upx;">
				<view class="f-w f-34" style="padding: 30upx 0;">
					规格添加<text class="dis-il-block iconfont icon-close" style="float: right;padding: 0upx 20upx 20upx;" @click="onShows"></text>
				</view>
				<view class="dis-flex f-30" style="padding-bottom: 20upx;">
					<view  style="flex: 0.3;">
						规格名称
					</view>
					<view  style="flex: 0.7;">
						<input v-if="shows" class="uni-input" placeholder="请输入规格名称" @blur="toTop"  style="text-align: right;" v-model="addSpecifications.name" />
					</view>
				</view>
				<view class="dis-flex f-30" style="padding-bottom: 20upx;">
					<view  style="flex: 0.3;">
						价格
					</view>
					<view  style="flex: 0.7;">
						<input v-if="shows" class="uni-input" type="digit"  placeholder="请输入销售价格" @blur="toTop" style="text-align: right;"  v-model="addSpecifications.price" />
					</view>
				</view>
				<view class="dis-flex f-30" style="padding-bottom: 20upx;">
					<view  style="flex: 0.3;">
						市场价
					</view>
					<view  style="flex: 0.7;">
						<input v-if="shows" class="uni-input" type="digit" placeholder="请输入规格市场价" style="text-align: right;" @blur="toTop" v-model="addSpecifications.oldprice" />
					</view>
				</view>
				<view class="dis-flex f-30" style="padding-bottom: 20upx;">
					<view  style="flex: 0.3;">
						单日库存
					</view>
					<view  style="flex: 0.7;">
						<input v-if="shows" class="uni-input" type="number" placeholder="请输入单日库存" style="text-align: right;" @blur="toTop" v-model="addSpecifications.daystock" />
					</view>
				</view>
				<view class="dis-flex f-30" style="padding-bottom: 50upx;">
					<view  style="flex: 0.3;">
						全部库存
					</view>
					<view  style="flex: 0.7;">
						<input v-if="shows" class="uni-input" type="number" placeholder="请输入全部库存" style="text-align: right;" @blur="toTop" v-model="addSpecifications.allstock" />
					</view>
				</view>
				<view >
					<button type="warn" @click="confirmAdd">确 定</button>
				</view>
			</view>
		</popup-view>
		<view class="popsocks" v-if="shcket" @click.stop.prevent="shcketto">
			
		</view>
	</view>
</template>

<script>
	// #ifdef H5
	import wxApi from '@/common/js/wxApi.js';
	// #endif
	import App from "@/common/js/app.js";
	import PopupView from '@/components/template/PopManager.vue'
	import jinEdit from '@/components/jin-edit/jin-edit.vue';
	export default{
		components:{
			PopupView,
			jinEdit
		},
		data(){
			return{
				arrays:['上架','下架'],
				status:'上架',
				form:{
					name:'',
					cateid:'',
					price:'',
					oldprice:'',
					deliveryprice:'',
					thumb:'',
					thumbs:[],
					optionArray:[],
					detail:''
				},
				shows:false,
				array: [],
				index:0,
				show:false,
				shcket:false,
				addSpecifications:{
					name:'',
					price:'',
					oldprice:'',
					allstock:'',
					daystock:''
				},
				storeid:'',
				id:'',
				indexis:0,
				addgood:'添加',
				android:true,
				richText:false,
				richTextVter:'',
				changedIndex:0,
				flag:false
			}
		},
		onLoad(options) {
			let _this = this;
			this.android = uni.getSystemInfoSync().platform === 'android';
			_this.id = options.id;
			if(_this.id){
				this.addgood = '修改';
			}
			uni.getStorage({
				key: 'checkStoreid',
				success: function(res) {
					_this.storeid = res.data;
					_this.getform();
				}
			});
			
			
		},
		watch:{
			shows(newVal){
				if(!newVal){
					this.flag = false;
				}
			}
		},
		methods:{
			modificationClose(name,index){
				let _this = this;
				App.showError(
					`确定删除规格${name}`,
					data => {
						if (data.confirm) {
							_this.form.optionArray.splice(index,1)
						}
					},
					true
				);
			},
			modification(item,index){
				let _this = this;
				_this.addSpecifications = item;
				_this.shows = true;
				_this.flag = true;
				_this.changedIndex = index;
			},
			openrithtext(){
				this.richText = true;
			},
			editOk(res) {
			    console.log(res.html);
							 this.richTextVter = res.html;
							 this.richText = false;
			},
			// 页面滚回
			toTop() {
				  uni.pageScrollTo({
				    scrollTop: 0,
				    duration: 0
				  })
			},
			shcketto(){
				this.show = !this.show;
				this.shcket = !this.shcket;
			},
			getform(){
				let _this = this;
				App._post_form(`&p=citydelivery&do=createGoodsPage&storeid=${this.storeid}&id=${this.id}`,{},res=>{
					if(Array.isArray(res.data.goods)){
						_this.array = [];
						_this.form.detail = '请输入内容'
						_this.cateList = res.data.catelist;
						_this.cateList.map(item=>{
							_this.array.push(item.name);
						});
						_this.form.cateid = _this.array[_this.index];
						console.log(222)
					}else{
						_this.form.optionArray = [];
						_this.form = res.data.goods;
						if(res.data.goods){
							_this.$set(_this.form,'detail',res.data.goods.detail);
							if(!_this.form.detail){
								_this.$set(_this.form,'detail','请输入内容');
							}
							if(!res.data.goods.optionArray){
								_this.form.optionArray = [];
							}
						}
						// debugger
						console.log(_this.form.detail)
						_this.cateList = res.data.catelist;
						_this.cateList.map(item=>{
							_this.array.push(item.name);
						});
						if(Number(_this.form.cateid)){
							_this.cateList.map(item=>{
								if(item.id == _this.form.cateid){
									_this.form.cateid = item.name;
								}
							})
						}else{
							_this.form.cateid = _this.array[_this.index];
						}
						if(!_this.form.thumbs){
							_this.form.thumbs = [];
						}
						
					}
					
				})
			},
			addGoods(){
				// debugger
				console.log(this.form);
				debugger
				if(!this.form.name){
					uni.showToast({
						title:'商品名称不能为空',
						icon:'none'
					})
				}else if(!this.form.cateid){
					uni.showToast({
						title:'商品分类不能为空',
						icon:'none'
					})
				}else if(!this.form.price){
					uni.showToast({
						title:'商品价格不能为空',
						icon:'none'
					})
				}else if(!this.form.oldprice){
					uni.showToast({
						title:'商品市场价不能为空',
						icon:'none'
					})
				}else if(!this.form.deliveryprice){
					uni.showToast({
						title:'配送价格不能为空',
						icon:'none'
					})
				}else{
					if(this.form.optionArray.length == 0){
						this.form.optionstatus = 0;
					}else{
						this.form.optionstatus = 1;
					}
					let data = this.form;
					data.storeid = this.storeid;
					let jsonString;
					let param = '';
					// debugger
					
					if(data.optionArray){
						jsonString = JSON.stringify(data.optionArray);
						let base64 = new this.$util.Base64();
						param = base64.encode(jsonString);
					};
					data.optionArray = param;
					data.detail = (this.richTextVter !== '请输入内容')?this.richTextVter:'';
					// delete data.optionArray;
					this.cateList.map(item=>{
						if(item.name == data.cateid){
							data.cateid = item.id;
						}
					})
					if(this.status == '上架'){
						data.status = '2';
					}else{
						data.status = '4';
					}
					
					
					console.log(data);
					App._post_form(`&p=citydelivery&do=saveDeliveryGoods`,data,res=>{
						console.log(res);
						uni.$emit('datagoods',data)
						uni.showToast({
							title:`${this.addgood}成功`
						})
						uni.navigateBack();
					})
				}
			},
			confirmAdd(){
				let state = true;
				Object.values(this.addSpecifications).forEach(item=>{
					if(!item){
						uni.showToast({
							title:'请填写完整规格数据',
							icon:'none'
						})
						state = false;
					}
				})
				if(state){
					console.log(Object.values(this.addSpecifications));
					if(this.flag){
						this.form.optionArray.splice(this.changedIndex,1,this.addSpecifications);
					}else{
						this.form.optionArray.push(this.addSpecifications);
					}
					this.addSpecifications = {
					name:'',
					price:'',
					oldprice:'',
					daystock:'',
					allstock:''
				},
					this.shows = false;
					if(this.flag){
						uni.showToast({
							title:'修改成功'
						})
					}else{
						uni.showToast({
							title:'添加成功'
						})
					}
					
				}
				
			},
			// 关闭添加规格弹窗
			onShows(){
				this.shows = !this.shows;
			},
			// 打开添加规格弹窗
			addSpecification(){
				this.addSpecifications.name = '';
				this.addSpecifications.price = '';
				this.addSpecifications.oldprice = '';
				this.addSpecifications.allstock = '';
				this.addSpecifications.daystock = '';
				this.shows = !this.shows;
			},
			// 关闭规格列表弹窗
			closePop(){
				this.show = !this.show;
				this.shcket = !this.shcket;
			},
			// 打开规格列表弹窗
			openguige(){
				this.show = !this.show;
				this.shcket = !this.shcket;
			},
			// prcker监听
			bindPickerChange(e){
				this.index = e.target.value;
				this.form.cateid = this.array[this.index];
			},
			shangjia(e){
				this.indexis = e.target.value;
				this.status = this.arrays[this.indexis];
			},
			closeImg(type, index) {
				let _this = this;
				if (type == 1) {
					_this.form.thumb = '';
				} else if (type == 2) {
					for (let i = 0; i < _this.form.thumbs.length; i++) {
						if (i == index) {
							_this.form.thumbs.splice(i, 1);
						}
					}
				}
			},
			async updataImg(type) {
				let _this = this;
				// #ifdef H5
				if(App.getClientType() == 2){
					let res = await App.browser_upload(6);
				    for (let i = 0; i < res.tempFilePaths.length; i++) {
				    	let aa = await App._upLoad(res.tempFilePaths[i]);
				    	if (type == 1) {
				    		_this.form.thumb = aa.data.img;
				    	}
				    	if (type == 2) {
				    		_this.form.thumbs.push(aa.data.img);
				    	}
				    }
					return
				}
				wxApi.choseImage(res => {
					wxApi.uoloadIg(res.localIds[0], data => {
						if (data.errMsg === 'uploadImage:ok') {
							uni.showLoading({});
							let requestData = {
								upload_type: 2,
								id: data.serverId
							};
							App._post_form(
								'&do=uploadFiles',
								requestData,
								res => {
									if (res.errno === 0) {
										if (type == 1) {
											_this.form.thumb = res.data.img;
										}
										if (type == 2) {
											_this.form.thumbs.push(res.data.img);
										}
									}
								},
								false,
								() => {
									uni.hideLoading();
								}
							);
						} else {
							uni.hideLoading();
							App.showError('上传失败');
						}
					});
				});
				// #endif
				// #ifndef H5
				wx.chooseImage({
					count: 6,
					sourceType: ['album', 'camera'],
					success: async function(res) {
						console.info(res);
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							let aa = await App._upLoad(res.tempFilePaths[i]);
							if (type == 1) {
								_this.form.thumb = aa.data.img;
							}
							if (type == 2) {
								_this.form.thumbs.push(aa.data.img);
							}
						}
					}
				});
				// #endif
			},
		}
	}
</script>

<style lang="less" scoped>
	image{
		height: 150upx;
		width: 150upx;
		border-radius: 10upx;
	}
	.bottom-33{
		bottom: 28%;
	}
	.bottom-30{
		bottom: 25%;
	}
	.swiperBox:after{
		content: '';
		width: 30%;
	}
	.uni-input{
		font-size: 30upx;
	}
	.close{
		position: absolute;
		right: 0;
		top: 0;
	}
	.popsocks{
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background-color: rgba(0,0,0,0.3);
	}
	.popfixed{
		width: 80vw;
		height: 50vh;
		overflow: hidden;
		// padding-bottom: 300upx;
		background-color: #F7F7F7;
		position: fixed;
		left: 6%;
		top: 8%;
		padding: 30upx;
		z-index: 99;
		padding-bottom: 300upx;
		border-radius: 15upx;
	}
	.keys{
		// text-align-last: justify;
		display: inline-block;
		color: #999999;
		font-size: 30upx;
		// width: 90%;
	}
	.userImgUpdata{
		width: 150upx;
		height: 150upx;
		border-radius: 10upx;
		background-color: #f8f8f8;
		border: 1px solid #999999;
		text-align: center;
		> image{
			margin-top: 50upx;
			width: 50upx;
			height: 50upx;
		}
	}
	.f-l{
		flex: 0.3;
	}
	.f-r{
		flex: 0.7;
		padding-top: 8upx;
	}
	.b-f1{
		border-bottom: 1px solid #f8f8f8;
		padding: 15upx 0 20upx;
		display: flex;
	}
	.addGoods{
		padding: 0 30upx;
	}
	.xingxing{
		padding-left: 10upx;
		display: inline-block;
		line-height: 40upx;
		font-weight: 700;
		font-size: 40upx;
		color: #FF4444;
	}
</style>
