<template>
	<view class="index">
		<u-navbar title="" bgColor="#000" :placeholder="true" :fixed="true" leftIcon="" height="60">
			<view slot="center">
				<u--image :showLoading="false" :src="titlePng" width="350px" height="45px" mode="scaleToFill"
					class="ezlogo"></u--image>
				<u--image :showLoading="false" :src="require('static/images/service_icon.png')" width="100%"
					height="auto" mode="widthFix" class="service_icon" @click="goRouter()"></u--image>
			</view>
		</u-navbar>
		<u-swiper class="swiper" :list="list" bgColor="#000" radius="0" imgMode="scaleToFill" height="39vw"
			interval="4000" @tap="goPaht"></u-swiper>
		<view style="min-height: 38px">
			<u-notice-bar v-if="showNotice" :text="text" bgColor="#252627" color="#eee" speed="40"></u-notice-bar>
		</view>
		<!-- <u--image :showLoading="false" :src="
        require(`static/images/${
          language == 'tw' ? 'tw' : 'en'
        }_advertisement_v2.jpg`)
      " width="100%" height="auto" mode="widthFix" @tap="goPaht('baccarat')"></u--image>
		<view style="margin-top: 5px; margin-bottom: 5px">
			<u--image :showLoading="false" :src="require('static/images/title-ez.png')" width="100%" height="auto"
				mode="widthFix"></u--image>
		</view>  -->
		
		
    <view class="triple">
      <view class="triple-item">
        <img :src="require(`static/images/click.png`)" @click="goPaht('other')" alt="">
        <p>{{ $lang.flagshipHall }}</p>
      </view>
	  <view class="triple-item">
	    <img :src="require(`static/images/triple.png`)" @click="goPaht('other')" alt="">
	    <p>{{ $lang.liveHall }}</p>
	  </view>
	  <!--
      <view class="triple-item">
        <img :src="require(`static/images/triple.png`)" @click="goPaht('triple')" alt="">
        <p>{{ $lang.liveHall }}</p>
      </view>
	  -->
    </view>
    

		<view class="list">
			<u--image :showLoading="false" :src="require('static/images/game_1.png')" width="100%" height="auto"
				mode="widthFix"></u--image>
			<view class="box">
				<view class="text">{{ $lang.baccarat }}</view>
				<view class="text">{{ $lang.niuniu }}</view>
			</view>
			<view class="left link" @tap="goPaht('baccarat')"></view>
			<view class="right link" @tap="goPaht('nn')"></view>
		</view>
		<view class="list">
			<u--image :showLoading="false" :src="require('static/images/game_3.png')" width="100%" height="auto"
				mode="widthFix"></u--image>
			<view class="box">
				<view class="text">{{ $lang.longhu }}</view>
				<view class="text">{{ $lang.sedie }}</view>
			</view>
			<view class="left link" @tap="goPaht('longhu')"></view>
			<view class="right link" @tap="goPaht('toning')"></view>
		</view>
		<view class="list">
			<u--image :showLoading="false" :src="require('static/images/game_2.png')" width="100%" height="auto"
				mode="widthFix"></u--image>
			<view class="box">
				<view class="text">{{ $lang.sicbo }}</view>
				<view class="text">{{ $lang.threecard }}</view>
			</view>
			<view class="left link" @tap="goPaht('dice')"></view>
			<view class="right link" @tap="goPaht('threecard')"></view>
		</view>
		<view class="mb10"></view>
		<!--
    <view class="list" @tap="goPaht('other')">
      <u--image
        :showLoading="false"
        :src="require('static/images/game_4.png')"
        width="100%"
        height="auto"
        mode="widthFix"
      ></u--image>
      <view class="box">
        <view class="text">{{ $lang.buyu }}</view>
        <view class="text">{{ $lang.qipai }}</view>
      </view>
    </view>-->
		<!--<view class="mb60"></view>-->

		<!-- <u--image :showLoading="false" :src="
        require(`static/images/${language == 'tw' ? 'tw' : 'en'}_slots-ez.png`)
      " width="100%" height="auto" mode="widthFix" @tap="goPaht('other')"></u--image> -->
		<view class="mb80"></view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				showNotice: true,
			};
		},
		computed: {
			...mapState({
				language: (state) => state.app.language,
				$lang: (state) => state.app.lang[state.app.language],
				titlePng: (state) => state.app.titlePng,
				userInfo: (state) => state.app.userInfo,
				loginType: (state) => state.app.loginType,
				customServiceUrl: (state) => state.app.customServiceUrl,
				showAd: (state) => {
					const userInfo = state.app.userInfo;
					let show = false;
					if (userInfo.pay_channel) {
						show = true;
					}
					return show;
				},
				text: (state) => {
					let text = "";
					const language = state.app.language;
					if (language == "cn") {
						text =
							"首储活动（真人视讯）🔥 新人首存赠【10%】 五倍流水上限【1688】 回存送【5%】 两倍流水 上限【888】 🔥 ONLINE GAMING 🔥 H5网页版 正式上线了 欢迎来爆庄哦......首储活动（真人视讯）🔥 新人首存赠【10%】 五倍流水上限【1688】 回存送【5%】 两倍流水 上限【888】 🔥 ONLINE GAMING 🔥 H5网页版 正式上线了 欢迎来爆庄哦...";
					} else if (language == "tw") {
						text =
							"首儲活動（真人視訊）🔥 新人首存贈【10%】 五倍流水上限【1688】 回存送【5%】 兩倍流水 上限【888】 🔥 ONLINE GAMING 🔥 H5網頁版 正式上線了 歡迎來爆莊哦......首儲活動（真人視訊）🔥 新人首存贈【10%】 五倍流水上限【1688】 回存送【5%】 兩倍流水 上限【888】 🔥 ONLINE GAMING 🔥 H5網頁版 正式上線了 歡迎來爆莊哦...";
					} else if (language == "en") {
						text =
							"首儲活動（真人視訊）🔥 新人首存贈【10%】 五倍流水上限【1688】 回存送【5%】 兩倍流水 上限【888】 🔥 ONLINE GAMING 🔥 H5網頁版 正式上線了 歡迎來爆莊哦......首儲活動（真人視訊）🔥 新人首存贈【10%】 五倍流水上限【1688】 回存送【5%】 兩倍流水 上限【888】 🔥 ONLINE GAMING 🔥 H5網頁版 正式上線了 歡迎來爆莊哦...";
					} else if (language == "kr") {
						text =
							"존귀한 고객님, ONLINE GAMING 에 오신 것을 환영합니다. 만약 당신이 새로운 게이머라면 애플 자체 브라우저나 구글 브라우저로 우리의 웹 주소를 열고 데스크톱 생성 아이콘을 클릭하면 더 편리한 조작 체험과 시각 효과를 가져다 줄 수 있습니다......귀한 고객🔥 ONLINE GAMING 🔥 H5 웹버전이 정식으로 오픈되었습니다. 폭장에 오신 것을 환영합니다......";
					} else if (language == "yn") {
						text =
							"Chào mừng bạn đến ONLINE GAMING, nếu bạn là người chơi mới, xin vui lòng sử dụng trình duyệt của Apple hoặc Google Explorer để mở địa chỉ web của chúng tôi bằng cách nhấp vào để tạo biểu tượng máy tính để bàn sẽ mang lại cho bạn một kinh nghiệm hoạt động thuận tiện hơn và hiệu ứng hình ảnh.... Quý khách hàng 🔥  ONLINE GAMING  🔥  Trang web H5 chính thức lên mạng, chào mừng đến với trang web bùng nổ......";
					}
					return text;
				},
				list: (state) => {
					const language = state.app.language;
					const lang = (language == "tw" || language == 'cn') ? "tw" : "en";
					let list = [
						`/static/images/${lang}_banner_ac1.png`,
						`/static/images/${lang}_banner_2-ez-v3.png`,
					];
					return list;
				},
			}),
		},
		onShow() {
			this.showNotice = false;
			if (this.$route.query.logout && this.$route.query.logout == '1') {
				localStorage.removeItem("userInfo");
				this.$router.replace({
					path: "/"
				});
			}
			setTimeout(() => {
				this.showNotice = true;
			}, 100);
		},
		methods: {
			// this.baseApi
			goPaht(type) {
				if (type == "other") {
					window.location.href =
						`${this.$baseApi.gameUrl}/?token=${this.userInfo.api_token}&language=${this.language}#/${type}`;
				} else if(type == 'triple'){
          window.location.href =
						`${this.$baseApi.tripleUrl}/?token=${this.userInfo.api_token}`;
        }
         else {
					window.location.href =
						`${this.$baseApi.gameUrl}/?token=${this.userInfo.api_token}&language=${this.language}#/${type}`;
				}
			},
			goRouter() {
				let url = this.customServiceUrl + '&visiter_id=' + this.userInfo.username + '&visiter_name=' + this
					.userInfo.username;
				window.open(url, '_blank');
			}
		},
	};
</script>

<style lang="scss" scoped>
	.index {
		.ezlogo {
			margin-left: -25px;
		}

		.service_icon {
			width: 26px;
			position: absolute;
			right: 0;
			top: 2px;
			margin: 15px 8px;
		}

		.list {
			padding: 5px 5px;
			position: relative;

			&:last-child {
				margin-bottom: 30px;
			}

			.link {
				position: absolute;
				width: 50%;
				height: 100%;
				top: 0;

				&.left {
					left: 0;
				}

				&.right {
					right: 0;
				}
			}

			.box {
				color: #f4c46f;
				font-size: medium;
				font-weight: 600;
				display: flex;
				width: 100%;
				align-items: center;
				justify-content: space-between;
				padding-top: 5px;

				.text {
					flex: 1;
					text-align: center;
				}
			}
		}
    .triple{
      display: flex;
      text-align: center;
      width: 100%;
      &-item{
        width: 50%;
        padding: 2%;
        img{
          width: 100%;
          // height: 110px; 
        }
        p{
          color: #fff;
          font-weight: bold;
        }
      }
    }
	}
</style>