<template>
	<view class="bg-white mt20" v-if="bill.length > 0">
		<view class="group-hd p-0-20 d-a-c border-b">
			<view class="left"><text class="f30">这些人刚刚购买成功，可参与拼单</text></view>
			<view class="right" @click="openMore">
				<text>查看更多</text>
				<text class="iconfont icon-jiantou white"></text>
			</view>
		</view>
		<view class="group-bd bill-user-list">
			<view class="item d-b-c p20" v-for="(item, index) in bill" :key="index">
				<view class="userinfo d-s-c">
					<view class="photo"><image :src="item.user.avatarUrl" mode="widthFix"></image></view>
					<text class="ml10">{{ item.user.nickName }}</text>
				</view>
				<view class="btns d-s-c">
					<view class="d-s-c d-c">
						<text class="ml10">还差{{ item.dif_people }}人成团</text>
						<view class="gray9">
							<Countdown :config="rturnObjec(item)"></Countdown>
						</view>
					</view>
					<button type="primary" class="btn-red ml20" @click="goBill(item)">去拼单</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import Countdown from '@/components/countdown/countdown.vue';
export default {
	components: {
		Countdown
	},
	data() {
		return {
			
		};
	},
	props: ['bill'],
	created() {
		
	},
	methods: {
		
		/*转换参数*/
		rturnObjec(item){
			return {type:'text',startstamp:0,endstamp:item.end_time};
		},
		
		/*查看更多*/
		openMore() {
			this.$emit('openMore', true);
		},

		/*去拼单*/
		goBill(e) {
			this.$emit('gobill', e);
		}
	}
};
</script>

<style>
.bill-user-list {
	max-height: 240rpx;
	overflow: hidden;
}
.bill-user-list .photo {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	overflow: hidden;
}
.bill-user-list .photo image {
	width: 100%;
	height: 100%;
}
</style>
