<template>
	<view class="container">
		<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
			<block slot="backText">返回</block>
			<block slot="content">新增商品</block>
		</cu-custom>
    <view id="chooseType" :class="currentBoxId == 'chooseType' ? 'show' : 'hidden'">
		<uni-forms ref="productForm" :modelValue="productDate" :rules="rules" label-width="200rpx">
					<uni-forms-item label="商品分类:" name="name">
						<mulpicker
						        v-model="productDate.demandRegion"
						        :list="productList" 
						    rangekey="categoryName"
						    code="id"
						    pidkey="id" 
						    childkey="classificationTwoList" 
						    :emitPath="true"
						    :level="2"
						    :placeholder="'选择商品分类'"
						/>
						<uni-icons color="#666666" type="right" size="22" style="position: absolute;right: 0;top: 10rpx;"></uni-icons>
					</uni-forms-item>
					<uni-forms-item label="商品名称:" name="productName">
						<input type="text" v-model="productDate.productName" placeholder="请输入商品名称" />
					</uni-forms-item>
					<uni-forms-item label="关键词:" name="keyword">
						<input type="text" v-model="productDate.keyword" placeholder="请输入关键词(空格分隔)" />
					</uni-forms-item>
					<uni-forms-item label="商品品牌:" name="brandId">
						<!-- <input type="text" v-model="productDate.brandId" placeholder="请输入商品品牌" /> -->
						  <uni-data-select
						        v-model="productDate.brandId"
						        :localdata="brandIdList"
								placeholder="请选择商品品牌"
						      ></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="商品售价:" name="price">
						<input type="text" v-model="productDate.price" placeholder="请输入商品售价" />
					</uni-forms-item>
					<uni-forms-item label="商品上架:" name="productStatus">
						<switch v-model="productDate.productStatus" color="#FE0606" checked style="transform:scale(0.7)" />
					</uni-forms-item>
					<uni-forms-item label="商品推荐:" name="age">
						<view class='checkbox-con'>
						 <radio-group>
						  <label :class="item.checked?'checkbox checked':'checkbox'" @click="checkbox(index)" v-for="(item, index) in radioItem" :key="item.value">
						  <checkbox :value="item.value" :checked="item.checked"/>{{item.name}}
						  </label>
						 </radio-group>
						 </view>
					</uni-forms-item>
				</uni-forms>
			<view class="buttons">
				<view @click="closed">取消</view>
			<view id="next" @click="changeBox">下一步</view>
			</view>
		</view>
		
 
    <view id="instruction" :class="currentBoxId == 'instruction' ? 'show' : 'hidden'">
        <!-- <productAddStep2 /> -->
		<uni-forms :modelValue="productDate" label-width="200rpx">
					<uni-forms-item label="属性类别:" >
						  <uni-data-select
						        v-model="productDate.attributesTypeId"
						        :localdata="attributesTypeList"
								placeholder="请选择商品品牌"
								@change="attributesData"
						      ></uni-data-select>
					</uni-forms-item>
				<view class="content" v-show="productDate.attributesTypeId">
					<view>商品类型：</view>
					<view>
						<uni-section type="line">
									<view class="uni-px-5" v-for="(item,index) in attributesList">
										<view style="display: inline-block;">{{item.attributeName}}：</view>
										<view  style="display: inline-block;">
											<uni-data-checkbox v-if="index==0" mode="tag" v-model="radioAttributes" :localdata="item.attributesList"></uni-data-checkbox>
										<uni-data-checkbox v-else-if="index!=0" mode="tag" multiple v-model="checkboxAttributes" :localdata="hobby"></uni-data-checkbox>
										</view>
										
									</view>
								</uni-section>
					</view>
				</view>
				<view>
					<view>批量填充：<text style="color: #999999;">批量填充填入信息后，可以批量将内容填写到SKU 信息里</text></view>
					<view class="tagButton" v-for="item in bottonList">{{item.label}}</view>
					<view class="redButton">确定</view>
				</view>
				<view v-if="productDate.attributesTypeId&&checkboxAttributes.length>0" v-for="(items,index) in checkboxAttributes">
					<view>
						<text style="color: red;">*</text>
						<text>规格：</text>
						<text>{{radioAttributes}}+{{items}}</text>
					</view>
					<view class="tagButton" v-for="items in bottonList">{{item.label}}</view>
					<view style="display: inline-block;" @click="deleteCheckAll(index)">删除</view>
				</view>
				<view v-if="productDate.attributesTypeId&&radioAttributes" >
					<view>
						<text style="color: red;">*</text>
						<text>规格：</text>
						<text>{{radioAttributes}}</text>
					</view>
					<view class="tagButton" v-for="item in bottonList">{{item.label}}</view>
					<view style="display: inline-block;" @click="deleteRadio">删除</view>
				</view>
				<view>
					<view>
						<text style="color: red;">*</text>
						商品图片：<text style="color: #999999;">最多可上传10张图片</text></view>
						<view>
							<view class="imageBlack">商品主图</view>
							<view class="imageBlack">设为主图</view>
							<view class="imageBlack" @tap="srcFileImage">
								<view style="cameraImage">
									<uni-icons type="camera-filled" size="30"></uni-icons>
								</view>
								
							</view>
						</view>
					
				</view>
				<view>
					<view>详情图片：<text style="color: #999999;">最多可上传10张图片</text></view>
					<view></view>
				</view>
				</uni-forms>
		<view class="buttons">
			<view id="previous"  @click="changeBox">上一步</view>
			<view @click="addCompleted">完成</view>
		</view>
    </view>
 



	</view>
