<template>
    <view class="waper">
        <view class="banner">
			<image class="bgImg" src="../../static/image/mine/myBgimg.png" mode=""></image>
            <view class="info" v-if="userInfo">
                <view class="img">
                    <image :src="userInfo.avatar" mode=""></image>
                </view>
                <view class="text" v-if="userInfo.token">
                    <view>{{userInfo.nickname}}</view>
                    <view @click="toUrl({ url: '/pages/my/myProfile' })">查看并编辑个人资料</view>
                </view>
                <view class="text" v-else @click="login">
                    <view>请登录</view>
                </view>
            </view>
        </view>
		<view class="menu-box">
			<!-- <image class="bgImg" src="../../static/image/mine/mineList.png" mode=""></image> -->
			<view class="con-box">
				<view class="waper_box">
					<view class="waper_list" v-for="(i, index) in menuList" :key="index" v-if="!i.check || (configData && configData.examine == 'false')">
						<view class="title">
							<view>{{i.title}}</view>
						</view>
						<view class="cont">
							<view class="list" v-for="(item, itemIndex) in i.list" :key="itemIndex" @click="toUrl(item)">
								<view class="img">
									<image :src="item.icon" mode=""></image>
								</view>
								<view class="text">{{item.name}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="btn" v-if="userInfo && userInfo.token">
					<view @click="logOut">退出登录</view>
				</view>
			</view>
		</view>
        <uni-popup class="popupRefund" ref="popup" background-color="#fff">
        	<view class="popup-content">
        		<image class="bgImg" src="https://common/refundPopup.png" mode=""></image>
        		<view class="con">
        			<view class="title">温馨提示</view>
        			<view class="text">确定退出登录吗？</view>
        			<view class="btn-box">
        				<view class="close" @click="dialogClose">取消</view>
        				<view class="save" @click="dialogConfirm">确认</view>
        			</view>
        		</view>
            </view>
        </uni-popup>
        <tabbar name="mine"></tabbar>
    </view>
</template>

<script>
import tabbar from '@/components/tabbar/index.vue'
export default {
    components: { tabbar },
    data () {
        return {
            userInfo: null,
            configData: null,
            menuList: [
                {
                    title: '票务订单',
                    check: false,
                    list: [
                        { name: '门票订单', icon: '../../static/image/mine/mpdd.png', url: '/pages/my/myOrder?index=' },
                        { name: '商城订单', icon: '../../static/image/mine/scdd.png', url: '/pages/shop/order?index=0' },
                        { name: '酒店订单', icon: '../../static/image/mine/jddd.png', url: '/pages/hotelOrder/list?index=1' },
                    ]
                },
                {
                    title: '更多服务',
                    check: false,
                    list: [
                        { name: '游客信息', icon: '../../static/image/mine/ykxx.png', url: '/pages/my/tourist' },
                        { name: '我的收藏', icon: '../../static/image/mine/wdsc.png', url: '/pages/my/heart' },
                        { name: '投诉建议', icon: '../../static/image/mine/tsjy.png', url: '/pages/my/complaint' },
                        { name: '旅游年卡', icon: '../../static/image/mine/lynk.png', url: '/pages/my/annualCard' },
                        { name: '一卡通', icon: '../../static/image/mine/ykt.png', url: '/pages/my/IPass' },
                        { name: '联系客服', icon: '../../static/image/mine/lxkf.png', type: 'service' },
                        { name: '投诉电话', icon: '../../static/image/mine/tsdh.png', type: 'complaint' },
                        { name: '购物车', icon: '../../static/image/mine/gwc.png', url: '/pages/shop/cart' },
                        { name: '收货地址', icon: '../../static/image/mine/shdz.png', url: '/pages/shop/addressList' }
                    ]
                }
            ]
        }
    },
    onLoad () {
        this.configData = uni.getStorageSync('configData');
    },
    onShow () {
        this.getUesr();
    },
    methods: {
        dialogConfirm() {
        	uni.removeStorageSync("ztc_token");
        	uni.removeStorageSync("user_nickname");
        	uni.removeStorageSync("user_avatar");
        	this.getUesr()
            uni.showToast({ mask: true, title: '退出登录成功', icon: 'success' })
            this.dialogClose()
        },
        dialogClose () {
            this.$refs.popup.close()
        },
        logOut () {
            this.$refs.popup.open()
        },
        getUesr () {
            this.userInfo = {
                nickname: uni.getStorageSync('user_nickname'),
                avatar: uni.getStorageSync('user_avatar') ? this.$utils.setImgUrl(uni.getStorageSync('user_avatar')) : require('../../static/image/common/user.png'),
                token: uni.getStorageSync('ztc_token')
            }
        },
        login() {
            uni.navigateTo({ url: '/pages/login/login' })
        },
        toUrl (info) {
            if (info.url) {
                if (!this.userInfo.token) {
                    uni.showToast({ title: '请登录后操作', icon: 'none', mask: true })
                    setTimeout(() => {
                        uni.navigateTo({
                            url: '/pages/login/login'
                        })
                    }, 1500)
                    return false;
                }
                uni.navigateTo({ url: info.url })
            } else {
				if (info.type === 'service') {
					uni.makePhoneCall({ phoneNumber: this.configData.phone }).catch((e) => {});
				} else if (info.type === 'complaint') {
					uni.makePhoneCall({ phoneNumber: this.configData.complaintPhone }).catch((e) => {});
				}
            }
        }
    }
}
</script>

<style lang="scss">
.waper{
    width: 100%;
    .banner{
        width: 100%; height: 400rpx; position: relative;
		.bgImg {
			width: 100%; height: 400rpx;
		}
        .info{
            width: 100%; height: 148rpx; position: absolute; left: 0; bottom: 56rpx; box-sizing: border-box; padding: 0 32rpx; padding-left: 216rpx;
            .img{
                width: 148rpx; height: 148rpx; position: absolute; left: 32rpx; top: 0;
                image{ border-radius: 50%; }
            }
            .text{
                width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center;
                view{
                    &:nth-child(1){ line-height: 56rpx; color: #333; font-size: 40rpx; font-weight: 500; }
                    &:nth-child(2){ margin-top: 10rpx; line-height: 34rpx; font-size: 24rpx; color: #666; }
                }
            }
        }
    }
	.card {
		position: relative;
		margin: -20rpx 32rpx 0;
		width: 686rpx;
		height: 212rpx;
		.bgImg {
			width: 100%;
			height: 100%;
		}
		.title {
			position: absolute;
			top: 24rpx;
			left: 40rpx;
			.name {
				font-weight: bold;
				font-size: 42rpx;
				color: #FFFFFF;
			}
			.day {
				margin-top: 12rpx;
				font-size: 24rpx;
				color: rgba(255,255,255,0.7);
			}
		}
		.icon {
			position: absolute;
			width: 124rpx;
			height: 124rpx;
			top: -1rpx;
			right: -1rpx;
		}
	}
	.menu-box {
		position: relative;
		// margin-top: -78rpx;
		.bgImg {
			width: 750rpx;
			height: 1088rpx;
		}
		.con-box {
			padding-bottom: 40rpx;
			// top: 52rpx;
			width: 100%;
			.waper_box{
				width: 100%; box-sizing: border-box; padding: 0 32rpx;
				// position: relative; margin-top: -20rpx;
				.waper_list{
					width: 100%; background: #fff; border-radius: 10rpx; box-sizing: border-box; padding: 24rpx 0; margin-bottom: 20rpx;
					.title{
						box-sizing: border-box; padding-left: 24rpx;
						view{ line-height: 50rpx; color: #333; font-size: 32rpx; font-weight: 500; position: relative; z-index: 3; }
					}
					.cont{
						width: 100%; display: flex; flex-wrap: wrap;
						.list{
							width: 25%; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 36rpx;
							.img{ width: 64rpx; height: 64rpx; }
							.text{ margin-top: 8rpx; color: #333; font-size: 24rpx; }
						}
					}
                    &:last-child{ margin-bottom: 0; }
                    &:first-child{
                    	.cont {
                            width: 100%; box-sizing: border-box; padding: 0 54rpx;
                    		.list {
                                width: 120rpx; margin-right: 108rpx;
                                &:last-child{ margin-right: 0; }
                    			.img {
                    				width: 80rpx !important;
                    				height: 80rpx !important;
                    			}
								.text{
									font-size: 26rpx;
								}
                    		}
                    	}
                    }
				}
			}
			.btn{
				width: 100%; margin-top: 80rpx; box-sizing: border-box; padding: 0 60rpx;
				view{ height: 90rpx; background: #03AE80; border-radius: 100rpx; line-height: 90rpx; text-align: center; font-weight: 500; font-size: 32rpx; color: #F6F9FF; }
			}
		}
	}
}
</style>