<template>
	<view class="user-background"  :style="{
		backgroundImage:'url('+(userInfo.background_image ? userInfo.background_image :  staticImage.bodyBackground)+')'
		}">
		
	</view>
	<view class="user-shadow"  :style="{
		backgroundImage:'url('+staticImage.bodyShadow+')'
		}">
		
	</view>
	<view class="app-wallpaper" :style="{
		backgroundImage:'url('+staticImage.wallpaperBgImage+')'
		}">
		<view class="user-detail row">
			<view class="user-detail-avatar-container" @click="userDetail">
				<image :src="user.avatar" mode="aspectFill" class="img"/>
				<view class="user-detail-avatar-border"></view>
			</view>
			<view class="user-detail-info">
				<view class="user-detail-title-container row">
					<image mode="widthFix" class="user-detail-img" :src="staticImage.hiImage"/>
					<view class="user-detail-title">
						{{user.nickname}}
					</view>
					<view class="user-detail-coupons" :style="{
						backgroundImage:'url('+staticImage.couponsImage+')'
					}" @click="userCouponsPage()">
						{{user.coupon_count}}
					</view>
					<view class="user-detail-id col-12">会员编号：{{user.id}}</view>
				</view>
			</view>
		</view>
		<view class="user-information .user-button-group-container">
			<view class="user-button-content">
				<image class="img gun1" :src="staticImage.gun1" mode="heightFix"/>
				<view class="user-title-img">
					<image class="img" :src="staticImage.informationTitle" mode="heightFix"/>
				</view>
				<view class="user-button-group row">
					<view class="user-button col-4" @click="navTo('/pages/Pet/index')">
						<image class="img" :src="staticImage.information.pet" mode="aspectFit"/>
						<view class="user-title">宝贝档案</view>
						<view class="user-desc">{{ userExtends.pet_count }}个萌宠</view>
					</view>
					<view class="user-button col-4" @click="navTo('/pages/Addr/index')">
						<image class="img" :src="staticImage.information.info" mode="aspectFit"/>
						<view class="user-title">信息档案</view>
						<view class="user-desc">{{ userExtends.address_count }}个地址</view>
					</view>
					<view class="user-button col-4">
						<image class="img" :src="staticImage.information.feed" mode="aspectFit"/>
						<view class="user-title">喂养档案</view>
						<view class="user-desc">{{ userExtends.feed_count }}个档案</view>
					</view>
				</view>
			</view>
			<view class="user-button-group-background">
				<view class="user-button-group-container-background-color"></view>
				<view class="user-button-group-container-background-border"></view>
			</view>
			
		</view>
		<view class="user-baby-log .user-button-group-container">
			<view class="user-button-content">
				<image class="img gun2" :src="staticImage.gun2" mode="heightFix"/>
				<view class="user-title-img row">
					<image class="img" :src="staticImage.babyTitle" mode="heightFix"/>
					<view class="shop-car-container">
						<image class="img shop-car" :src="staticImage.baby.shopCar" mode="heightFix"/>
						<view class="shop-car-number">{{ userExtends.order_count }}</view>
					</view>
				</view>
				<view class="user-button-group row">
					<view class="user-button col-6" @click="orderPage(0, 1)">
						<image class="img" :src="staticImage.baby.wait" mode="aspectFit"/>
						<view class="user-title">待服务</view>
					</view>
					<view class="user-button col-6" @click="orderPage(2, 1)">
						<image class="img" :src="staticImage.baby.end" mode="aspectFit"/>
						<view class="user-title">已完成</view>
					</view>
				</view>
			</view>
			<view class="user-button-group-background">
				<view class="user-button-group-container-background-color"></view>
				<view class="user-button-group-container-background-border"></view>
			</view>
		</view>
		<view class="user-big-service .user-button-group-container">
			<view class="user-button-content">
				<image class="img gun2" :src="staticImage.gun2" mode="heightFix"/>
				<view class="user-title-img">
					<image class="img" :src="staticImage.bigTitle" mode="heightFix"/>
				</view>
				<view class="user-button-group row">
					<view class="user-button col-6" @click="orderPage(0, 2)">
						<image class="img" :src="staticImage.big.wait" mode="aspectFit"/>
						<view class="user-title">待服务</view>
					</view>
					<view class="user-button col-6" @click="orderPage(2, 2)">
						<image class="img" :src="staticImage.big.end" mode="aspectFit"/>
						<view class="user-title">已完成</view>
					</view>
				</view>
			</view>
			<view class="user-button-group-background">
				<view class="user-button-group-container-background-color"></view>
				<view class="user-button-group-container-background-border"></view>
			</view>
		</view>
		<view class="user-more .user-button-group-container">
			<view class="user-button-content">
				<image class="img gun2" :src="staticImage.gun2" mode="heightFix"/>
				<view class="user-title-img">
					<image class="img" :src="staticImage.moreTitle" mode="heightFix"/>
				</view>
				<view class="user-button-group row">
					<view class="user-button col-3">
						<image class="img" :src="staticImage.more.online" mode="aspectFit"/>
						<view class="user-title">在线沟通</view>
					</view>
					<view class="user-button col-3" @click="navTo('/pages/PrivacyPolicy/PrivacyPolicy')" >
						<image class="img" :src="staticImage.more.privacy" mode="aspectFit"/>
						<view class="user-title">隐私协议</view>
					</view>
					<view class="user-button col-3">
						<image class="img" :src="staticImage.more.feedback" mode="aspectFit"/>
						<view class="user-title">意见反馈</view>
					</view>
					<view class="user-button col-3" @click="navTo('/pages/AboutUs/AboutUs')">
						<image class="img" :src="staticImage.more.about"  mode="aspectFit"/>
						<view class="user-title">关于我们</view>
					</view>
				</view>
			</view>
			<view class="user-button-group-background">
				<view class="user-button-group-container-background-color"></view>
				<view class="user-button-group-container-background-border"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		imghost
	} from '@/config/host.js'
	import HeaderNav from '@/components/HeaderNav/Index.vue';
	import FooterNav from '@/components/FooterNav/Index.vue';
	import RightNav from '@/components/RightNav/Index.vue';
	import api from '@/utils/functions.js';
  import {userDetail, userExtends} from "@/api/user";
	import log from "@/utils/log";
  import {UserCache} from "@/config/config";
	export default {
		components: {
			HeaderNav,
			FooterNav,
			RightNav
		},
		data() {
			return {
				title: 'Hello',
				loading: true,
				staticImage:{
					hiImage:imghost+'/static/image/index-user-title-hi.png',
					couponsImage:imghost+'/static/image/user-coupons.png',
					bodyBackground:imghost+'/static/image/user-background.png',
					bodyShadow:imghost+'/static/image/user-detail-background.png',
					informationTitle:imghost+'/static/image/user-information-title.png',
					babyTitle:imghost+'/static/image/user-baby-title.png',
					bigTitle:imghost+'/static/image/user-big-title.png',
					moreTitle:imghost+'/static/image/user-more-title.png',
					gun1:imghost+'/static/image/user-gun-1.png',
					gun2:imghost+'/static/image/user-gun-2.png',
					information:{
						pet:imghost+'/static/image/user-information-pet.png',
						info:imghost+'/static/image/user-information-info.png',
						feed:imghost+'/static/image/user-information-feed.png',
					},
					baby:{
						wait:imghost+'/static/image/user-baby-wait.png',
						end:imghost+'/static/image/user-baby-end.png',
						shopCar:imghost+'/static/image/user-shop-car.png',
					},
					big:{
						wait:imghost+'/static/image/user-big-wait.png',
						end:imghost+'/static/image/user-big-end.png',
					},
					more:{
						online:imghost+'/static/image/user-more-online.png',
						privacy:imghost+'/static/image/user-more-privacy.png',
						feedback:imghost+'/static/image/user-more-feedback.png',
						about:imghost+'/static/image/user-more-about.png',
					}
				},
				user:{
					avatar:'',
					nickname:'',
					coupon_count:0,
					id:0,
          feed_count:0
				},
				isTop:false,
				pagePadding:100,
        userInfo:{},
        userExtends:{},
			}
		},
		methods: {
			navTo(url){
				uni.navigateTo({
					url:url
				})
			},
			userDetail(){
				uni.navigateTo({
					url:'/pages/UserDetail/index'
				})
			},
			orderPage(type, is_buy){
				uni.navigateTo({
					url:`/pages/UserOrderPage/index?type=${type}&is_buy=${is_buy}`
				})
			},
			showNumber(){
				userExtends().then(data => {
					log(data);
					this.userExtends = data.data;
          this.$store.commit('userExtends',UserCache.extSetAndReturn(data.data));
				});
			},
			userCouponsPage(){
				uni.navigateTo({
					url:'/pages/UserCoupons/index'
				})
			},
      updateUserInfo(){
        if(this.userInfo){
          this.user.id = this.userInfo.id
          this.user.nickname = this.userInfo.name
          this.user.avatar = this.userInfo.avatar
					this.user.coupon_count = this.userExtends.coupon_count
        }
      },
      showUserInfo(){
        userDetail().then(res => {
          this.$store.commit('userInfo', UserCache.setAndReturn(res.data));
        })
      }
		},
		mounted() {
			this.showUserInfo();
			this.showNumber();
		},
		created() {
			this.pagePadding = (api.navHeight().navPaddingTop+
			api.navHeight().navHeight + (api.navHeight().headerPadding *2))
		},
    watch:{
      "$store.state.userInfo": {
        handler(newVal, oldVal) {
          this.userInfo = newVal;
          this.updateUserInfo();
        }
      },
      "$store.state.userExtends": {
        handler(newVal, oldVal) {
          this.userExtends = newVal;
          this.updateUserInfo();
        }
      }
    }
	}
</script>

<style lang="scss">
	@import './components/index.scss';
</style>