<template>
	<view class="page">
		<Loadlogo v-if="!loadlogo" />
		<view class="container" v-if="loadlogo">
			<far-bottom></far-bottom>
			<noneMores v-if="total==0"></noneMores>
			<view class="bargin-list m-left-right-30" v-else>
				<view class="list-item dis-flex border-line border-bottom" @click="skpageType(item,'bargin')" v-for="(item,index) in barginList"
				 :key="index">
					<view class="item-left" :style="{'background-image':'url('+item.goodsimg+')'}"></view>
					<view class="item-right p-r flex-box dis-flex flex-dir-column flex-x-between">
						<view class="bar-title f-28 col-3 twolist-hidden">{{item.goodsname}}</view>
						<!-- 进度条 -->
						<view class="progress-box" v-if="item.status==='1' && item.redrate !=='100'">
							<view class="default-progress p-r">
								<view class="resi-progress" :style="'width:'+item.redrate+'%'"></view>
								<view class="barginregIcon" v-if="item.status==='1' && item.redrate >0" :style="{'background-image':'url('+imageRoot+'barginregIcon.png)','left':(item.redrate-5)+'%'}"></view>
							</view>
						</view>
						<!-- 砍价成功 -->
						<view class="bargin-success f-24" v-if="item.redrate ==='100' || item.status==='3' || item.status==='2'">
							<text>{{item.successnum}}人砍价成功</text>
						</view>
						<!-- 当前砍价状态 -->
						<view class="f-24 col-9" v-if="item.status==='1' && item.redrate !=='100'">已砍<text class="col-f4">¥{{item.alprice}},</text>还差<text
							 class="col-f4">¥{{item.needprice}}</text></view>

						<view class="f-24 col-f4" v-if="item.status==='1' && item.redrate ==='100'">已砍至<text class="m-left-right-6">¥</text>{{item.price}}</view>

						<view class="f-24 col-9" v-if="item.status!=='1'">{{item.status==='2'?'已下单':'已结束'}}</view>

						<view class="f-24 col-f4" v-if="item.redrate ==='100' || item.status==='2'">砍价成功<text class="m-left-right-6">¥</text>{{item.price}}</view>
						<view class="f-24 col-f4" v-if="item.status==='3'">砍价失败</view>
						<!-- 砍价结束时间 -->
						<view class="bargin-time f-24 col-3" v-if="item.status==='1' && !!item.barginTime">{{item.barginTime.hh}}:{{item.barginTime.mm}}:{{item.barginTime.ss}}后结束</view>

						<!-- 按钮 -->
						<view class="bargin-btn f-24 t-c col-f" v-if="item.status==='1' && item.redrate>=0" @click.stop="skpageType(item,'goods')">{{item.redrate ==='100'?'立即购买':'继续砍价'}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import App from '@/common/js/app.js'
	import Loadlogo from '@/components/template/loadlogo.vue'
	import noneMores from '@/components/template/nonemores.vue';
	let barginTimer = null;
	export default {
		data() {
			return {
				barginList: [],
				loadlogo: false,
				total:null
			}
		},
		onLoad(e) {
			this.getMybarginList()
		},
		methods: {
			/**
			 * 拼团列表倒计时 
			 */
			barginListTime(dataInfo) {
				let _this = this,
					groupList = dataInfo;
				groupList.map((val, index) => {
					val.endtime = Number(val.endtime * 1000);
					barginTimer = setInterval(() => {
						let nowTime = new Date().getTime(),
							// 	距离结束时间
							leftTime = parseInt((val.endtime - nowTime) / 1000),
							// 每个商品活动时间
							timeobj = {};
						if (leftTime > 0 && nowTime < val.endtime) {
							let hh = parseInt(leftTime / 60 / 60 / 24 * 24),
								mm = parseInt(leftTime / 60 % 60),
								ss = parseInt(leftTime % 60),
								timeobj = {
									hh: hh < 10 ? `0${hh}` : hh,
									mm: mm < 10 ? `0${mm}` : mm,
									ss: ss < 10 ? `0${ss}` : ss
								};
							_this.$set(val, 'barginTime', timeobj);
						} else if (nowTime > val.endtime) {
							_this.$set(val, 'status', '3');
						}
					}, 1000)
					return val
				});
			},
			/**
			 * 砍价列表
			 */
			getMybarginList() {
				let _this = this;
				App._post_form('&p=member&do=memberBargain', {}, res => {
					_this.barginListTime(res.data)
					_this.setData({
						barginList: res.data
					})
					_this.total=res.data.length
				}, false, () => {
					_this.loadlogo = true
				})
			},
			/**
			 * 跳转
			 */
			skpageType(barginItem, skipType) {
				let _this = this,
					buy_barginData = {
						goods_id: barginItem.activityid,
						plugin: '7',
						specid: barginItem.id,
						goods_num: 1
					};
				if (skipType === "goods") {
					if (barginItem.redrate === "100") {
						App.navigationTo({
							url: 'pages/subPages/submitOrder/submitOrder?' + App.urlEncode(buy_barginData)
						});
					} else {
						App.navigationTo({
							url: 'pages/subPages/bargin/barginDetail/barginDetail?bargin_id=' + barginItem.id
						})
					}
				} else {
					App.navigationTo({
						url: 'pages/subPages/bargin/barginDetail/barginDetail?bargin_id=' + barginItem.id
					})
				}
			}
		},
		components: {
			Loadlogo,
			noneMores
		}
	}
</script>

<style lang="scss">
	.list-item {
		padding: 30upx 0upx;

		.item-left {
			width: 200upx;
			height: 200upx;
			background-repeat: no-repeat;
			background-size: 200upx 200upx;
			border-radius: 10upx;
			flex-shrink: 0;
			margin-right: 28upx;
		}

		.item-right {
			.bar-title {
				height: 2.6em;
				line-height: 1.3em;
			}

			.progress-box {
				.default-progress {
					width: 290upx;
					height: 10upx;
					background: #EEEEEE;
					border-radius: 6upx;
					margin: 20upx 0;

					.resi-progress {
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
						height: 10upx;
						background: linear-gradient(90deg, rgba(255, 68, 68, 1) 0%, rgba(253, 113, 55, 1) 100%);
						border-radius: 6upx;
					}

					.barginregIcon {
						width: 50upx;
						height: 50upx;
						background-size: 50upx 50upx;
						background-repeat: no-repeat;
						position: absolute;
						top: -20upx;
					}
				}
			}

			.bargin-success {
				width: 190upx;
				height: 30upx;
				line-height: 30upx;
				text-align: center;
				background: rgba(255, 242, 242, 1);
				border-radius: 16upx;
				margin: 14upx 0;

				&>text {
					display: inline-block;
					transform: scale(.85);
					color: #FF4444;
				}
			}

			.bargin-btn {
				position: absolute;
				right: 0;
				bottom: 0;
				width: 130upx;
				height: 50upx;
				line-height: 50upx;
				background: rgba(255, 68, 68, 1);
				border-radius: 24upx;
			}
		}
	}
</style>
