<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="drugs.drugsName" placeholder="请输入药品名称" type="text" maxlength="10" /></view>
					</view>
					<!-- <view class="form-item">
						<text class="label">菜品类型:</text>
						<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="drugs.remark" 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" 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>
</template>

<script>
import { submitDrugsPushAdd } from '@/common/api.js';
import { callbackRequest, getStorage, alertTip, convertImgToBase64, formatDate } from '@/common/util.js';
import loadMore from '@/components/loadMore.vue';
import contentNone from '@/components/contentNone.vue';
export default {
	components: {
		loadMore,
		contentNone
	},
	data() {
		return {
			formatDate: formatDate,
			//分页
			userInfo: getStorage('userInfo'),
			currentTabIndex: 0,
			imgs: [],
			kindsIndex:0,
			drugs:{
				drugsName:"",
				remark:"",
				drugsPicture:"",
				creator:'',
			},
		};
	},
	onLoad() {
	},
	methods: {
		changeKinds(e) {
			this.kindsIndex = e.detail.value;
		},
		
		submit() {
			if (!this.drugs.drugsName) {
				alertTip('请输入药品名称');
				return false;
			}
			
			// if (!this.this.feature.kinds) {
			// 	alertTip('请输入详细位置');
			// 	return false;
			// } 
			if (!this.drugs.remark) {
				alertTip('请输入推荐理由');
				return false;
			}
			if(this.imgs.length==0){
				alertTip('请上传药品图片');
				return false;
			}
			//this.feature.kinds = this.kinds[this.kindsIndex].name;
			this.drugs.drugsPicture = this.imgs[0];
			this.drugs.creator = this.userInfo.id;
			let params = {
				method: submitDrugsPushAdd,
				data: this.drugs
			};
			callbackRequest(params).then(res => {
				res = res.data;
				if (res.returnCode == 1) {
					alertTip(res.returnMsg);
					setTimeout(function() {
						uni.navigateTo({
							url:'/pages/drugspush/drugsPush?currentTabIndex=2'
						})
					}, 1500);
				} else {
					alertTip(res.returnMsg);
				}
			});
		},
		//上传图片
		// chooseImg() {
		// 	let _this = this;
		// 	uni.chooseImage({
		// 		count: 3,
		// 		success: res => {
		// 			let param = '';
		// 			let imgArr = res.tempFilePaths;
		// 			for (var i = 0; i < imgArr.length; i++) {
		// 				param = imgArr[i];
		// 				convertImgToBase64(param, function(base64) {
		// 					_this.imgs.push(base64);
		// 				});
		// 			}
		// 		}
		// 	});
		// },
		chooseImg() {
			let _this = this;
			uni.chooseImage({
				count: 3,
				success: res => {
					let param = '';
					let imgArr = res.tempFilePaths;
					for (var i = 0; i < imgArr.length; i++) {
						param = imgArr[i];
						uni.compressImage({
						  src: param,
						  quality: 80,
						  success: res1 => {
							  plus.io.resolveLocalFileSystemURL( res1.tempFilePath,
							  	function(entry){
							  		var reader = null;
							  		entry.file( function ( file ) {
							  			reader = new plus.io.FileReader();
							  			reader.onloadend = function ( e ) {
							  				_this.imgs.push(e.target.result);
							  			};
							  			reader.readAsDataURL( file );
							  		}, function ( e ) {
							  			alert( e.message );
							  		} )
							  	},
							  	function(e){
							  		console.log(e)
							  	}
							  );
						  }
						})
					}
				}
			});
		},
		//删除图片
		removeImg(index) {
			this.imgs.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;
}
</style>
