<template>
	<view class="app-goods-banner" v-if="picList.length > 0">
		<!-- #ifdef H5 -->
		<bd-h5-back></bd-h5-back>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view class='account-box' v-if='mallConfig.mall.setting.is_official_account == 1'>
			<official-account></official-account>
		</view>
		<!-- #endif -->

		<view class="swiper_zhishi" v-if="picList.length>0">
			<view :class="swiperKey===i?'view_active':''" v-for="(item1,i) in picList" :key="i"></view>
		</view>
		<swiper class="swiper" v-bind:autoplay="autoplay" v-bind:indicator-dots="false" circular @change='bannerChange' :current="current"
			indicator-color="rgba(254,255,254,.4)" indicator-active-color="#FFFFFF">
			<!-- #ifndef MP-BAIDU || H5 -->
			<!-- <swiper-item
				v-if="videoUrl && getVideo == 1 && sign !== 'lottery' && sign !== 'bargain' && sign !== 'community' && sign !== 'wholesale'">
				<view class="swiper-img" @click="routeJumpT"
					v-bind:style="{backgroundImage: 'url(' + rangeKey!='false'?picList[0][rangeKey]:picList[0] + ')'}">
					<image class="video-play" src="https://shop.9026.com/web/statics/img/mall/static/video-play.png">
					</image>
				</view>
			</swiper-item> -->
			<!-- #endif-->

			<swiper-item v-for="(item, index) in picList" v-bind:key="index">
				<view class="swiper-img"
					v-bind:style="{backgroundImage: `url(${rangeKey!='false'?item[rangeKey]:item})`}"
					@click="clickImage(index)">

					<!-- #ifndef MP-BAIDU || H5 -->
					<app-video v-if="index === 0 && videoUrl && getVideo == 0" height="750rpx"
						v-bind:pic-url="rangeKey!='false'?item[rangeKey]:item" v-bind:url="videoUrl"
						v-on:video-start="videoStart" v-on:tap.native.stop="preventD"></app-video>
					<app-video
						v-if="index === 0 && videoUrl && getVideo == 1 && (sign === 'lottery' || sign === 'bargain' || sign === 'community' || sign === 'wholesale')"
						height="750rpx" v-bind:pic-url="rangeKey!='false'?item[rangeKey]:item" v-bind:url="videoUrl"
						v-on:video-start="videoStart" v-on:tap.native.stop="preventD"></app-video>
					<!-- #endif -->

					<!-- #ifdef MP-BAIDU || H5 -->
					<app-video v-if="index === 0 && videoUrl" height="750rpx"
						v-bind:pic-url="rangeKey!='false'?item[rangeKey]:item" v-bind:url="videoUrl"
						v-on:video-start="videoStart" v-on:tap.native.stop="preventD"></app-video>
					<!-- #endif -->

				</view>
			</swiper-item>
		</swiper>

		<view>
			<app-jump-button url="/pages/cart/cart" v-if="isCart">
				<view class="cart" :class="isScanQrCode ? 'bd-cart-0' : 'bd-cart-1'">
					<image load-lazy src="https://shop.9026.com/web/statics/image/mall/static/icon/nav-icon-cart.png">
					</image>
				</view>
			</app-jump-button>
		</view>
		<view class="share-commission dir-left-nowrap cross-center" v-if="share > 0">
			<image load-lazy src="https://shop.9026.com/web/statics/img/mall/share/share_commission.png"></image>
			<view class="text">
				<view>分销最高可赚</view>
				<view>￥{{share}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import appVideo from "../../page-component/app-video/app-video.vue";
	// #ifdef H5
	import bdH5Back from "@/components/page-component/goods/bd-h5-back.vue";
	// #endif
	import {
		mapState,
		mapGetters
	} from 'vuex';

	export default {
		components: {
			'app-video': appVideo,
			// #ifdef H5
			bdH5Back
			// #endif
		},
		props: {
			current:{
				type:Number,
				default:0
			},
			picList: {
				type: Array,
				default () {
					return []
				}
			},
			rangeKey: { //传空字符串竟然为true,所以传false字符串替代''
				type: String,
				default: 'pic_url'
			},
			share: {
				type: Number
			},
			isCart: {
				type: Boolean,
				default () {
					return true;
				}
			},
			videoUrl: {
				type: String
			},
			goods_id: {
				type: [Number, String]
			},
			sign: {
				type: String
			}
		},
		data() {
			return {
				swiperKey: 0,
				// #ifdef MP
				autoplay: true,
				// #endif
				// #ifdef H5
				autoplay: false,
				// #endif
			};
		},
		methods: {
			bannerChange(e) {
				this.swiperKey = e.detail.current
				this.$event.trigger(this.$const.EVENT_VIDEO_END);
			},
			videoStart(videoStatus) {
				// #ifdef MP
				videoStatus ? this.autoplay = false : this.autoplay = true;
				// #endif
			},
			preventD() {},
			clickImage(index) {
				let urls = [];
				this.picList.forEach(item => {
					urls.push(this.rangeKey != 'false' ? item[this.rangeKey] : item);
				});
				uni.previewImage({
					current: index,
					urls: urls
				});
			},
			// #ifndef MP-BAIDU || H5
			routeJumpT() {
				uni.navigateTo({
					url: `/pages/goods/video?goods_id=${this.goods_id}&sign=${this.sign}`
				})
			}
			// #endif
		},
		computed: {
			...mapState({
				// #ifdef MP-WEIXIN
				mallConfig: state => state.mallConfig,
				// #endif
				isScanQrCode: state => state.page.isScanQrCode
			}),
			// #ifndef MP-BAIDU
			...mapGetters('mallConfig', {
				getVideo: 'getVideo'
			}),
			// #endif
		},

	}
</script>

<style scoped lang="scss">
	.app-goods-banner {
		position: relative;
		width: 750upx;


		.swiper_zhishi {
			display: flex;
			align-items: center;
			width: 80%;
			justify-content: center;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 39rpx;
			overflow: hidden;
			z-index: 100;

			view {
				width: 81rpx;
				height: 4rpx;
				background: #c8c8c8;
			}

			.view_active {
				background: #f4f4f4;
			}
		}
	}

	.cart {
		position: fixed;
		right: #{24rpx};
		background: rgba(255, 255, 255, 0.5);
		font-size: 0;
		padding: #{20rpx};
		border-radius: #{999rpx};
		box-shadow: 0 #{1rpx} #{3rpx} rgba(0, 0, 0, 0.2);
		z-index: 100;

		image {
			width: #{42rpx};
			height: #{42rpx};
		}
	}

	.bd-cart-0 {
		top: #{250rpx};
	}

	.bd-cart-1 {
		top: #{180rpx};
	}

	.share-commission {
		height: #{80rpx};
		padding-right: #{10rpx};
		min-width: #{220rpx};
		position: absolute;
		right: 0;
		bottom: #{80rpx};
		border-top-left-radius: #{40rpx};
		border-bottom-left-radius: #{40rpx};
		background-color: rgba(0, 0, 0, 0.4);
		z-index: 100;

		image {
			width: #{44rpx};
			height: #{44rpx};
			margin-right: #{14rpx};
			margin-left: #{20rpx};
		}

		.text {
			color: #ffffff;
			font-size: $uni-font-size-weak-two;
		}
	}

	.swiper {
		height: #{750rpx};

		.swiper-img {
			width: 100%;
			height: #{750rpx};
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			position: relative;
		}
	}

	.video-play {
		width: #{128upx};
		height: #{128upx};
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
</style>
