<template>
	<view class="container">
		<view class="banner-box"><image src="/static/imgs/yao1.png" mode=""></image></view>
		<view class="main">
			<view class="tab-box">
				<view class="tab-item" :class="currentTabIndex == 0 ? 'active_tab' : ''" @click="currentTabIndex = 0">药店新品</view>
				<view class="tab-item" :class="currentTabIndex == 1 ? 'active_tab' : ''" @click="currentTabIndex = 1">大众推荐</view>
				<view class="tab-item" :class="currentTabIndex == 2 ? 'active_tab' : ''" @click="currentTabIndex = 2">个人推荐</view>
			</view>
			<view v-if="dateInfo">
				<view class="time" v-if="currentTabIndex == 0">推荐时间: {{ dateInfo.start_time1 }} ~ {{ dateInfo.end_time1 }}</view>
				<view class="time" v-else>投票时间: {{ dateInfo.start_time2 }} ~ {{ dateInfo.end_time2 }}</view>
			</view>
			<view v-if="currentTabIndex == 1 && showTab == true">
				<uni-fab :content="content" :pattern="pattern" horizontal="right" vertical="bottom" direction="horizontal" @trigger="trigger">
				</uni-fab>
			</view>

			<!-- 餐厅新品 -->
			<view v-if="currentTabIndex == 0">
				<view class="list-box" v-if="releaseDrugsList.length > 0">
					
						<view class="list-item" v-for="(item, index) in releaseDrugsList" :key="item.id">
							<view class="content">
								<view class="image-box"><image mode="" :src="item.drugs_picture" /></view>
								<view class="fr-content">
									<view class="text">
										<text>药品名称:</text>
										{{ item.drugs_name }}
									</view>
									<!-- <view class="text">
										<text>菜品类型:</text>
										{{ item.kinds }}
									</view> -->
									<view class="text">
										<text>推荐理由:</text>
										{{ item.remark }}
									</view>
									<view class="text">
										<text>推荐人:</text>
										{{ item.real_name }}
									</view>
								</view>
							</view>
							<view class="bottom">
								<view class="num-box">
									点赞数:
									<text class="num">{{ item.vote_no||0 }}</text>
								</view>
								<!-- <view class="vote-btn" v-if="item.is_vote == 0" @click="vote(index, item.id)">我想吃</view> -->
								<!-- <view class="vote-btn" v-else-if="item.is_vote == 1">已点赞</view> -->
								<!-- <view class="vote-btn bg-ccc" v-else>我想吃</view> -->
							</view>
						</view>
					
				</view>
				<content-none :padTop="30" v-else></content-none>
			</view>
			<!-- 大众推荐 -->
			<!-- picture,food_name,kinds,reason,vote_no-->
			<view v-if="currentTabIndex == 1">
				<view class="list-box" v-if="publicdrugsList.length > 0">
				<checkbox-group @change="checkboxChange">
					<view class="list-item" v-for="(item, index) in publicdrugsList" :key="item.id">
						<label class="uni-list-cell uni-list-cell-pd">
							<view v-if="isCheckBox == true"><checkbox :value="item.id" :checked="item.checked" /></view>
							<!-- <view>{{item.publicList}}</view> -->
							<view class="content">
								<view class="image-box"><image mode="" :src="item.drugs_picture" /></view>
								<view class="fr-content">
									<view class="text">
										<text>药品名称:</text>
										{{ item.drugs_name }}
									</view>
									<!-- <view class="text">
										<text>菜品类型:</text>
										{{ item.kinds }}
									</view> -->
									<view class="text">
										<text>推荐理由:</text>
										{{ item.remark }}
									</view>
								</view>
							</view>
							<view class="bottom">
								<view class="num-box">
									点赞数:
									<text class="num">{{ item.vote_no||0 }}</text>
								</view>
								<view class="vote-btn" v-if="item.is_vote ==0 || item.is_vote==null" @click="vote(index, item.id)"><image src="../../static/imgs/dz-before.png"/></view>
								<view class="vote-btn" v-if="item.is_vote!=0&&item.is_vote!=null"><image src="../../static/imgs/dz-after.png"/></view>
							</view>
						</label>
					</view>
					</checkbox-group>
				</view>
				<content-none :padTop="30" v-else></content-none>
			</view>
			<!-- 个人推荐 -->
			<view v-if="currentTabIndex == 2">
				<view class="list-box" v-if="mydrugsList.length > 0">
					<view class="list-item" v-for="item in mydrugsList" :key="item.id">
						<view class="content">
							<view class="image-box"><image mode="" :src="item.drugs_picture" /></view>
							<view class="fr-content">
								<view class="text">
									<text>药品名称:</text>
									{{ item.drugs_name }}
								</view>
								<!-- <view class="text">
									<text>菜品类型:</text>
									{{ item.kinds }}
								</view> -->
								<view class="text">
									<text>推荐理由:</text>
									{{ item.remark }}
								</view>
							</view>
						</view>
						<!-- <view class="bottom">
							<view class="num-box">票数: <text class="num">{{item.vote_no}}</text></view>
							<view class="vote-btn" v-if="item.is_vote == 0" @click="vote(index,item.id)">投票</view>
							<view class="vote-btn" v-else-if="item.is_vote == 1">已投票</view>
							<view class="vote-btn bg-ccc" v-else>投票</view>
						</view> -->
					</view>
				</view>
				<content-none :padTop="30" v-else></content-none>
			</view>
		</view>
		<view v-if="currentTabIndex == 1 && isCheckBox == true">
			<view class="footer-btn footer-btn-two">
				<view class="btn btn-col" @click="cancel">取消</view>
				<view class="btn btn-col1" @click="submitDrugsRelease">确认发布</view>
			</view>
		</view>
		<load-more v-show="currentTabIndex == 0" :loadingType="loadingType0" :contentText="contentText"></load-more>
		<load-more v-show="currentTabIndex == 1" :loadingType="loadingType1" :contentText="contentText"></load-more>
		<load-more v-show="currentTabIndex == 2" :loadingType="loadingType2" :contentText="contentText"></load-more>
	</view>
