<template>
	<view class="container">
		<u-navbar bgColor="#EA5504" :safeAreaInsetTop="true" placeholder v-show="!isScan">
			<view class="" slot="left">
			</view>
			<view class="text-xl text-white" slot="center">
				我的
			</view>
			<view class="flex align-center" slot="right" @click="loginOut">
				<view class="text-white text">
					退出
				</view>
				<view class="margin-left-sm">
					<u-icon name="/static/images/mine/quit.png" color="#fff" size="15"></u-icon>
				</view>
			</view>
		</u-navbar>
		<view class="topContentCss" v-show="!isScan">
			<!-- 个人信息面板 -->
			<view class="flex justify-between topBarCss">
				<view class="flex justify-between w80">
					<view class="margin-left">
						<u-avatar size="60" shape="circle" :src="user.imgSrc" ></u-avatar>
					</view>
					<view class="margin-left flex  flex-direction">
						<view class="text-xl text-bold">
							{{user.fullname}}
						</view>
						<view class="margin-top-lg">
							{{user.account}}
						</view>
					</view>
					<view class="tagCss">
						<u-tag :text="(user && user.userInfo && user.userInfo.fHylx)?user.userInfo.fHylx:'居民'"
							color="#fff" iconColor="#fff" icon="/static/images/mine/sfjm.png" borderColor="#EF8043"
							shape="circle" bgColor="#EF8043"></u-tag>
					</view>
				</view>
				<view class="w30 flex align-end justify-between flex-direction">
					<view class="chatCss">
						<u-icon name="chat" size="30" color="#fff"></u-icon>
					</view>
					<view class="authCss flex align-center" @click="handleAuth">
						<view class="margin-right-xs">
							<u-image shape="circle" width="20px" height="20px"
								src="/static/images/mine/auth.png"></u-image>
						</view>
						<view class="themeColor flex align-end text-sm">
							{{ user.userInfo && user.userInfo.fSfsmrz || '否'}}
						</view>
					</view>
				</view>
			</view>
			<!-- 数字面板 -->
			<view class="flex justify-around  margin-top-xl">
				<view class="flex align-center flex-direction">
					<view class="text-bold text-xl">
						{{(user.stats && user.stats.aqyq) || '0'}}
					</view>
					<view class="text-sm margin-top-xs">
						安全用气
					</view>
				</view>
				<view class="flex align-center flex-direction" @click="goMyGasBottlePage">
					<view class="text-bold text-xl">
						{{(user.stats && user.stats.ydqp) || '0'}}
					</view>
					<view class="text-sm margin-top-xs">
						已订气瓶
					</view>
				</view>
				<view class="flex align-center flex-direction">
					<view class="text-bold text-xl">
						{{(user.stats && user.stats.yjje) || '0'}}
					</view>
					<view class="text-sm margin-top-xs">
						押金金额
					</view>
				</view>
			</view>
		</view>

		<view class="cardAreaCss" v-show="!isScan">
			<!-- 气瓶卡片 -->
			<gasCard :userInfo="user"></gasCard>
			<!-- 订单卡片 -->
			<orderCard></orderCard>
			<!-- 常用应用卡片 -->
			<commonApplications @selectItem="handleItem"></commonApplications>
		</view>
		<!-- app不支持$route -->
		<!-- <TabBar :currentPagePath="this.$route.meta.pagePath"></TabBar> -->
		<u-popup ref="LoginOutRef" :customStyle="{width:'80%',borderRadius:'15px'}" round="15" mode="center"
			:show="LoginOutShow" @close="LoginOutClose" @open="LoginOutOpen">
			<view class="userCardCss">
				<view class="padding-tb text-xl text-center">
					提示
				</view>
				<view class="padding-bottom text-gray text-center">
					确认退出当前账号？
				</view>
				<view class="flex justify-center padding-bottom-lg" v-if="openAutoLogin">
					<u-checkbox-group v-model="isAutoLogin" shape="circle" activeColor="#EA5504">
						<u-checkbox size="15px" label="自动登录" name="y"></u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="flex">
					<view class="w50">
						<u-button :customStyle="{borderRadius:'0 0 0 15px'}" @click="LoginOutShow = false">取消</u-button>
					</view>
					<view class="w50">
						<u-button :customStyle="{color:'#EA5504',borderRadius:'0 0 15px 0'}"
							@click="loginOutConfirm">确定</u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<TabBar :currentPagePath="'pages/mine/mine'"></TabBar>
		<ScanCode ref="scanCode" v-show="isScan" @scanCode="getCode" @close="closeScanWindow"></ScanCode>
	</view>
</template>

