<template>
	<view class="page">
		        <view class="sstouch-inp-con">
		            <view class="form-box">
		                <view class="form-item">
		                    <view class="h4"><text class="i" style="color: red;">*</text>{{__('商品分类')}}:</view>
		                    <view class="input-box" style="font-size:26rpx;" @click="show()">
								<input class="inp" type="text" :value="commodity_name" disabled="disabled" id="g_name" autocomplete="off"
		                                                    readonly="readonly">
		                        <text class="input-del"></text>
		                    </view>
		                </view>
		                <view class="form-item">
		                    <view class="h4"><text class="i" style="color: red;">*</text>{{__('商品名称')}}:</view>
		                    <view class="input-box">
								<input class="inp" type="text"  :value="product_name" id="g_name" autocomplete="off" readonly="readonly" @input="onInputProductname"/>
		                        <text class="input-del"></text>
		                    </view>
		                </view>
		                <view class="form-item">
		                    <view class="h4"><text class="i" style="color: red;">*</text>{{__('零售价')}}:</view>
		                    <view class="input-box">
								<input class="inp" type="text"  :value="item_unit_price" @input="onInputUnitprice"/>
		                        <text class="input-del"></text>
		                    </view>
		                </view>
		                <view class="form-item">
		                    <view class="h4"><text class="i" style="color: red;">*</text>{{__('市场价')}}:</view>
		                    <view class="input-box">
								<input class="inp" type="text"  :value="item_market_price" @input="onInputMarketprice"/>
		                        <text class="input-del"></text>
		                    </view>
		                </view>
						<view class="form-item">
						    <view class="h4" style="border-bottom: solid #EEE 0rpx;">{{__('商品主图')}}:</view>
						    <view style="margin-left:160rpx;">
								<view class="m-upImg">
									<view class="m-upImg-item" style="width:64rpx;height:64rpx;" v-if="(item_image_default)" >
										<image lazy-load mode="aspectFit"  :src="(item_image_default)" @click="ImgTapDefault"></image>
									</view>
									<view v-else style="width:64rpx;height:64rpx;" class="m-upImg-item upSelect"  @click.stop="upImgsDefault">
										<label  class="iconfont icon-xiangji"></label>
									</view>
								</view>
						        <text class="input-del"></text>
						    </view>
						</view>
						
						<view class="form-item">
						    <view class="h4" style="border-bottom: solid #EEE 0rpx;">{{__('商品副图')}}:</view>
						    <view style="margin-left:160rpx;">
								<view class="m-upImg">
									<view class="m-upImg-item" style="width:64rpx;height:64rpx;" v-for="(imglist, ii) in data_info.comment_image"   :key="ii">
										<image lazy-load mode="aspectFit"  :src="(imglist)" @click="ImgTap"></image>
									</view>
									<view v-if="true" style="width:64rpx;height:64rpx;" class="m-upImg-item upSelect"  @click.stop="upImgs">
										<label  class="iconfont icon-xiangji"></label>
									</view>
								</view>
						        <text class="input-del"></text>
						    </view>
						</view>

		                <view class="form-item">
		                    <view class="h4"><text class="i" style="color: red;">*</text>{{__('商品库存')}}:</view>
		                    <view class="input-box">
								<input class="inp" type="text"  :value="item_quantity" @input="onInputQuantity"/>
		                        <text class="input-del"></text>
		                    </view>
		                </view>
		                <view class="form-item">
		                    <view class="h4">{{__('属性编号')}}:</view>
		                    <view class="input-box">
								<input class="inp" type="text"  :value="item_number" @input="onInputNumber"/>
		                        <text class="input-del"></text>
		                    </view>
		                </view>
		                <view class="form-item">
		                    <view class="h4">
		                        <text class="i" style="color: red;">*</text>
		                        {{__('运费设置')}}:
		                    </view>
		                    <view class="input-box" >
								<block v-if="(transports.length > 0)">
								  <picker mode="selector" @change="transportChange" :value="id" :range="transports" range-key="transport_type_name" >
									<label style="padding:0 40rpx;">{{transports[id].transport_type_name}}</label>
								  </picker>
								</block>
		                    </view>
		                </view>
		                <view class="form-item">
		                    <view class="h4">
		                        <text class="i" style="color: red;">*</text>
		                         {{__('店铺分类')}}:
		                    </view>
		                    <view class="input-box">
								<block v-if="(product_categorys.length > 0)">
									<picker mode="selector" @change="categorysChange" :value="index" :range="product_categorys" range-key="store_product_cat_name" >
										<label>{{product_categorys[index].store_product_cat_name}}</label>
									</picker>
								</block>
		                    </view>
		                </view>
		                <!-- <view class="form-item">
		                    <view class="h4">商品描述:</view>
		                    <view class="input-box">
								<input class="inp" type="text"  :value="product_detail" @input="onInputProductdetail"/>
		                        <text class="input-del"></text>
		                    </view>
		                </view> -->
		                <view class="form-item" style="border-bottom: solid #EEE 2px;">
		                    <view class="h4">{{__('上下架')}}:</view>
		                    <view class="input-box" >
		                    	<switch checked	style="padding:16rpx" @change="switchChange" />
		                    </view>
		                </view>
		            </view>
		            <view class="error-tips"></view>
		            <view class="form-btn ok" @click="release">
		                <view class="btn" >{{__('发布商品')}}</view>
		            </view>
		        </view>

		   <!-- 商品分类 -->
			<uni-drawer :visible="rightDrawerVisible" mode="right" @close="closeDrawer()" >
				<view class="m-tab">
						<view class="m-navbar">
							<view :class="['m-navbar-item', tapindex==1?'m-navbar-item-on':'']" @click="onecategorys">
								{{__('一级分类')}}
							</view>
							<view :class="['m-navbar-item', tapindex==2?'m-navbar-item-on':'']">
								{{__('二级分类')}}
							</view>
							<view :class="['m-navbar-item', tapindex==3?'m-navbar-item-on':'']">
								{{__('三级分类')}}
							</view>
						</view>
				</view>
				<scroll-view scroll-y="true" style="height: 100%">
				<view class="m-cells" style="padding:20rpx 20rpx;" v-for="(category,ii) in categorys" :key="ii">
					<view class="m-cell m-cell-access m-info-sp" :data-category_id="category.category_id" :data-category_name="category.category_name"  @click="getCate">
						<view class="m-cell-bd">
							<view  class="m-order-title">
								<label class="m-ber-n">{{category.category_name}}</label>
								<label>
									<image  class="nav-image" lazy-load src="/static/images/nav.png" mode="scaleToFill" />
								</label>
							</view>
						</view>
					</view>
				</view>
				</scroll-view>
			</uni-drawer>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import uniDrawer from '@/components/uni-drawer/uni-drawer.vue'
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	export default {
		data() {
			return {
				data_info:{ order: {item:{}}, comment_image: [] },
				transports:[],
				id:0,
				product_categorys:[],
				index:0,
				rightDrawerVisible: false,
				rightDrawerVehicle: false,
				tapindex: 1,
				categorys:[],
				category_id:0,
				deep:0,
				onecategory:'',
				twocategory:'',
				threecategory:'',
				commodity_name:'',
				product_name:'',
				item_unit_price:'',
				item_market_price:'',
				item_quantity:'',
				item_number:'',
				product_category_id:0,
				transport_type_id:0,
				product_detail:'',
				item_enable:1001,
				parent_id:0,
				img:'',
				item_image_default: '',
			}

		},
		computed: mapState([
		    'Config',
		    'StateCode',
		    'notice',
		    'plantformInfo',
		    'shopInfo',
		    'userInfo',
		    'hasLogin'
		]),
		components: {
			uniDrawer,
			uniList,
			uniListItem

		},
		computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
		onLoad: function(options) {
			var that = this;
			uni.setNavigationBarTitle({
				title:this.__('发布商品')
			});
			that.setData({
				options:options,
				order_id:options.on,
			})

			that.getfreightArrangement()
			that.getProductCategory()
		},

		methods: {
			...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
			getfreightArrangement: function(){
				var that = this;
				var	params = {

					};
					that.$.request({
						url: that.Config.URL.seller.Store_TransportType,
						data: params,
						success: function(data, status, msg, code) {
							if(status ==  200){
								that.setData({
									transports:data.items
								})
							}
						}
					})
			},

			getProductCategory: function(){
				var that = this;
				var	params = {

					};
					that.$.request({
						url: that.Config.URL.seller.Store_ProductCategory,
						data: params,
						success: function(data, status, msg, code) {
							if(status ==  200){
								that.setData({
									product_categorys:data.items
								})
							}
						}
					})
			},

			transportChange: function(e){
				var that = this;
				var index = e.detail.value
				this.setData({
					id:index,
					transport_type_id:that.transports[index].transport_type_id
				})
			},

			categorysChange: function(e){
				var that = this;
				var index = e.detail.value
				this.setData({
					index:e.detail.value,
					product_category_id:that.product_categorys[index].store_product_cat_id
				})

			},

			show: function() {
				var that = this;
				that.setData({
					category_id:0
				})
				that.getcategorys()

				this.rightDrawerVisible = true;
			},

			onInputProductname: function(e){
				this.setData({product_name:e.detail.value})
			},

			onInputUnitprice: function(e){
				this.setData({item_unit_price:e.detail.value})
			},

			onInputMarketprice: function(e){
				this.setData({item_market_price:e.detail.value})
			},

			onInputQuantity: function(e){
				this.setData({item_quantity:e.detail.value})
			},

			onInputNumber: function(e){
				this.setData({item_number:e.detail.value})
			},

			onInputProductdetail: function(e){
				this.setData({product_detail:e.detail.value})
			},


			getCate: function(e){
				var that = this;
					switch (that.tapindex) {
						case 1:
							that.setData({
								deep:that.tapindex,
								category_id:e.currentTarget.dataset.category_id,
								onecategory:e.currentTarget.dataset.category_name,
								tapindex:2
							})
							that.getcategorys()
							break;
						case 2:
							that.setData({
								deep:that.tapindex,
								category_id:e.currentTarget.dataset.category_id,
								twocategory:e.currentTarget.dataset.category_name,
								tapindex:3
							})
							that.getcategorys()
							break;
						case 3:
							that.setData({
								threecategory:e.currentTarget.dataset.category_name,
								category_id:e.currentTarget.dataset.category_id,
								tapindex:1,
								deep:1,
								rightDrawerVisible:false
							})
							that.commodity_name = that.onecategory + '>' + that.twocategory + '>' + that.threecategory
							break;
					}



			},

			onecategorys: function(){
				this.setData({
					deep:1,
					category_id:0,
					tapindex:1
				})
				this.getcategorys()
			},

			release: function() {
				var that = this;
				if(that.$.isNull(this.category_id)){
					 that.$.alert(that.__("请选择商品分类"));
					 return;
				}
				if(that.$.isNull(this.product_name)){
					 that.$.alert(that.__("请填写商品名称"))
					 return;
				}
				if(that.$.isNull(this.item_unit_price)){
					 that.$.alert(that.__("请填写商品市场价"))
					 return;
				}
				if(that.$.isNull(this.item_market_price)){
					 that.$.alert(that.__("请填写商品销售价"))
					 return;
				}
				if(that.$.isNull(this.item_quantity)){
					 that.$.alert(that.__("请填写商品库存"))
					 return;
				}
				// if(that.$.isNull(this.item_number)){
				// 	 that.$.alert("请填写商品属性编号")
				// 	 return;
				// }
				// if(that.$.isNull(this.product_detail)){
				// 	 that.$.alert("请填写商品描述")
				// 	 return;
				// }

				that.addProduct()
			},

			addProduct: function() {
				var that = this;
				// var item = [
				// 			{
				// 				item_number:that.item_number,
				// 				item_unit_price:that.item_unit_price,
				// 				item_market_price:that.item_market_price,
				// 				item_quantity:that.item_quantity,
				// 				item_enable:that.item_enable,
				// 				item_enable:1001,
				// 				item_is_default:0,
				// 				item_freetime:'',
				// 				item_title:'',
				// 				item_barcode:'',
				// 				item_id:'',
				// 				item_spec:{},
				// 				item_unit_points:'',
				// 				item_cost_price:'',
				// 				item_platform_price:'',
				// 				item_fx_commission:'',
				// 			}
				// 		];


				// var	params = {
				// 		product_name:that.product_name,
				// 		product_detail:that.product_detail,
				// 		transport_type_id:that.transport_type_id ? that.transport_type_id : that.transports[0].transport_type_id,
				// 		product_category_id:that.product_category_id,
				// 		category_id:that.category_id,
				// 		kind_id:1201,
				// 		items:JSON.stringify(item)

				// 	};

				// 	if(that.data_info.comment_image.length >= 1){
				// 		var img = []
				// 		for(var t in that.data_info.comment_image){
				// 			img.push(that.data_info.comment_image[t])
				// 		}
				
				// 	}
					
				// 	params.image = {
				// 		0:{
				// 			item_image_default:that.item_image_default,
				// 			item_image_other:that.data_info.comment_image,
				// 		}
				// 	}
					var store_category_ids=[];
					var productObj={
						assistsIndex:[],
						brand_id:0,
						assists:{},
						productDetail:{product_detail:"<p><br></p>",product_tags:[]},
						productBase:{
							product_number:"",
							product_name:that.product_name,
							product_sale_time:"",
							product_video:"",
							kind_id:1201,
							product_inventory_lock:1001,
							product_state_id:1001,
							transport_type_id:that.transport_type_id ? that.transport_type_id : that.transports[0].transport_type_id,
							store_category_ids:store_category_ids.push(that.product_category_id),
							product_service:"",
							product_param:"",
							product_detail:that.product_detail,
							product_tips:"",
							category_id:that.category_id,
							text_category_id:that.category_name,
						},
						productSpec:JSON.stringify([]),
						valid:{}
					}
					
					var productItems=[
						{
							category_id:that.category_id,
							main_color_img:that.item_image_default,
							color_img:that.data_info.comment_image,
							item_enable:that.item_enable,
							item_is_default:false,
							item_market_price:that.item_market_price,
							item_unit_price:that.item_unit_price,
							item_quantity:that.item_quantity,
							product_spec:JSON.stringify([]),
							item_number:that.item_number
						}]
					
				var params=
					{
					  productObj: JSON.stringify(productObj),
					  productItems: JSON.stringify(productItems),
					}
					
				that.$.request({
					url: that.Config.URL.seller.add_product,
					method: 'POST',
					data: params,
					success: function(data, status, msg, code) {
						if(status ==  200){
							that.$.alert(that.__('商品添加成功'))
							setTimeout(function() {
								that.$.navigateTo({
									url:'/seller/product/lists'
								})
							}, 1500);
						}
					}
				})
			},



			getcategorys: function(e){
				var that = this;
				var	params = {
						deep:that.deep
					};

				if(that.category_id !== 0){
					params.category_id= that.category_id

				}
				that.$.request({
					url: that.Config.URL.product.category,
					data: params,
					success: function(data, status, msg, code) {
						if(status ==  200){
							if (data.items.length == 0)
							{
									
								if (that.deep == 3)
								{
									that.commodity_name = that.onecategory + '>' + that.twocategory + '>' + that.threecategory
								}
								else if (that.deep == 2)
								{
									that.commodity_name = that.onecategory + '>' + that.twocategory
								}
								else if (that.deep == 1)
								{
									that.commodity_name = that.onecategory
								}
								
								that.setData({
									tapindex:1,
									deep:1,
									rightDrawerVisible:false
								})
							}
							else
							{
								that.setData({
									categorys:data.items
								})
							}
						}
					}
				})
			},

			switchChange: function(e){
				//console.log('switch1 发生 change 事件，携带值为', e.target.value)
				var that = this;
				if(e.target.value){
					that.setData({
						item_enable:1001
					})
				}else{
					that.setData({
						item_enable:1002
					})
				}
			},
			ImgTap: function(e) {
				var that = this,
					urls = [];

				for (var i in this.data_info.comment_image) {
					urls.push(this.data_info.comment_image[i]);
				}
				var s = e.target.dataset.src;

				that.$.previewImage({ current: s, urls: urls });
			},
			
			ImgTapDefault: function(e) {
				var that = this,
					urls = [];

				
				urls.push(this.item_image_default);
				
				var s = e.target.dataset.src;

				that.$.previewImage({ current: s, urls: urls });
			},

			delImg: function(e) {
				//console.info(e);
				var dataInfo = this.data_info;
				var that = this;
				that.$.confirm(
				that.__('是否放弃上传本张图片?')
					,
					function(n) {
						if (n.confirm) {
							var i = [];
							for (let s = 0; s < dataInfo.comment_image.length; s++) {
								if (s != e.target.dataset.index) {
									var o = dataInfo.comment_image[s];
									i.push(o);
								}
							}
							dataInfo.comment_image = i;

							that.setData({ data_info: dataInfo });
						}
					},
					true
				);
			},
			
			upImgsDefault: function(e) {
				var  that = this;
				//that.$.showLoading();
					that.$.chooseImage({
						count: 1,
						sizeType: ['compressed'],
						success: function(n) {
							that.$.showLoading();
							var r = n.tempFilePaths;
							that.$.uploadFile({
								url: that.Config.URL.upload,
								method: 'POST',
								filePath: r[0],
								name: 'upfile',
								//header: { 'content-type': 'multipart/form-data' },
								success: function(n) {
									that.$.hideLoading();
									var up_res = that.$.parseJSON(n.data);
									var s = up_res.data.url;
									that.setData({ item_image_default: s });
								},
								fail: function(e) {
									that.$.hideLoading();
								},
								complete: function(e) {
									that.$.hideLoading();
								}
							});
						},
						fail: function(e) {
							that.$.hideLoading();
						},
						complete: function(e) {
							that.$.hideLoading();
						}
					});
			},

			upImgs: function(e) {
				var that = this;
				var orderId = e.currentTarget.dataset.order_id
				var  dataInfo = this.data_info;
				if (dataInfo.comment_image && dataInfo.comment_image.length == 5) {
					that.$.alert(that.__('最多上传5张图片！'));
					return;
				}


				//that.$.showLoading();
					that.$.chooseImage({
						count: 1,
						sizeType: ['compressed'],
						success: function(n) {
							that.$.showLoading();
							var r = n.tempFilePaths;
							that.$.uploadFile({
								url: that.Config.URL.upload,
								method: 'POST',
								filePath: r[0],
								name: 'upfile',
								//header: { 'content-type': 'multipart/form-data' },
								success: function(n) {
									that.$.hideLoading();
									var up_res = that.$.parseJSON(n.data);

									var s = up_res.data.url;
									dataInfo.comment_image.push(s);
									that.setData({ data_info: dataInfo});

								},
								fail: function(e) {
									that.$.hideLoading();
								},
								complete: function(e) {
									that.$.hideLoading();
								}
							});
						},
						fail: function(e) {
							that.$.hideLoading();
						},
						complete: function(e) {
							that.$.hideLoading();
						}
					});
			},

			bindChange: function(e){

			},
		}
	}
