<template>
	<view class="container">
		<uni-nav-bar :border="false" :statusBar="true" backgroundColor="#B60001" color="white" fixed="true">
			<template #left>
				<view @tap="scanEvent">
					<uni-icons type="scan" size="24" color="white"></uni-icons>
				</view>
			</template>
			<view style="width: 132px;height: 26px;align-self: center;justify-self: center;">
				<image style="width: 100%;height: 100%;" :src="icon" mode="aspectFit"></image>
			</view>
		</uni-nav-bar>
		<!-- 跳转规则， 视频展示规则 -->
		<view v-if="!nodata">
			<view style="height: 380rpx" v-if="bannerList.length != 0">
				<swiper @change="onChanged" v-if="bannerList.length" style="height: 380rpx" circular
					:indicator-dots="bannerList.length>1?true:false" :autoplay="false"
					indicator-color="rgba(255, 255, 255, .6)" indicator-active-color="#fff">
					<swiper-item v-for="(item,index) in bannerList" :key="item.id">
						<view class="swiper-item" @tap="clickBanner(item)">
							<image v-if="isImage(item)" class="image" mode="aspectFill" :src="item.imageUrl"></image>

							<view class="video-bg" v-if="!isImage(item)">
								<video ref="video" auto-pause-if-navigate="true" auto-pause-if-open-native="true"
									object-fit="fill" :show-progress="false" :enable-progress-gesture="false"
									:controls="true" :src="item.imageUrl"></video>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="notice-box" v-if="jinLuDynamic.length!=0">
				<uni-icons type="sound-filled" color="#B60001" size="24"></uni-icons>
				<view class="notice">
					<swiper style="height: 30px" circular :autoplay="true" :vertical="true" @change="newsChange">
						<swiper-item v-for="item in jinLuDynamic" :key="item.id" @touchmove.stop="stopTouchMove">
							<view @click="onNewsDetail" class="notice-item">{{item.title}}</view>
						</swiper-item>
					</swiper>
				</view>
			</view>

			<!-- <view class="data-list">
				<view class="data-category">
					<view @tap="switchGoods(0)" :class="current==0?'active category-title':'normal category-title'">
						{{$t('index.sally-hot')}}
					</view>
					<view @tap="switchGoods(1)" :class="current==1?'active category-title':'normal category-title'">
						{{$t('index.mall-self')}}
					</view>
				</view>
				<shopping-mall :showAddress="true" :list="current==0?dataList:sourceList" @addCar="addCar"
					@buyNow="buyNow" />
			</view>
			<uni-load-more :status="listStatus" :contentText="contentText"></uni-load-more>

			<xzj-firsthint :isCustom="false" /> -->
<!--			集采 竞拍-->
			<view class="quick-entry">
				<view class="item" @click="quickEntry(1)" v-if="isPlatformType">
					<span class="icon">
						集
					</span>
					<text>集采专场</text>
				</view>
				<view class="item" @click="quickEntry(2)" v-if="isPlatformType">
					<span class="icon">
						竞
					</span>
					<text>竞拍专场</text>
				</view>
				<view class="item" @click="quickEntry(3)" >
					<span class="icon">
						循
					</span>
					<text>循环盘</text>
				</view>
			</view>
		</view>
		<no-data :show="nodata"></no-data>
	</view>
</template>

