<template>
	<view>
		<view class="top-nav">
			<button class="top-nav-btn" :class="{'top-nav-btn-on':sub_module_id == item.value}" v-for="(item,i) in nav"
				:data-v="item.value" @click="navChange" :key="i">{{item.text}}</button>
		</view>
		<view class="content">
			<!-- <view v-for="(item,index) in list" class="msg-info" :key="index">
				<image :mode="mode||item.mode" lazy-load="true" :src="item.src+'/small'" @click="imgClick(index)">
				</image>
				<view class="tip">{{item.text}}</view>
			</view> -->
			<view class='left'>
				<div v-for="(item,index) in leftData" class="msg-info" :key="index">
					<image :mode="mode" lazy-load="true" :src="item.src+'/eshop'" @click="imgClick(item)"></image>
					<view class="tip">{{item.text}}</view>
				</div>
			</view>
			<view class="right">
				<div v-for="(item,index) in rightData" class="msg-info" :key="index">
					<image :mode="mode" :src="item.src+'/eshop'" @click="imgClick(item)"></image>
					<view class="tip">{{item.text}}</view>
				</div>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				nav: [{
					text: '全部',
					value: 0
				}, {
					text: '双色球',
					value: 11
				}, {
					text: '大乐透',
					value: 12
				}, {
					text: '快乐8',
					value: 13
				}, {
					text: '福彩3d',
					value: 14
				}, {
					text: '排列3',
					value: 15
				}, {
					text: '排列5',
					value: 16
				}, {
					text: '七星彩',
					value: 18
				}],
				list: [],
				leftData: [],
				rightData: [],
				mode: 'widthFix',
				sub_module_id: 0
			}
		},
		async onLoad() {
			this.bindData()
		},
		methods: {
			async bindData() {
				const res = await uni.$u.request.graphql({
					name: 'lottery_shop_get_posters',
					args: `module_id:4,sub_module_id:${this.sub_module_id}`
				}).then(v => v.map(a => ({
					text: a.title,
					src: a.main_image_url,
					mid: a.module_id,
					id: a.id
				})))

				if (res.length < 2) return

				var leftData = []
				var rightData = []

				for (var i = 1, k = 0; i < res.length; i += 2, k++) {
					if (k % 2 == 1) {
						leftData.push(res[i])
						rightData.push(res[i - 1])
					} else {
						leftData.push(res[i - 1])
						rightData.push(res[i])
					}
				}

				this.leftData = leftData
				this.rightData = rightData
			},
			navChange(e) {
				var sid = e.target.dataset.v
				if (this.sub_module_id == sid) return
				this.sub_module_id = sid
				this.bindData()
			},
			imgClick(img) {
				window.location.href = `/tv/info?text=${img.text}&src=${img.src}&zq=zq`
			}
		}
	}
</script>

<style scoped>
	.top-nav {
		display: flex;
		padding: 2vw;
		flex-wrap: wrap;
	}

	.top-nav-btn {
		margin-top: 8px;
		width: 20vw;
		height: 30px;
		line-height: 30px;
		color: #666666;
		background-color: rgb(241, 241, 241);
		font-size: 14px;
		font-weight: normal;
	}

	.top-nav-btn-on {
		background-color: #E09E0B;
		color: #FFFFFF;
	}

	.content {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
		padding: 20px 8px 30vh 8px;
	}

	.left,
	.right {
		width: 46vw;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}

	.content .msg-info {
		position: relative !important;
		width: 100%;
	}

	.content image {
		width: 100%;
	}

	.content .tip {
		position: absolute;
		bottom: 0;
		background: #f6fbfe;
		opacity: 0.8;

		width: 100%;
		line-height: 50px;
		height: 50px;

		z-index: 9;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;

		font-size: 16px;
	}
</style>