<template>
	<v-page>
	  <v-header>
	    <template #title>
	      <view>
	        <!-- {{ $t("assets.b6") }} -->
	        {{ $t("common.c16") }}
	        <!-- <span class="color-theme-1">{{ coin }}</span> -->
	      </view>
	    </template>
	    <template #right>
	      <v-link :to="'/pages/assets/records?type='+type">
	        <van-icon class="fn-20 m-t-xs" name="todo-list-o" />
	      </v-link>
	    </template>
	  </v-header>
	  <view class="layout-main" style="background-color: #121212;padding: 20px;">
			<el-steps direction="vertical" :active="active" style="min-height: 260px !important;width: 100%;box-sizing: border-box;">
			    <el-step :title="$t('common.c21')" style="flex-basis: 110px;">
					<template slot="description">
						<view class="d-flex justify-between m-t-md" @click="coinListShow=true" style="border: 1px solid #4e4e5d;padding: 10px;">
						  <view class="fn-20 color-light">{{ coin }}</view>
						  <view class="d-flex align-center">
						    {{ $t('recharge.a0') }}
						    <van-icon name="arrow"/>
						  </view>
						</view>
					</template>
				</el-step>
			    <el-step :title="$t('common.c17')">
					<template slot="description">
						<view style="margin: 10px 0px;width: 540rpx;">
							<v-input @input="addressnum" v-model="form.address" class="bg-form-panel-3 color-light w-max fn-13 rounded-xs" :placeholder="$t('assets.b9')"></v-input>
							<el-select v-model="form.addressType" @change="enteraddressType" style="margin-top: 10px;width: 100%;" class="addressType" v-if="coin=='USDT'" :placeholder="$t('common.select')">
							  <el-option v-for="(item, index) in network" :key="index" :label="item.name" :value="item.id">
								<span>{{ item.name }}</span>
							  </el-option>
							</el-select>
						</view>
					</template>
				</el-step>
			    <el-step :title="$t('common.c18')" v-if="form.address">
					<template slot="description">
						<view style="margin: 10px 0px;color: #fff;width: 540rpx;">
							<v-input @input="amountnum" v-model="form.amount" :min="withdrawFee.withdrawal_min" :max="withdrawFee.withdrawal_max" class="color-light fn-13" :placeholder="$t('assets.c2')"></v-input>
							<view class="d-flex justify-between align-end" style="margin: 10px 0px;">
							  <view style="width: 100%;">{{ $t("assets.c1") }}：{{ withdrawFee.usable_balance }}{{ coin }}</view>
							  <view style="width: 100%;text-align: right;">{{$t('common.c23')}}：{{timeFormat}}</view>
							</view>
						</view>
					</template>
				</el-step>
				<el-step :title="$t('common.c13')" v-if="form.amount">
					<template slot="description">
						<view style="margin: 10px 0px;color: #fff;width: 540rpx;">
							<v-input type="password" @input="withdrawalnum" v-model="form.withdrawal_psw" class="color-light w-max fn-13 rounded-xs" :placeholder="$t('common.c14')"></v-input>
						</view>
					</template>
				</el-step>
				<el-step :title="$t('safe.a5')" v-if="form.withdrawal_psw">
					<template slot="description">
						<view style="margin: 10px 0px;color: #fff;width: 540rpx;display: flex;">
							<v-input type="text" v-model="form.emailcode" class="w-max color-light fn-13" :placeholder="$t('safe.a6')"></v-input>
							<view class="d-flex" style="justify-content: space-between;align-items: center;">
								<view style="width: 180rpx;text-align: center;" class="all color-light m-l-md flex-shrink fn-12 getCode" @click="getEmailCode">
									<text v-if="!getEmailCodeLock">{{ $t("common.getCode") }}</text>
									<text v-else>{{ daojishi }}</text>
								</view>
							</view>
						</view>
					</template>
				</el-step>
			</el-steps>
			<view style="margin: 20px 32px;border-top: 2px solid #444;">
				<view style="display: flex;align-items: center;padding-top: 10px;">{{$t('common.c24')}}<img src="@/assets/img/zhuanzan.png" alt width="20" style="margin-left: 5px;"/></view>
				<view style="display: flex;justify-content: space-between;align-items: center;">
					<view>
						<view style="font-size: 30px;font-weight: bold;max-width: 540rpx;">
							<span style="overflow-wrap: anywhere;">{{price1(quantity)}}</span>
						</view>
						<view>{{$t('assets.c4')}}: {{coin=='USDT'&&form.addressType==3?withdrawFee.trc20:withdrawFee.withdrawal_fee }} {{coin}}</view>
					</view>
					<view></view>
				</view>
				<view style="display: flex;margin-top: 10px;">
					<view :class="!form.emailcode?'fontWithdrawal':'fontWithdrawal1'" @click="toDraw">
						{{$t('common.c25')}}
					</view>
				</view>
			</view>
			<view class="form bg-panel-3 p-x-lg p-y-md" style="background-color: #121212;">
			  <ul class="fn-md rounded-md m-y-xs line-height-2">
			    <li>·{{ $t("assets.c5") }}{{lang=='zh-TW'||lang=='jp'?'。':'.'}}</li>
			    <li>·{{ $t("assets.c6") }}{{lang=='zh-TW'||lang=='jp'?'。':'.'}}</li>
			    <li>·{{ $t("assets.c7") }}{{lang=='zh-TW'||lang=='jp'?'。':'.'}}</li>
			  </ul>
			</view>
	  </view>
	  <coin-list ref="coinList" v-model="coin" @close="coinListShow = false" v-show="coinListShow"/>
	  <view v-show="promptaddress" class="modal-overlay">
	  	<view class="modal-content">
	  		<view style="margin-top: 25px;padding: 0px 10px;">
	  			<img src="@/assets/img/tishi.png" alt="" width="60" />
	  			<view style="margin: 20px 0px;">{{$t('common.c29')}}</view>
	  			<view class="losure" @click="closeModal">{{$t('common.c28')}}</view>
	  		</view>
	  	</view>
	  </view>
	</v-page>
