
<style scoped>  
.Capital {background-color:#fff;height:100%;height:100vh;}
.MyGift_List .MyGift_List_Left {
  flex: 0.8;
}

.MyGift_List .MyGift_List_Right {
  flex: 0.2;
  line-height: 3rem;color:#FC997B;
  text-align: right;
}
.MyGift_List .reduce{color:#6D6D6D;}
.MyGift_Title{height: 3.4rem;line-height: 3.4rem;}
.MyGift_Main .MyGift_Title_Left{float:left;color:#67A2FC;font-weight: bold;}
.MyGift_Main .MyGift_Date_Right{
    float: right;width: 7rem;cursor: pointer;
}

.MyGift_Main .MyGift_Title_Left span{margin-left: 0.8rem;padding-left: 1.3rem;background: url('http://image.supercarrier8.com/h5_key/icon-gift-blue.png');background-repeat: no-repeat;background-position: 0 50%;background-size: 1.1rem 1.1rem;padding-top:0.3rem;}
.MyGift_Main .MyGift_Date_Right .total{color:#F09D78;background: url(http://image.supercarrier8.com/h5_key/icon-arrow-gray.png) no-repeat right center;background-size: 0.3rem;padding-right: 0.4rem;}
/* .MyGift_Main .MyGift_Date_Right img{
  width: 0.3rem;
} */
.MyGift_List ul{list-style-type: none;margin: 0px;padding: 0;}
.MyGift_List li{width:100%;border-bottom: 0.01px solid #E6E6E6;margin-bottom: 0.5rem;margin-top:0.5rem;height:4rem;}
.MyGift_List li .MyGift_List_Left{float: left;width: 40%;font-size: 0.7rem; color: #4A4A4A;padding-left: 0.2rem;}
.MyGift_List li .MyGift_List_Right{margin-right: 1rem;}
.MyGift_List li .MyGift_List_Right span.justreceive{ font-size: 0.8rem;
  border: 0.1rem solid#418EFC;border-radius: 0.6rem;width: 4rem;box-shadow: 0 0 10px#bcbc;
color:#418EFC;height: 1.3rem;line-height: 1.3rem;display: inline-block;text-align: center;
  }

  .MyGift_List li .MyGift_List_Right span.havareceive{ 
    border-radius: 0.6rem;width: 4rem;background:#F3F6FF;
color:#939497;height: 1.5rem;line-height: 1.5rem;display: inline-block;text-align: center;
  }
.MyGift_List li .MyGift_List_Left_One{float: left;width: 12%;margin-left:1rem;}
.MyGift_List li .MyGift_List_Left_One img{width: 2.5rem;height: 2.5rem;padding-top: 0.5rem;}
.nodata {margin:0 auto;margin-top:0.6rem;color:#616161;font-size:0.7rem;padding-top:12rem;text-align: center;background: url(http://image.supercarrier8.com/h5_key/NoReward.png) no-repeat center center;background-size: 10rem;}

</style>
<template>     
  <div class="container Capital jfBaseSize" v-cloak v-bind:style="vh?'height:100vh':'height: 100%;'"> 
    <div class="MyGift_Main">
        <div class="MyGift_Title">
            <div class="MyGift_Title_Left"><span>我的奖励</span></div> 
            <div class="MyGift_Date_Right" v-show="MyGift_Date_Right1" @click="ShowGiftList('1')">
              <span>查看已领取</span>
              <span class="total"><font style="color:#000">(</font>{{MyGiftCountTwo}}<font style="color:#000">)</font>
              <!-- <img src="http://image.supercarrier8.com/h5_key/icon-arrow-gray.png"/> -->
              </span>
            </div>
            <div class="MyGift_Date_Right"  v-show="MyGift_Date_Right2" style="display:none;" @click="ShowGiftList('2')">
              <span>查看未领取</span>
              <span class="total"><font style="color:#000">(</font>{{MyGiftCountOne}}<font style="color:#000">)</font>
              <!-- <img src="http://image.supercarrier8.com/h5_key/icon-arrow-gray.png"/> -->
              </span>
            </div>
        </div>
        <div style="clear:both;"></div>
        <div class="MyGift_List" v-show="MyGift_List1">
            <ul>
              <li v-for="item in MyGiftListOne" :key="item.Id">
                 <div class="MyGift_List_Left_One">
                    <img :src="item.GiftImg" />
                  </div>
                  <div class="MyGift_List_Left">
                    <p class="name" v-html="item.GiftName"></p>
                    <p class="date" v-html="item.RewardTime"></p>
                  </div>
                  <div class="MyGift_List_Right" @click="JustReceive(item.Id,item.ActivityNo,item.RowVer,item.GiftType,item.GiftSendType)"><span class="justreceive">立即领取</span></div>
              </li>
            </ul>
        </div>
        <div class="MyGift_List" v-show="MyGift_List2">
          <ul>
             <li v-for="item in MyGiftListTwo" :key="item.Id">
                 <div class="MyGift_List_Left_One">
                    <img :src="item.GiftImg" />
                  </div>
                  <div class="MyGift_List_Left">
                    <p class="name" v-html="item.GiftName"></p>
                    <p class="date" v-html="item.RewardTime"></p>
                  </div>
                  <div class="MyGift_List_Right">
                    <span class="havareceive">已领取</span>
                  </div>
              </li>
            </ul>
        </div>
        <div class="nodata" v-show="nodatashow1">您还没有奖励记录, 快去领取奖励吧！</div>
        <div class="nodata" v-show="nodatashow2">您还没有奖励记录, 快去领取奖励吧！</div>
    </div>
     <ReturnHome ref="returnhome"></ReturnHome>
  </div>
</template>
<script>
import { Toast,Indicator } from 'mint-ui';
import channelHelper from "@/assets/js/channelHelper.js";
import { base64 } from "@/assets/js/cryptoHelper";
import utils from "@/assets/js/utils.js";
import ReturnHome from "@/components/channel/temp001/ReturnHome";
export default {
  name: "Key_MyGift",
  props: ["comp", "cfg", "selectedPage"],
    components: {ReturnHome},
  provide(){       
     return{           
        goPage:this.goPage       
     }   
  },
  data() {
    var that=this;
    return {
      nodatashow1:false,
      nodatashow2:false,
      vh:false,
      MyGift_Date_Right1:true,
      MyGift_Date_Right2:false,
      MyGift_List1:true,
      MyGift_List2:false,
      MyGiftCountOne:0,
      MyGiftCountTwo:0,
      MyGiftListOne:[],//显示待领取数据
      MyGiftListTwo:[]// 显示已领取数据
    };
  },
  methods: {
     JustReceive(id,activityno,rowver,gifttype,sendtype){
         localStorage.setItem("Ex_Id",id);
         localStorage.setItem("Ex_ActivityNo",activityno);
         localStorage.setItem("Ex_ROW_VER",rowver);
         switch(gifttype)
         {
             case "1":
               this.goPage("Key_Xuni");
               break;
             case "3":
               if(sendtype=="1")/* 实物兑换 */
               {
                  this.goPage("Key_ShiWu");
               }else if(sendtype=="2"){  /* 实物核销兑换 */
                  this.goPage("Key_WExc");
               }
               break;
         }
     },
     ShowGiftList(type){
        this.nodatashow1=false;
       this.nodatashow2=false;
       if(type=="1"){
          this.MyGift_Date_Right1=false;this.MyGift_Date_Right2=true;
          this.MyGift_List2=true;this.MyGift_List1=false;
          if(this.MyGiftCountTwo==0)
          {
            this.nodatashow2=true;
          }
       }
       else{
         this.MyGift_Date_Right1=true;this.MyGift_Date_Right2=false;
         this.MyGift_List2=false;this.MyGift_List1=true;
         if(this.MyGiftCountOne==0)
          {
            this.nodatashow1=true;
          }
       }
     },
     goPage(pagetype){
        this.$parent.changeSelectedPage(pagetype);
     },
     BindList(){
        var that = this;
        var eno = that.sup8.context.enterpriseno;
        //判断是否登录
        if (!channelHelper.CheckLogin(this.$parent,eno,that.sup8.context.entranceid)) {
          this.$parent.changeSelectedPage('Key_Login')
          return false;
        }
        var url = "/channel/GetMyGiftList";
        var dataParams = {
            State:0,
            UserToken:channelHelper.GetUserToken(),
            EnterpriseNo: eno,
            LanguageType:channelHelper.GetLanguageType(),
            Limit:100,
            Offset:0
        };
        var cbError=function(){Indicator.close();}
        var cbSuccess = function(res){
          Indicator.close();
            if (res.flag){
                that.MyGiftListOne=res.data.Rows;
                if(res.data.Total==0)
                {
                  that.nodatashow1=true;
                }
                that.MyGiftCountOne=res.data.Total;
            }else
            {
               that.nodatashow1=true;
            }
        };
        //请求后端
        channelHelper.CommonCallService(url,dataParams,cbSuccess,cbError,null,null);


        var url2 = "/channel/GetMyGiftList";
        var dataParams2 = {
            State:1,
            UserToken:channelHelper.GetUserToken(),
            EnterpriseNo: eno,
            LanguageType:channelHelper.GetLanguageType(),
            Limit:100,
            Offset:0
        };
        var cbError2=function(){Indicator.close();}
        var cbSuccess2 = function(res){
          Indicator.close();
            if (res.flag){
                that.MyGiftListTwo=res.data.Rows;
                if(res.data.Total==0&&that.MyGift_List2)
                {
                   that.nodatashow2=true;
                }
                that.MyGiftCountTwo=res.data.Total;
            }else if(that.MyGift_List2){
              that.nodatashow2=true;
            }
        };
        //请求后端
        channelHelper.CommonCallService(url2,dataParams2,cbSuccess2,cbError2,null,null);
     }
  },
  watch: {
  },
  created: function() {
    var that=this;
    var isDesign = location.pathname.indexOf('design');
    if(isDesign!=-1)
    {
        return;
    }
    that.BindList();
  },
  mounted: function() {
      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>

