<template>
	<view class="container safe-area-inset-bottom">
		<!-- 搜索 -->
		<view class="search">
			<u-search placeholder="输入药品名称" bg-color="#F5f5f5" color="#DDDDDD" border-color="#F5f5f5"
				:show-action="false" maxlength="21" height="66" :clearabled="true" shape="round" v-model="keyword"
				@search="toSearch">
			</u-search>
		</view>

		<!-- 商品 -->
		<!-- //药品分类左 -->
		<view class="goods">
			<view class="goods_left" @touchmove.stop>
				<scroll-view scroll-y scroll-with-animation class="u-menu-scroll-view" :scroll-top="scrollTop"
					:scroll-into-view="itemId">
					<view v-for="(item,index) in drugCategoryLists" :key="item.id" class="u-tab-item"
						:class="[num == item.id ? 'u-item-active' : '']" @tap.stop="changeStyle(item.id)"
						@click="handleCategory1(item.id,index)">
						<text class="u-line-1">{{item.category_name}}</text>
					</view>
				</scroll-view>
			</view>
			<!-- //药品分类右 -->
			<view class="goods_right">
				<view class="_btn">
					<scroll-view scroll-x style="white-space: nowrap;" @touchmove.stop>
						<!-- 	<view  v-for="item in drugCategoryLists" > -->
						<view v-for="(item1,index) in drugCategoryLists[selectIndex].subs"
							:class="current==item1.id?'btns_active' : 'btns'" @click="handleCategory2(item1.id)">
							{{item1.category_name}}
						</view>
						<!-- </view> -->
					</scroll-view>
				</view>
				<!-- 药品 -->
				<view class="second">
					<!-- 商品列表 -->
					<view class="list" v-for="(item,index) in drugLists" @click="toDetail(item.id)">
						<text class="cf" v-if="item.type == 2">{{item.is_otc=='0'?'处方药':'非处方药'}}</text>
						<text class="cf" v-else></text>
						<view class="img">
							<image :src="item.image" mode="" :class="{ 'prescription-blur': item.is_otc === '0' || item.is_otc === 0 }"></image>
						</view>
						<view class="it">
							<view class="it_name">{{item.drug_name}}</view>
							<view class="it_info">{{item.small_info}}</view>
							<view class="it_price">
								<text>{{item.drugstore_drug.price}}</text>
								<image src="/static/home/gwc.png" mode=""
									@tap.stop="toCartImg(item.drugstore_drug.drug_id)"></image>
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>

		<!-- 选择数量 -->
		<u-popup v-model="show" mode="bottom" border-radius="28" length="55%" :safe-area-inset-bottom="true"
			:closeable="true">
			<view class="popup" v-for="(item,index) in drugLists" :key="item.id" v-if="item.id==drug_id">
				<view class="good">
					<image :src="item.image" mode=""></image>
					<view class="good_">
						<text>{{item.drug_name}}</text>
						<text class="price">{{item.drugstore_drug.price}}</text>
					</view>
				</view>

				<view class="good_num">
					<text>购买数量</text>
					<uni-number-box :min="1" :max="9" @change="changeValue()"></uni-number-box>
				</view>

				<view class="btn">
					<view class="to_btn" @click="toCart">
						加入购物车
					</view>
					<view class="to_pay" @click="tocartPay">
						立即购买
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		drugCategorys,
		drugLists,
		addCart

	} from '../../request/api/api'
	export default {
		data() {
			return {
				keyword: "",
				scrollTop: 0, //tab标题的滚动条位置
				oldScrollTop: 0, // tab标题的滚动条旧位置
				current: 1, // 预设当前项的值
				num: 0,
				itemId: '', // 栏目右边scroll-view用于滚动的id
				drugCategoryLists: [], //药品分类
				category_first: 0, //药品分类一级id
				category_second: 0,
				drugLists: [],
				selectIndex: 0,
				drug_id: '',
				qty: '',
				// list: [{
				// 	id: 1
				// }, {
				// 	id: 1
				// }, {
				// 	id: 1
				// }, {
				// 	id: 1
				// }, {
				// 	id: 1
				// }, {
				// 	id: 1
				// }, {
				// 	id: 1
				// }, {
				// 	id: 1
				// }],
				// tabbar: JSON.parse(uni.getStorageSync('categroy')), // 渲染的数据，放在最后供你们测试
				arr: [], // 储存距离顶部高度的数组
				scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
				show: false
			}
		},

		methods: {
			// 搜索
			toSearch() {
				this.getList()
			},
			changeValue(value) {
				this.qty = value
				// console.log('返回数值：', value);
			},
			/*切换需要*/
			changeStyle(id) {
				this.num = id
			},
			// 详情
			toDetail(e) {
				uni.navigateTo({
					url: '/subPackages/shop/orders-detail?id=' + e
				})
			},
			// 加入购物车
			toCart() {
				this.addToCart()
				uni.navigateTo({
					url: '/subPackages/shop/shop-cate?id=' + this.drug_id
				})
			},
			//图标加入购物车
			toCartImg(e) {
				// this.show = true
				// let id=e
				this.drug_id = e
				if (this.drug_id) {
					this.show = true
				}

			},
			// 立即购买
			tocartPay() {
				uni.navigateTo({
					url: '/subPackages/shop/shop-pay?id=' + this.drug_id
					// url: '/subPackages/shop/shop-pay?id='+this.drug_id+'&&qty='+this.qty
				})
			},
			//点击药品一级分类
			handleCategory1(e, index) {
				this.num = e
				this.category_first = e - 1
				this.selectIndex = index
				if (this.selectIndex == 0) {
					this.category_second = 0
				} else {
					this.category_second = 7
				}
				this.getDrugList()
			},
			//点击药品二级分类
			handleCategory2(e) {
				this.current = e
				this.category_second = e - 3
				this.getDrugList()
			},

			//获取药品分类
			getList() {
				drugCategorys({
					method: "post",
					data: {
						store_id: uni.getStorageSync('store_id') || '11001',
					}
				}).then((res) => {
					// console.log(res, 'list');
					if (res.data.code == 0) {
						this.drugCategoryLists = res.data.data
						this.category_first = res.data.data.map(x => x.id)
						this.num = res.data.data[0].id //初始选中
						this.current = res.data.data[0].subs[0].id //初始选中2
						// console.log(this.category_first);
					}
				})
			},
			getDrugList() {
				drugLists({
					method: "post",
					data: {
						store_id: uni.getStorageSync('store_id') || '11001',
						category_first: this.category_first,
						category_second: this.category_second,
					}
				}).then((res) => {
					// console.log(res, 'list');
					if (res.data.code == 0) {
						this.drugLists = res.data.data
					}

				})
			},
			//加入购物车
			addToCart() {
				addCart({
					method: "post",
					data: {
						store_id: uni.getStorageSync('store_id') || '11001',
						drug_id: this.drug_id,
						change_qty: this.qty
						// id:this.id
					}
				}).then((res) => {
					// console.log(res, 'list');
					if (res.data.code == 0) {
						console.log(res);

					}

				})
			},

		},




		mounted() {
			this.getList();
			this.getDrugList()
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		background: #F6F9FB;
		width: 750rpx;
		max-height: 100%;
		min-height: 100vh;
		padding-bottom: env(safe-area-inset-bottom);

		.search {
			width: 750rpx;
			background-color: #fff;
			height: 98rpx;
			margin: 0 auto;
			padding: 16rpx 30rpx;

			.u-search {
				width: 686rpx;
				height: 66rpx;
				margin: 0 auto;
			}
		}

		.popup {
			padding: 56rpx 36rpx 30rpx 60rpx;

			.good {
				width: 100%;
				height: 200rpx;
				display: flex;
				align-items: center;

				image {
					width: 180rpx;
					height: 180rpx;
					margin-right: 22rpx;
				}

				.good_ {
					flex: 1;
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #232323;
					display: flex;
					flex-direction: column;

					.price {
						font-size: 40rpx;
						color: #F93030;
						margin-top: 20rpx;
					}
				}
			}

			.good_num {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 70rpx 0;

				text {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #232323;
				}
			}

			.btn {
				font-size: 30rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				display: flex;
				align-items: center;

				.to_btn {
					width: 280rpx;
					height: 70rpx;
					background: #D0E4FF;
					border-radius: 64rpx;
					line-height: 70rpx;
					text-align: center;
					color: #1777FF;
					margin-right: 40rpx;
				}

				.to_pay {
					width: 280rpx;
					height: 70rpx;
					line-height: 70rpx;
					text-align: center;
					background: #1777FF;
					border-radius: 64rpx;
					color: #FFFFFF;
				}
			}
		}

		.goods {
			width: 750rpx;
			min-height: calc(100vh - 98rpx);
			display: flex;

			.goods_left {
				width: 184rpx;
				background: #fff;
				margin-right: 16rpx;

				.u-tab-item {
					width: 184rpx;
					height: 100rpx;
					text-align: center;
					line-height: 100rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: bold;
					color: #9EA7B1;
				}

				.u-item-active {
					width: 184rpx;
					height: 100rpx;
					text-align: center;
					line-height: 100rpx;
					background: #F6F9FB;
					border-left: 4rpx solid #4175EE;
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #232323;
				}
			}

			.goods_right {
				width: 530rpx;
				background: #F6F9FB;

				._btn {
					width: 530rpx;
					height: 100rpx;
					line-height: 100rpx;

					.btns {
						display: inline-block;
						line-height: 54rpx;
						height: 54rpx;
						padding: 2rpx 20rpx;
						text-align: center;
						background: #DFDFDF;
						font-size: 24rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #666666;
						margin-right: 20rpx;
						border-radius: 8rpx;
					}

					.btns_active {
						display: inline-block;
						line-height: 54rpx;
						height: 54rpx;
						padding: 2rpx 20rpx;
						text-align: center;
						font-size: 24rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						margin-right: 20rpx;
						border-radius: 8rpx;
						background: #DEE8F6;
						color: #4175EE;
					}
				}

				.second {
					width: 530rpx;

					.list {
						display: flex;
						justify-content: space-around;
						align-items: center;
						padding: 0 15rpx;
						width: 530rpx;
						height: 248rpx;
						background: #FFFFFF;
						margin: 0rpx auto 20rpx;
						position: relative;

						.cf {
							position: absolute;
							left: 0;
							top: 0;
							display: inline-block;
							width: 100rpx;
							height: 40rpx;
							line-height: 40rpx;
							text-align: center;
							border-radius: 8rpx;
							background: #D0E4FF;
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #4175EE;
						}

						.img {
							width: 140rpx;
							height: 180rpx;
							margin-right: 10rpx;

							image {
								width: 100%;
								height: 100%;
								border-radius: 8rpx;
								
								// 处方药图片模糊处理（暂时禁用）
								&.prescription-blur {
									/* filter: blur(10px);
									-webkit-filter: blur(10px); */
								}
							}
						}

						.it {
							flex: 1;
							font-family: PingFang SC-Bold, PingFang SC;

							.it_name {
								font-size: 28rpx;
								font-weight: bold;
								color: #232323;
							}

							.it_info {
								padding-left: 10rpx;
								font-size: 24rpx;
								font-weight: 400;
								color: #666666;
								margin: 20rpx 0 48rpx 0;
								display: -webkit-box;
								-webkit-line-clamp: 1;
								-webkit-box-orient: vertical;
								text-overflow: ellipsis;
								overflow: hidden;
							}

							.it_price {
								display: flex;
								align-items: center;
								justify-content: space-between;

								text {
									font-size: 36rpx;
									font-weight: bold;
									color: #F93030;
								}

								image {
									width: 44rpx;
									height: 44rpx;
									border-radius: 50%;
									background: #4491E9;
									vertical-align: middle;
								}
							}
						}
					}

				}
			}
		}
	}
</style>
