<template>
	<view class="all padding-v-30 padding-c-30">
		<view class="list padding-v-10 flex" v-for="(item,ind) in list" :key="ind">
			<view class="le">
				<view class="qs padding-b-10">{{$t('set.a7')}}{{item.no}}{{$t('set.a8')}}</view>
				<view class="dy padding-b-10" v-if="item.result_info">{{item.result_info.c*1}}</view>
				<view class="dy padding-b-10" v-else>{{ $t("enter.a2") }}</view>
			</view>
			<view class="ri flex" v-if="item.result">
				<template v-for="it in item.arr " v-if="it.value==1">
					<view class="sx green" v-if="it.type==1">{{ $t("enter.u6") }}</view>
					<view class="sx green" v-if="it.type==3">{{ $t("enter.u5") }}</view>
					<view class="sx " v-if="it.type==2">{{ $t("enter.u4") }}</view>
					<view class="sx" v-if="it.type==4">{{ $t("enter.u7") }}</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getGame
	} from "@/api/game.js";
	import empty from '@/components/empty';
	export default {
		components: {
			empty
		},
		data() {
			return {
				id: '',
				page: 1,
				limit: 20,
				loadingType: 'more',
				loaded: false,
				list: []
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.gameBetList()
			uni.setNavigationBarTitle({
				title: this.$t("tab.a2"),
			});
		},
		onReachBottom() {
			this.gameBetList()
		},
		methods: {
			gameBetList() {
				let that = this
				if (that.loadingType == 'loading' || that.loadingType == 'noMore') {
					return
				}
				getGame({
					page: that.page,
					limit: that.limit,
				},that.id).then(res => {
					let list = res.data.list.map((res)=>{
						if(res.result){
							let arr = [];
							const ar  =res.result.split(",")
							console.log(ar,'ar');
							for (let i = 0; i < ar.length; i++) {
								const s = ar[i].split(':');
								arr.push({
									type:s[0],
									value:s[1]
								})
							}
							res.arr = arr;
						}
						return res
					})
					that.list = that.list.concat(list)
					that.page++
					console.log('11111111', that.list);
					if (list.length == that.limit) {
						that.loadingType = 'more'
					} else {
						that.loadingType = 'noMore'
					}
					that.loaded = true
				})
			}
		},
	};
</script>

<style lang="scss">

	.list {
		line-height: 1;
		border-bottom: 1px solid $border-color-light;
		.le {
			font-weight: bold;
			.qs {
				font-size: 20rpx;
				color: #ffffff;
			}

			.dy {
				font-size: 46rpx;
				color: #fdb242;
			}

		}
		.ri {
			.sx {
				padding-left: 10rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: #df5660;
				&.green{
					color: $color-green;
				}
			}
		}
	}
	
</style>