<script>
	import gasCard from './components/gasCard'
	import orderCard from './components/orderCard'
	import commonApplications from './components/commonApplications'
	export default {
		components: {
			gasCard,
			orderCard,
			commonApplications
		},
		props: {

		},
		data() {
			return {
				isScan: false,
				user: {},
				LoginOutShow: false,
				isAutoLogin: [],
				openAutoLogin: false,
			}
		},
		computed: {

		},
		async onShow() {
			this.isScan = false;
			console.log('打印this.isScan', this.isScan)
			await this.getInitData();
			let isAutoLogin = uni.getStorageSync('isAutoLogin');
			if (isAutoLogin) {
				this.isAutoLogin = ['y'];
				this.openAutoLogin = true;
			} else {
				this.isAutoLogin = [];
				this.openAutoLogin = false;
			}
		},
		async onLoad() {
			// 因为头像缓存的是临时文件，应用首次加载时清除缓存让其重新请求图片存入缓存作为头像
			uni.removeStorageSync('myAvatorImg');
		},
		methods: {
			//获取用户的详细信息
			async getInitData() {
				const result = await this.$api.loginApi.getUserInfo({yhlx:'hy'});
				let {
					code,
					value
				} = result;
				this.user = code == 200 ? {
					...value
				} : null;
				console.log('打印this.user.photo', this.user.photo);
				console.log(this.$store.state);
				if (this.user.photo) {
					// this.user.imgSrc = await this.$getPhotoUrl(this.user.photo);
					let avatorImg = uni.getStorageSync('myAvatorImg');
					console.log('打印this.user.photo', avatorImg);
					if (avatorImg) {
						this.user.imgSrc = avatorImg;
					} else {
						this.user.imgSrc = await this.$getPhotoUrl(this.user.photo);
						uni.setStorageSync('myAvatorImg', this.user.imgSrc);
					}
				} else {
					this.user.imgSrc = 'static/images/mine/avator.jpg';
				}
        uni.setStorageSync('userId', this.user.userInfo.id);
        this.user = {
					...this.user
				}
				console.log('用户信息', JSON.parse(JSON.stringify(this.user)));
			},
			// 实名认证
			handleAuth(){
			  let options = {
          fRzzt:this.user.userInfo.fRzzt?this.user.userInfo.fRzzt:'',
          fHylx:this.user.userInfo.fHylx?this.user.userInfo.fHylx:'',
          id:this.user.userInfo.id?this.user.userInfo.id:''
        }
        console.log('打印this.userInfo.fRzzt',this.user.userInfo.fRzzt)
        if(!this.user.userInfo.fRzzt || this.user.userInfo.fRzzt == '' || this.user.userInfo.fRzzt == '待认证'){
          uni.navigateTo({
            url:`/pages/mine/appList/realNameAuth/realNameMode`
          })
        }else if(this.user.userInfo.fRzzt == '认证中' || this.user.userInfo.fRzzt == '已认证'){
			    let mode = 0;
			    if(this.user.userInfo.fHylx == '非居民'){
            mode = 1;
          }
          uni.navigateTo({
            url: `/pages/mine/appList/realNameAuth/realNameAuthentication?mode=${mode}&option=${JSON.stringify(options)}`
          })
        }else{
          let mode = 0;
          if(this.user.userInfo.fHylx == '非居民'){
            mode = 1;
          }
          uni.navigateTo({
            url:`/pages/mine/appList/realNameAuth/realNameMode?mode=${mode}&option=${JSON.stringify(options)}`
          })
        }
			},
			handleItem() {
				// 组件模式打开
				// this.isScan = true;
				// this.$refs.scanCode.open();
				uni.navigateTo({
					url: "/pages/scan/scanCode"
				})
			},
			async getCode(code) {
				let query = {
					qptm: code
				}
				const result = await this.$api.gasApi.getDetailByQuery(query);
				let {
					state,
					message
				} = result;
				this.$modal.closeLoading();
				if (!state) {
					uni.$u.toast(message)
					return;
				}
				uni.navigateTo({
					url: '/pages/mine/appList/gasInformation/gasInformation?qptm=' + code
				})
			},
			closeScanWindow() {
				console.log("触发关闭");
				this.isScan = false;
			},
			goMyGasBottlePage() {
				uni.navigateTo({
					url: `/pages/mine/myGasBottle?type=ydqp`
				})
			},
			LoginOutOpen() {
				this.LoginOutShow = true;
			},
			LoginOutClose() {
				this.LoginOutShow = false;
			},
			loginOutConfirm() {
				// 清除自动登录信息
				if (!this.isAutoLogin.length) {
					uni.removeStorageSync('isAutoLogin');
					uni.removeStorageSync('autoInformation');
				}
				this.$store.dispatch('LogOut').then(() => {
					this.$tab.reLaunch('/pages/login');
				})
			},
			loginOut() {
				// this.LoginOutShow = true;
				this.$modal.confirm('确认退出当前账号？', '提示').then(() => {
					this.$store.dispatch('LogOut').then(() => {
						this.$tab.reLaunch('/pages/login');
					})
				}).catch(() => {
					console.log("取消");
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.topContentCss {
		position: relative;
		width: 100%;
		height: 200px;
		background: #EA5504;
		border-radius: 0 0 30px 30px;
		color: #fff;

		.topBarCss {
			height: 65px;
		}

		.authCss {
			border-radius: 30px 0 0 30px;
			background: #fff;
			// width: 0px;
			padding: 5px;
		}

		.chatCss {
			// position: absolute;
			// margin: -10px 0 0 -10px;
		}
	}

	.cardAreaCss {
		position: relative;
		top: -50px;
		color: #000;
	}

	/deep/.tagCss .u-tag {
		// margin: 5px;
		height: 25px;
		padding: 0 10px !important;
	}

	/deep/.tagCss .u-tag__text {
		margin-top: 1px;
	}
</style>