<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="background-image" >
      <view class="back">
        <u-image width="100%" height="550" class="img" :src="staticImage.bodyShadow" mode="aspectFill"></u-image>
      </view>
      <view class="back">
        <u-image width="100%" height="550" class="img" :src="userInfo.background_image ? userInfo.background_image :  staticImage.bodyBackground" mode="aspectFill"></u-image>
      </view>
    </view>
		<view class="user-detail row">
			<view class="user-detail-avatar-container" @click="navTo('/pages/UserDetail/index',true)">
				<view class="">
<!--          <image :src="user.avatar" mode="aspectFill" class="img"/>-->
          <u-avatar :src="user.avatar" size="90"></u-avatar>
        </view>
				<view class="user-detail-avatar-border"></view>
			</view>
			<view class="user-detail-info" v-if="user.nickname">
				<view class="user-detail-title-container row">
          <u-image mode="widthFix" class="user-detail-img" width="83" height="36" :src="staticImage.hiImage"></u-image>
					<view class="user-detail-title">
						{{user.nickname}}
					</view>
					<view class="user-detail-coupons" :style="{
						backgroundImage:'url('+staticImage.couponsImage+')'
					}" @click="navTo('/pages/UserCoupons/index',true)">
						{{user.coupon_count}}
					</view>
					<view class="user-detail-id col-12">会员编号：{{user.id}}</view>
				</view>
			</view>
      <view  class="user-detail-title-container row col" v-else>
        <u-text text="登录" size="32" custom-style="margin-left:30rpx;" @click="navTo('/pages/Login/index')"></u-text>
      </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">
          <u-image height="40" class="img" :src="staticImage.informationTitle" mode="heightFix"></u-image>
				</view>
				<view class="user-button-group row">
					<view class="user-button col-4" @click="navTo('/pages/Pet/index?type=pet',true)">
            <view class="img-box">
              <u-image class="img" :src="staticImage.information.pet" mode="aspectFit" width="60" height="60"></u-image>
            </view>
						<view class="user-title">宝贝档案</view>
						<view class="user-desc">{{ userExtends.pet_count ?? 0 }}个萌宠</view>
					</view>
					<view class="user-button col-4" @click="navTo('/pages/Addr/index',true)">
            <view class="img-box">
              <u-image class="img" :src="staticImage.information.info" mode="aspectFit" width="60" height="60"></u-image>
            </view>
						<view class="user-title">信息档案</view>
						<view class="user-desc">{{ userExtends.address_count ?? 0 }}个地址</view>
					</view>
					<view class="user-button col-4" @click="navTo('/pages/Pet/index?type=feed',true)">
            <view class="img-box">
              <u-image class="img" :src="staticImage.information.feed" mode="aspectFit" width="60" height="60"></u-image>
            </view>
						<view class="user-title">喂养档案</view>
						<view class="user-desc">{{ userExtends.feed_count ?? 0 }}个档案</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">
          <u-image height="40" class="img" :src="staticImage.babyTitle" mode="heightFix"></u-image>
