<template>
	<view>
		<!-- 		<u-navbar placeholder :title="'助力乡村振兴礼包'" :bgColor="'#FB3024'" titleStyle="color:#fff" leftIconColor="#fff" leftIcon="arrow-left" @leftClick="goBack">
			<button v-if="type == 200" class="nav-right-btn" slot="right" @click="showPop = true">筛选</button>
		</u-navbar> -->
		<view class="top-box">
			<view class="search-box">
				<u-icon name="search" size="36rpx" color="#999"></u-icon>
				<input @confirm="searchName" confirm-type="search" class="search-input" v-model="waresName" type="text" value="" :placeholder="$t('w_0253')" />
			</view>
		</view>
		<view class="top-tabbar">
			<view class="tab-item" :class="{ active: type == 18 }" @click="changeType(18)">{{ $t('ENU_ORDER_T_18') }}</view>
			<view class="tab-item" :class="{ active: type == 19 }" @click="changeType(19)">{{ $t('ENU_ORDER_T_19') }}</view>
		</view>
		<template v-if="type != 200">
			<view class="product-list">
				<view class="product-item" v-for="(item, index) in listData" :key="index">
					<image class="product-img" :src="item.cover1" mode="" @click="gotoPage('/pages/product/detail?waresCode=' + item.waresCode + '&cid=' + type)"></image>
					<view class="product-info">
						<view class="text-ellipsis-2 f26 gray3 mb10">{{ item.waresName }}</view>
						<view class="ww100">
							<view class="f22 gray9 mb10">{{ $t('CK_KS_102') }}:{{ item.sales }}</view>
							<view class="f22 gray9 mb10" v-if="type == 19">{{ $t('ENU_TOTAL_V_1') }}：{{ formatNum(item.waresAchieve) }}</view>
							<view class="d-b-c">
								<view class="price-color fb">{{ currencyIcon() }}{{ formatNum(item.waresPrice) }}</view>
								<image class="cart-img" src="/static/icon/cart-icon.png" mode="" @click="addShopping(item)"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>
		<!-- 筛选 -->
		<u-popup :show="showPop" mode="right" @close="closePop" @open="openPop">
			<view class="pop-content rightpop">
				<view class="pop-title d-b-c">
					<view class="f28 gray3">{{ $t('MY_ORD_50') }}</view>
					<view class="f28 domation" @click="closePop">{{ $t('N_I_241') }}</view>
				</view>
				<view class="right-item-title">{{ $t('w_0078') }}</view>
				<view style="padding: 0 24rpx;"><u-search :placeholder="$t('w_0078')" :clearabled="true" :showAction="false" v-model="keyword"></u-search></view>

				<view class="right-item-title">{{ $t('w_0352') }}</view>
				<view class="d-c-c">
					<picker mode="date" :value="date1" :start="startDate" :end="endDate" @change="bindDateChange1">
						<view class="data-input">{{ date1 || $t('CK_KS_3') }}</view>
					</picker>
					<view style="width: 30rpx;height: 1rpx;background-color: #333;margin: 0 24rpx;"></view>
					<picker mode="date" :value="date2" :start="startDate" :end="endDate" @change="bindDateChange2">
						<view class="data-input">{{ date2 || $t('CK_KS_9') }}</view>
					</picker>
				</view>
				<view class="pop-btns">
					<view class="pop-left-btn">{{ $t('w_0257') }}</view>
					<view class="pop-right-btn">{{ $t('w_0035') }}</view>
				</view>
			</view>
		</u-popup>
		<template v-if="showCart">
			<view class="pop-cart">
				<view class="d-e-c" style="padding: 0 24rpx;"><u-icon name="close" size="32rpx" color="#999" @click="showCart = false"></u-icon></view>
				<view class="f32 gray3 d-c-c">{{ $t('N_I_194') }}</view>
				<view class="cart-list">
					<view class="cart-item" v-for="(item, index) in cartData" :key="index">
						<view class="radio-check checked d-c-c"><u-icon name="checkbox-mark" color="#fff" size="26rpx"></u-icon></view>
						<view class="order-product">
							<view class="product-item">
								<view class="d-b-s mb20">
									<image class="product-img" :src="item.cover1" mode=""></image>
									<view class="product-info d-c d-b-s flex-1">
										<view class="text-ellipsis-2 f28 gray3">{{ item.waresName }}</view>
										<view class="price-color f24">
											{{ currencyIcon() }}
											<text class="f32 fb">{{ formatNum(item.waresPrice) }}</text>
										</view>
									</view>
								</view>
								<view class="secend-product">
									<view class="d-b-s mb20" v-for="(pitem, pindex) in item.productParams" :key="pindex">
										<view class="d-s-c">
											<image :src="pitem.waresItemsParamsList[0].specCover" mode="" class="s-product-img"></image>
											<view class="f28">
												{{ pitem.productName }}
												<text class="ml20">{{ pitem.waresItemsParamsList[0].specsName }}</text>
											</view>
										</view>
										<view class="f24 gray9 ml20">X{{ pitem.waresItemsParamsList[0].quantity }}</view>
									</view>
								</view>
								<view class="d-b-c mt20">
									<view class="counter-box">
										<view class="d-c-c counter-add" @click="plusReduceShopping(item, 'reduce')"><u-icon name="minus" size="26rpx" color="#666"></u-icon></view>
										<view class="counter-num">{{ item.number }}</view>
										<view class="d-c-c counter-add" @click="plusReduceShopping(item, 'add')"><u-icon name="plus" size="26rpx" color="#666"></u-icon></view>
									</view>
									<u-icon @click="deleteCart(item)" width="34rpx" height="36rpx" name="/static/icon/product/cart-delete.png"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!--底部按钮-->
			<view class="bottom-btns d-e-c f28">
				<view class="total d-s-c flex-1 mr20">
					<view class="cart-img">
						<image src="/static/icon/cart-cart.png" mode=""></image>
						<!-- <view class="cart-num">10</view> -->
					</view>
					<view>
						<view class="price f32">
							{{ currencyIcon() }}
							<text class="num f38 fb">{{ formatNum(cartMoney) }}</text>
						</view>
						<view class="f24 gray3">{{ $t('ENU_TOTAL_V_1') }}:{{ formatNum(cartAchieve) }}</view>
					</view>
				</view>
				<button :disabled="payClock()" type="primary" class="buy-btn theme-btn" @click="toPay">{{ $t('w_0312') }}</button>
			</view>
			<view class="pop-bg" @click.stop="showCart = false"></view>
		</template>
		<view class="pop-icons">
			<view class="pop-icon">
				<image @click="getShopping" src="/static/icon/product/pop-cart.png" mode=""></image>
				<view v-if="sCount > 0" class="scount-pop">{{ sCount }}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		const currentDate = this.getDate({
			format: true
		});
		return {
			type: 18,
			showPop: false,
			/*最后一页码数*/
			last_page: 0,
			/*当前页面*/
			page: 1,
			/*每页条数*/
			list_rows: 10,
			/*有没有等多*/
			no_more: false,
			/*是否正在加载*/
			loading: true,
			listData: [],
			date1: '',
			date2: '',
			searchtype: 0,
			keyword: '',
			waresName: '',
			addLock: false,
			showCart: false,
			sCount: 0,
			cartData: []
		};
	},
	computed: {
		cartMoney: function() {
			let self = this;
			let price = 0;
			console.log(self.cartData);
			self.cartData.forEach(item => {
				price += item.waresPrice * 1 * item.number;
			});
			return price;
		},
		cartAchieve: function() {
			let self = this;
			let achieve = 0;
			console.log(self.cartData);
			self.cartData.forEach(item => {
				achieve += item.achieve * 1 * item.number;
			});
			return achieve;
		},
		/*加载中状态*/
		loadingType() {
			if (this.loading) {
				return 1;
			} else {
				if (this.listData.length != 0 && this.no_more) {
					return 2;
				} else {
					return 0;
				}
			}
		},
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		}
	},
	onShow() {
		/*获取数据*/
		this.listData = [];
		this.getData();
	},
	methods: {
		payClock(){
			let self =this;
			if(self.cartData&&self.cartData.length>0){
				return false
			}else{
				return true
			}
		},
		getData() {
			let self = this;
			self.loading = true;
			self._post(
				'sale/api/wares/query-spe-wares',
				{
					specialArea: self.type,
					waresName: self.waresName
				},
				function(res) {
					self.listData = res.data;
				},
				{},
				() => {
					self.loading = false;
					self.getShoppingCount();
				}
			);
		},
		plusReduceShopping(e, type) {
			let self = this;
			if (self.addLock) {
				return;
			}
			self.addLock = true;
			let num = e.number;
			if (type == 'add') {
				num++;
			}
			if (type == 'reduce') {
				num--;
				if (num <= 0) {
					num = 1;
				}
			}
			self._post(
				'sale/api/shopping/plusReduceShopping',
				{
					number: num,
					shoppingId: e.shoppingId,
					specialArea: self.type
				},
				res => {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						success() {
							self.getShopping();
						}
					});
				},
				false,
				() => {
					self.addLock = false;
				}
			);
		},
		toPay() {
			let self = this;
			let arr = [];
			self.cartData.forEach(item => {
				arr.push(item.shoppingId);
			});
			uni.setStorageSync('cartinfo', arr);
			self.gotoPage('/pages/prefecture/confirm-order?specialArea=' + self.type);
		},
		getShopping() {
			let self = this;
			self._get(
				'sale/api/shopping/getShopping',
				{
					specialArea: self.type
				},
				res => {
					if (res.data != '') {
						self.cartData = res.data[0].shoppingCartList;
					} else {
						self.cartData = [];
					}
					self.showCart = true;
				}
			);
			self.getShoppingCount();
		},
		getShoppingCount() {
			let self = this;
			self._get(
				'sale/api/shopping/getShoppingCount',
				{
					specialArea: self.type
				},
				res => {
					self.sCount = res.data.smallCount;
				}
			);
		},
		changeType(e) {
			this.type = e;
			this.listData = [];
			this.getData();
		},
		closePop() {
			this.showPop = false;
		},
		openPop() {
			this.showPop = true;
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		},
		bindDateChange1: function(e) {
			this.date1 = e.detail.value;
		},
		bindDateChange2: function(e) {
			this.date2 = e.detail.value;
		},
		searchName: function() {
			/*获取数据*/
			this.listData = [];
			this.getData();
		},
		deleteCart(e) {
			let self = this;
			if (self.addLock) {
				return;
			}
			self.addLock = true;
			self._post(
				'sale/api/shopping/batchDelShopping',
				{
					deleteList: [
						{
							shoppingId: e.shoppingId
						}
					]
				},
				res => {
					self.getShopping();
					uni.showToast({
						title: res.msg,
						icon: 'none',
						success() {}
					});
				},
				false,
				() => {
					self.addLock = false;
				}
			);
		},
		addShopping(e) {
			let self = this;
			self._post(
				'sale/api/shopping/addShopping',
				{
					number: 1,
					productGroup: e.productGroup,
					specialArea: self.type,
					waresCode: e.waresCode
				},
				res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					self.getShoppingCount();
				}
			);
		}
	}
};
</script>

