<template>
	<view class="container">
		<view class="banner-box">
			<image src="/static/imgs/new-food-banner.png" mode=""></image>
		</view>
		<view class="main">
			<view class="tab-box">
				<view class="tab-item" style="width: 100%;">推荐菜品</view>
			</view>
		</view>
		<view class="content" >
			<view class="interviewee">
				<view class="form-box">
					<view class="form-item">
						<text class="label">菜品名称:</text>
						<view class="ipt-box"><input class="top-t" v-model="feature.foodName" placeholder="请输入菜品名称" type="text" maxlength="10" /></view>
					</view>
					<view class="form-item">
						<text class="label">菜品类型:</text>
						<!-- <view class="ipt-box"><input class="top-t" v-model="formBxwz" placeholder="请填写位置" type="text" maxlength="50" /></view> -->
						<view class="ipt-box select">
							<image class="arrow" src="/static/icons/right-arrow.png" mode=""></image>
							<picker class="picker" v-if="kinds.length > 0" :range="kinds" @change="changeKinds" range-key="name">
								<view>{{ kinds[kindsIndex].name }}</view>
							</picker>
						</view>
					</view>
					<view class="form-item">
						<text class="label">推荐理由:</text>
						<view class="ipt-box"><input class="top-t" v-model="feature.reason" placeholder="请填写推荐理由" type="text" maxlength="50" /></view>
					</view>
				</view>
				<view style="margin: 20upx;"><text class="input_left">菜品图片</text></view>
				<view class="pic">
					<view class="img-box">
						<view class="img-item" v-for="(item, index) in imgs" :key="index">
							<image class="remove-btn" @click="removeImg(index)" src="/static/icons/delete-icon.png" mode=""></image>
							<image class="img" :src="item.replace(/[\r\n]/g,'')" mode=""></image>
						</view>
						<view class="img-item upload-btn" @click="chooseImg()" v-if="imgs.length < 1"><image class="img" src="/static/imgs/tianjia-img.png" mode=""></image></view>
					</view>
				</view>
			</view>
			<view class="occupied"></view>
			<view class="footer-btn" @click="submit"><view class="btn">提交</view></view>
		</view>
		<!-- <view class="common-shade box box-center box-align-center" v-if="showAlert" @click="showAlert=false" >
			<view  style="background: white;height: 160upx;width: 100%;border-radius: 10upx 10upx 0upx 0upx;position: absolute;bottom: 0upx;">
				<view @click="photo" style="border-bottom: 1px solid #000000; border-radius: 10upx 10upx 0upx 0upx; height: 80upx;line-height: 80upx;text-align: center;">
					拍摄
				</view>
				<view @click="getImage" style="height: 80upx;line-height: 80upx;text-align: center;">
					从相册选择
				</view>
			
			</view>
		</view> -->
	</view>
</template>

