<template>
  <view class="app-wallpaper" :style="{
		backgroundImage:'url('+staticImage.wallpaperBgImage+')'
		}">
    <view class="index-banner" :style="{backgroundImage:'url('+staticImage.bannerBack+')'}">
      <view class="index-banner-container" >
        <view class="" style="border:4rpx solid #3F3F3F;border-radius: 25rpx;overflow: hidden;">
          <u-swiper height="600" :list="indexBanner"></u-swiper>
        </view>
<!--        <image class="img" v-for="(item, index) in indexBanner" mode="widthFix"  wx:key="index" :src="item.image" alt=""/>-->
      </view>
    </view>
    <view class="index-user-detail" :style="{backgroundImage:'url('+staticImage.indexUserBack+')'}" v-if="(userInfo.name)">
      <view class="user-detail-container row">
        <view class="user-avatar" @click="navTo('/pages/UserDetail/index',true)">
          <u-avatar mode="widthFix" class="img" :src="user.avatar" size="75"></u-avatar>
        </view>
        <view class="user-content">
          <view class="user-title-top row">
            <u-image class="img" height="35" width="83" mode="heightFix"
                      :src="staticImage.hiImage"></u-image>
            <view class="user-title-text" style="display: block;">
<!--              <view class="" style="color:#131313;font-size: 30rpx;max-width:200rpx;white-space:nowrap;overflow:hidden;text-overflow: ellipsis;">-->
<!--                {{userInfo.name}}-->
<!--              </view>-->
              <u-text :text="userInfo.name" lines="1" color="#131313" size="30rpx" custom-style="max-width:200rpx;max-height:30rpx;"></u-text>
            </view>
          </view>
          <view class="user-title-bottom">
            <image class="img" mode="aspectFit"
                   :src="staticImage.dogImage" alt=""/>
            <text class="user-title-idcard">
              会员编号：{{ userInfo.id }}
            </text>
          </view>
        </view>
        <view class="user-coupons" :style="{backgroundImage:'url('+staticImage.couponsImage+')'}">
          <view class="user-coupons-number" @click="navTo('/pages/UserCoupons/index',true)">
            <view class="user-coupons-number-container">
              {{ userExtends.coupon_count }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="index-button-group row">
      <view class="index-button-detail col-6" v-for="(item, index) in staticImage.indexButtonGroup"  wx:key="index">
        <view class="index-button-detail-container row" style="position: relative;" :style="{
					backgroundImage:'url('+item.backgroundImage+')'
				}" @click="navTo(item.url,true)">
          <view class="img-gun" v-if="index===0||index===2" style="position:absolute;right:-50rpx;;z-index:1;" :style="{transform:(index===2)?'scaleX(-1)':'scaleX(1)',top:(index===2)?'75%':'10%'}">
            <u-image width="120" height="30" mode="widthFix" class="img"
                     :src="staticImage.indexGun"></u-image>
          </view>
          <view class="col-12">
            <u-image width="180" mode="widthFix" class="img" custom-style="flex-direction: column-reverse;justify-content:center;"
                     :src="item.serviceImage"></u-image>
          </view>
          <view class="col-12">
            <u-image width="180" height="55" mode="widthFix" class="img"
                     :src="item.buttonImage"></u-image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  imghost
} from '@/config/host.js'
import api from '@/utils/functions.js';
import log from "@/utils/log";
import {userDetail, userExtends} from "@/api/user";
import {getConfig} from "@/api/other";
import {UserCache} from "@/config/config";

export default {
  data: {
    title: 'Hello',
    loading: true,
    staticImage: {
      bannerBack:imghost + '/banner-backgrond.png',
      indexUserBack:imghost + '/index-user-banner-background.png',
      hiImage: imghost + '/index-user-title-hi.png',
      dogImage: imghost + '/index-user-title-dog.png',
      couponsImage: imghost + '/index-user-coupons-background.png',
      indexGun: imghost + '/index-gun.png',
      indexButtonGroup: [
        {
          backgroundImage: imghost + '/index-button-one.png',
          serviceImage: imghost + '/index-button-bg-one.png',
          buttonImage: imghost + '/index-button-bg-btn-one.png',
          url: '/pages/OrderPage/index?type=1'
        },  {
          backgroundImage: imghost + '/index-button-five.png',
          serviceImage: imghost + '/index-button-bg-five.png',
          buttonImage: imghost + '/index-button-bg-btn-five.png',
          url: '/pages/OrderPage/index?type=2'
        },{
          backgroundImage: imghost + '/index-button-two.png',
          serviceImage: imghost + '/index-button-bg-two.png',
          buttonImage: imghost + '/index-button-bg-btn-two.png',
          url: '/pages/Card/index'
        }, {
          backgroundImage: imghost + '/index-button-three.png',
          serviceImage: imghost + '/index-button-bg-three.png',
          buttonImage: imghost + '/index-button-bg-btn-three.png',
          url: '/pages/Coupons/index'
        },
      ],
      wallpaperBgImage: imghost + '/background.png'
    },
    indexBanner: [],
    user: {},
    isTop: false,
    pagePadding: 100,
    userInfo: {},
    userExtends: {},
  },
  onLoad() {

  },
  methods: {
    getHomeConfig(){
      getConfig('banner').then(res => {
        this.indexBanner = res.data.banner;
      })
    },
    userCouponsPage() {
      uni.navigateTo({
        url: '/pages/UserCoupons/index'
      })
    },
    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
        })
      }
    },
    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
      }
    }
  },
  onPageScroll(res) {
    if (res.scrollTop <= 20) {
      uni.$emit('isTop', true);
    } else {
      uni.$emit('isTop', false);
    }

  },
  created() {
    this.pagePadding = (api.navHeight().navPaddingTop +
        api.navHeight().navHeight + (api.navHeight().headerPadding * 2))
  },
  mounted() {
    console.log('userInfo',this.$store.state.userInfo)
    this.userInfo = this.$store.state.userInfo;
    this.userExtends = this.$store.state.userExtends;
    this.getHomeConfig();
  },
  updated() {

  },
  watch: {
    "$store.state.userInfo": {
      handler(newVal, oldVal) {
        this.userInfo = newVal;
        console.log('vuexUserInfo',this.userInfo);
        this.user.id = newVal.id
        this.user.nickname = newVal.name
        this.user.avatar = newVal.avatar

      }
    },
    "$store.state.userExtends": {
      handler(newVal, oldVal) {
        this.userExtends = newVal;
        // this.updateUserInfo();
        this.user.coupon_count = newVal.coupon_count
      }
    }
  }
}
</script>

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