</template>

<script>
	import coinList from "./coin-list";
	import Wallet from "@/api/wallet";
	import Member from "@/api/member";
	import formData from "@/utils/class/date";
	import Profile from "@/api/profile";
	
	export default {
	  components: {
	    coinList,
	  },
	  data() {
	    return {
			type: 'draw',
			coin: "",
			lang:"",
			active:1,
			JStime: 0,
			tiemr: null,
			indexshow:0,
			quantity:"0.00",
			timeFormat:"",
			rechargeType: 2,
			withdrawFee: {},
			coinListShow: false,
			promptaddress:false,
			getEmailCodeLock: false,
			lang: uni.getStorageSync('language'),
			network:[{id:2,name:"ERC20"},{id:3,name:"TRC20"}],
			form: {
			  coin_id: "",
			  amount: "",
			  withdrawal_psw:"",
			  address: "",
			  addressType: "",
			  code_type: 1,
			  code: '',
			  emailcode: '',
			  gr_code: '',//图形验证码Graphic verification code
			},
		}
	  },
	  created() {
	  	this.lang = localStorage.getItem('lang')
	  	this.updateTimeFormat()
	  	this.timeUpdateInterval = setInterval(this.updateTimeFormat, 36000);
	  },
	  computed: {
	    activeCoin() {
	      if (!this.coin) return {};
	      return this.$refs.coinList.coinList.find(
	          (item) => item.coin_name == this.coin
	      );
	    },
	  	daojishi(){
	  		return '('+this.JStime + 's' + ')';
	  	}
	  },
	  watch: {
	    coin(n) {
	      if (n) {
			this.active = 2
	        this.form.address = "";
	        if (this.coin != "USDT") {
	          this.form.addressType = 1;
	        } else {
	          this.rechargeType = 2;
	        }
	        this.withdrawalBalance();
	      }
	    },
	  },
	  methods: {
		price1(item){
			if (item) {
				let price = item.toString();
				let parts = price.split(".");
				parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
				return parts.join(".");
			}
		},
		addressnum(e){
			if(e&&this.indexshow!==1){
				this.indexshow++;
				this.promptaddress = true;
				this.active = 3
			}
			// console.log(e);
		},
		closeModal(){
			this.promptaddress = false;
		},
		// 获取提币地址
		withdrawalBalance() {
		  let address_type = 1
		  let data = {
		    coin_name: this.coin,
		    address_type: this.rechargeType
		  };
		  Wallet.withdrawalBalance(data).then((res) => {
		    // console.info(res)
		    this.withdrawFee = res.data;
		  });
		},
		enteraddressType(e){
			if(e&&this.form.amount){
				const num = this.coin=='USDT'&&this.form.addressType==3?this.withdrawFee.trc20:this.withdrawFee.withdrawal_fee
				this.quantity = this.form.amount - num
			}
		},
		// 獲取邮箱验证码
		getEmailCode(){
			if (!this.form.address) {
				this.$toast(this.$t('assets.b9'))
				return
			}
			if (!this.form.amount) {
				this.$toast(this.$t('assets.c2'))
				return
			}
			if (!this.form.withdrawal_psw) {
				this.$toast(this.$t('common.c14'))
				return
			}
			// if (!this.form.gr_code) {
			// 	this.$toast(this.$t('common.GraphicValidation'))
			// 	return
			// }
			if(this.getEmailCodeLock){return};
			this.JStime = 300;
			this.tiemr = setInterval(()=>{
				if(this.JStime===0){
					this.getEmailCodeLock = false;
					clearInterval(this.tiemr);
					return;
				}
				this.JStime--;
			}, 1000)
			this.getEmailCodeLock = true;
			Member.getWdcode({bt:this.coin,baddr:this.form.address,bnum:this.form.amount}).then(res=>{
				// console.log(res);
				if(res.code=='4001'){
					this.$toast(res.message);
				}else{
					this.$toast(this.$t('common.sendSuccess'));
				}
			})
		},
		// 发起提币
		toDraw() {
		  if (!this.form.address) {
		    this.$toast(this.$t('assets.b9'))
		    return
		  }
		  if (!this.form.amount) {
		    this.$toast(this.$t('assets.c2'))
		    return
		  }
		  if(!this.form.withdrawal_psw){
		  		this.$toast(this.$t('common.c14'))
		  		return
		  }
		  if (!this.form.emailcode) {
		  	this.$toast(this.$t('safe.a6'))
		  	return
		  }
		  let data = this.withdrawFee
		  if (data.withdraw_switch == 1) {
				this.secondaryShow = true
		    if (data.google_status == 1) {
				this.form.code_type = 3;
		    } else if (data.phone_status == 1) {
				this.form.code_type = 1;
				this.$nextTick(() => {
		        this.$refs.mobileCode.send();
		      });
		    } else if (data.email_status == 1) {
				this.form.code_type = 2;
				this.$nextTick(() => {
					this.$refs.emailCode.send();
				});
		    }
		  } else {
		    this.draw()
		  }
		},
		draw() {
		 //  if(this.status!=2){
			// this.$toast(this.$t('common.withdrawal2'));
		 //  }
		  // this.form.addressType = this.rechargeType;
		  this.form.coin_id = this.activeCoin.coin_id;
		  Wallet.withdraw(this.form, {btn: this.$refs.btn})
		      .then((res) => {
		        this.secondaryShow = false
		        this.form.code = ''
		        if (res.code == 4001) {
		          this.$toast(res.message);
				  // this.reGetGraphChe();//重新获取图形验证码；
		        } else {
		          this.$toast.success(this.$t("assets.d5") + "！");
		          this.form.amount = ''
		          setTimeout(()=>{
		            uni.navigateTo({
		              url:'/pages/assets/records?type='+this.type
		            })
		          }, 1500)
		          // setTimeout(()=>{
		          //  this.getWithdrawRecords();
		          // }, 2000)
		          // setTimeout(()=>{
		          //  this.getWithdrawRecords();
		          // }, 3000)
		        }
		      })
		      .catch(() => {
		      });
		},
		amountnum(){
			if(this.form.amount){
				this.active = 4
				const num = this.coin=='USDT'&&this.form.addressType==3?this.withdrawFee.trc20:this.withdrawFee.withdrawal_fee
				this.quantity = this.form.amount - num
				if(this.quantity < 0){
					this.quantity = "0.00"
				}
			}else{
				this.quantity = "0.00"
			}
		},
		withdrawalnum(){
			this.active = 5
		},
		updateTimeFormat() {
		  // 这里调用获取时间格式的函数，并更新data中的timeFormat
		  this.timeFormat = this.getTimeFormat();
		},
		getCurrentUSTime() {
		  const now = new Date();
		  const offset = -4 * 60; // UTC-4小时（东部时间）
		  // 注意：getTimezoneOffset() 返回的是当前时区与UTC的分钟差（正值），需要反向调整
		  const usTime = new Date(now.getTime() + (now.getTimezoneOffset() * 60000) + (offset * 60000));
		  return usTime;
		},
		 
		// 获取当前美国时间的星期几（0代表周日，1代表周一，...，6代表周六）
		getDayOfWeek(date) {
		  return date.getDay();
		},
		 
		// 根据当前是美国时间的哪一天来返回“12H”或“24H”
		getTimeFormat() {
		  const usTime = this.getCurrentUSTime();
		  const dayOfWeek = this.getDayOfWeek(usTime);
		  return dayOfWeek >= 1 && dayOfWeek <= 5 ? '12H' : '24H';
		},
	  }
	}