<script>
	import {
		getHomeData,
		getHomePageData,
		addCartPost
	} from '@/config/api.js'
	import {
		web
	} from '@/utils/util.js'
	import shoppingMall from '../../components/shopping-mall/shopping-mall.vue';
	import xzjFirsthint from '../../components/xzj-firsthint/xzj-firsthint.vue';
	let swiperCurrent = 0
	export default {
		name: 'home',
		components: {
			shoppingMall,
			xzjFirsthint
		},
		data() {
			return {
				userInfo: JSON.parse(uni.getStorageSync('userInfo')),
				icon: web('logo_title.png'),
				page: 1,
				p: 1, //源头货源
				current: 0,
				listStatus: 'more',
				bannerList: [], // 轮播图
				todayQuantity: 0, // 今日成交量
				totalQuantity: 0, // 累计成交量
				dynamicData: [], // 成交动态
				jinLuDynamic: [], // 新闻动态
				dataList: [], // 自营商城列表
				sourceList: [], // 源头货源
				nodata: false,
				showControls: false,
				video: null,
				isPlatformType:false,
				contentText: {
					contentdown: this.$t('index.pull.more'),
					contentrefresh: this.$t('index.pull.loading'),
					contentnomore: this.$t('index.no.data')
				}
			}
		},
		created() {
			if(this.userInfo.userCurrentPlat.platformType.indexOf('operator') !== -1){
				this.isPlatformType = true
			}
    },
		methods: {
			quickEntry(num){
				let isLogin = uni.getStorageSync('userInfo')
				if(isLogin){
					console.log('isLogin',isLogin)
					if(num == 1){
						uni.navigateTo({
							url: '/pages/schedule/index'
						})
					}else if(num == 2){
						uni.navigateTo({
							url: '/pages/auctionSpecial/index'
						})
					}else if(num == 3){
						uni.navigateTo({
							url: '/pages/circular/index'
						})
					}
				}else {
					uni.navigateTo({
						url: '/pages/login/index?url=' + encodeURIComponent('/pages/home/index')
					})
				}
			},
			stopTouchMove() {
				return false
			},
			isImage(item) {
				const types = ['jpeg', 'jpg', 'png', 'gif', 'webp', 'svg+xml'];
				const mimeType = item.imageUrl.split('.').pop(); // 获取文件扩展名
				return types.includes(mimeType);
			},
			onChanged(e) {
				let components = this.$refs.video
				if (components != undefined) {
					components.forEach(item => {
						item.pause()
					})
				}
			},
			clickBanner(item) {
				if (!this.isImage(item)) {
					this.showControls = true
				}
				if (item.roomId == undefined && item.type != 'specialSubject') {
					uni.navigateTo({
						url: '/pages/web/web?webUrl=' + encodeURIComponent('https://www.baidu.com')
					})
				}
			},
			getHomeDta() {
				getHomeData().then(({
						content
					}) => {
						// 包含roomId 为展厅 不显示
						// type=specialSubject 不显示
						// let temp = content.bannerList.filter((item) => {
						// 	console.log(this.isImage(item), item.imageUrl)
						// 	return (item.roomId == undefined || !this.isImage(item)) && item.type !=
						// 		'specialSubject'
						// })

						this.bannerList = [...content.bannerList]
						this.jinLuDynamic = content?.notice || []
						this.nodata = false
					})
					.catch(err => {
						this.nodata = true
					})
			},
			getPageData() {
				getHomePageData({
					page: this.current == 0 ? this.page : this.p,
					rows: 10,
					source: this.current == 0 ? 'seller' : 'supplier'
				}, {}).then(({
					content
				}) => {
					if (this.current == 0) {
						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 {
						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'
						}
					}
				})
			},
			addCar(item) {
				this.mixinCheckLogin().then(() => {
					if (item.availableCount > 0 && item.isInvalid == 'F' && item.priceStr) {
						if (item.defaultSpecsId) {
							addCartPost({
								cartList: [{
									businessId: item.id,
									count: 1,
									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'),
									specsId: item.defaultSpecsId
								}]
							}).then((res) => {
								setTimeout(() => {
									uni.showToast({
										title: this.$t('index.operate-success')
									});
								}, 30)
							})
						} 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/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/home/index'))}`
					});
				})
			},
			newsChange(event) {
				swiperCurrent = event.detail.current
			},
			onNewsDetail() {
				let id = this.jinLuDynamic[swiperCurrent]?.id || null
				if (id != null) {
					uni.navigateTo({
						url: `/pages/news/detail?id=${id}`
					});
				}

			},
			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()
				}
			},
			scanEvent() {
				uni.scanCode({

				})
			}
		},
		onLoad() {
			this.getHomeDta()
			this.getPageData()
		},
		onPullDownRefresh() {
			this.page = 1
			this.dataList = []
			this.getHomeDta()
			this.getPageData()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 500);
		},
		onReachBottom() {
			if (this.listStatus === 'noMore') return
			this.listStatus = 'loading'
			this.getPageData()
		}
	}
</script>

