<template>
<div class="container comp-HomePage jfBaseSize" v-cloak v-bind:style="vh?'height:100vh':'height: 100vh;'"> 
   <div class="homeTop">
    <div class="HomeTopBg">
      <img :src="comp.props.bgImg.val" id="HomeTopImg"/>
    </div>
     <div class="headerInfo">
        <img class="headImg" v-bind:src="loginUserInfo.UserLogo?loginUserInfo.UserLogo:'http://image.supercarrier8.com/h5_key/icon_headDefault.png'" alt="头像" />
        <div class="userInfo">
          <div class="clearfix">
            <span class="userName" v-html="loginUserInfo.PetName"></span>
            <img class="userSetting" @click="goPage('C_UserSet')" src="http://image.supercarrier8.com/h5_key/icon-customersetting.png"/>
          </div>
          <span>积分：<span>{{loginUserInfo.JfTotal}}</span></span>
        </div>
      </div>
   </div>
    <div class="member-center">
       <div></div>
        <div class="member-chunk">
            <div v-for="item in comp.props.items.val" :key="item.id"   @click="goPage(item.LocationUrl)" v-show="CheckMenuIsShow(item.LocationUrl)">
                <p :style="ShowStyle(item.IconUrl)">{{item.MenuName}}</p> 
            </div>
        </div>
    </div>
    <div class="mask" v-show="isShow.isShowMask"></div>
    <div class="rewardPopu" v-show="isShow.isShowMask">
      <div class="rewardMain">
        <p class="rewardHeader">获得注册奖励</p>
        <div class="rewardContent">
          <div class="clearfix" v-if="rewardObj.GiftType==2||rewardObj.GiftType==4">
            <span v-html="rewardObj.AwardData"></span>
            <span v-html="rewardObj.GiftTypeVal"></span>
          </div>
          <div class="clearfix" v-else>
            <p v-html="rewardObj.AwardData"></p>
          </div>
          <i></i>
        </div>
        <p class="rewardGo"><span v-html="rewardObj.second"></span>秒后自动关闭</p>
        <p class="rewardGoGoGo"><span><span>立即关闭</span></span></p>
      </div>
      <div class="rewardFee">
        <div class="rewardClose" @click="rewardClose"></div>
      </div>
    </div>