</template>

<script>
	import utils from '@/utils/encode'
	import serve from '@/api/packageIntegral/productList.js'
	import mulpicker from '@/packageIntegral/components/mulpicker.vue'
	import productAddStep2 from '@/packageIntegral/productAddition/productAddStep2.vue'
	export default {
	components: {
		mulpicker,
		productAddStep2
	},
		data() {
			return {
				currentBoxId: 'instruction', //当前显示的view的id
				isBoxShow: false,
				productDate:{},
				productList:[],
				brandIdList:[],
				radioItem:[{
					  name: '新品',
					  checked: true
					 }, {
					  name: '推荐',
					  checked: false
					 }],
					 rules:{
						 name:{rules:[{required: true,errorMessage: '请选择商品分类'}]},
						 productName:{rules:[{required: true,errorMessage: '请输入商品名称'}]},
						 brandId:{rules:[{required: true,errorMessage: '请输入商品品牌'}]},
						 price:{rules:[{required: true,errorMessage: '请输入商品售价'}]},
					 },
					 attributesTypeList:[],
					 attributesList:[],
					 bottonList:[
					 	{label:'市场价格',value:'marketPrice'},
					 	{label:'销售价格',value:'sellPrice'},
					 	{label:'商品库存',value:'stock'},
					 	{label:'兑换积分',value:'integral'}
					 ],
					 radioAttributes:'',
					 checkboxAttributes:[]
			}
		},

		onLoad(options) {
			// this.get(options.orderId)
			this.classfication()
			this.getProductBrands()
			this.getAttributesType()
		},
		watch:{
			'productDate.demandRegion'(val){
				if(val){
					this.productDate.categoryOneId = val.split(',')[0]
					this.productDate.categoryTwoId = val.split(',')[1]
				}
			}
		},
		methods: {
			classfication(){
				serve.classification().then(res=>{
					this.productList = res.data
				})
			},
			getProductBrands(){
				this.brandIdList = []
				serve.getProductBrands().then(res=>{
					console.log(res)
					res.data.forEach(tab=>{
						this.brandIdList.push({value:tab.id,text:tab.brandName})
					})
					
				})
			},
			checkbox (e) {
				 var index = e;//获取当前点击的下标
				 var checkboxArr = this.radioItem;//选项集合
				 // if (checkboxArr[index].checked) return;//如果点击的当前已选中则返回
				 // checkboxArr.forEach(item => {
				 //  item.checked = false
				 // })
				 if(checkboxArr[index].checked ==false){
					 checkboxArr[index].checked = true; //改变当前选中的checked值

				 }else {
					 checkboxArr[index].checked = false; //改变当前选中的checked值
				 }
				 if(checkboxArr[0].checked ==true){
					 this.productDate.newMark = 1
				 }else{
					 this.productDate.newMark = 2
				 }
				 if(checkboxArr[1].checked ==true){
					 this.productDate.recommend = 1
				 }else{
					 this.productDate.recommend = 2
				 }
		
			 },
			  changeBox(e){
			    let currentFlag = e.currentTarget.id;
			    switch(currentFlag){
			      case 'next':
			          this.currentBoxId = 'instruction'
			        break;
			      case 'previous':
			          this.currentBoxId = 'chooseType'
			        break;
			        default:
			            this.currentBoxId = 'viewInstruction'
			          break;
			    }
				if(currentFlag == 'next'){
					this.getAttributesType()
				}
			  },
			  getAttributesType(){
				  this.attributesTypeList = []
				serve.getAttributesType().then(res=>{
					res.data.forEach(tab=>{
						this.attributesTypeList.push({
							value:tab.id,
							text:tab.name,
							number:tab.number,
							attributesList:tab.attributesList
							})
					})
				})  
			  },
			  attributesData(){
				  if(this.productDate.attributesTypeId){
					this.attributesTypeList.forEach(tab=>{
					  if(tab.id = this.productDate.attributesTypeId){
						  this.attributesList = tab.attributesList
						  this.attributesList.forEach(tab=>{
							  tab.attributesList = []
							  tab.attributeContent.split(',').forEach(item=>{
								  tab.attributesList.push({value:item,text:item})
							  })
						  })
						  
					  }
				  })  
				  }else{
					  this.attributesList = []
				  }
				  
			  },
			  deleteCheckAll(i){
				  if(this.checkboxAttributes.length>1){
					  this.checkboxAttributes.splice(i,1)
				  }else{
					  this.checkboxAttributes.splice(i,1)
					  this.radioAttributes = ''
				  }
			  },
			  deleteRadio(){
				  this.radioAttributes = ''
			  },
			   // 调用系统相机
			      takePhoto() {
			        // 先检查权限
					let _that = this
			        uni.getSetting({
			          success(res) {
			            if (!res.authSetting['scope.camera']) {
			              // 请求权限
			              uni.authorize({
			                scope: 'scope.camera',
			                success() {
			                  // 权限已经获取，可以调用相机
			                  _that.srcFileImage()
			                },
			                fail() {
			                  // 用户拒绝授权，需引导用户开启权限
			                  uni.showModal({
			                    title: '提示',
			                    content: '需要相机权限才能使用相机功能，请在设置中打开',
			                    success: (modalRes) => {
			                      if (modalRes.confirm) {
			                        // 引导用户去设置中打开权限
			                        wx.openSetting({
			                        	success(res) {
			                        		if (res.authSetting['scope.camera']) {
			                        			re()
			                        			// 授权成功，重新定位
			                        		} else {
			                        			// 没有允许定位权限
			                        			wx.showToast({
			                        				title: '您拒绝了相机权限，将无法使用相机功能',
			                        				icon: 'none'
			                        			});
			                        			rj('拒绝了相机权限')
			                        		}
			                        	},
			                        	fail() {
			                        		rj('openSetting调用失败')
			                        	}
			                        })
			                      }
			                    },
			                  });
			                },
			              });
			            } else {
			              // 权限已经获取，可以直接调用相机
			              _that.srcFileImage()
			            }
			          },
			          fail(err) {
			            // 获取设置失败
			            console.error(err);
			          },
			        });
			      },
			  //调起上传图片
			  srcFileImage() {
			  	let _that = this
			  	uni.chooseImage({
			  		count: 10, //默认9
			  		sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			  		sourceType: ['album'], //从相册选择
			  		success: function(res) {
			  			console.log(res)
			  			console.log('进入1')
			  			const JSESSIONID = utils.uuid()
			  			uni.uploadFile({
			  				url: 'http://uat.xingoil.com/adminapi/oil-oss/obejct/uploadFile',
			  				filePath: res.tempFilePaths[0],
			  				formData: {
			  					ossKey: 'xingyou',
			  					pathKey: 'publicxingyou',
			  					encrypt: 'PUBLIC',
			  				},
			  				name: 'file',
			  				header: {
			  					"Content-Type": "multipart/form-data",
			  					"Authorization": uni.getStorageSync('Authorization'),
			  					'dataSources': 'MP',
			  					"imei": uni.getStorageSync('unionid'),
			  					"openId": uni.getStorageSync('openid'),
			  					'JSESSIONID': JSESSIONID,
			  					'token': utils.md5Salt(JSESSIONID)
			  				},
			  				success(e) {
			  					console.log('进入2')
			  					console.log(e)
			  					let obj = JSON.parse(e.data),
			  						url = obj.data.publicUrl
									console.log(obj.data.publicUrl)
			  				},
							fail(err) {
								console.log(err)
							}
			  			})
			  		},fail() {
			  			console.log('相机调用失败')
			  		}
			  	})
			  },
			  picker2(e){
				  console.log(e.detail.value)
				  this.productDate.value = e.detail.value
			  },
			  closed(){
				  uni.navigateTo({
				  	url: '/pages/index/index'
				  })
			  },
			  addCompleted(){
				  
			  }
		}
	}
