<template>
	<view class="shop-seckill" v-if="isLoad">
		<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" color="#fff" :backgroundColor="``"
			image="/static/image/shop/seckill-nav.png" leftIcon="icon-left" v-if="tabList.length>0">
		</uni-nav-bar>
		<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" color="#fff" :backgroundColor="primaryColor"
			title="限时秒杀" leftIcon="icon-left" v-else>
		</uni-nav-bar>
		<view :style="{height:`${configInfo.navBarHeight + 15}px`}"></view>
		<block v-if="tabList.length>0">
			<image mode="aspectFill" lazy-load class="common-bg mine abs"
				src="https://lbqny.migugu.com/admin/farm/bg-mine.png"></image>
			<view class="seckill-fill abs"></view>
			<scroll-view scroll-x class="seckill-tab ml-md mr-md" :scroll-into-view="'tab'+(activeIndex-1)"
				:scroll-with-animation="true">
				<view class="item-child rel flex-center flex-column text-center f-caption"
					:class="[{'cur':activeIndex==index}]" :style="{color:activeIndex==index?primaryColor:'#F9F9F9'}"
					v-for="(item,index) in tabList" :key="index" @tap="handerTabChange(index)" :id="'tab'+index">
					<view class="f-lg-title">{{item.time}}</view>
					<view>{{item.day}}</view>
					<view>{{statusType[item.atv_status]}}</view>
				</view>
			</scroll-view>
		</block>
		<block v-for="(item,index) in list.data" :key="index">
			<view @tap.stop="goDetail(index)"
				class="goods-item flex-center rel ml-md mr-md pt-lg pb-lg pl-md pr-md fill-base"
				:class="[{'radius-bottom':index==0},{'mt-md radius-16':index>0}]">
				<image mode="aspectFill" lazy-load class="seckill-tag abs" src="/static/image/shop/seckill-tag.png">
				</image>
				<image mode="aspectFill" lazy-load class="cover radius-16" :src="item.cover"></image>
				<view class="flex-1 ml-md">
					<view class="f-title c-title text-bold mt-sm mb-sm ellipsis">{{item.goods_name}}
					</view>
					<view class="flex-center f-caption c-desc">
						<image mode="aspectFill" lazy-load class="store-img" src="/static/image/shop/seckill-store.png">
						</image>
						<view class="flex-1 ml-sm max-350 ellipsis">{{item.store_name}}</view>
					</view>
					<view class="flex-between mt-md mb-lg">
						<view class="line-item rel">
							<view class="cur abs" :style="{width:item.precent}"></view>
							<view class="f-icontext c-base abs"> {{item.precent}}</view>
						</view>
						<view class="c-caption" style="font-size: 20rpx;">已抢{{item.all_have_stock}}</view>
					</view>
					<view class="flex-between">
						<view class="flex-y-center">
							<view class="flex-y-baseline f-caption mb-sm" :style="{color:primaryColor}">
								¥<view class="f-lg-title">{{item.show_data.price}}</view>
							</view>
							<view class="ml-sm f-caption c-caption text-delete">¥{{item.show_data.init_price}}</view>
						</view>
						<view @tap.stop="toNotice(index)" class="common-btn flex-center f-caption c-base radius"
							:style="{background:primaryColor}">
							<view class="flex-center" v-if="tabList[activeIndex].atv_status==1"><i
									class="iconfont icon-tixing mr-sm"></i>{{item.have_notice?'已提醒':'提醒我'}}</view>
							<block v-else>{{btnText[tabList[activeIndex].atv_status]}}</block>
						</view>
					</view>
				</view>
			</view>
		</block>
		<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading" v-if="loading">
		</load-more>
		<view :class="[{'fill-base ml-md mr-md radius-bottom':tabList.length>0}]"
			v-if="!loading&&list.data.length<=0&&list.current_page==1">
			<abnor></abnor>
		</view>
		<view class="space-footer"></view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
	} from "vuex"
	export default {
		components: {},
		data() {
			return {
				options: {},
				color: '#ffffff',
				isLoad: false,
				statusType: {
					1: '未开始',
					2: '进行中',
					3: '已结束'
				},
				btnText: {
					1: '',
					2: '立即抢购',
					3: '已结束'
				},
				activeIndex: 0,
				atvId: 0,
				tabList: [],
				param: {
					page: 1,
				},
				list: {
					data: [],
					current_page: 1
				},
				loading: true,
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			userInfo: state => state.user.userInfo,
			mineInfo: state => state.user.mineInfo,
		}),
		onLoad() {
			this.$util.showLoading()
			this.initIndex()
		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.list.current_page >= this.list.last_page || this.loading) return
			this.param.page = this.param.page + 1
			this.loading = true
			this.getList()
		},
		onPageScroll(e) {
			let color = e.scrollTop < 20 ? '#ffffff' : '#000000'
			if (this.color == color) return
			this.color = color
		},
		methods: {
			...mapActions(['getUserInfo', 'getAuthUserProfile']),
			async initIndex() {
				let data = await this.$api.shop.killAtvList()
				data.map(item => {
					item.time = this.$util.formatTime(item.start_time * 1000, 'h:s')
					item.day = this.$util.formatTime(item.start_time * 1000, 'YY年M月D日')
				})
				this.tabList = data
				if (data.length == 0) {
					this.$util.hideAll()
					this.loading = false
					this.isLoad = true
					return
				}
				let {
					atvId,
				} = this
				let activeIndex = data.findIndex(item => {
					return item.id == atvId
				})
				activeIndex = activeIndex == -1 ? 0 : activeIndex
				this.activeIndex = activeIndex
				this.atvId = data[activeIndex].id
				await this.getList()
				this.isLoad = true
			},
			initRefresh() {
				this.initIndex()
			},
			handerTabChange(index) {
				this.activeIndex = index
				this.atvId = this.tabList[index].id
				this.$util.showLoading()
				this.param.page = 1
				this.list.data = []
				this.getList()
			},
			async getList() {
				let {
					list: oldList,
					atvId: atv_id,
				} = this
				let param = Object.assign({}, this.param, {
					atv_id,
				})
				let newList = await this.$api.shop.killGoodsList(param);
				newList.data.map(item => {
					let {
						all_stock,
						all_have_stock
					} = item
					item.precent = (all_have_stock / all_stock * 100).toFixed(2) + '%'
				})
				if (this.param.page == 1) {
					this.list = newList
				} else {
					newList.data = oldList.data.concat(newList.data)
					this.list = newList
				}
				this.loading = false
				this.$util.hideAll()
			},
			async goDetail(index) {
				let {
					goods_id
				} = this.list.data[index]
				this.$util.goUrl({
					url: `/shop/pages/detail?id=${goods_id}`
				})
			},
			async toNotice(index) {
				let {
					atv_id,
					goods_id,
					have_notice
				} = this.list.data[index]
				let {
					atv_status
				} = this.tabList[this.activeIndex]
				if (atv_status != 1) return
				await this.$api.shop.killNotice({
					atv_id,
					goods_id
				})
				this.list.data[index].have_notice = have_notice === 1 ? 0 : 1
				this.$util.showToast({
					title: have_notice === 1 ? `取消成功` : `提醒成功`
				})
			}
		}
	}
