<template>
	<view :style="'background-color: '+theme.bg+';color: '+theme.text" style="height: 100vh;">
		<myNav :title="i18n.api.text5"></myNav>
		<!-- 身体 -->
		<view class="width-750 padding-t-26">
			<view class="padding-w-30 padding-b-12 font-24">
				<text>{{i18n.api.text10}}</text>
			</view>
			<view class="margin-t-16 padding-w-30">
				<text class="font-28">{{i18n.api.text11}}</text>
				<view class="margin-t-20">
					<input v-model="notice" class="inputbox height-86 padding-w-15"
					:style="'background-color: '+theme.fu_bg+';color: '+theme.text"
					 type="text" :placeholder="i18n.api.input1"
						placeholder-class="color-C3C3C3" />
				</view>
			</view>
			<view class="margin-t-16 padding-w-30">
				<view class="flex align-center">
					<text class="font-28">Passphrase</text>
					<u-icon @click="show=true" name="question-circle" color="#979EA8" size="30" class="margin-l-10"></u-icon>
				</view>
				<view class="margin-t-20">
					<input v-model="passphrase" class="inputbox height-86 padding-w-15"
					:style="'background-color: '+theme.fu_bg+';color: '+theme.text"
					 type="text" :placeholder="i18n.api.input2" placeholder-class="color-C3C3C3" password />
				</view>
			</view>
			<view class="margin-t-16 padding-w-30">
				<text class="font-28">{{i18n.api.text12}}</text>
				<view class="margin-t-20">
					<textarea v-model="ip" class="inputbox height-192 padding-15" type="text"
					:style="'background-color: '+theme.fu_bg+';color: '+theme.text"
						:placeholder="i18n.api.input3" placeholder-class="color-C3C3C3" maxlength="-1" />
				</view>
			</view>
			<view class="margin-t-16 padding-w-30">
				<text class="font-28">{{i18n.api.text13}}</text>
				<view class="margin-t-20 flex align-center justify-between">
					<view @click="item.type=(!item.type)" v-for="(item,index) in list"
						:class="item.type?'okselect':'noselect'">
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
			<view v-if="email!=''" class="margin-t-16 padding-w-30">
				<text class="font-28">{{i18n.withdraw.text17}}</text>
				<view class="margin-t-20 flex align-center inputbox padding-r-20"
				:style="'background-color: '+theme.fu_bg+';color: '+theme.text">
					<input v-model="code" class="flex-1 height-86 padding-w-15 font-24" type="text"
						:placeholder="i18n.withdraw.tos9" placeholder-class="color-C3C3C3" />
					<text @click="cutTime()" class="font-28 weight-bold">{{codeText}}</text>
				</view>
			</view>
			<view v-if="mobile!=''" class="margin-t-16 padding-w-30">
				<text class="font-28">{{i18n.withdraw.text18}}</text>
				<view class="margin-t-20 flex align-center inputbox padding-r-20"
				:style="'background-color: '+theme.fu_bg+';color: '+theme.text">
					<input v-model="sms_code" class="flex-1 height-86 padding-w-15 font-24" type="text"
						:placeholder="i18n.withdraw.tos10" placeholder-class="color-C3C3C3" />
					<text @click="cutTime2()" class="font-28 weight-bold">{{codeText2}}</text>
				</view>
			</view>
			<view class="flex justify-center margin-t-40">
				<button @click="getadd_api" class="cu-btn loginBtn">{{i18n.cycle.confirm}}</button>
			</view>
		</view>
		
		<!-- 提示弹窗 -->
		<u-popup style="z-index: 5000;" mode="center" v-model="show" border-radius="20">
			<view class="width-600 padding-w-30"
			 :style="'background-color: '+theme.bg+';color: '+theme.text">
				<view class="padding-c-30">
					<text class="font-26">{{i18n.api.text14}}</text>
				</view>
				<view class="height-2 bj-D1D3D8"></view>
				<view @click="show=false" class="height-80 line-height-80 text-center">
					<text class="font-30 bold-font">{{i18n.cycle.confirm}}</text>
				</view>
			</view>
		</u-popup>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				time: 0,
				timeFlag: true,
				time2: 0,
				timeFlag2: true,

				email: '',
				mobile: '',
				list: [{
						id: 1,
						name: 'Read Only',
						type: false,
					},
					{
						id: 2,
						name: 'Withdraw',
						type: false,
					},
					{
						id: 3,
						name: 'Trade',
						type: false,
					}
				],

				notice: '',
				passphrase: '',
				ip: '',
				auth: '',
				code: '',
				sms_code: '',
				flag: true,
				show:false,
				theme: '',
			}
		},
		computed: {
			i18n() {
				return this.$t('message');
			},
			codeText() {
				if (this.time > 0) {
					return this.time + " S"
				} else {
					return this.i18n.withdraw.text13
				}
			},
			codeText2() {
				if (this.time2 > 0) {
					return this.time2 + " S"
				} else {
					return this.i18n.withdraw.text13
				}
			}
		},
		onShow() {
			if (uni.getStorageSync("theme") == "dark") {
				this.theme = this.$store.state.darkTheme
			} else {
				this.theme = this.$store.state.lightTheme
			}
			this.getuserinfo()
			this.list[0].name=this.i18n.api.text1
			this.list[1].name=this.i18n.api.text2
			this.list[2].name=this.i18n.api.text3
		},
		methods: {
			// 确认申请
			getadd_api() {
				if (!this.flag) return
				if (this.notice == '') return this.tos(this.i18n.api.input1)
				if (this.passphrase == '') return this.tos(this.i18n.api.input2)
				let result = this.list.some(item => item.type == true)
				if (!result) return this.tos(this.i18n.api.input4)
				if (this.email != '') {
					if (this.code == '') return this.tos(this.i18n.withdraw.tos9)
				}
				if (this.mobile != '') {
					if (this.sms_code == '') return this.tos(this.i18n.withdraw.tos10)
				}
				this.flag = false
				this.auth = ''
				this.list.forEach((item) => {
					if (item.type == true) {
						this.auth = this.auth + item.id + ','
					}
				})
				this.auth = this.auth.slice(0, this.auth.length - 1)
				let obj = {
					passphrase: this.passphrase,
					notice: this.notice,
					code: this.code,
					sms_code: this.sms_code,
					ip: this.ip,
					auth: this.auth,
				}
				this.post('/my/add_api', obj).then(res => {
					console.log(res);
					this.flag = true
					if (res.code == 1) {
						this.tos(res.msg)
						setTimeout(() => {
							uni.navigateBack()
						}, 500)
					}
				})
			},
			// 获取个人信息
			getuserinfo() {
				this.post('/my/get_userinfo').then(res => {
					if (res.code == 1) {
						this.email = res.data.email
						this.mobile = res.data.mobile
					}
				})
			},
			// 验证码区域
			cutTime() {
				if (!this.timeFlag) return
				uni.showLoading({
					title: '',
				})
				this.timeFlag = false
				this.post('/ems/send', {
					email: this.email,
					event: "withdraw",
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						this.tos(this.i18n.withdraw.tos7)
						this.time = 120
						var that = this
						let timeName = setInterval(() => {
							if (that.time > 0) {
								that.time--
							} else {
								that.time = that.i18n.withdraw.text13
								that.timeFlag = true
								clearInterval(timeName)
							}
						}, 1000)
					} else {
						this.timeFlag = true
					}
				})
			},
			cutTime2() {
				if (!this.timeFlag2) return
				uni.showLoading({
					title: '',
				})
				this.timeFlag2 = false
				this.post('/sms/send', {
					mobile: this.mobile,
					event: "withdraw",
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						this.tos(this.i18n.withdraw.tos7)
						this.time2 = 120
						var that = this
						let timeName2 = setInterval(() => {
							if (that.time2 > 0) {
								that.time2--
							} else {
								that.time2 = that.i18n.withdraw.text13
								that.timeFlag2 = true
								clearInterval(timeName2)
							}
						}, 1000)
					} else {
						this.timeFlag2 = true
					}
				})

			}
		}
	}
</script>

<style>
	.loginBtn {
		width: 600rpx;
		height: 96rpx;
		background: #0165EE !important;
		border-radius: 12rpx;
		color: #FFF;
		font-size: 32rpx;
	}

	.inputbox {
		width: 690rpx;
		/* background: rgba(246, 248, 251, 0.7); */
		border-radius: 8rpx;
		font-size: 24rpx;
		/* color: #333333; */
	}

	.noselect {
		width: 180rpx;
		height: 56rpx;
		background: rgba(246, 248, 251, 0.5);
		border-radius: 4rpx;
		font-size: 24rpx;
		color: #333;
		line-height: 56rpx;
		text-align: center;
	}

	.okselect {
		width: 180rpx;
		height: 56rpx;
		background: #0165EE;
		border-radius: 4rpx;
		font-size: 24rpx;
		color: #FFF;
		line-height: 56rpx;
		text-align: center;
	}
</style>