<style lang="scss" scoped src="../../static/css/shopping-mall.scss"></style>
<style lang="scss" scoped>
	.swiper-item {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;

		.image {
			width: 100%;
			height: 100%;
		}
	}

	.notice-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 30rpx 30rpx 0 30rpx;
		padding: 13px 10px;
		background-color: #fff;

		.notice {
			flex: auto;
			padding: 0 30rpx 0 10px;

			.notice-item {
				display: -webkit-box;
				overflow: hidden;
				text-overflow: ellipsis;
				word-wrap: break-word;
				white-space: normal !important;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				font-size: 28rpx;
				color: #222222;
				line-height: 30px;
				word-break: break-all;
			}
		}

		.detail-btn {
			padding: 10rpx 30rpx;
			border: 1rpx solid #10D680;
			border-radius: 4px;
			font-size: 12px;
			color: #10D680;
		}
	}

	.data-list {
		padding: 30rpx;

		.title {
			padding-left: 30rpx;
			font-size: 34rpx;
			font-weight: 500;
			color: #222222;
			position: relative;
			line-height: 1;

			&::before {
				content: " ";
				position: absolute;
				top: 0;
				left: 0;
				width: 4px;
				height: 100%;
				border-radius: 2px;
				background-color: #B60001;
			}
		}

		.data-category {
			display: flex;
			background: #fff;
			height: 40px;
			align-items: center;

			.category-title {
				padding-right: 30rpx;
				font-size: 30rpx;
				position: relative;
				line-height: 40px;
				height: 38px;
				display: flex;
				justify-content: center;
				flex-grow: 1;
			}

			.active {
				font-weight: 500;
				color: #B60001;
				border: 1px solid #B60001;
			}

			.normal {
				font-weight: 500;
				color: #333333;
			}
		}

		.data-box {
			height: 158rpx;
			border: 1rpx solid #D5E2F3;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			position: relative;
			margin-top: 30rpx;

			&::after {
				content: " ";
				position: absolute;
				top: 40rpx;
				left: 50%;
				width: 0;
				bottom: 40rpx;
				border-left: 1rpx solid #D5E2F3;
			}

			.data {
				width: 50%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.number {
					color: #B60001;
					font-size: 40rpx;
					line-height: 1;

					.unit {
						color: #B60001;
						font-size: 12px;
						margin-left: 3px;
					}
				}

				.text {
					font-size: 12px;
					color: #99A0AF;
					margin-top: 20rpx;
					line-height: 1;
				}
			}
		}

		.product-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20rpx;
			margin-top: 30rpx;

			.left {
				display: flex;

				.image {
					flex: none;
					width: 120rpx;
					height: 120rpx;
					border-radius: 5px;
				}

				.detail {
					display: flex;
					flex-direction: column;
					justify-content: center;
					margin-left: 20rpx;
					line-height: 1.2;

					.name {
						font-size: 28rpx;
						color: #B60001;
					}

					.time {
						font-size: 28rpx;
						color: #99A0AF;
						margin-top: 20rpx;
					}
				}
			}

			.right {
				flex: none;
				margin-left: 10px;

				.price {
					color: #B60001;
					font-size: 40rpx;
					line-height: 1;

					.unit {
						color: #B60001;
						font-size: 12px;
						margin-left: 3px;
					}
				}
			}
		}
	}

	.video-bg {
		width: 750rpx;
		height: 380rpx;

		video {
			width: 100%;
			height: 100%;
		}
	}
	.quick-entry {
		background-color: #ffffff;
		padding: 40rpx 30rpx 0;
		border-radius: 16rpx;
		display: flex;
		flex-wrap: wrap;
		margin-top: 30rpx;

		.item {
			width: 25%;
			display: flex;
			flex-flow: column;
			align-items: center;
			justify-content: center;
			margin-bottom: 40rpx;

			.item-img {
				position: relative;
				font-size: 0;

				.num {
					position: absolute;
					top: -5px;
					left: 75%;
					font-size: 20rpx;
					color: #FFFFFF;
					padding: 2px 4px;
					background-color: #F6C864;
					border-radius: 20rpx;
					min-width: 20rpx;
					text-align: center;
				}
			}

			.icon {
				width: 90rpx;
				height: 90rpx;
				display: block;
				background: #B60001;
				color: #fff;
				border-radius: 10rpx;
				text-align: center;
				line-height: 90rpx;
			}

			text {
				margin-top: 12rpx;
				font-size: 28rpx;
				color: #373737;
			}

		}
	}

</style>