<script>
import { submitRecommendFood } from '@/common/api.js';
import { callbackRequest, getStorage, alertTip, convertImgToBase64, formatDate,wxSdk,uploadImg } from '@/common/util.js';
import loadMore from '@/components/loadMore.vue';
import contentNone from '@/components/contentNone.vue';
import { pathToBase64 } from '@/js_sdk/mmmm-image-tools/index.js'
export default {
	components: {
		loadMore,
		contentNone
	},
	data() {
		return {
			formatDate: formatDate,
			//分页
			userInfo: getStorage('userInfo'),
			currentTabIndex: 0,
			imgs: [],
			imgsId:[],
			kinds : [
				{
					id: '1',
					name: '面点'
				},
				{
					id: '2',
					name: '猪/牛肉'
				},
				{
					id: '3',
					name: '卤菜'
				},
				{
					id: '4',
					name: '净菜'
				},
				{
					id: '5',
					name: '蔬菜'
				}
			],
			kindsIndex:0,
			feature:{
				foodName:"",
				kinds:"",
				reason:"",
				picture:"",
				creator:'',
				isRelease:0
			},
			showAlert:false,
		};
	},
	onLoad(option) {
		this.feature.isRelease = option.isRelease||0;
	},
	methods: {
		changeKinds(e) {
			this.kindsIndex = e.detail.value;
		},
		
		submit() {
			if (!this.feature.foodName) {
				alertTip('请输入菜品名称');
				return false;
			}
			
			// if (!this.this.feature.kinds) {
			// 	alertTip('请输入详细位置');
			// 	return false;
			// } 
			if (!this.feature.reason) {
				alertTip('请输入推荐理由');
				return false;
			}
			if(this.imgs.length==0){
				alertTip('请上传菜品图片');
				return false;
			}
			this.feature.kinds = this.kinds[this.kindsIndex].name;
			this.feature.picture = this.imgsId[0];
			this.feature.creator = this.userInfo.id;
			let params = {
				method: submitRecommendFood,
				data: this.feature
			};
			console.log(this.feature.isRelease);
			var type = this.feature.isRelease==0?2:1;
			callbackRequest(params).then(res => {
				res = res.data;
				if (res.returnCode == 1) {
					alertTip(res.returnMsg);
					setTimeout(function() {
						uni.navigateTo({
							url:'/pages/feature/feature?currentTabIndex=2'+'&type='+type
						})
					}, 1500);
				} else {
					alertTip(res.returnMsg);
				}
			});
		},
		async chooseImg() {
			let chec = 0;
			let sty = [];
			let _this = this;
			uni.showActionSheet({
				itemList:['拍照','相册'],
				success:function(resp){
					chec = resp.tapIndex;
					if (chec == 0) {
						sty = ['camera']; //从相册相机选择 
					} else {
						sty = ['album']; //从相册相机选择
					}
					uni.chooseImage({
						count:1,
						sizeType: ['compressed'],
						sourceType: sty, 
						quality: 1,
						success: async function(res){
							let resData = res.tempFilePaths;
							for(let i=0;i<resData.length;i++){
								if(_this.imgs.length>1){
									break;
								}
								uni.getImageInfo({
									src: resData[i],
									success:async (path) => {
										convertImgToBase64(path.path, async function(base64) {
											if(_this.imgs.length<1){
												// _this.imgs.push(base64);
												uni.showLoading({
													title: '图片上传中'
												})
												let blength = base64.length;
												let glength = 7500;
												if(blength<=glength){
													let uploadParam = {
														base64: base64,
														userId:  getStorage('userInfo').userId+i,
														groupEnd: '1'
													}
													await uploadImg(uploadParam).then(resu => {
														resu = resu.data ;
														uni.hideLoading();
														if (resu.returnCode != 1) {
															alertTip(resu.returnMsg);
														}else{
															_this.imgs.push(base64);
															_this.imgsId.push(resu.returnData+".jpg");
														}
													});
												}else{
													let fnum = parseInt(blength/glength);
													for(let j=1;j<fnum+1;j++){
														if(j==fnum){
															let groupBase = base64.slice((j-1)*glength);
															console.log(groupBase.length,"groupBaselength");
															let uploadParam = {
																base64: groupBase,
																userId: getStorage('userInfo').userId+i,
																groupEnd: '1'
															}
															await uploadImg(uploadParam).then(resu => {
																resu = resu.data ;
																if (resu.returnCode == 1) {
																	_this.imgs.push(base64);
																	_this.imgsId.push(resu.returnData+".jpg");
																} else {
																	uni.hideLoading();
																	alertTip(resu.returnMsg);
																	return;
																}
															});
														}else{
															let groupBase = base64.slice((j-1)*glength,glength*j);
															let uploadParam = {
																base64: groupBase,
																userId: getStorage('userInfo').userId+i,
																groupEnd: '0'
															}
															await uploadImg(uploadParam).then(resu => {
																resu = resu.data ;
																if (resu.returnCode == 1) {
																} else {
																	uni.hideLoading();
																	alertTip(resu.returnMsg);
																	return;
																}
															});
														}
														
													}
													uni.hideLoading();
												}
											}
											
										});
									},
								});
							}
							
						}
					});
				},
				fail:function(resp){
					console.log(resp.errMsg);
				}
			});
		},
		// chooseImg() {
		// 	let chec = 0;
		// 	let sty = [];
		// 	let _this = this;
		// 	uni.showActionSheet({
		// 		itemList:['拍照','相册'],
		// 		success:function(resp){
		// 			chec = resp.tapIndex;
		// 			if (chec == 0) {
		// 				sty = ['camera']; //从相册相机选择 
		// 			} else {
		// 				sty = ['album']; //从相册相机选择
		// 			}
		// 			uni.chooseImage({
		// 				count:3,
		// 				sizeType: ['compressed'],
		// 				sourceType: sty, 
		// 				quality: 0.7,
		// 				success:function(res){
		// 					let resData = res.tempFilePaths;
		// 					for(let i=0;i<resData.length;i++){
		// 						uni.getImageInfo({
		// 							src: resData[i],
		// 							success: (path) => {
		// 								pathToBase64(path.path).then(base64 => {
		// 									if(_this.imgs.length<3){
		// 										_this.imgs.push(base64);
		// 									}
		// 								})
		// 								.catch(error => {
		// 								})
		// 							}
		// 						})
		// 					}
							
		// 				}
		// 			});
		// 		},
		// 		fail:function(resp){
		// 			console.log(resp.errMsg);
		// 		}
		// 	});
			
		// },
		//删除图片
		removeImg(index) {
			this.imgs.splice(index, 1);
			this.imgsId.splice(index, 1);
		},
		navTo(url) {
			uni.navigateTo({
				url
			});
		},
		
	},
};
</script>

<style lang="scss">
@import url('../../static/css/repair/malfunction-repair.css');
@import '@/static/css/common.scss';

