<template>
	<view  :style="'background-color: '+theme.bg+';color: '+theme.text" style="height: 100vh;">
		<!-- <z-paging ref="paging" refresher-only @onRefresh="onRefresh"> -->
		<!-- 下拉刷新 -->
		<!-- <custom-refresher slot="refresher" slot-scope="{refresherStatus}" :status="refresherStatus">
			</custom-refresher> -->
		<!-- 头部 -->
		<myNav :title="i18n.api.text15"></myNav>
		<!-- 身体 -->
		<view class="width-750">
			<!-- 输密码 -->
			<view v-if="!data">
				<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" type="text"
							:placeholder="i18n.api.input2" placeholder-class="color-C3C3C3" password />
					</view>
				</view>
				<view class="flex justify-center margin-t-60">
					<button @click="getApi" class="cu-btn loginBtn">{{i18n.cycle.confirm}}</button>
				</view>
			</view>
			<!-- API详情 -->
			<view v-else class="padding-t-60 flex direction-column align-center">
				<view class="detailsbox" :style="'background-color: '+theme.fu_bg+';color: '+theme.fu_text">
					<!-- API Key -->
					<view class="margin-t-16">
						<text class="font-28">API Key</text>
						<view class="margin-t-10">
							<text class="font-24 nummedium-font huanhang">{{data.api_key}}</text>
							<image @click="copy(data.api_key)" class="width-22 height-24 margin-l-20"
								src="/static/imgs/my/COPY1@2x.png" mode=""></image>
						</view>
					</view>
					<!-- 备注名 -->
					<view class="margin-t-16">
						<text class="font-28">{{i18n.api.text11}}</text>
						<view class="margin-t-10">
							<text class="font-24 nummedium-font huanhang">{{data.notice}}</text>
							<image @click="copy(data.notice)" class="width-22 height-24 margin-l-20"
								src="/static/imgs/my/COPY1@2x.png" mode=""></image>
						</view>
					</view>
					<!-- 绑定IP地址（非必填） -->
					<view class="margin-t-16">
						<text class="font-28">{{i18n.api.text12}}</text>
						<view class="margin-t-10">
							<text class="font-24 nummedium-font huanhang">{{data.ip}}</text>
							<image v-show="data.ip" @click="copy(data.ip)" class="width-22 height-24 margin-l-20"
								src="/static/imgs/my/COPY1@2x.png" mode=""></image>
							<view v-if="data.ip==''" class="height-36"></view>
						</view>
					</view>
					<!-- 权限 -->
					<view class="margin-t-16">
						<text class="font-28">{{i18n.api.text13}}</text>
						<view class="margin-t-10 flex align-center">
							<view v-for="(itm,idx) in data.auth"
								:class="itm==1?'label1':itm==2?'label2':itm==3?'label3':''">
								<text v-if="itm==1">{{i18n.api.text1}}</text>
								<text v-if="itm==2">{{i18n.api.text2}}</text>
								<text v-if="itm==3">{{i18n.api.text3}}</text>
							</view>
						</view>
					</view>
					<!-- SecretKey -->
					<view class="margin-t-16">
						<text class="font-28">SecretKey</text>
						<view class="margin-t-10">
							<text class="font-24 nummedium-font huanhang">{{data.secret_key}}</text>
							<image @click="copy(data.secret_key)" class="width-22 height-24 margin-l-20"
								src="/static/imgs/my/COPY1@2x.png" mode=""></image>
						</view>
					</view>
				</view>
			</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>

		<!-- </z-paging> -->
	</view>
</template>

<script>
	import clipboard from "@/components/clipboard.js"
	export default {
		data() {
			return {
				id: '',
				passphrase: '',
				flag: true,
				data: '',
				show: false,
				
				theme: '',
			}
		},
		computed: {
			i18n() {
				return this.$t('message');
			},
		},
		onLoad(e) {
			this.id = e.id
		},
		onShow() {
			if (uni.getStorageSync("theme") == "dark") {
				this.theme = this.$store.state.darkTheme
			} else {
				this.theme = this.$store.state.lightTheme
			}
		},
		methods: {
			// onRefresh() {
			// 	this.list = []
			// 	this.getList()
			// 	// 以告知z-paging下拉刷新结束，这样才可以开始下一次的下拉刷新
			// 	setTimeout(() => {
			// 		//1.5秒之后停止刷新动画
			// 		this.$refs.paging.complete();
			// 	}, 1000)
			// },
			// 查看API
			getApi() {
				if (!this.flag) return
				if (this.passphrase == '') return this.tos(this.i18n.api.input2)
				this.flag = false
				uni.showLoading()
				let obj = {
					id: this.id,
					passphrase: this.passphrase
				}
				this.post('/my/api_con', obj).then(res => {
					console.log(res);
					this.flag = true
					if (res.code == 1) {
						uni.hideLoading()
						this.data = res.data
					}
				})
			},
			// 复制地址
			copy(data) {
				// #ifndef H5
				clipboard.setText(data);
				// #endif

				// #ifdef H5 
				let result
				let textarea = document.createElement("textarea")
				textarea.value = data
				textarea.readOnly = "readOnly"
				document.body.appendChild(textarea)
				textarea.select() // 选中文本内容
				textarea.setSelectionRange(0, data.length)
				result = document.execCommand("copy")
				textarea.remove()
				// #endif
				this.tos(this.i18n.mine.share.copySuceed)
			},

		}
	}
</script>

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

	.inputbox {
		width: 690rpx;
		border: 1rpx solid #DDD;
		border-radius: 8rpx;
		font-size: 24rpx;
		/* color: #333333; */
	}

	.detailsbox {
		width: 690rpx;
		padding: 20rpx 30rpx;
		/* background-color: #F5F5FD; */
		border-radius: 10rpx;
	}

	.huanhang {
		word-wrap: break-word;
		word-break: break-all;
	}

	.label1 {
		height: 32rpx;
		line-height: 32rpx;
		padding: 0 4rpx;
		border-radius: 4rpx;
		margin-right: 20rpx;
		font-size: 24rpx;
		color: rgb(79, 119, 192);
		background-color: rgba(79, 119, 192, 0.3);
	}

	.label2 {
		height: 32rpx;
		line-height: 32rpx;
		padding: 0 4rpx;
		border-radius: 4rpx;
		margin-right: 20rpx;
		font-size: 24rpx;
		color: rgb(39, 151, 114);
		background-color: rgba(39, 151, 114, 0.3);
	}

	.label3 {
		height: 32rpx;
		line-height: 32rpx;
		padding: 0 4rpx;
		border-radius: 4rpx;
		margin-right: 20rpx;
		font-size: 24rpx;
		color: rgb(205, 120, 55);
		background-color: rgba(205, 120, 55, 0.3);
	}
</style>