<style lang="scss">
.top-box {
	width: 750rpx;
	padding: 0 30rpx 0 23rpx;
	box-sizing: border-box;
	height: 102rpx;
	background: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	border-bottom: 1rpx solid #eee;
	margin-bottom: 24rpx;
}

.search-box {
	flex: 1;
	height: 65rpx;
	background: #f5f6f8;
	border-radius: 33rpx;
	padding: 0 52rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;

	.search-input {
		font-size: 26rpx;
		color: #333;
		margin-left: 14rpx;
		flex: 1;
	}
}

.top-tabbar {
	// position: sticky;
	// top: 0;
	// left: 0;
	// z-index: 97;
	border-bottom: 1rpx solid #eee;

	.tab-item {
		color: #666;
	}

	.tab-item.active {
		font-weight: 400;
		color: #333;
	}
}

.nav-right-btn {
	background: none;
	color: #fff;
}

.product-list {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	padding: 25rpx 25rpx 60rpx 24rpx;
}

.product-list .product-item {
	width: 342rpx;
	padding: 0 0 25rpx 0;
	// height: 496rpx;
	background: #ffffff;
	box-shadow: 0rpx 5rpx 5rpx 0px rgba(0, 0, 0, 0.05);
	border-radius: 15rpx;
	margin-bottom: 26rpx;
	flex-shrink: 0;
	overflow: hidden;
}

