<template>
<div class="container comp-HomePage jfBaseSize" v-cloak v-bind:style="vh?'height:100vh':'height: 100vh;'"> 
    <div class="HomeTopBg" id="HomeTopBg" :style="{'background-color':comp.props.bgColorNew.val,'background-repeat': 'no-repeat','background-size':'100% 100%'}">
      <div class="member-info">
           <div><img v-bind:src="Photo"/></div>
        <span href="javascript:;" class="to-login">{{NickName}}</span>
      </div>
    </div>
    <div class="member-center">
        <div class="member-chunk">
            <div class="clearfix">
                <span>可用积分<span class="danger-integral">{{UserInfoList.TotalPoint-UserInfoList.ExchangePoint}}</span>分</span>
                <!-- <span><a href="javascript:;" style="background: #F1A887;color: #FFF;text-align: center;border-radius:0.6rem;border: none; width:5rem;">积分攻略</a></span> -->
                <span @click="goPage('21')">积分攻略</span>
            </div>
        </div>
        <div class="member-chunk">
            <div class="changerecord" @click="goPage('22')">
                <p>兑换记录</p>
            </div>
            <div class="integraldetail" @click="goPage('23')">
                <p>积分详情</p>
            </div>
        </div>
        <div class="member-chunk">
            <div class="addressmanage" @click="goPage('24')">
                <p>地址管理</p>
            </div>
            <div class="userset" @click="goPage('26')">
                <p>用户设置</p>
            </div>
        </div>
    </div>
    <div class="footercom">
    <footer class="f-box fixed-Width">
        <a class="index" href="javascript:void(0);" @click="goPage('9')"><span>首页</span></a>
        <a class="classify" href="javascript:;" @click="goPage('13')"><span>分类</span></a>
        <a class="mine current" href="javascript:void(0);" @click="goPage('20')"><span>我的</span></a>
    </footer>
    </div>
</div>
</template>

