<template>
	<view :style="'background-color: '+theme.bg+';color: '+theme.text" style="height: 100vh;">
		<myNav :title="i18n.mine.safety.shiming"></myNav>
		
		<view class="padding-w-22 padding-c-44">
			<text class="font-36 bold-font">{{i18n.mine.safety.renz}}</text>
			<view class="flex align-center margin-t-8 margin-b-40">
				<text class="font-28 margin-r-20" :style="'color: '+theme.fu_text">{{top_auth}}</text>
				<text @click="centerShow=true" class="font-28 color-0165EE">{{i18n.mine.safety.quanyi}}</text>
			</view>
			<text class="font-24 bold-font">{{i18n.mine.safety.tips1}}</text>
		</view>
		
		<view class="margin-t-72">
			<view class="width-100b margin-b-32">
				<view class="height-96 flex align-center justify-between padding-w-30">
					<text class="font-30">{{i18n.mine.safety.shiming}}</text>
					<view @click="renzheng1()" class="renzheng">{{authColor}}</view>
				</view>
				<view class="width-690 margin-0-auto height-1 bj-8B99A2" style="opacity: 0.2;"></view>
				<view class="padding-30 font-24 color-C3C3C3">{{seat_auth_text}}</view>
			</view>
			<!-- <view class="width-100b margin-b-32">
				<view class="height-96 flex align-center justify-between padding-w-30">
					<text class="font-30">{{i18n.mine.safety.type2}}</text>
					<view @click="renzheng2()" class="renzheng">{{auth_highColor}}</view>
				</view>
				<view class="width-690 margin-0-auto height-1 bj-8B99A2" style="opacity: 0.2;"></view>
				<view class="padding-30 font-24 color-C3C3C3">{{high_auth_text}}</view>
			</view> -->
		</view>
		
		<!-- 中间弹窗 -->
		<u-popup v-model="centerShow" mode="center" border-radius="20">
			<view class="width-500":style="'background-color: '+theme.bg+';color: '+theme.text" >
				<view class="height-144 color-white flex align-center direction-column justify-center" style="
border-radius: 20rpx 20rpx 0rpx 0rpx;background-color: #3ECEB2;">
					<text class="font-32 bold-font">{{i18n.mine.safety.quanyi}}</text>
					<text class="font-28">{{top_auth}}</text>
				</view>
				<view class="padding-c-15 padding-w-22">
					<view class="lanbox">
						<text class="font-26">{{i18n.mine.safety.reg}}</text>
						<i v-if="quanyi.is_reg" class="cuIcon-check color-00C481 weight-bold"></i>
						<i v-else class="cuIcon-check color-00C481 weight-bold"></i>
					</view>
					<view class="lanbox">
						<view class="">
							<p class="font-26">{{i18n.mine.safety.wid}}</p>
							<p class="font-20 color-C3C3C3">{{quanyi.wid_text}}</p>
						</view>
						<i v-if="quanyi.is_wid" class="cuIcon-check color-00C481 weight-bold"></i>
						<i v-else class="cuIcon-check color-00C481 weight-bold"></i>
					</view>
					<view class="lanbox">
						<text class="font-26">{{i18n.mine.safety.bb}}</text>
						<i v-if="quanyi.is_bb" class="cuIcon-check color-00C481 weight-bold"></i>
						<i v-else class="cuIcon-check color-00C481 weight-bold"></i>
					</view>
					<view class="lanbox">
						<text class="font-26">{{i18n.mine.safety.hy}}</text>
						<i v-if="quanyi.is_hy" class="cuIcon-check color-00C481 weight-bold"></i>
						<i v-else class="cuIcon-check color-00C481 weight-bold"></i>
					</view>
					<view class="lanbox">
						<text class="font-26">{{i18n.mine.safety.fb}}</text>
						<i v-if="quanyi.is_fb" class="cuIcon-check color-00C481 weight-bold"></i>
						<i v-else class="cuIcon-check color-00C481 weight-bold"></i>
					</view>
					<view class="lanbox">
						<text class="font-26">{{i18n.mine.safety.lh}}</text>
						<i v-if="quanyi.is_lh" class="cuIcon-check color-00C481 weight-bold"></i>
						<i v-else class="cuIcon-check color-00C481 weight-bold"></i>
					</view>
				</view>
				<view @click="centerShow=false" class="width-100b height-96 flex align-center justify-center">
					<text class="font-26 color-0165EE">{{i18n.mine.safety.ok}}</text>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				centerShow:false,
				quanyi:{},
				seat_auth_text:'',
				high_auth_text:'',
				auth:null,
				auth_high:null,
				
				theme: '',
			}
		},
		onShow() {
			if (uni.getStorageSync("theme") == "dark") {
				this.theme = this.$store.state.darkTheme
			} else {
				this.theme = this.$store.state.lightTheme
			}
			this.appAuth()
		},
		computed: {
			i18n() {
				return this.$t('message');
			},
			authColor() {
				if(this.auth&&this.auth.status==1){
					return this.i18n.mine.safety.type3
				}else if(this.auth&&this.auth.status==2){
					return this.i18n.mine.safety.shenhe
				}else{
					return this.i18n.mine.safety.type0
				}
			},
			auth_highColor() {
				if(this.auth_high&&this.auth_high.status==1){
					return this.i18n.mine.safety.type3
				}else if(this.auth_high&&this.auth_high.status==2){
					return this.i18n.mine.safety.shenhe
				}else{
					return this.i18n.mine.safety.type0
				}
			},
			top_auth() {
				if(this.auth_high&&this.auth_high.status==1){
					return this.i18n.mine.safety.type2
				}else if(this.auth&&this.auth.status==1){
					return this.i18n.mine.safety.type1
				}else{
					return this.i18n.mine.safety.type0
				}
			}
		},
		methods: {
			appAuth() {
				this.post('/my/auth_con').then(res => {
					console.log('实名回显',res)
					if (res.code == 1) {
						this.quanyi = res.data.quanyi
						this.seat_auth_text = res.data.seat_auth_text
						this.high_auth_text = res.data.high_auth_text
						this.auth = res.data.auth
						this.auth_high = res.data.auth_high
					}
				})
			},
			renzheng1(){
				this.router.push('/pages/my/safety/real_one')
			},
			renzheng2(){
				if(this.auth&&this.auth.status==1){
					this.router.push('/pages/my/safety/real_tow')
				}else{
					this.tos(this.i18n.mine.safety.shou)
				}
			}
		}
	}
</script>

<style lang="scss">
	.renzheng{
		// width: 120rpx;
		padding: 0 18rpx;
		height: 56rpx;
		background: linear-gradient(180deg, #52F3C9 0%, #3ECEB2 100%);
		border-radius: 10rpx;
		font-size: 26rpx;
		font-weight: 400;
		line-height: 56rpx;
		text-align: center;
		color: #FFFFFF;
	}
	.lanbox{
		height: 76rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid rgba(139,153,162,0.2);
	}
</style>