</script>

<style lang="scss">
	.shop-seckill {
		.seckill-nav {
			width: 182rpx;
			height: 41rpx;
			margin: 0 auto;
		}

		.seckill-fill {
			top: 220rpx;
			left: 20rpx;
			width: calc(100% - 40rpx);
			height: 140rpx;
			border-radius: 16rpx 16rpx 0 0;
			background: rgba(255, 255, 255, 0.1);
		}


		.seckill-tab {
			white-space: nowrap;
			width: calc(100% - 40rpx);
			height: 154rpx;

			.item-child {
				display: inline-block;
				width: 260rpx;
				height: 140rpx;
				padding: 5rpx 0;
				box-sizing: border-box;
				margin-top: 15rpx;
			}

			.cur {
				margin-top: 0;
				height: 154rpx;
				background: #fff;
				border-radius: 16rpx 16rpx 0 0;

				.f-lg-title {
					font-size: 46rpx;
				}
			}
		}

		.radius-bottom {
			border-radius: 0 0 16rpx 16rpx;
		}

		.goods-item {

			.seckill-tag {
				top: 30rpx;
				left: 40rpx;
				width: 60rpx;
				height: 64rpx;
			}

			.cover {
				width: 258rpx;
				height: 258rpx;
			}

			.store-img {
				width: 20rpx;
				height: 25rpx;
			}

			.f-title.ellipsis {
				max-width: 392rpx;
			}

			.line-item {
				width: 250rpx;
				height: 24rpx;
				background: rgba(0, 146, 84, 0.2);
				border-radius: 12rpx;

				.cur {
					top: 0;
					left: 0;
					height: 24rpx;
					background: linear-gradient(44deg, #39b54a 0%, #439A4D 100%);
					border-radius: 12rpx;
				}

				.f-icontext {
					top: 1rpx;
					left: 15rpx;
					height: 24rpx;
					line-height: 1;
				}
			}

			.common-btn {
				min-width: 134rpx;
				padding: 0;

				.iconfont {
					font-size: 26rpx;
				}
			}
		}

	}
</style>