</script>

<style lang="scss" scoped>
	
		.fadeBox{
		    width: 100%;
		    margin-bottom: 20rpx;
		}
		#chooseType{
		padding: 30rpx;
		
		mulpicker{
			height: 72rpx;
			line-height: 72rpx;
		}
		/deep/ .uni-forms{
			width: 100%;
		}
		.content{
			font-size: 28rpx;
			font-weight: bold;
		}
		
		
		/deep/ .uni-forms-item{
			width: 100%;
		}
		
		/deep/ .uni-forms-item__label{
			color: #333 !important;
			font-size: 30rpx;
			font-weight: 700;
		}
		/deep/ .uni-forms-item__content{
			width: 100%;
			input{
				height: 72rpx;
				line-height: 72rpx;
			}
		}
		
		switch{
			margin-top: 9rpx;
		}
		switch::before{
			 content: '';
		 }
		 switch::after{
			 content: '';
		 }	
		}
		#instruction{
			padding: 30rpx;
			
			mulpicker{
				height: 72rpx;
				line-height: 72rpx;
			}
			/deep/ .uni-forms{
				width: 100%;
			}
			/deep/ .uni-forms-item{
				width: 100%;
			}
			
			/deep/ .uni-forms-item__label{
				color: #333 !important;
				font-size: 30rpx;
				font-weight: 700;
			}
			/deep/ .uni-forms-item__content{
				width: 100%;
				input{
					height: 72rpx;
					line-height: 72rpx;
				}
			}
			.tagButton{
				display: inline-block;
				width: 133rpx;
				height: 58rpx;
				background: #f5f5f5;
				color: #666666;
				border-radius: 8rpx;
				line-height: 58rpx;
				text-align: center;
				margin: 8rpx;
			}
			.redButton{
				display: inline-block;
				width: 84rpx;
				height: 58rpx;
				background: red;
				color: #fff;
				border-radius: 10rpx;
				line-height: 58rpx;
				text-align: center;
			}
			.imageBlack{
				display: inline-block;
				width: 140rpx;
				height: 140rpx;
				line-height: 140rpx;
				// position: relative;
				.cameraImage{
					// position: absolute;
					// left: 70rpx;
					// top: 70rpx;
				}
			}
			
		}
		
		.checkbox-con{
		 margin-top: 40rpx;
		 text-align: center;
		 position: relative;
		}
		.checkbox{
		 width: 180rpx;
		 height: 76rpx;
		 line-height: 76rpx;
		 font-size: 30rpx;
		 color: #666666;
		 border: 1rpx solid #B6B6B6;
		 border-radius: 5rpx;
		 display: inline-block;
		 margin: 0 10rpx 20rpx 0;
		 position: absolute;
		 top: 50rpx;
		 &:nth-of-type(1){
			 left: -190rpx;
		 }
		 &:nth-of-type(2){
			 left: 50rpx;
		 }
		}
		
		.checked{
		 color: #FFFFFF;
		 background: #FE0606;
		 border: 1rpx solid #FE0606;
		}
		.checkbox checkbox{
		 display: none
		}
		 
		 
		 
		 
		.buttons {
			width: 100%;
			display: flex;
			justify-content: space-evenly;
			margin-top: 180rpx;
		
			>view {
				width: 250rpx;
				height: 76rpx;
				text-align: center;
				line-height: 76rpx;
				border-radius: 10rpx;
				font-size: 28rpx;
		
				&:nth-of-type(1) {
					background: #FFFFFF;
					border: 1rpx solid #B6B6B6;
					color: #333;
				}
		
				&:nth-of-type(2) {
					background: #FE0505;
					color: #fff;
				}
			}
		}
		.show{
		    display: flex;
		    flex-wrap: wrap;
		}
		.hidden{
		    display: none;
		}
</style>