.nolist {
	font-size: 30upx;
	color: #797979;
	text-align: center;
	margin-top: 20upx;
}

.container {
	position: relative;
	overflow: hidden;

	.banner-box {
		width: 100%;
		height: 240upx;
		position: absolute;
		top: 0;
		left: 0;

		image {
			width: 100%;
			height: 100%;
		}

		border-radius: 30upx;
	}

	.main {
		margin: 172upx 40upx 0;
		position: relative;
		z-index: 10;

		.tab-box {
			overflow: hidden;
			border-radius: 10upx 10upx 0 0;
			background: rgba(132, 149, 167, 0.8);
			height: 70upx;

			.tab-item {
				float: left;
				height: 70upx;
				width: 50%;
				font-size: 30upx;
				color: #e5f6ff;
				text-align: center;
				line-height: 70upx;
			}

			.active {
				background: #fff;
				color: #333;
				border-radius: 10upx 10upx 0 0;
				font-weight: bold;
			}
		}
	}
}

.list-content {
	font-size: 28upx;
	margin: 0 40rpx;
	.details {
		background: white;
		padding: 0 15upx 15upx;
		// border-radius: 15upx;
		margin-bottom: 10rpx;
		.detail_header {
			border-bottom: #f8f8f8 5upx solid;
			height: 90upx;
			line-height: 90upx;
			// margin: 0;
			// border-radius: 10upx;

			.blueSign {
				height: 28upx;
				width: 5upx;
				background: #00c277;
				display: inline-block;
				margin-left: 20upx;
				vertical-align: middle;
			}

			.font-tilte {
				font-weight: bold;
				margin-left: 20upx;
				vertical-align: middle;
			}
		}

		.detail_msg {
			margin-left: 20upx;
			border-radius: 10upx;
			overflow: hidden;
			view {
				height: 60upx;
				line-height: 60upx;
			}

			.status {
				position: absolute;
				color: red;
				margin-left: 580upx;
				margin-top: -15upx;
			}
		}
	}
}

.statusgr {
	float: right;
	margin-right: 30upx;
	color: #00c277;
}

.statusred {
	float: right;
	margin-right: 30upx;
	color: red;
}

.img-box {
	overflow: hidden;
	padding-top: 20rpx;
	padding-bottom: 10rpx;

	.img-item {
		float: left;
		width: 200upx;
		height: 200upx;
		border: 1px solid #ddd;
		margin: 0 22rpx 20upx 0upx;
		position: relative;
		box-sizing: border-box;

		.img {
			display: block;
			width: 100%;
			height: 100%;
		}

		.remove-btn {
			position: absolute;
			top: -18upx;
			right: -18upx;
			width: 44upx;
			height: 44upx;
			z-index: 2;
		}
	}

	.upload-btn {
		.img {
			width: 60upx;
			height: 60upx;
			margin: 70upx auto 0;
		}
	}
}
.detail_msg .info-item {
	font-size: 28upx;
	margin-right: 30upx;
	text {
		display: inline-block;
		width: 140upx;
	}

	.infoSpan {
		width: auto;
		font-size: 28upx;
		color: #666;
		float: right;
	}
}
.form-box {
	background: #fff;
	.form-item {
		overflow: hidden;
		border-bottom: 1px solid #eee;
		padding: 30upx 20upx;
		.label {
			float: left;
			width: 150upx;
			font-size: 28upx;
			color: #333;
			font-weight: bold;
			line-height: 50upx;
		}
		.ipt-box {
			margin-left: 160upx;
			input {
				width: 100%;
				height: 50upx;
				line-height: 50upx;
				font-size: 26upx;
				color: #666;
			}
		}
		.select {
			.arrow {
				float: right;
				width: 16upx;
				height: 29upx;
				margin-top: 10upx;
			}
			.picker {
				height: 50upx;
				line-height: 50upx;
				font-size: 26upx;
				color: #666;
				margin-left: 10upx;
			}
		}
	}
}

.comment-btn {
	float: right;
	font-size: 24upx;
	border-radius: 10upx;
	color: #fff;
	// line-height: 30upx;
	text-align: center;
	min-width: 120upx;
	margin-right: 30upx;
	background-color: #00c277;
}

.common-shade{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100vh;
	background: rgba(0,0,0,0.7);
	z-index:99;
}

.box {
	display: flex;
	display: -webkit-flex;
}

.box-row-reverse {
	flex-direction: row;
}

/*上下排列*/
.box-column {
	flex-direction: column;
}

/*上下排列*/
.box-left {
	justify-content: flex-start;
}

/*居右*/
.box-right {
	justify-content: flex-end;
}

/*居左*/
.box-center {
	justify-content: center;
}

/*居中*/
.box-between {
	justify-content: space-between;
}

/*两端对齐*/
.box-align-center {
	align-items: center;
}

.box-wrap {
	flex-wrap: wrap;
}
</style>