</template>

<script>
import { alertTip, callbackRequest, getStorage, convertImgToBase64 } from '@/common/util.js';
import { recommendFood, getMySubmitDrugsPush ,getPublicDrugsPush,drugsPushVote,submitDrugsRelease,getReleaseDrugsList} from '@/common/api.js';
import loadMore from '@/components/loadMore.vue';
import contentNone from '@/components/contentNone.vue';
import uniFab from '@/components/uni-fab/uni-fab.vue';

export default {
	data() {
		return {
			showTab: true,
			isCheckBox: false,
			pattern:{buttonColor:'#307aff'},

			currentTabIndex: 0,
			chooseClassifyIndex: 0, //选中的菜单下标
			page: 1,
			pageSize: 10,
			loadingType: 0, //0-loading前；1-loading中；2-没有更多了
			page0: 1,
			pageSize0: 10,
			loadingType0: 0, //0-loading前；1-loading中；2-没有更多了
			page1: 1,
			pageSize1: 10,
			loadingType1: 0, //0-loading前；1-loading中；2-没有更多了
			page2: 1,
			pageSize2: 10,
			loadingType2: 0, //0-loading前；1-loading中；2-没有更多了
			contentText: {
				contentdown: '上拉加载更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多数据了'
			},
			index: 0,
			kinds: ['熟食', '凉菜', '热菜', '蔬菜', '主食', '水果'],
			foodName: '', //菜品名称
			reason: '', //推荐理由
			materialName: '', //食材名称
			imgs: [],
			userId: getStorage('userInfo').id,
			foodList: [], //推荐菜列表
			title: 'checkbox 复选框',
			//新品列表
			newfoodList: [
			],
			// 大众推荐列表
			dateInfo: null,
			cindex: 1, //  1 餐厅管理员 进入 2 普通员工进入
			content: [{ text: '发布', iconPath: '/static/icons/fb.png' },{ text: '推荐', iconPath: '/static/icons/fb.png' }],
			mydrugsList:[],
			publicdrugsList:[],
			releaseDrugsList:[],
		};
	},
	watch: {
		currentTabIndex: function(newVal, oldVal) {
			
			if (newVal == 0) {
				this.page0 = 1;
				this.loadingType0 = 0;
				this.getReleaseDrugsList();
			} else if (newVal == 1) {
				this.cancel();
				this.page1 = 1;
				this.loadingType1 = 0;
				this.getPublicDrugsPush();
			}else if (newVal == 2) {
				this.page2 = 1;
				this.loadingType2 = 0;
				this.getMySubmitDrugsPush();
			}
		}
	},
	components: {
		loadMore,
		contentNone,
		uniFab
	},
	onLoad(option) {
		this.currentTabIndex = option.currentTabIndex || 0;
		if(this.currentTabIndex ==0){
			this.page0 = 1;
			this.loadingType0 = 0;
			this.getReleaseDrugsList();
		}else if(this.currentTabIndex ==1){
			this.cancel();
			this.page1 = 1;
			this.loadingType1 = 0;
			this.getPublicDrugsPush();
		}else if(this.currentTabIndex ==2){
			this.page2 = 1;
			this.loadingType2 = 0;
			this.getMySubmitDrugsPush();
		}
		// if (this.currentTabIndex == 0) {
			
		// }
		// if (this.cindex == 1) {
		// 	this.content = [{ text: '发布', iconPath: '/static/icons/fb.png' },{ text: '推荐', iconPath: '/static/icons/fb.png' }];
		// } else {
		// 	this.content = [{ text: '推荐' }];
		// }
		// this.getDate();
	},
	methods: {
		checkboxChange: function(d) {
			var items = this.publicdrugsList,
				values = d.detail.value;
			for (var i = 0, lenI = items.length; i < lenI; ++i) {
				const item = items[i];
				if (values.includes(item.id)) {
					this.$set(item, 'checked', true);
				} else {
					this.$set(item, 'checked', false);
				}
			}
		},
		// 取消发布
		cancel(){
			this.isCheckBox = false;
			this.showTab = true;
		},
		// 点击fab中的按钮
		trigger(e) {
			if (e.index == 0) {
				// 发布
				if (this.cindex == 1){
					this.isCheckBox = true;
					this.showTab = false;
				}
			}else if(e.index == 1){
				uni.navigateTo({
					url: '/pages/drugspush/drugspush-add'
				});
			}
		},

		getMySubmitDrugsPush() {
			let params = {
				method: getMySubmitDrugsPush,
				data: {
					creator: this.userId,
					pageNum:this.page2,
					pageSize:this.pageSize2
				}
			};
			callbackRequest(params).then(res => {
				if (res.data.returnCode == 1) {
					res = res.data;
					if (this.page2 == 1) {
						this.mydrugsList = res.returnData || [];
						console.log(this.mydrugsList)
					} else {
						if (res.returnData.length > 0) {
							this.mydrugsList = this.mydrugsList.concat(res.returnData);
							this.loadingType2 = 0;
						} else {
							this.loadingType2 = 2;
						}
					}
				}
			});
		},
		getPublicDrugsPush(){
			let params = {
				method: getPublicDrugsPush,
				data: {
					creator: this.userId,
					pageNum:this.page1,
					pageSize:this.pageSize1
				}
			};
			callbackRequest(params).then(res => {
				if (res.data.returnCode == 1) {
					res = res.data;
					if (this.page1 == 1) {
						this.publicdrugsList = res.returnData || [];
					} else {
						if (res.returnData.length > 0) {
							this.publicdrugsList = this.publicdrugsList.concat(res.returnData);
							this.loadingType1 = 0;
						} else {
							this.loadingType1 = 2;
						}
					}
				}
			});
		},
		getReleaseDrugsList(){
			let params = {
				method: getReleaseDrugsList,
				data: {
					creator: this.userId,
					pageNum:this.page0,
					pageSize:this.pageSize0
				}
			};
			callbackRequest(params).then(res => {
				if (res.data.returnCode == 1) {
					res = res.data;
					if (this.page0 == 1) {
						this.releaseDrugsList = res.returnData || [];
					} else {
						if (res.returnData.length > 0) {
							this.releaseDrugsList = this.releaseDrugsList.concat(res.returnData);
							this.loadingType0 = 0;
						} else {
							this.loadingType0 = 2;
						}
					}
				}
			});
		},
		// 点赞
		vote(index, id) {
			let params = {
				method: drugsPushVote,
				data: {
					voteUser: this.userId,
					featureId: id
				}
			};
			callbackRequest(params).then(res => {
				if (res.data.returnCode == 1) {
					this.publicdrugsList[index].vote_no++;
					this.publicdrugsList[index].is_vote = 1;
				} else {
					alertTip(res.data.returnMsg);
				}
			});
		},
		submitDrugsRelease(){
			var ids = "";
			for(var i=0;i<this.publicdrugsList.length;i++){
				if(i!=0){
					ids+=",";
				}
				if(this.publicdrugsList[i].checked){
					ids+=this.publicdrugsList[i].id;
				}
			}
			let params = {
				method: submitDrugsRelease,
				data: {
					creator: this.userId,
					ids:ids
				}
			};
			callbackRequest(params).then(res => {
				res = res.data;
				if (res.returnCode == 1) {
					
					alertTip(res.returnMsg);
					setTimeout(function() {
						uni.navigateTo({
							url:'/pages/drugspush/drugsPush?currentTabIndex=0'
						})
					}, 1500);
				} else {
					alertTip(res.returnMsg);
				}
			});
		}
	},
	onReachBottom() {
		if(this.currentTabIndex ==0){
			if (this.loadingType0 !== 0 ) {
				return;
			}
			this.loadingType0 = 1;
			this.page0 = this.page0 + 1;
			this.getReleaseDrugsList();
		}else if(this.currentTabIndex ==1){
			if (this.loadingType1 !== 0 ) {
				return;
			}
			this.loadingType1 = 1;
			this.page1 = this.page1 + 1;
			this.getPublicDrugsPush();
		}else if(this.currentTabIndex ==2){
			if (this.loadingType2 !== 0 ) {
				return;
			}
			this.loadingType2 = 1;
			this.page2 = this.page2 + 1;
			this.getMySubmitDrugsPush();
		}
	}
};
</script>

