<template>
	<div class="voucher" id="voucher">
		<!-- 头部 -->
		<default-navbar :navbarList="navbarList">
	
		</default-navbar>
		
		<div class="gm_js">
			<el-row>
				<el-col :span="24" style="text-align: center; font-size: 14px; font-family: 'Microsoft YaHei'; font-weight: bold;">
					<div>Idle Military SCH Tycoon Games</div>
				</el-col>
		   </el-row>
			
		   <el-row>
				<el-col :span="24" >
				  <el-card :body-style="{ padding: '0px' }">
				   <div style="float: left;width: 27%; height: 253px;"> <img style="width: 100%; height: 253px;"src="./img/20221020110134.png" ></div>
					 <div style="width: 72%; height: auto; 	margin-top: 15px;float: left;   font-size: 14px; font-family: 'Microsoft YaHei'; " >
						 Want to become a military tycoon, build your own base, or experience a real military simulation? Come and create the greatest military base in the world! You will start out in army training camp as a soldier, but have no time for a daze. Because you'll be put through the test and complete a series of training challenges to graduate and be ready for military operations around the world!
						 As your military training in your base progresses, you'll earn a lot of money and expand your camp. You can upgrade the stats, speed, capacity and queue size of all training zones. While the process is a roller coaster of ups and downs, lazy cadets will be eliminated - you'll love growing your military base!
						 Here are some of the challenges you must complete before graduation:
						 Report Office - Ding ~ Ding ~ Elite reports are waiting for you to train.
					 </div>
					 <div style="float: right;">  <el-button type="primary"  @click="download" round>click to download</el-button></div>
				  </el-card>
				</el-col>
			</el-row>	
			

		</div>
	    <div class="cs_yl">
			<el-row class="row-bg" justify="center">
				 <el-col :span="6"><img src="./img/logo.png" style="width: 389px;height: 147px;"  @click="dktk"/></el-col>
			</el-row>
		</div>
		
		<div id="dome_zs">
			<!--  商品展示网页  -->
		    <el-dialog  :visible.sync="goodVisible" :show-close="true"  append-to-body custom-class="menu-dialog-height" :top="m_top" :modal="false" :close-on-click-modal="false" >
				<el-row>
					<el-col :span="24">
						<img src="./img/1665193912606.jpg"/>
					</el-col>
				</el-row>
				<el-row v-for="(it,ind) in goodList" :key="ind" class="el_r">
					<el-col :span="6">
						<div class="good_l">
							<div class="good_m" v-if="it.type == 1"><img  src="./img/1665196821677.jpg" /></div>
							<div  class="good_n" v-if="it.type == 1" @click="skipPay(it.type,it.name,it.price)"> <span >{{it.name}}</span></div>
							<div  class="good_2" v-if="it.type == 2" @click="skipPay(it.type,it.name,it.price)"> <span >{{it.name}}</span></div>
						</div>
					</el-col>
					
					<el-col :span="6" :offset="10">
						<div class="good_l">
							<div class="good_p"  @click="skipPay(it.type,it.name,it.price)"><span>${{ it.price }}</span></div>
						</div>
					</el-col>
				</el-row>
			</el-dialog>
			
			<!-- 支付展示网页  -->
			<el-dialog :visible.sync="payVisible" :show-close="true"  custom-class="menu-dialog-height" :top="m_top">
				<el-row class="el_r">
					<el-col :span="8"> 
						<span>{{PaymentAmount}}</span>
					</el-col>
					
					<el-col :span="8" :offset="3">
						<span>${{from.price}}</span>
					</el-col>
				</el-row>
				
				<el-row class="el_r">
					<el-col :span="8"> 
						<span>{{PaymentDetails}}</span>
					</el-col>
					<el-col :span="8" :offset="3">
						<span v-if="from.type == 1">{{from.name}} {{diamond}}</span>
						<span v-if="from.type == 2">{{from.name}}</span>
					</el-col>
				</el-row>
				
				<el-row style="margin-top: 40%;">
					<el-col :span="24">
						<el-button style="width: 100%;" @click="payPaymentCk">{{pay}}</el-button>
					</el-col>
				</el-row>
				
				<el-row style="margin-top: 30px;">
					<el-col :span="24">
						<el-button style="width: 100%;" @click="payOption">{{OpenPayOptions}}</el-button>
					</el-col>
				</el-row>
			</el-dialog>
			
			<!-- 支付选项 -->
			<el-dialog :visible.sync="optionVisible" :title="pay" :show-close="true" width="20%" >
				<el-row>
					<el-col :span="22">
						<div style="text-align: center;">{{await}}</div>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<div  style=" border-bottom:solid 1px ; "></div>
					</el-col>
				</el-row>
				<el-row>
						<el-col :span="22">
							<div style="text-align: center;" @click="payPaymentCk">{{openpay}}</div>
						</el-col>
				</el-row>
		
				<el-row>
					<el-col :span="24">
						<div  style=" border-bottom:solid 1px ; "></div>
					</el-col>
				</el-row>
		  
				<el-row>
					<el-col :span="22">
						<div style="text-align: center;" @click="anomalyOrder">{{anomaly}}</div>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<div  style=" border-bottom:solid 1px ; "></div>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="22">
						<div style="text-align: center;"  @click="cancel">{{finish}}</div>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<div  style=" border-bottom:solid 1px ; "></div>
					</el-col>
				</el-row>
			</el-dialog>
			
			<!-- 反馈页面 -->
			<el-dialog :visible.sync="coupleVisible" :title="couple" width="30%" >
				<el-row >
					<el-col :span="22">
						<div style="text-align: left;">{{issue}}</div>
					</el-col>
				</el-row>
				
				
				<el-row style="margin-top: 15px;" v-for="(it,ind) in issues" :key="ind">
					<el-col :span="22" :offset="2">
						<el-checkbox :label="it.name" name="type"></el-checkbox>
					</el-col>
				</el-row>
		
				<el-row style="margin-top: 15px;">
					<el-col :span="22">
						<div style="text-align: left;">{{ProblemDescriptor}}</div>
					</el-col>
				</el-row>
				<el-row style="margin-top: 15px;">
					<el-col :span="22" :offset="2">
						<el-input type="textarea" v-model="desc"></el-input>
					</el-col>
				</el-row>
				
				<el-row style="margin-top: 15px;">
					<el-col :span="22" :offset="6" >
						<el-button type="primary" size="mini" @click="submit" v-loading.fullscreen.lock="fullscreenLoading" >{{subm}}</el-button>
						<el-button size="mini"  @click="cancel">{{canc}}</el-button>
					</el-col>
				</el-row>
			</el-dialog>
			
			
			<!-- 跳转支付页面 -->
			<el-dialog :visible.sync="payPayment" title="Game Easy Pack" custom-class="menu-dialog-height" :top="m_top" >
				   <el-row>
					<el-col :span="20" >
						<el-card :body-style="{ padding: '0px' }">
						  <div style="padding: 14px;">
							<span>Product Name: {{from.name}}</span>
							<div class="bottom clearfix">
							  <time class="time"></time>
							  <span>Charged Amount: ${{from.price}}</span>
							</div>
						  </div>
						</el-card>
					  </el-col>
					</el-row>
					<div style="padding-top: 15px;">Select Payment Method:</div>
					<el-row :gutter="20">
						<el-col :span="24">
							 <el-button class="but_c"  @click="paypal"  v-loading.fullscreen.lock="fullscreenLoading">
								  <img src="./img/paypal.svg"  style="width: 100px;height: 20px;"/>
							 </el-button>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="24">
							 <el-button class="but_c"  @click="airwallex" >
								 <img src="./img/airwallex.png"  style="width: 100px;height: 20px;"/>
							 </el-button>
						</el-col>
					</el-row>
			</el-dialog>
		</div>
	</div>
	

	