</script>

<style lang="scss">
	@import "../../styles/base.scss";
	@import "../../styles/sstouch_member.scss";
	@import "../../styles/sstouch_common.scss";
	@import "../../styles/_variables";

	.m-upImg-item {
		width: 60rpx;
		height: 60rpx;
		// display: inline-block;
		vertical-align: middle;
		position: relative;
		font-size:left;
	}

	.m-upImg {
		box-sizing: border-box;
		padding: 20rpx;
		background-color: #fff;
		display: inline-block;
		// height:60rpx;
	}

	.m-upImg-item image {
		width: 100%;
		height: 100%;
	}

	.u-del-item {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 40rpx;
		background-color: rgba(0, 0, 0, 0.5);
		text-align: center;
		line-height: 40rpx;
		color: #fff;
		z-index: 5;
	}
	.u-del-item label {
		font-size: 28rpx;
	}
	.upSelect {
		width: 60rpx;
		height: 60rpx;
		background-color: #eee;
		text-align: center;
		line-height: 60rpx;
	}
	.upSelect label {
		font-size: 40rpx;
	}
	.m-submitComment {
		position: fixed;
		height: 100rpx;
		width: 100%;
		z-index: 999;
		left: 0;
		bottom: 0;
		background:rgba(51,51,51,1);
		box-shadow:0px 0px 4px 0px rgba(0,0,0,0.1);
	}
	.m-subBtn {
		padding: 0 35%;
		width:100%;
		height: 100%;
		background:rgba(51,51,51,1);
		color:rgba(255,255,255,1);
		font-size: 28rpx;
		line-height: 100rpx;

	}

	.sstouch-inp-con uni-view uni-view {
		display: inline-block;
		padding:0 20rpx;
		margin-left:0;
	}

	.sstouch-inp-con {
		background:#FFF;
	}

	.m-cell::before {
		border-top: 0px solid #ebebe7;
	}


	.form-item {
		width:100%;
	}

	.input-box uni-label {
		font-size:26rpx !important;
	}

	.uni-list-cell::after {
		height:0;
	}

	.uni-drawer__content {
		width:100%;
	}

	.m-tab {
		width: 100%;
	}

	.m-navbar-item {
		padding: 20rpx 0;
		font-size: 24rpx;
	}

	.m-orderlist {
		padding-top: 170rpx;
		position: absolute;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
	}

	.m-navbar-item:after {
		border: none;
	}

	.m-navbar-item.m-navbar-item-on {
		background-color: #fff;
		color: $default-skin-bg;
	}

	.m-navbar-item.m-navbar-item-on::before {
		content: " ";
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		height:
				6rpx;
		border-bottom: 6rpx solid $default-skin-bg;
		color: #CCCCCC;
		-webkit-transform-origin: 0 100%;
		transform-origin: 0 100%;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		z-index: 3;
	}

	.u-tuan-label {
		padding: 5rpx;
		background-color: $default-skin-bg;
		border-radius: 4rpx;
		font-size: 24rpx;
		color:#fff;
		margin-right: 5rpx;
	}

	.nav-image {
		width:12rpx;
		height:24rpx;
		float:right;
		padding-top:12rpx;
	}

	.input-box {
		// width: 50%;
		font-size:26rpx;
		padding-left:20rpx;
	}

	.u-input {
		width: 50%;
		height:90rpx;;
		border: 0;  // 去除未选中状态边框
		outline: none; // 去除选中状态边框
		background-color: rgba(0, 0, 0, 0);// 透明背景
	}



</style>