<!--					<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="navTo('/pages/UserOrderPage/index?type=&0is_buy=2',true)">
						<view class="img-box">
              <u-badge v-if="userExtends.order_pending>0" type="error" max="99" :value="userExtends.order_pending" absolute :offset="[0,0]" custom-style="z-index:1;"></u-badge>
              <u-image width="90" height="90" class="img"  :src="staticImage.baby.wait" mode="aspectFit"></u-image>
            </view>
            <view class="user-title">待服务</view>
					</view>
					<view class="user-button col-6" @click="navTo('/pages/UserOrderPage/index?type=&2is_buy=2',true)">
						<view>
              <view class="img-box">
                <u-badge v-if="userExtends.order_in>0" type="error" max="99" :value="userExtends.order_in" absolute :offset="[0,0]" custom-style="z-index:1;"></u-badge>
                <u-image width="90" height="90" class="img" :src="staticImage.baby.end" mode="aspectFit"></u-image>
              </view>
              <view class="user-title">已完成</view>
            </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">
          <u-image height="40" class="img" :src="staticImage.bigTitle" mode="heightFix"></u-image>
				</view>
				<view class="user-button-group row">
					<view class="user-button col-6" @click="navTo('/pages/UserOrderPage/index?type=&0is_buy=1',true)">
            <view class="img-box">
              <u-badge v-if="userExtends.hm_order_pending>0" type="error" max="99" :value="userExtends.hm_order_pending" absolute :offset="[0,0]" custom-style="z-index:1;"></u-badge>
              <u-image width="90" height="90"  class="img" :src="staticImage.big.wait" mode="aspectFit"></u-image>
            </view>

						<view class="user-title">待服务</view>
					</view>
					<view class="user-button col-6" @click="navTo('/pages/UserOrderPage/index?type=&2is_buy=1',true)">
            <view class="img-box">
              <u-badge v-if="userExtends.hm_order_in>0" type="error" max="99" :value="userExtends.hm_order_in" absolute :offset="[0,0]" custom-style="z-index:1;"></u-badge>
              <u-image width="90" height="90"  class="img" :src="staticImage.big.end" mode="aspectFit"></u-image>
            </view>

						<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">
          <u-image height="40" class="img" :src="staticImage.moreTitle" mode="heightFix"></u-image>
				</view>
				<view class="user-button-group row">
					<view class="user-button col-3">
            <view class="img-box">
              <u-image width="48" height="48"  class="img" :src="staticImage.more.online" @click="navTo('/pages/ChatDetail/index?id=0',true)" mode="aspectFit"></u-image>
            </view>
						<view class="user-title">在线沟通</view>
					</view>
					<view class="user-button col-3" @click="openPrivacyContract" >
            <view class="img-box">
              <u-image width="48" height="48"  class="img" :src="staticImage.more.privacy" mode="aspectFit"></u-image>
            </view>
						<view class="user-title">隐私协议</view>
					</view>
					<view class="user-button col-3" @click="navTo('/pages/Feed/index',true)">
            <view class="img-box">
              <u-image width="48" height="48"  class="img" :src="staticImage.more.feedback" mode="aspectFit"></u-image>
            </view>
						<view class="user-title">意见反馈</view>
					</view>
					<view class="user-button col-3" @click="navTo('/pages/AboutUs/AboutUs')">
            <view class="img-box">
              <u-image width="48" height="48"  class="img" :src="staticImage.more.about"  mode="aspectFit"></u-image>
            </view>
						<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-button-group row" style="justify-content: flex-start;">
					<view class="user-button col-3">
						<view class="img-box">
              <u-image width="48" height="48" class="img" :src="staticImage.more.feedback" @click="navTo('/pages/Draw/list')" mode="aspectFit"></u-image>
            </view>
						<view class="user-title">我的奖品</view>
					</view>
					<view class="user-button col-3">
						<view class="img-box">
              <u-image width="48" height="48" class="img" :src="staticImage.more.about" @click="navTo('/pages/Help/list')" mode="aspectFit"></u-image>
            </view>
						<view class="user-title">进入帮填</view>
					</view>
					<view class="user-button col-3">
						<view class="img-box">
              <u-image width="48" height="48" class="img" :src="staticImage.more.about" @click="clearWorkerUser" mode="aspectFit"></u-image>
            </view>
						<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+'/index-user-title-hi.png',
					couponsImage:imghost+'/user-coupons.png',
					bodyBackground:imghost+'/user-background.png',
					bodyShadow:imghost+'/user-detail-background.png',
					informationTitle:imghost+'/user-information-title.png',
					babyTitle:imghost+'/user-baby-title.png',
					bigTitle:imghost+'/user-big-title.png',
					moreTitle:imghost+'/user-more-title.png',
					gun1:imghost+'/user-gun-1.png',
					gun2:imghost+'/user-gun-2.png',
					information:{
						pet:imghost+'/user-information-pet.png',
						info:imghost+'/user-information-info.png',
						feed:imghost+'/user-information-feed.png',
					},
					baby:{
						wait:imghost+'/user-baby-wait.png',
						end:imghost+'/user-baby-end.png',
						shopCar:imghost+'/user-shop-car.png',
					},
					big:{
						wait:imghost+'/user-big-wait.png',
						end:imghost+'/user-big-end.png',
					},
					more:{
						online:imghost+'/user-more-online.png',
						privacy:imghost+'/user-more-privacy.png',
						feedback:imghost+'/user-more-feedback.png',
						about:imghost+'/user-more-about.png',
					}
				},
				user:{
					avatar:'',
					nickname:'',
					coupon_count:0,
					id:0,
          feed_count:0
				},
				isTop:false,
				pagePadding:100,
        userInfo:{},
        userExtends:{},
			}
		},
		methods: {
      clearWorkerUser(){
        uni.removeStorageSync('workerUser');
        uni.showToast({title:'退出成功'});
      },
      openPrivacyContract() {
        uni.openPrivacyContract({});
      },
      navTo(url,token = false) {
        if (token) {
          if (uni.getStorageSync('token')) {
            uni.navigateTo({
              url: url
            })
          } else {
            uni.navigateTo({
              url: '/pages/Login/index'
            })
          }
        }else{
          uni.navigateTo({
            url: url
          })
        }
      },
			showNumber(){
				userExtends().then(data => {
					log(data);
					this.userExtends = data.data;
          this.$store.commit('userExtends',UserCache.extSetAndReturn(data.data));
				});
			},
      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() {
			if(uni.getStorageSync('token')){
        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>