</template>

<script>
	import PageFooter from '@/components/footer/pageFooter'
	import DefaultNavbar from '@/components/navbar/navbar'
	import { asyncRouterMap,asyncRouterMap_EN } from '@/config/router.config'
	import {lang} from '@/utils/lang'
	export default {
	  name: 'voucher',
	  data() {
	    return {
	      navbarList: [],
		  goodVisible:false,  //控制弹框显示
		  payVisible:false,  //支付页面显示
		  optionVisible:false, //支付选项
		  coupleVisible:false, //反馈页面
		  fullscreenLoading: false, //提交时停留
		  payPayment: false, //支付选择
		  PaymentAmount:'',
		  PaymentDetails:'',
		  diamond:'',
		  pay:'',
		  OpenPayOptions:'',
		  await:'',
		  openpay:'',
		  anomaly:'',
		  finish:'',
		  couple:'',
		  issue:'',
		  issues:[],
		  ProblemDescriptor:'',
		  subm:'',
		  canc:'',
		  goodList:[
		  	{
				type: 1, //带有图标
				name: '80',
				price: 0.99
		  	},
		    {
				type: 1, //带有图标
				name: '500',
				price: 4.99  
		   },
		   {
				type: 1, //带有图标
				name: '1200',
				price: 9.99  
		  	},
			{
				type: 1, //带有图标
				name: '2500',
				price: 19.99  
			},
		  				  {
		  					type: 1, //带有图标
		  					name: '6500',
		  					price: 49.99  
		  				  },
		  				  {
		  					type: 1, //带有图标
		  					name: '14000',
		  					price: 99.99  
		  				  },{
		  					type: 2, //带有图标
		  					name: '廣告粉粹機',
		  					price: 9.99
		  				  },
		  				  {
		  					 type: 2, //带有图标
		  					 name: '隨機英雄禮包',
		  					 price: 0.99 
		  				  }
		  ],
		  m_top: '20vh',
		  desc:'',
		  from:{
			  type: 1, //带有图标
			  name: '',
			  price: 0
		  }
	    }
	  },
	  components: {
	    DefaultNavbar,
	  },
	  mounted() {
	    this.init()
	  },
	  methods: {
	    init() {
 
		  if(lang.lg == "en"){
		  	this.navbarList.push(...asyncRouterMap_EN.filter(f => !f.meta.hidden))
			this.PaymentAmount = lang.en.PaymentAmount
			this.PaymentDetails = lang.en.PaymentDetails
			this.diamond = lang.en.diamond
			this.pay = lang.en.pay
			this.OpenPayOptions = lang.en.OpenPayOptions
			this.await = "await finish pay";
			this.openpay = "open pay page";
			this.anomaly = "report anomaly order";
			this.finish = "finish pay";
			this.couple = "couple back";
			this.issue = "pay issue";
			this.ProblemDescriptor = "problem description";
			this.subm = "submit";
				this.canc = "cancel";
			this.issues = [
				{
					name:'Payment has not been received'
				},
				{
					name:'The wrong amount was paid'
				},
				{
					name:'The payment page cannot be opened'
				},
				{
					name:"Couldn't reach customer service"
				},
				{
					name:'other problems'
				}
			
			]
			this.goodList[6].name = "shatter machine";
			this.goodList[7].name = "random gift";
		  }else{
		  	this.navbarList.push(...asyncRouterMap.filter(f => !f.meta.hidden))
			this.PaymentAmount = lang.hk.PaymentAmount
			this.PaymentDetails = lang.hk.PaymentDetails
			this.diamond = lang.hk.diamond
			this.pay = lang.hk.pay
			this.OpenPayOptions = lang.hk.OpenPayOptions

			this.await =   "等待完成支付";
			this.openpay = "打開支付頁面";
			this.anomaly = "報告異常訂單";
			this.finish =  "完成支付";
			this.couple =  "反饋";
			this.issue =   "支付問題";
			this.ProblemDescriptor = "問題描述";
			this.subm = "提交";
			this.canc = "取消";
			this.goodList[6].name = "廣告粉粹機";
			this.goodList[7].name = "隨機英雄禮包";
			this.issues = [
				{
					name:'已付款未到賬'
				},
				{
					name:'支付的金額不對'
				},
				{
					name:'打不開支付頁面'
				},
				{
					name:'聯係不上客服'
				},
				{
					name:'其他問題'
				}
			]
		  }
	    },
		paypal(){    //paypal支付实现方法
		 this.fullscreenLoading = true;
		  setTimeout(() => {
					 this.$message({
						 message: 'paypal payment failure！！！',
						 type: 'error'
					 });
					  this.fullscreenLoading = false;
		   this.payPayment = false; //显示支付页面
					 }, 3000);
		},
		airwallex(){ //airwallex支付实现方法
		  this.fullscreenLoading = true;
		   setTimeout(() => {
					 this.$message({
						 message: 'airwallex payment failure！！！',
						 type: 'error'
					 });
					  this.fullscreenLoading = false;
					
			this.payPayment = false; //显示支付页面
					 }, 3000);
		},
		skipPay(tyep,name,price){ //跳转支付
		  //关闭商品展示页
		  this.goodVisible = false;
		  //打开支付页面
		  this.payVisible = true;
		  this.from = {
			  type: tyep, //带有图标
			  name: name,
			  price: price
		  }
		},
		payOption(){ //支付选项
					this.optionVisible = true;
		},
		anomalyOrder(){ //异常订单
		    this.optionVisible = false; //关闭支付弹框，显示反馈信息
			this.coupleVisible = true;
		},
		cancel(){ //取消
		  this.coupleVisible = false;
		  this.optionVisible = false;
		},
		submit(){ //提交反馈信息
		  this.fullscreenLoading = true;
		  setTimeout(() => {
		  this.$message({
			message: '已反馈成功！！！',
			type: 'success'
		  });			
		  this.fullscreenLoading = false;
		  this.coupleVisible = false;
		  }, 3000);
		},
		payPaymentCk(){  //跳转支付页面
		  this.payPayment = true; //显示支付页面
		  this.optionVisible = false; //关闭支付选项		
		},
		dktk(){
			this.goodVisible = true;
		},
		download(){ //下载文件
		   var src = 'http://www.funqueue.com/apk/Military_v1.1.4_GP_2022-09-22.apk';
		   var form = document.createElement('form');
		   form.action = src;
		   document.getElementsByTagName('body')[0].appendChild(form);
		   form.submit() 
		}
	  }
	}
</script>

<style >
  /*  @import url('https://unpkg.com/element-ui@2.15.10/lib/theme-chalk/index.css'); */
  .cs_yl{
	  float: left;
	  margin-top: 134px;
	  width: 389px;
	  margin-left: 2%;
	  border: solid 1px #BDBDBD ;
  }
  .menu-dialog-height {
      height: auto; 
  	  width:30%;
  }
  .el_r{
  	margin-top: 15px;
  }
  .good_l{
  	border: 1px solid #BDBDBD;
  	width: 100px;
  	height: 30px;
  	border-radius:3px;
  }
  .good_p{
  	margin-top: 6px;
  	font-family: 'Microsoft YaHei';
  	text-align: center;
  }
  .good_m{
  	margin-top: 6px;
  	width: 0px;
  	height: 0px;
  }
  .good_n{
  	margin-left: 42px;

  }
  .good_2{
  	text-align: center;
  	margin-top: 6px;
	font-size: 10px;
  }
  .but_c{
  	width: 100%;
  	margin-top: 20px;
  }
  .gm_js{
	  float: left;
	  margin-top: 134px;
	  width: 53%;
	  height: auto;

	
  }
  

</style>