<template>
	<view>
		<uni-nav-bar :statusBar="true" fixed="true" :title="$t('index.category')" color="white"
			backgroundColor="#B60001"></uni-nav-bar>
		<view class="container">
			<shopping-search ref="shoppingSearch" :placeholder="$t('index.search-placeholder')" @search="onSearch"
				@screen="onScreen" />
			<view class="sort-class">
				<view @click="switchGoods(0)" :class=" current==0?'sort-class-btn active':'sort-class-btn'">
					{{$t('index.jingxuan')}}
				</view>
				<view @click="switchGoods(1)" :class=" current==1?'sort-class-btn active':'sort-class-btn'">
					{{$t('index.changjiazhigong')}}
				</view>
			</view>
			<no-data :show="nodata"></no-data>
			<shopping-mall :showShop="true" v-if="!nodata" :list="current==0?dataList:sourceList" @addCar="addCar"
				@buyNow="buyNow" />
			<uni-load-more :status="listStatus"></uni-load-more>

			<uni-popup ref="popup" type="right">
				<view class="screen-box"
					:style="{marginTop: safeAreaInsets.top+44 +'px',marginBottom: safeAreaInsets.bottom + 50 +'px',height:(screenHeight - safeAreaInsets.top - safeAreaInsets.bottom - 114)+'px'}">
					<view style="display: flex;flex: 1;overflow: auto;">
						<view class="screen">
							<view class="chunk-box">
								<view class="chunk-title">{{$t('index.price-range')}}</view>
								<view class="price-box">
									<view class="price-input">
										<input type="number" v-model="priceObj.min" :placeholder="$t('index.price-min')"
											placeholder-style="color:#ADB0B5;font-size:24rpx" />
									</view>
									<view class="price-line">
									</view>
									<view class="price-input">
										<input type="number" v-model="priceObj.max" :placeholder="$t('index.price-max')"
											placeholder-style="color:#ADB0B5;font-size:24rpx" />
									</view>
								</view>
							</view>
							<view class="chunk-box" v-for="(list, index) in screenList" :key="list.title">
								<view class="chunk-title">{{list.title}}</view>
								<view class="box">
									<view v-for="item in list.list" :key="item.name" class="chunk"
										:class="{'active': list.active === item.code}"
										@click="choseItem(item.code, index)">
										{{item.name}}
									</view>
								</view>
							</view>
						</view>
					</view>

					<view class="confirm-box">
						<view class="btn reset" @click="onReset">{{$t('index.reset')}}</view>
						<view class="btn confirm" @click="onConfirm">{{$t('index.sure')}}</view>
					</view>
				</view>
			</uni-popup>
			<!-- <my-authorization ref="authorization"></my-authorization> -->
		</view>
	</view>
</template>