<style lang="scss">
@import '@/static/css/common.scss';
.container {
	min-height: 100vh;
	background: #f8f8f8;
	overflow: hidden;
	position: relative;
	.banner-box {
		width: 100%;
		height: 240upx;
		position: absolute;
		top: 0;
		left: 0;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.time {
		font-size: 28rpx;
		color: #555;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
	}
	.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: 33.3%;
				font-size: 30upx;
				color: #e5f6ff;
				text-align: center;
				line-height: 70upx;
			}
			.active_tab {
				background: #fff;
				color: #333;
				border-radius: 10upx 10upx 0 0;
				font-weight: bold;
			}
		}
	}
	.form-box {
		// margin: 20upx;
		.form-item {
			overflow: hidden;
			padding: 22upx 30upx 22upx 20upx;
			background: #fff;
			border-bottom: 1px solid #f8f8f8;
			.label {
				float: left;
				width: 160upx;
				font-size: 30upx;
				color: #333;
				font-weight: bold;
				line-height: 50upx;
				text-align: right;
			}
			.ipt-box {
				margin-left: 170upx;
				input {
					width: 100%;
					height: 50upx;
					font-size: 28upx;
					color: #666;
					line-height: 50upx;
				}
			}
			.picker-box {
				margin-left: 170upx;
				overflow: hidden;
				.arrow {
					float: right;
					width: 16upx;
					height: 29upx;
					margin-top: 10upx;
				}
				.picker {
					margin-right: 40upx;
					font-size: 28upx;
					line-height: 50upx;
					color: #666;
				}
			}
		}
		.img-list {
			padding: 0 0 14upx;
			background: #fff;
			margin-bottom: 10upx;
			.title {
				font-size: 28upx;
				color: #333;
				font-weight: bold;
				line-height: 40upx;
				padding: 25upx 30upx 0;
			}
			.img-box {
				overflow: hidden;
				padding-top: 25upx;
				.img-item {
					float: left;
					width: 190upx;
					height: 190upx;
					border: 1px solid #ddd;
					margin: 0 0 20upx 26upx;
					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: 60upx auto 0;
					}
				}
			}
		}
		.text-box {
			padding: 0 0 30upx;
			background: #fff;
			margin-bottom: 10upx;
			.title {
				font-size: 28upx;
				color: #333;
				font-weight: bold;
				line-height: 40upx;
				padding: 25upx 30upx 0;
			}
			.textarea-box {
				border: 1px solid #f8f8f8;
				padding: 10upx;
				margin: 25upx 30upx 0;
				textarea {
					font-size: 28upx;
					color: #666;
					line-height: 34upx;
					width: 100%;
					resize: none;
					height: 200upx;
				}
			}
		}
		.btn {
			padding: 0 0 30upx;
			background: #fff;
			margin-top: -10upx;
			.sure-btn {
				width: 90%;
				height: 80upx;
				font-size: 28upx;
				color: #fff;
				text-align: center;
				line-height: 80upx;
				border-radius: 8upx;
				background: #0066cc;
				background: linear-gradient(to right, #ffc200, #ff9000); /*设置按钮为渐变颜色*/
				margin-left: 5%;
			}
		}
	}
}