</div>
</template>
<script>
import { Toast } from 'mint-ui';
import JfapiHelper from "@/assets/js/JfapiHelper.js";
import channelHelper from "@/assets/js/channelHelper.js";
import { base64 } from "@/assets/js/cryptoHelper";
import { debug } from 'util';
import wx from "weixin-js-sdk";
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");
    var TotalPoint=0;var ExchangePoint=0;
    if ($.trim(tempLoginInfo) != "") {
      loginUserInfo = eval("(" + tempLoginInfo + ")");
      //loginUserInfo.RemainingPoint=1000;
      if(loginUserInfo.TotalPoint){
        TotalPoint=loginUserInfo.TotalPoint;
      }
      if(loginUserInfo.ExchangePoint){
        ExchangePoint=loginUserInfo.ExchangePoint;
      }
    }
    var nickname="";var headimgurl="";var openid="";var location="";
    var wxUserInfo=this.sup8.context.wxUser;
    nickname=loginUserInfo.PetName;
    headimgurl=loginUserInfo.UserLogo;
    if(wxUserInfo)
    {
      if(loginUserInfo.PetName=="")
      {
        nickname=wxUserInfo.nickname;
      }
      if(loginUserInfo.UserLogo=="")
      {
        headimgurl=wxUserInfo.headimgurl;
      }
    }
   
    return {
      JfTotal:TotalPoint-ExchangePoint,
      UserInfoList:loginUserInfo,
      Photo:headimgurl,
      NickName:nickname,
      vh:false,
      isShow:{
        isShowPopup:true,
        isReward:true,
        IsShowActivityArea:false,
        IsShowCustomer:false
      },
      rewardObj:{
        GiftType:'',
        GiftTypeVal:'',
        AwardData:'',
        second:5,
      }
    }
  },
  computed:{
    loginUserInfo:function(){
        var loginUserInfo = {
          PetName:"",
          JfTotal:0,
          UserLogo:""
        };
        var  TotalPoint=0;var ExchangePoint=0;
        var tempLoginInfo = localStorage.getItem("loginInfo");
        if ($.trim(tempLoginInfo) != "") {
          loginUserInfo = eval("(" + tempLoginInfo + ")");
          if(loginUserInfo.TotalPoint){
            TotalPoint=loginUserInfo.TotalPoint;
          }
          if(loginUserInfo.ExchangePoint){
            ExchangePoint=loginUserInfo.ExchangePoint;
          }
        }
        loginUserInfo.JfTotal=TotalPoint-ExchangePoint;
        return loginUserInfo;
    }
  },
  methods: { 
    goPage(pagetype){
        var that=this;
        if(pagetype.indexOf("/")!=-1)
        {
           location.href=pagetype+that.sup8.context.enterpriseno;
        }
        else if(pagetype=="scan")
        {
          let that = this;
          wx.scanQRCode({
              needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
              scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
              success: function(res) {
                // if (res.flag) {
                  
                // }
                //   let result = _.trim(res.resultStr); // 当needResult 为 1 时，扫码返回的结果
                //   /**调用查询逻辑 */
                //   that.query(result);
              },
              fail: function(e) {
                  alert(JSON.stringify(e));
              }
          });
        }
        else
        {
          this.$parent.changeSelectedPage(pagetype);
        }
    },
    CheckMenuIsShow(localtionUrl){
      if(localtionUrl=="K_CList"){
        return this.isShow.IsShowCustomer;
      }else if(localtionUrl=="a_1"){
        return this.isShow.IsShowActivityArea;
      }
      return true;
    },
    ShowStyle(iconUrl){
        return "background:url("+iconUrl+") no-repeat;background-position:no-repeat;background-size:1.1rem 1.1rem";
    },
    updateDom() {
        var that = this;
        //alert(this.comp.props.bgImg.val);
        // 将当前设置的背景图片加到body标签下
        $("#HomeTopImg").css({
          "width": "100%",
          //"background-color": this.comp.props.bgColorNew.val,
          "src":`${this.comp.props.bgImg.val}`
        });
    },
    GetCustomerMenuCheck(){
      var that=this;
      var url = "/channel/GetCustomerSetting";
      var dataParams = {
          UserToken:channelHelper.GetUserToken(),
          EnterpriseNo: that.sup8.context.enterpriseno,
          LanguageType:channelHelper.GetLanguageType()
      };
      Indicator.open();
      var cbSuccess = function(res){
        if (res.flag) {
          var data=res.data;
          if(data.OpenObject)
          {
              if(data.OpenObject.indexOf("0")!=-1)
              {
                that.$set(that.isShow,'IsShowCustomer',true);
              }
          }
        }
        Indicator.close();
      };
      var cbError = function(jqXHR, textStatus, errorThrown){
          Indicator.close();
      };
      //请求后端
      channelHelper.CommonCallService(url,dataParams,cbSuccess,cbError,null,null);
    },
    GetActivityAreaCheck(){
      var that=this;
      var url = "/activity/GetH5AreaInfo";
      var dataParams = {
          UserToken:channelHelper.GetUserToken(),
          enterpriseno: that.sup8.context.enterpriseno,
          LanguageType:channelHelper.GetLanguageType()
      };
      Indicator.open();
      var cbSuccess = function(res){
        if (res.flag) {
          var data=res.data;
          if(data.OpenObject)
          {
              if(data.OpenObject.indexOf(that.sup8.context.entranceid)!=-1)
              {
                  that.$set(that.isShow,'IsShowActivityArea',true);
              }
          }
        }
        Indicator.close();
      };
      var cbError = function(jqXHR, textStatus, errorThrown){
        Indicator.close();
      };
      //请求后端
      channelHelper.CommonCallServiceAuto(url,dataParams,cbSuccess,null,null,null);
    },
    //是否奖励
    CheckRewardTip(type){
        var that=this;
        var url = "/integral/CheckRewardTip";
        var dataParams = {
            EnterpriseNo:that.loginUserInfo.EnterpriseNo,
            LanguageType:JfapiHelper.GetLanguageType(),
            UserToken:that.loginUserInfo.UserToken,
        };
        Indicator.open();
        var cbSuccess = function(res){
            if (res.flag) {
              var data=res.data;
              if(res.errorCode!="-1"){
                if(data){
                  if(data.GiftType==2){
                    data.GiftTypeVal='元';
                  }else if(data.GiftType==4){
                    data.GiftTypeVal='积分';
                  }else{
                    data.GiftTypeVal='';
                  }
                  data.second=5;
                  localStorage.setItem(""+that.UserInfoList.UserId,true);
                  that.setIntervalSecond();
                  that.$set(that,'rewardObj',data);
                  that.$set(that.isShow,'isShowMask',true);
                  that.$set(that.isShow,'isReward',true);
                }
                
              }
            }else
            { 
                //MintUI.Toast(res.msg);
            }
            Indicator.close();
        };
        var cbError = function(jqXHR, textStatus, errorThrown){
            Toast(jqXHR.responseText);
        };
        //请求后端
        channelHelper.CommonCallService(url,dataParams,cbSuccess,cbError,null,null);
    },
    rewardClose(){
      var that=this;
      that.$set(that.isShow,'isShowMask',false);
      that.$set(that.isShow,'isReward',false);
    },
    //读秒
    setIntervalSecond(){
      var that=this;
      if(that.rewardObj.second>0){
        setTimeout(() => {
          that.$set(that.rewardObj,'second',(that.rewardObj.second-1));
          that.setIntervalSecond();
        }, 1000);
      }else{
        that.rewardClose()
      }
    }
  },
  watch: {
    "comp.props.bgImg.val": function() {
      this.updateDom();
    }
  },
  created(){
      var that=this;
      var isDesign = location.pathname.indexOf('/design');
      //判断是否登录
      if (!JfapiHelper.CheckLoginNew(this.$parent,this.sup8.context.enterpriseno,this.sup8.context.entranceid)&&isDesign==-1) {
          this.$parent.changeSelectedPage('C_Reg')
          return false;
      }
      that.GetCustomerMenuCheck();
      that.GetActivityAreaCheck();
      if(that.UserInfoList&&that.UserInfoList.UserId){
        var rewardVal=localStorage.getItem(""+that.UserInfoList.UserId);
        if(!rewardVal){
          that.CheckRewardTip();
        }else{
          setTimeout(() => {
            localStorage.removeItem(""+that.UserInfoList.UserId)
          }, 180000);
        }
      }
  },
  mounted: function () {
    try{
      this.updateDom();

      /* 将消费者主页设置的按钮图标和按钮开关缓存起来 */
      localStorage.setItem("backbtnisshow",this.comp.props.IsShow.val);
      localStorage.setItem("backbtnicon",this.comp.props.iconimg.val);
    }catch(e){
      console.log("bgcolor:"+e);
    }
       /**样式兼容设计器 **/
    if(location.pathname.indexOf("/design")!=-1)
    {
        $(".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>
.jfBaseSize{position: relative;}
.homeTop{position: relative;padding-bottom:5rem;width:100%;overflow: hidden;}
.text-gray{color:#b3b3b3;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{overflow:hidden;_zoom:1;}
.comp-HomePage{background-color: #F3F6FF;}
.HomeTopBg img{animation: 20s infinite;background-size: cover;text-align: center;width: 100%;height: 8rem;position: relative;}
.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{margin-bottom: 3rem;background: #fff;}
.member-center dl {background-color: #FFF;box-shadow: 0 1px 0 rgba(0,0,0,0.05);}
.mt5 {margin-top: 0.5rem !important;}
.homeTop .headerInfo{position: absolute;height:4.5rem;top: 6.8rem; padding-top: 1.3rem;
background:#fff;width:86%;text-align: center;margin: 0 auto;left:2.5%;border-radius:2%;}
.headerInfo{display: flex;padding-top: 1rem;padding-left:6%;padding-right: 3%; }
.headerInfo .headImg{background-color: rgba(0,0,0,0.5);border-radius: 100%;width: 3.5rem;height: 3.5rem;border:none;margin-right: 0.8rem;}
.headerInfo .userInfo{flex:1;text-align: left;color:#fff;}
.headerInfo .userInfo div{margin-top:0.48rem;}
.headerInfo .userInfo .userName{color:#619BFC;font-weight: bold; font-size:1rem;display: block;float: left;max-width: 45%;overflow: hidden;}
.headerInfo .userInfo .userSetting{float:right;width:1.2rem;height:1.2rem;}
.headerInfo .userInfo >span{max-width:10rem;min-width:2rem;text-align: center;overflow: hidden;display: inline-block;border-radius: 0.64rem;color:#000;font-size: 0.8rem;}
.member-center .member-chunk div{ border-bottom: 0.2rem solid #F3F6FF;padding: 1rem 3%;}
.member-center .member-chunk div{padding-right: 5%;padding-left:2rem; background: url('http://image.supercarrier8.com/h5_key/icon-c-arrow.png');background-repeat: no-repeat;background-position: 96% 54%;background-size: 0.4rem 0.8rem;}
.member-center .member-chunk div:nth-last-of-type(1){border:none;}
.member-center .member-chunk div p{padding-left: 1.8rem;background-repeat: no-repeat;background-position: 0rem 50%;background-size: 1.1rem 1.1rem;}
.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);}

.mask {position: fixed;top: 0;left: 0;height: 100%;width: 100%;background: rgba(0, 0, 0, 0.5);}
/* .rewardPopu{position: fixed;text-align: center;top:50%;left:50%;margin-top:-10rem;min-height: 16rem;margin-left:-6rem;padding:0 0.6rem;} */
.rewardPopu{position: absolute;top: 50%;left: 50%;-webkit-transform: translate3d(-50%, -50%, 0);transform: translate3d(-50%, -50%, 0);-webkit-backface-visibility: hidden;backface-visibility: hidden;-webkit-transition: .2s ease-out;transition: .2s ease-out;}
.rewardMain{background: url(https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_key/icon-rewardPopup1.png) no-repeat center center;background-size: 100% 100%;color: #fff;padding:2rem 3rem;padding-top:4rem;text-align: center;}
.rewardMain .rewardHeader{margin:1rem 0;font-size: 0.9rem;margin-top: 2rem;}
.rewardMain .rewardContent{position:relative;border: 0.2rem solid #e70415;border-radius: 4rem;min-width:10rem;padding: 0.2rem 1rem;background-color: #c6100b;/*background: url(https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_key/icon-rewardVal.png) no-repeat center center;background-size: 100% 100%;*/}
.rewardMain .rewardContent i{position: absolute;right:-0.8rem;bottom:-1.5rem;display:block;width:3rem;height:3rem;background: url(https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_key/icon-rewardPopupMoney.png) no-repeat center center;background-size: 100% 100%;}
.rewardMain .rewardContent div{padding:0.2rem 0;}
.rewardMain .rewardContent div span:nth-of-type(1){font-size:3rem;max-width: 14rem;overflow: hidden;}
.rewardMain .rewardContent div p{font-size: 1rem;margin:0.3rem 0;text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;word-wrap:break-word;word-break:break-all;}
.rewardMain .rewardGo{margin-top: 1.6rem;font-size: 0.78rem;margin-bottom: 0.6rem;}
.rewardMain .rewardGoGoGo{line-height: 1;}
.rewardMain .rewardGoGoGo >span{background: url(https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_key/icon-arrowDouble.png) no-repeat left center;background-size: auto 60%;padding-left:0.9rem;}
.rewardMain .rewardGoGoGo >span span{border-bottom:1px solid #fff;}
.rewardFee{position: absolute;width:100%;height:100%;top:0;left:0;background: url(https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_key/icon-rewardPopup2.png) no-repeat center center;background-size: 100% 100%;}
.rewardFee .rewardClose{position: absolute;bottom: 2rem;height: 1.5rem;width: 6rem;left: 50%;margin-left: -3rem;}
</style>
