<template>
	<view :style="'background-color: '+theme.bg+';color: '+theme.text" style="height: 100vh;">
		<myNav :title="i18n.mine.safety.title"></myNav>
		<view class="padding">
			<view class="width-100b height-50 flex align-center justify-between">
				<text class="font-30">{{i18n.mine.safety.dengji}}</text>
				<text :style="'color:'+levelColor+';'" class="padding-left-xl font-30">{{leveltitle}}</text>
			</view>
			<view class="width-100b flex align-center justify-between margin-top-xl">
				<view class="cu-progress sm round striped active">
					<view class="bj-FF4040" style="width:100%;"></view>
				</view>
				<view class="cu-progress sm round striped active margin-w-20">
					<view class="bj-0081FF" style="width:100%;"></view>
				</view>
				<view class="cu-progress sm round striped active">
					<view class="bj-00C481" style="width:100%;"></view>
				</view>
			</view>
		</view>

		<!-- <view @click="router.push('/pages/my/safety/real')" class="listBox">
			<text class="font-30 color-333333">{{i18n.mine.safety.shiming}}</text>
			<view class="line-height-96">
				<text :style="'color:'+authColor+';'">{{auth_title}}</text>
				<i class="cuIcon-right margin-l-17 color-C3C3C3"></i>
			</view>
		</view> -->

		<view class="margin-c-16">
			<!-- <view @click="is_google?tos(i18n.mine.safety.bangding):router.push('/pages/my/safety/Authenticator')" class="listBox">
				<text class="font-30">{{i18n.mine.safety.guge}}</text>
				<view class="line-height-96">
					<text :class="is_google?'color-00C481':'color-FF4040'">{{is_google?i18n.mine.safety.bangding:i18n.mine.safety.nobangding}}</text>
					<i class="cuIcon-right margin-l-17"></i>
				</view>
			</view> -->
			<view @click="email?tos(i18n.mine.safety.bangding):router.push('/pages/my/safety/bind?type=0')" class="listBox">
				<text class="font-30">{{i18n.mine.safety.email}}</text>
				<view class="line-height-96">
					<text :class="email?'color-00C481':'color-FF4040'">{{email?i18n.mine.safety.bangding:i18n.mine.safety.nobangding}}</text>
					<i class="cuIcon-right margin-l-17"></i>
				</view>
			</view>
			<view @click="mobile?tos(i18n.mine.safety.bangding):router.push('/pages/my/safety/bind?type=1')" class="listBox">
				<text class="font-30">{{i18n.mine.safety.phone}}</text>
				<view class="line-height-96">
					<text :class="mobile?'color-00C481':'color-FF4040'">{{mobile?i18n.mine.safety.bangding:i18n.mine.safety.nobangding}}</text>
					<i class="cuIcon-right margin-l-17"></i>
				</view>
			</view>
			<view @click="router.push('/pages/my/safety/password')" class="listBox">
				<text class="font-30">{{i18n.mine.safety.logpwd}}</text>
				<view class="line-height-96">
					<text class="color-C3C3C3">{{i18n.mine.safety.xiugai}}</text>
					<i class="cuIcon-right margin-l-17"></i>
				</view>
			</view>
		</view>

		<view class="margin-c-16">
			<view @click="router.push('/pages/my/safety/payment')" class="listBox">
				<text class="font-30">{{i18n.mine.safety.mode}}</text>
				<view class="line-height-96">
					<i class="cuIcon-right margin-l-17"></i>
				</view>
			</view>
			<view @click="router.push('/pages/my/safety/payword')" class="listBox">
				<text class="font-30">{{i18n.mine.safety.paypwd}}</text>
				<view class="line-height-96">
					<text class="color-C3C3C3">{{i18n.mine.safety.xiugai}}</text>
					<i class="cuIcon-right margin-l-17"></i>
				</view>
			</view>
			<!-- <view class="listBox">
				<text class="font-30 color-333333">{{i18n.mine.safety.apt}}（{{apt_free}}%）</text>
				<view class="flex align-center">
					<u-switch @change="changeApy_pay" v-model="checked" :loading="loading"></u-switch>
				</view>
			</view> -->
		</view>
		<p class="font-30 padding-w-30 margin-t-40">{{i18n.mine.safety.tips}}</p>
		<view class="width-690 padding-30 margin-30-auto radiu-16" v-html="user_interest">

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				level: 1, //安全等级  1,2,3
				leveltitle: '',

				is_google: false, //是否完成谷歌验证器
				
				mobile:'',
				email:'',

				auth_status: 3, //审核状态:1=审核成功,2=审核中,3=未提交 0=失败 
				auth_title: '',

				apy_pay: 0, //是否开启apt 0否  1是
				apt_free:0,
				user_interest: "", //权益

				checked: false,
				loading: false,
				// 中间变量，避免在watch中多次回调，造成无限循环
				controlStatus: false,
				
				theme: '',
			}
		},
		onShow() {
			if (uni.getStorageSync("theme") == "dark") {
				this.theme = this.$store.state.darkTheme
			} else {
				this.theme = this.$store.state.lightTheme
			}
			this.getInfo()
		},
		computed: {
			i18n() {
				return this.$t('message');
			},
			levelColor() {
				let color;
				let that = this
				switch (this.level) {
					case 1:
						color = "#FF4040"
						that.leveltitle = that.i18n.mine.safety.di
						break;
					case 2:
						color = "#0081FF"
						that.leveltitle = that.i18n.mine.safety.zhong
						break;
					case 3:
						color = "#00C481"
						that.leveltitle = that.i18n.mine.safety.gao
						break;
					default:
						color = "#FF4040"
						that.leveltitle = that.i18n.mine.safety.di
						break;
				}
				return color
			},
			authColor() {
				let color;
				let that = this
				switch (this.auth_status) {
					case 0:
						color = "#FF4040"
						that.auth_title = that.i18n.mine.safety.type0
						break;
					case 1:
						color = "#0081FF"
						that.auth_title = that.i18n.mine.safety.type1
						break;
					case 2:
						color = "#00C481"
						that.auth_title = that.i18n.mine.safety.type2
						break;
					default:
						color = "#FF4040"
						that.auth_title = that.i18n.mine.safety.type0
						break;
				}
				return color
			}

		},
		methods: {
			changeApy_pay(e){
				// 等于false，意味着用户手动关闭了switch
				if (this.controlStatus == true) return
				this.controlStatus = true
				// 重新打开switch，并让它处于加载中的状态
				this.loading = true;
				// 模拟向后端发起请求
				this.getRestultFromServer();
			},
			getRestultFromServer() {
				this.post('/my/set_apt').then(res => {
					console.log('开启关闭apt手续费交易', res)
					this.loading = false;
					if (res.code == 1) {
						// 后端允许用户关闭switch，改变checked状态，结束loading状态
						
					}else{
						// 后端出问题 不允许用户关闭switch，设置checked为true，结束loading状态
						this.checked = !this.checked;
					}
					setTimeout(()=>{
						this.controlStatus = false
					},1000)
				})
			},
			getInfo() {
				this.post('/my/security').then(res => {
					console.log('安全中心', res)
					if (res.code == 1) {
						this.level = res.data.level
						this.is_google = res.data.is_google
						this.email = res.data.email
						this.mobile = res.data.mobile
						this.auth_status = res.data.auth_status
						this.apt_free = res.data.apt_free
						if(res.data.apy_pay==1){
							this.checked = true
						}else{
							this.checked = false
						}
						this.user_interest = res.data.user_interest
					}
				})
			},

		}
	}
</script>

<style lang="scss">
	.listBox {
		width: 100%;
		height: 96rpx;
		padding: 0 30rpx;
		// background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>