.product-info .cart-img {
	width: 46rpx;
	height: 46rpx;
	background: linear-gradient(180deg, #f6c1b8, #fe5541, #f00d04);
	box-shadow: 0px 3rpx 7rpx 0px rgba(0, 0, 0, 0.25);
	border-radius: 50%;
	margin-left: 10rpx;
	flex-shrink: 0;
	display: block;
}

.product-info {
	height: 220rpx;
	box-sizing: border-box;
	padding: 10rpx 16rpx 0 16rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
}

.product-img {
	height: 292rpx;
	width: 100%;
}

.order-item {
	padding: 0 19rpx 0 24rpx;
	background: #fff;
	margin-bottom: 20rpx;
}

.order-item-title {
	height: 93rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	border-bottom: 1rpx solid #eee;
}

.order-img {
	width: 124rpx;
	height: 124rpx;
	margin-right: 20rpx;
	flex-shrink: 0;
	display: block;
	border: 15rpx;
	margin-bottom: 24rpx;
}

.pop-icons {
	position: fixed;
	right: 10rpx;
	bottom: 42rpx;
	z-index: 90;
}

.pop-icon {
	position: relative;
	width: 110rpx;
	height: 110rpx;
	border-radius: 50%;
	margin-top: 20rpx;
	box-shadow: 0px 3rpx 7rpx 0px rgba(0, 0, 0, 0.45);

	image {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
	}
}

.pop-cart {
	position: fixed;
	bottom: 96rpx;
	left: 0;
	width: 100%;
	z-index: 101;
	background-color: #fff;
	padding: 0 0;
	box-sizing: border-box;
	padding-top: 20rpx;
	border-radius: 25rpx 25rpx 0 0;
	min-height: 200rpx;
}

.bottom-btns {
	position: fixed;
	width: 100%;
	padding: 0 24rpx 0 27rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 96rpx;
	// /* bottom: calc(var(--window-bottom); */
	bottom: 0;
	left: 0;
	box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.1);
	background: #ffffff;
	z-index: 101;
}