<script>
	import {
		getHomePageData,
		addCartPost,
		getScreenList
	} from '@/config/api.js'
	import noData from '../../components/no-data/no-data.vue';
	import shoppingMall from '../../components/shopping-mall/shopping-mall.vue';
	import ShoppingSearch from '../../components/shopping-search/shopping-search.vue';
	// import myAuthorization from '../../components/authorization/authorization.vue';


	export default {
		name: 'sort',
		components: {
			shoppingMall,
			ShoppingSearch,
			noData
			// myAuthorization
		},
		data() {
			return {
				screenHeight: 0,
				safeAreaInsets: {
					top: 0,
					bottom: 0,
				},
				page: 1,
				p: 1,
				current: 0,
				sourceList: [], // 源头货源
				listStatus: 'more',
				seachValue: '',
				screenObj: {
					categoryCode: this.$t('index.all'),
					varieties: this.$t('index.all'),
					deliverPlace: this.$t('index.all'),
					manufacturer: this.$t('index.all'),
					brandNumber: this.$t('index.all')
				},
				priceActive: '',
				priceObj: {
					min: '',
					max: ''
				},
				dataList: [],
				screenList: [],
				nodata: false
			}
		},
		methods: {
			switchGoods(index) {
				this.current = index
				if (this.current == 0 && this.dataList.length == 0) {
					this.getPageData()
				}
				if (this.current == 1 && this.sourceList.length == 0) {
					this.getPageData()
				}
			},
			getPageData() {
				getHomePageData({
					page: this.current == 0 ? this.page : this.p,
					rows: 10,
					source: this.current == 0 ? 'seller' : 'supplier',
					keyword: this.seachValue,
					...this.screenObj,
					...this.priceObj
				}, {}).then(({
					content
				}) => {
					if (this.current == 0) {
						if (this.page == 1) {
							this.dataList.splice(0, this.dataList.length)
						}
						this.dataList = [...this.dataList, ...content.content]
						if (content.content.length < 10 || this.dataList.length >= content.numberOfElements) {
							this.listStatus = 'noMore'
						} else {
							this.page++
							this.listStatus = 'more'
						}
					} else {
						if (this.p == 1) {
							this.sourceList.splice(0, this.sourceList.length)
						}
						this.sourceList = [...this.sourceList, ...content.content]
						if (content.content.length < 10 || this.sourceList.length >= content.numberOfElements) {
							this.listStatus = 'noMore'
						} else {
							this.p++
							this.listStatus = 'more'
						}
					}
				})
			},
			getScreenList() {
				getScreenList({
					categoryLevel: 1,
					categoryCode: "",
					type: 'operator',
					current: this.current
				}).then(res => {
					let content = res.content.filter(item => item.list.length)
					// content.forEach(item=> {
					// 	item['active'] = item.list[0].code
					// })
					this.screenList = content
				})
			},
			addCar(item) {
				this.mixinCheckLogin().then(() => {
					if (item.availableCount > 0 && item.isInvalid == 'F' && item.priceStr) {
						if (item.defaultSpecsId) {
							addCartPost({
								cartList: [{
									availableCount: item.availableCount,
									businessId: item.id,
									count: 1,
									miniQuantity: 1,
									productCode: item.code,
									productName: item.name,
									sellerCode: item.platformType == 'operator' ? item
										.platformCode : (item.platformType == 'seller') ? item
										.sellerCode : item.supplierCode,
									sellerName: item.platformType == 'operator' ? item
										.platformName : (item.platformType == 'seller') ? item
										.sellerName : item.supplierName,
									source: item.platformType == 'operator' ? "platformSelf" : (
											item.platformType == 'seller') ? 'onSale' :
										'supplierSale',
									specs: item.varieties,
									specsId: item.defaultSpecsId
								}]
							}).then((res) => {
								setTimeout(() => {
									uni.showToast({
										title: this.$t('index.operate-success')
									});
								}, 30)
							})
						} else {
							uni.showToast({
								title: this.$t('index.msg-price-lose-efficacy'),
								icon: 'none'
							});
						}
					} else {
						uni.showToast({
							title: this.$t('index.msg-price-invalid'),
							icon: 'none'
						});
					}
				}).catch(err => {
					// this.$refs.authorization.openAuthorization()
					uni.navigateTo({
						url: `/pages/login/index?url=${encodeURIComponent(JSON.stringify('/pages/home/index'))}`
					});
				})
			},
			buyNow(item) {
				this.mixinCheckLogin().then(() => {
					if (item.availableCount > 0 && item.isInvalid == 'F' && item.priceStr) {
						if (item.defaultSpecsId) {
							uni.navigateTo({
								url: `/pages/write/index?id=${item.id}&platformType=${item.platformType}`
							});
						} else {
							uni.showToast({
								title: this.$t('index.msg-price-invalid'),
								icon: 'none'
							});
						}
					} else {
						uni.showToast({
							title: this.$t('index.msg-price-lose-efficacy'),
							icon: 'none'
						});
					}
				}).catch(err => {
					uni.navigateTo({
						url: `/pages/login/index?url=${encodeURIComponent(JSON.stringify('/pages/sort/index'))}`
					});
				})
			},
			onSearch(value) {
				this.seachValue = value
				this.onConfirm()
			},
			onScreen() {
				this.$refs.popup.open()
			},
			closePopup() {
				this.$refs.popup.close()
			},
			choseItem(code, index) {
				if (index === 0) this.screenObj.varieties = code
				if (index === 1) this.screenObj.deliverPlace = code
				if (index === 2) this.screenObj.manufacturer = code
				if (index === 3) this.screenObj.brandNumber = code
				this.screenList[index].active = code
				this.$forceUpdate()
			},
			onConfirm() {
				this.page = 1
				this.dataList = []
				this.getPageData()
				this.closePopup()
			},
			onReset() {
				Object.assign(this.$data, this.$options.data())
				this.$refs.shoppingSearch.searchValue = ''
				this.getPageData()
				this.getScreenList()
				this.closePopup()
			}
		},
		onLoad() {
			const {
				safeAreaInsets,
				screenHeight
			} = uni.getSystemInfoSync()
			this.safeAreaInsets = safeAreaInsets
			this.screenHeight = screenHeight

			this.getPageData()
			this.getScreenList()
		},
		onPullDownRefresh() {
			this.page = 1
			// Object.assign(this.$data, this.$options.data())
			this.getPageData()
			// this.getScreenList()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 500);
		},
		onReachBottom() {
			if (this.listStatus === 'noMore') return
			this.listStatus = 'loading'
			this.getPageData()
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx 30rpx 0;
		background-color: #fff;
	}

	.screen-box {
		width: 534rpx;
		background-color: #fff;
		padding: 30rpx 0;
		position: relative;
		display: flex;
		flex-direction: column;

		.close {
			position: absolute;
			top: 30rpx;
			right: 30rpx;
		}

		.title {
			font-size: 34rpx;
			color: #B60001;
			text-align: center;
		}

		.screen {
			height: 100%;
			overflow-y: auto;
			padding-bottom: 50rpx;

			.chunk-box {
				margin-top: 30rpx;

				.chunk-title {
					font-size: 28rpx;
					color: #93989E;
					padding: 0 30rpx;
				}

				.box {
					display: flex;
					flex-wrap: wrap;
					padding-left: 30rpx;
					padding-right: 10rpx;

					.chunk {
						box-sizing: border-box;
						max-width: 100%;
						// display: -webkit-box;
						// overflow: hidden;
						// text-overflow: ellipsis;
						// word-wrap: break-word;
						// white-space: normal !important;
						// -webkit-line-clamp: 1;
						// -webkit-box-orient: vertical;
						min-height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						padding: 0 30rpx;
						min-width: 120rpx;
						font-size: 24rpx;
						color: #222222;
						border: 1rpx solid #D5E2F3;
						border-radius: 4rpx;
						margin-top: 30rpx;
						margin-right: 20rpx;
						transition: all .3s;
						background: #F5F6F8;

						&.active {
							border: none;
							background-color: #B60001;
							color: #fff;
						}
					}
				}

				.btn-box {
					padding: 0 30rpx;

					.btn {
						height: 60rpx;
						line-height: 60rpx;
						border: 1rpx solid #D5E2F3;
						border-radius: 30rpx;
						font-size: 28rpx;
						color: #B60001;
						margin-top: 20rpx;
						text-align: center;

						&.active {
							border: none;
							background-color: #B60001;
							color: #fff;
						}
					}
				}

				.price-box {
					display: flex;
					align-items: center;
					justify-content: center;

					.price-input {
						align-items: center;
						justify-content: center;
						width: 200rpx;
						height: 64rpx;
						background: #F5F6F8;
						border-radius: 0rpx 0rpx 0rpx 0rpx;

						input {
							height: 64rpx;
							text-align: center;
						}
					}
				}

				.price-line {
					margin: 0 20rpx;
					width: 36rpx;
					height: 4rpx;
					background: #ADB0B5;
					border-radius: 0rpx
				}
			}
		}

		.confirm-box {
			border-top: 1px solid #F2F2F2;
			padding: 0 30rpx;
			display: flex;
			font-size: 28rpx;
			color: #FFFFFF;

			.btn {
				width: 50%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;

				&.reset {
					background-color: #fff;
					border-top-left-radius: 0rpx;
					border-bottom-left-radius: 0rpx;
					color: #222;
				}

				&.confirm {
					background-color: #B60001;
					border-top-right-radius: 0rpx;
					border-bottom-right-radius: 0rpx;
				}
			}
		}
	}

	.sort-class {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-evenly;
		border-bottom: 1px solid #F2F2F2;

		.sort-class-btn {
			display: flex;
			height: 48px;
			text-align: center;
			line-height: 48px;
			font-weight: 500;
			font-size: 15px;
			color: #222;
			border-bottom: 2px solid transparent;
		}

		.active {
			color: #B60001;
			border-bottom: 2px solid #B60001;
		}
	}
</style>