<script>
import { Toast } from 'mint-ui';
import JfapiHelper from "../assets/js/JfapiHelper.js";
import { base64 } from "../assets/js/cryptoHelper";
import { debug } from 'util';
import '../assets/js/libs/js.cookie';
import { Indicator } from 'mint-ui';
export default {
  name: 'JfCompHomePage',
  props: ["comp", "cfg", "selectedPage"],
  data() {
    var loginUserInfo = null;
    var tempLoginInfo = localStorage.getItem("loginInfo");
    if ($.trim(tempLoginInfo) != "") {
      loginUserInfo = eval("(" + tempLoginInfo + ")");
      //loginUserInfo.RemainingPoint=1000;
    }
    var nickname="";var headimgurl="";var openid="";var location="";
    var wxUserInfo=this.sup8.context.wxUser;
    if(wxUserInfo)
    {
      nickname=wxUserInfo.nickname;
      headimgurl=wxUserInfo.headimgurl;
    }
    else
    {
      nickname=loginUserInfo.PetName;
      headimgurl=loginUserInfo.UserLogo;
    }
    return {
      UserInfoList:loginUserInfo,
      Photo:headimgurl,
      NickName:loginUserInfo.PetName,
      vh:false
    }
  },
  methods: { 
    goPage(pagetype){
       sessionStorage.removeItem("JfCompClassID");
        this.$parent.changeSelectedPage(pagetype);
    },
    updateDom() {
        var that = this;
        //alert(this.comp.props.bgImg.val);
        // 将当前设置的背景图片加到body标签下
        $("#HomeTopBg").css({
          "background-repeat": "no-repeat",
          "background-color": this.comp.props.bgColorNew.val,
          "background-size": "100% 100%",
          "background-image":`url(${this.comp.props.bgImg.val})`
        });
    }
  },
  watch: {
    "comp.props.bgImg.val": function() {
      this.updateDom();
    },
    "comp.props.bgColorNew.val": function() {
      this.updateDom();
    }
  },
  created(){
      var that=this;
      JfapiHelper.CheckLogin(this.$parent, that.sup8.context.enterpriseno)
      if(JfapiHelper.GetUserLoginInfo()==null)
      {
        this.$parent.changeSelectedPage("10");
      }
  },
  mounted: function () {
    try{
     this.updateDom();
    }catch(e){
      console.log("bgcolor:"+e);
    }
       /**样式兼容设计器 **/
    if(location.pathname.indexOf("/design")!=-1)
    {
        $(".footercom").css({"position":"absolute","height":"100%","width":"100%","bottom":"0"});
        $(".f-box").css({"position":"absolute","width":"100%"});
    }

      var that=this;
      var isDesign = location.pathname.indexOf('/design');
      if (!(isDesign>-1)) {
          that.$set(that,'vh',true);
      }else{
          that.$set(that,'vh',false);
      }
      setTimeout(()=>{
        let offsetHeight = document.body.offsetHeight;
        let scrollHeight = document.body.scrollHeight;
        this.height = scrollHeight>offsetHeight?scrollHeight+"px":offsetHeight+"px";
      },1000);
  }
}
</script>
<style scoped>
.text-gray{color:#b3b3b3;}
a{text-decoration:none;color: #b3b3b3;}
a:hover, a:visited, a:link, a:active {color: #b3b3b3;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{overflow:hidden;_zoom:1;}
.comp-HomePage{background-color: #e6e6e9; height:100vh;}
.HomeTopBg{animation: 20s infinite;background-size: cover;text-align: center;width: 100%;height: 11rem;position: relative;z-index: 1;}
.member-info img {background-color: rgba(0,0,0,0.5);background-repeat: no-repeat;background-position: 50% 50%;background-size: 60%;margin: 0 auto;border-radius: 100%;width: 4rem;height: 4rem;border:none;}
.member-info {width: 12rem;height: 6rem;margin: -2.5rem 0 0 -6rem;position: absolute;z-index: 1;top: 50%;left: 50%;animation: memberInfoDown 1000ms ease-in;-webkit-animation: memberInfoDown 1000ms ease-in; }
.member-info .to-login {color: #FFF;line-height: 1rem;height: 1rem;margin: 0.25rem auto;font-weight: 600;}
.member-center{background: #fff;margin-bottom: 3rem;}
.member-center dl {background-color: #FFF;box-shadow: 0 1px 0 rgba(0,0,0,0.05);}
.mt5 {margin-top: 0.5rem !important;}
.member-center .member-chunk{border-top: 0.38rem solid #e6e6e9;}
.member-center .member-chunk div{border-bottom: 0.01rem solid #f5f5f5;padding: 0.4rem 3%;}
.member-center .member-chunk:not(:first-child) div{padding-right: 5%;background: url('http://image.supercarrier8.com/h5_shop/arrow_gray.png');background-repeat: no-repeat;background-position: 96% 54%;background-size: 0.6rem 1.2rem;}
.member-center .member-chunk div:nth-last-of-type(1){border:none;}
.member-center .member-chunk:not(:first-child) div p{padding-left: 1.8rem;background: url('http://image.supercarrier8.com/h5_shop/icon_exchangelist_black.png');background-repeat: no-repeat;background-position: 0rem 50%;background-size: 1.1rem 1.1rem;}
.member-center .member-chunk:not(:first-child) div.integraldetail p{background-image: url('http://image.supercarrier8.com/h5_shop/icon_integraldetails_black.png')}
.member-center .member-chunk:not(:first-child) div.addressmanage p{background-image: url('http://image.supercarrier8.com/h5_shop/icon_GPS_black.png')}
.member-center .member-chunk:not(:first-child) div.userset p{background-image: url('http://image.supercarrier8.com/h5_shop/icon_lock_black.png')}
.member-center .member-chunk h3,.member-center .member-chunk h5{margin: 0;}
.member-center .member-chunk div >span:nth-of-type(1){float: left;}
.member-center .member-chunk div >span:nth-last-of-type(1){float: right;border-radius: 0.8rem;background-color: #eb7741;color: #fff;padding: 0.04rem 0.4rem;margin-top:0.3rem;  }

.danger-integral{color:#c03546;font-weight: 700;margin:0 0.4rem;font-size: 1.4rem;}
.f-box {display:flex;z-index: 801;left: 0;color:#bcbcbc;right: 0;bottom:0rem;background-color: #fff;border-top: 1px solid #d9d9d9; position:fixed;}
.f-box a.current {color:#000;}
.f-box a {flex:1;font-size:1rem;display: inline-block;width: 31%;color: #bcbcbc;;position: relative;height: 3rem;line-height:3rem;text-align: center;}
.f-box a span{background-repeat:no-repeat;padding-left: 1.4rem;height: 100%;display: inline-block;background-size:1.2rem 1.2rem;background-position-y:50%;}
.f-box a.index span{background-image: url(http://image.supercarrier8.com/h5_shop/icon_homepage_black.png);}
.f-box a.classify span{background-image: url(http://image.supercarrier8.com/h5_shop/icon_classify_gray.png);}
.f-box a.mine span{background-image: url(http://image.supercarrier8.com/h5_shop/icon_my_gray.png);}
</style>