.bottom-btns .buy-btn {
	margin: 0;
	padding: 0 24rpx;
	height: 67rpx;
	line-height: 67rpx;
	border-radius: 38rpx;
	// background: linear-gradient(90deg, #FF6B6B 4%, #F6220C 100%);
	font-size: 28rpx;
	flex-shrink: 0;
}

.bottom-btns .price {
	color: $dominant-color;
}

.pop-bg {
	position: fixed;
	z-index: 99;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	background-color: rgba(0, 0, 0, 0.65);
}

.counter-box {
	width: 168rpx;
	height: 50rpx;
	border-radius: 30rpx;
	border: 1rpx solid #eeeeee;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 26rpx;
	color: #333;
	margin-top: 26rpx;
}

.counter-num {
	height: 50rpx;
	min-width: 56rpx;
	padding: 0 10rpx;
	box-sizing: border-box;
	border-left: 1rpx solid #eeeeee;
	border-right: 1rpx solid #eeeeee;
	line-height: 50rpx;
	text-align: center;
}

.counter-add {
	height: 50rpx;
	width: 56rpx;
	flex-shrink: 0;
	font-size: 26rpx;
	color: #666;
	font-weight: bold;
}

.cart-list {
	padding: 0 24rpx;
	max-height: 60vh;
	overflow-y: auto;
}

.cart-list::-webkit-scrollbar {
	/*滚动条整体样式*/
	/*高宽分别对应横竖滚动条的尺寸*/
	display: block;
	width: 5rpx !important;
	height: 1rpx !important;
	-webkit-appearance: default-button;
}

.cart-list::-webkit-scrollbar-thumb {
	/*滚动条里面小方块*/
	border-radius: 10px;
	background-color: #909399;
	// background-image: -webkit-linear-gradient(45deg,
	//     rgba(255, 255, 255, 0.2) 25%,
	//     transparent 25%,
	//     transparent 50%,
	//     rgba(255, 255, 255, 0.2) 50%,
	//     rgba(255, 255, 255, 0.2) 75%,
	//     transparent 75%,
	//     transparent);
}

.cart-list::-webkit-scrollbar-track {
	/*滚动条里面轨道*/
	box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
	background: #ededed;
	border-radius: 10px;
}

.bottom-btns .cart-img {
	width: 50rpx;
	height: 50rpx;
	position: relative;
	margin-right: 18rpx;

	image {
		width: 50rpx;
		height: 50rpx;
	}
}

.cart-num {
	width: 28rpx;
	height: 28rpx;
	background: #fb3024;
	box-shadow: 0px 3rpx 7rpx 0px rgba(0, 0, 0, 0.25);
	border-radius: 50%;
	font-size: 22rpx;
	color: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: -10rpx;
	right: -14rpx;
}

.scount-pop {
	background: #fb3024;
	color: #fff;
	font-size: 22rpx;
	width: 36rpx;
	height: 36rpx;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	right: 0;
	top: 0;
}
button[disabled][type=primary]{
	background-color: rgba(#fb3024, 0.6);
}
</style>
