
<style scoped>  
.Capital {background-color:#fff;height:100%;height:100vh;}
ul{list-style-type: none; padding: 0; margin: 0;}
.MyReward_List .MyReward_List_Left {flex: 0.8;}
.MyReward_List .MyReward_List_Right {flex: 0.2;color:#6D6D6D;text-align: right;
background:url('http://image.supercarrier8.com/h5_key/icon-arrowDownNew.png');background-position:right 2rem;
background-repeat:no-repeat;background-size: auto 0.4rem;
}
.MyReward_List .MyReward_List_Right.arrowUp{background-image: url('http://image.supercarrier8.com/h5_key/icon-arrowUp.png');}
.MyReward_Total{background-image:url('http://image.supercarrier8.com/h5_key/MyReward-backgroundTop.png');background-repeat:no-repeat;background-size:100% 100%;color: #fff; }
.MyReward_Total .TotalShow{height: 5.2rem;}
.MyReward_Total .TotalShow li{width: 33%; display: block; float: left;text-align: center; padding-top: 1.2rem;}
.MyReward_Total .TotalShow li .name{font-size:0.7rem;}
.MyReward_Total .TotalShow li .count{font-size: 1.2rem; font-weight: bold;margin-bottom: 0.12rem;}
.MyReward_Total .RewardOp{border-top: 0.01rem solid #84B6F9;display: flex;}
.MyReward_Total .RewardOp li{flex:1;text-align: center;font-size:0.82rem;margin:0.4rem 0;padding:0.6rem 0;border-right:0.01rem solid #84B6F9;}
.MyReward_Total .RewardOp li:nth-last-of-type(1){border-right-width: 0;}
.MyReward_Total .RewardOp li:nth-child(1) span{padding-left: 1.3rem;background: url('http://image.supercarrier8.com/h5_key/icon-cash.png');background-repeat: no-repeat;background-position: 0rem 50%;background-size: 1rem;padding-top: 0.06rem;}
.MyReward_Total .RewardOp li:nth-child(2) span{padding-left: 1.3rem;background: url('http://image.supercarrier8.com/h5_key/icon-exchange.png');background-repeat: no-repeat;background-position: 0rem 50%;background-size: 0.9rem;padding-top: 0.06rem;}
.MyReward_Total .RewardOp li:nth-child(3) span{padding-left: 1.3rem;background: url('http://image.supercarrier8.com/h5_key/icon-gift.png');background-repeat: no-repeat;background-position: 0rem 50%;background-size: 0.9rem;padding-top: 0.06rem;}
.MyReward_Main{padding: 0 6%;}
.MyReward_Title{height: 3rem;line-height: 3rem;border-bottom: 0.01rem solid #E9E9E9;}
.MyReward_Main .MyReward_Title_Left{float:left;color:#67A2FC;font-weight: bold;}
.MyReward_Main .MyReward_Date_Right{float:right;border-radius: 0.6rem;opacity: 0.5;width:8rem;display: block;box-shadow: 0 0 10px #bcbc;-webkit-box-shadow: 0 0 10px #bcbc;height: 1.5rem;line-height: 1.5rem;margin-top: 0.8rem;}
.MyReward_Main .MyReward_Title_Left span{padding-left: 1.3rem;padding-top: 0.3rem;background: url('http://image.supercarrier8.com/h5_key/icon-gift-blue.png');background-repeat: no-repeat;background-position: 0rem 50%;background-size:1.1rem 1.1rem;}
.MyReward_Main .MyReward_Date_Right span{border-left: 0.01rem solid#bfbfbf;padding-left: 0.5rem;}
.MyReward_Main .MyReward_Date_Right i{padding-right: 0.5rem;margin-left: 0.5rem;padding-left: 1.3rem;
background: url('http://image.supercarrier8.com/h5_key/icon-calendar.png');background-repeat: no-repeat;background-position: 0rem 50%;background-size: 1.1rem 1.1rem;}
.MyReward_List ul{list-style-type: none;margin: 0px;}
.MyReward_List li{border-bottom: 1px solid #E6E6E6;padding:0.6rem;display: flex;}
.MyReward_List li .date{color:#9A9A9A;}
.MyReward_List li .MyReward_List_Left{flex: 0.6;-ms-flex: 0.6;-webkit-box-flex: 0.6;overflow: hidden;}
.MyReward_List li .MyReward_List_Right{flex: 0.4;-ms-flex: 0.4;-webkit-box-flex: 0.4;overflow: hidden;}
.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;}
.picker-items{width: 100%;}
</style>
<template>     
  <div class="container Capital jfBaseSize" v-cloak v-bind:style="vh?'height:100vh':'height: 100%;'"> 
    <div class="MyReward_Total">
        <ul class="TotalShow clearfix">
          <li>
              <div class="count">{{BaseTotalCount.MoneyCount}}</div>
              <span class="name">金额</span>
          </li>
          <li>
            <div class="count">{{BaseTotalCount.ScoreCount}}</div>
            <span class="name">积分</span>
          </li>
          <li>
            <div class="count">{{BaseTotalCount.GiftCount}}</div>
              <span class="name">礼品</span>
          </li>
        </ul>
        <ul class="RewardOp">
          <li @click="goPage('Key_CashIn')"><span>提现</span></li>
          <li  @click="goPage('Key_ShiWu')"><span>兑换</span></li>
          <li @click="goPage('Key_MyGift')"><span>我的礼品</span></li>
        </ul>
    </div>
    <div class="MyReward_Main">
        <div class="MyReward_Title">
            <div class="MyReward_Title_Left"><span>我的奖励</span></div> 
            <div class="MyReward_Date_Right"><i></i><span @click="selectDate">{{this.selectedValue}}</span></div>
        </div>
        <div style="clear:both;"></div>
        <div class="nodata" v-show="nodatashow">您还没有奖励记录, 快去领取奖励吧！</div>
        <div class="MyReward_List">
            <ul>
             <li v-for="item in MyRewardList" :key="item.Id">
                <div class="MyReward_List_Left">
                    <p class="name" v-html="item.ActivityName"></p>
                    <p class="date" v-html="item.RewardTime"></p>
                    <!-- <p :class="'detail'+item.Id" v-show="false">类型：{{item.RewardType}}</p> -->
                    <p :class="'detail'+item.Id"  v-show="false">礼品状态：{{item.OrderStatusTxt}}</p>
                    <p :class="'detail'+item.Id"  v-if="item.OrderStatus==10">拒绝原因：{{item.ReviewRemark}}</p>
                </div>
                <div class="MyReward_List_Right" @click="ShowHideDetail(item.Id,$event)">
                  <p v-html="item.GiftName"></p>
                </div>
              </li>
            </ul>
        </div>
    </div>
     <ReturnHome ref="returnhome"></ReturnHome>
    <div class="pickerPop"  @touchmove.prevent>
        <mt-datetime-picker
      v-model="DefaultValue"
        ref="picker" 
      type="date" 
       @confirm="handleConfirm"
       :startDate="startDate"
        :endDate="endDate"
      year-format="{value} 年"
      month-format="{value} 月">
    </mt-datetime-picker>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { Toast,DatetimePicker,Indicator,Picker } from 'mint-ui';
import channelHelper from "@/assets/js/channelHelper.js";
import { base64 } from "@/assets/js/cryptoHelper";
import utils from "@/assets/js/utils.js";
Vue.component(DatetimePicker.name, DatetimePicker)
import ReturnHome from "@/components/channel/temp001/ReturnHome";
export default {
  name: "Key_MyReward",
  components: {ReturnHome},
  provide(){       
    return{           
      goPage:this.goPage       
    }   
  },
  props: ["comp", "cfg", "selectedPage"],
  data() {
    var that=this;
    return {
      nodatashow:false,
      vh:false,
      DefaultValue:new Date(),
      selectedValue:that.formateDate(new Date()),
      startDate:that.setStartDate(),
      endDate: new Date(),
      BaseTotalCount:{
        MoneyCount:"0.00",
        ScoreCount:"0",
        GiftCount:"0",
        UseMoneyCount:"0.00"
      },
      MyRewardList:[],
      OrderStateList:[]
    };
  },
  methods: {
    ShowHideDetail(id,e){
      if($(".detail"+id).is(":hidden"))
      {
         $(".detail"+id).show();
          //   // $(e.target).css("background-size","0.6rem 0.6rem;");
          // $(e.target).css("background","url('http://image.supercarrier8.com/h5_key/icon-arrowUp.png') no-repeat scroll right 2rem");
        $(e.target).addClass('arrowUp');
      }
      else{
        $(".detail"+id).hide();
        $(e.target).removeClass('arrowUp');
      //  $(e.target).css("background","url('http://image.supercarrier8.com/h5_key/icon-arrowDownNew.png') no-repeat scroll right 2rem");
      }
     
    },
     goPage(pagetype){
        var that=this;
        var eno=that.sup8.context.enterpriseno;
        if(pagetype=="Key_ShiWu")
        {
            location.href="/shop?eno="+eno;
        }
        else{
          this.$parent.changeSelectedPage(pagetype);
        }
    },
    GetOrderState:function(TypeId){
        var that=this;
        var url = "/channel/GetSysParaTypeList";
        var dataParams = {
            EnterpriseNo: that.sup8.context.enterpriseno,
            LanguageType:channelHelper.GetLanguageType(),
            TypeId:TypeId
        };
        var cbError=function(){Indicator.close();}
        var cbSuccess = function(res){
          if (res.flag&&res.data){
              that.OrderStateList=res.data;
          }
        };
        //请求后端
        channelHelper.CommonCallServiceAuto(url,dataParams,cbSuccess,cbError,null,null);
    },
    formateDate(date) {
      var date = new Date(date);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m > 9 ? m : '0' + m;
      return  y + '.' + m+"月";
    },setStartDate() {
        var date = new Date();
        var y = date.getFullYear()-1;
        return new Date(y + '-01');
    },
    GetCurrentMonth(date) {
        var date = new Date(date);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m > 9 ? m : "0" + m;
        return y +"-"+ m;
    },
    GetEndDay(date){
      var date = new Date(date)
      var currentMonth = date.getMonth()
      var nextMonth = ++currentMonth
      var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1)
      var oneDay = 1000 * 60 * 60 * 24
      var lastTime = new Date(nextMonthFirstDay - oneDay)
      var month = parseInt(lastTime.getMonth() + 1)
      var day = lastTime.getDate()
      if (month < 10) {
        month = '0' + month
      }
      if (day < 10) {
        day = '0' + day
      }
      return date.getFullYear() + '-' + month + '-' + day;
    },
    selectDate(){
          this.$refs.picker.open();
          $(".picker-slot")[2].style.display="none";
      },
      handleConfirm (date) {
        var that=this;
        that.selectedValue = that.formateDate(date);   //获取的时间为时间戳，getdata是自己写的一个转换时间的方法
        that.LoadList(that.GetCurrentMonth(date));
      },LoadBaseCount(){
        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/GetMyRewardsCount";
        var dataParams = {
            UserToken:channelHelper.GetUserToken(),
            EnterpriseNo: eno,
            LanguageType:channelHelper.GetLanguageType()
        };
        var cbError=function(){Indicator.close();}
        var cbSuccess = function(res){
          Indicator.close();
            if (res.flag){
                that.BaseTotalCount=res.data;
                var MoneyCount=parseFloat(that.BaseTotalCount.MoneyCount);
                var UseMoneyCount=parseFloat(that.BaseTotalCount.UseMoneyCount);
                sessionStorage.setItem("CashOutMoney",(MoneyCount*1000-UseMoneyCount*1000)/1000);
            }
        };
        //请求后端
        channelHelper.CommonCallService(url,dataParams,cbSuccess,cbError,null,null);
      },
      LoadList(MonthDate){
         var that=this;
        var eno=that.sup8.context.enterpriseno;
        var url = "/channel/GetMyRewards";
        var dataParams = {
            // BeginTime:MonthDate+"-01 00:00:00",
            // EndTime:MonthDate+"-30 23:59:59",
            BeginTime:MonthDate+"-01",
            EndTime:that.GetEndDay(new Date(MonthDate+"-01")),
            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.MyRewardList=res.data.Rows;
                $.each(that.MyRewardList,function(m,n){
                     $.each(that.OrderStateList,function(x,y){
                          if(n.OrderStatus==y.DATA_VALUE)
                          {
                               that.MyRewardList[m].OrderStatusTxt=y.DATA_NAME;
                          }
                     });
                     switch(n.RewardType)
                     {
                        case 0: that.MyRewardList[m].RewardType="扫码奖励";
                        that.MyRewardList[m].ActivityName="扫码奖励:"+that.MyRewardList[m].ActivityName;
                        break;
                        case 1: that.MyRewardList[m].RewardType="推荐奖励";
                                that.MyRewardList[m].ActivityName="推荐奖励:成功推荐客户1人";
                        break;
                        case 2: that.MyRewardList[m].RewardType="注册奖励";
                                that.MyRewardList[m].ActivityName="注册奖励:"+that.MyRewardList[m].ActivityName;
                        break;
                        case 3: that.MyRewardList[m].RewardType="返利奖励";
                                that.MyRewardList[m].ActivityName="返利奖励:"+that.MyRewardList[m].ActivityName;
                        break;
                        case 4: that.MyRewardList[m].RewardType="学习奖励";
                                that.MyRewardList[m].ActivityName="学习奖励:"+that.MyRewardList[m].ActivityName;
                        break;
                        case 5: that.MyRewardList[m].RewardType="答题奖励";
                                that.MyRewardList[m].ActivityName="答题奖励:"+that.MyRewardList[m].ActivityName;
                        break;
                     }
                });
                that.nodatashow=false;
                if(res.data.Total==0)
                {
                  that.nodatashow=true;
                }
            }else{
              that.nodatashow=true;
            }
        };
        //请求后端
        channelHelper.CommonCallService(url,dataParams,cbSuccess,cbError,null,null);
      }
  },
  watch: {
  },
  created: function() {
    var that=this;
    var isDesign = location.pathname.indexOf('design');
    if(isDesign!=-1)
    {
        return;
    }
    that.GetOrderState("6db6484a7fe04a89acb977123973dfe2");
    that.LoadBaseCount();that.LoadList(that.GetCurrentMonth(new Date()));
  },
  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>

