<template>
	<view>
		<view class="top-nav" :style="{'top': nav_top }">
			<view 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}}</view>
		</view>
		<view class="content">
			<view class='left'>
				<div v-for="(item,index) in leftData" class="msg-info" :key="index">
					<image :mode="mode" lazy-load="true" :src="item.src+'/300w'" @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" lazy-load="true" :src="item.src+'/300w'" @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
				}],

				leftData: [],
				rightData: [],
				mode: 'widthFix',
				sub_module_id: 0,
				nav_top: '44px'
			}
		},
		async onLoad() {
			//#ifdef H5
			if (window.Android) {
				const $h5 = require('@/static/js/h5-utils.js')
				$h5.remove_uni_page_head()
				this.nav_top = '0'
			}
			//#endif
			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,
					content: a.content || '',
					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}&content=${img.content}&zq=zq`
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-nav {
		display: flex;
		padding: 5px 0px 10px 0px;
		flex-wrap: wrap;
		justify-content: space-around;
		width: 100%;

		position: fixed;
		z-index: 999;
		background: #ffffff;
		max-width: $sys-max-width;
	}

	.top-nav-btn {
		margin-top: 8px;
		width: 22%;
		height: 30px;
		line-height: 30px;
		color: #666666;
		background-color: rgb(241, 241, 241);
		font-size: 14px;
		font-weight: normal;
		border-radius: 5px;
		text-align: center;
	}

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

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

	.left,
	.right {
		width: 46%;
		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: #ffffff;
		opacity: 0.9;

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

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

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