.list-box {
	background: #fff;
	.list-item {
		border-bottom: 10upx solid #f8f8f8;
		padding: 15upx 10upx;
		.content {
			overflow: hidden;
			.image-box {
				float: left;
				width: 200upx;
				height: 200upx;
				image {
					display: block;
					width: 100%;
					height: 100%;
				}
			}
			.fr-content {
				margin-left: 220upx;
				.text {
					font-size: 26upx;
					color: #666;
					line-height: 40upx;
					margin-bottom: 10upx;
					text {
						float: left;
						color: #333;
						padding-right: 10upx;
					}
				}
			}
		}
		.bottom {
			overflow: hidden;
			padding: 10upx 0upx 0;
			.num-box {
				float: left;
				font-size: 28upx;
				color: #333;
				line-height: 40upx;
				text {
					color: #5fbf3d;
					padding-left: 4upx;
				}
			}
			.vote-btn {
				float: right;
				width: 35upx;
				height: 35upx;
				image {
					width: 100%;
					height: 100%;
				}
				// background: #5fbf3d;
				// font-size: 26upx;
				// color: #fff;
				// text-align: center;
				// line-height: 60upx;
				// border-radius: 4upx;
			}
		}
	}
}
.uni-list-cell {
	justify-content: flex-start;
}
</style>