</script>

<style lang="scss">
	
</style>
<style scoped lang="scss">
	.el-steps--vertical{
		height: auto;
	}
	::v-deep .el-step__title.is-wait {
	  color: #303133 !important;
	}
	::v-deep .el-input__inner{
		background-color: #242424;
	}
	::v-deep .is-process .el-step__icon.is-text{
		border-color: #C0C4CC;
	}
	
	.modal-overlay {
		z-index: 999999999999;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.modal-content {
	  background-color: #1f1f1f;
	  padding: 20px;
	  border-radius: 5px;
	  width: 550rpx;
	  text-align: center;
	  position: relative;
	}
	
	.losure{
		color: #fff;
		width: 100%;
		height: 40px;
		font-size: 16px;
		line-height: 40px;
		cursor: pointer;
		border-radius: 5px;
		background-color: #77abff;
	}
	.getCode{
		color: #fff;
		margin: 10px 0px;
		padding: 5px 10px;
		border-radius: 5px;
		align-items: center;
		border: 1px solid #4e4e5d;
	}
	.fontWithdrawal{
		color: #737475;
		cursor: pointer;
		padding: 10px 40px;
		border-radius: 5px;
		background-color: #3f4651;
	}
	.fontWithdrawal1{
		color: #fff;
		cursor: pointer;
		padding: 10px 40px;
		border-radius: 5px;
		background-color: #1c52bc;
	}
</style>