
<style scoped>  
/* .Capital {background-color:#F3F6FF;height:100%;height:100vh;} */
.Capital {background-color:#F3F6FF;height:100%;height:100vh;}
.WriteOff_List .WriteOff_List_Right {text-align: right;;padding-top: 1.6rem;max-width: 36%;overflow: hidden;height: 1.26rem;}
.WriteOff_Total{
  background-image:url('http://image.supercarrier8.com/h5_key/MyReward-backgroundTop.png');
  background-repeat:no-repeat;
  background-size:100% 100%;
  height: 5rem;color: #fff;}
/* .WriteOff_Total .TotalShow{height: 4.5rem;} */
.WriteOff_Total .TotalShow ul{list-style-type: none;padding: 0;margin: 0;}
.WriteOff_Total .TotalShow ul li:nth-child(2){float: left;border-right: 0.01rem solid #fff;
margin-top: 1rem;width: 1%;height: 3rem;}
.WriteOff_Total .TotalShow ul li.total{width: 49%; display: block; float: left;
text-align: center; padding-top: 1rem;
}
.WriteOff_Total .TotalShow ul li .count{font-size: 1.2rem; font-weight: bold;margin-bottom: 0.3rem;}
.WriteOff_Total .TotalShow ul li .name{font-size: 0.7rem; margin-top:0;}

.WriteOff_Title{
height: 3rem;margin-top: 0.5rem;
line-height: 3rem;
}
.WriteOff_Main .WriteOff_Title_Left{float:left; color:#67A2FC; font-weight: bold;}
.WriteOff_Main .WriteOff_Date_Right{float:right;    
    border-radius: 0.6rem;
    width: 7rem;
    opacity: 0.5;
    box-shadow: 0 0 10px #bcbc;
    line-height: 1.5rem; height: 1.5rem;margin-top: 0.7rem;margin-right:0.5rem;
    background: #fff;}
.WriteOff_Main .WriteOff_Title_Left span{margin-left: 0.8rem;padding-left: 1.3rem;padding-top: 0.3rem;background: url('http://image.supercarrier8.com/h5_key/icon-selectMode-blue.png');background-repeat: no-repeat;background-position: 0rem 50%;background-size: 1.1rem 1.1rem;}
.WriteOff_Main .WriteOff_Date_Right i{margin-left: 0.5rem;padding-right: 0.3rem;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;}
.WriteOff_Main .WriteOff_Date_Right span{border-left: 0.01rem solid#bfbfbf;padding-left: 0.5rem;}
.WriteOff_List ul{list-style-type: none;margin: 0px;padding-left:0.7rem; padding-right:0.7rem;}
.WriteOff_List li{width:100%;margin-bottom: 0.5rem; background: #fff;padding-bottom: 0.2rem;}
.WriteOff_List li .WriteOff_List_Left_One{width: 3rem;}
.WriteOff_List li .WriteOff_List_Left_One img{width: 3rem;height: 3rem;}
.WriteOff_List li .WriteOff_List_Left{flex: 1;}
.WriteOffCode{padding: 0.2rem 0rem 0.2rem 0rem;border-bottom: 1px solid #E9E9E9;height: 2rem; line-height: 2rem;margin-bottom: 0.5rem;margin-left: 1rem;margin-right: 1rem;color:#858585; font-size:0.7rem;}
.WriteOffCode span{color:#3B8AFC;font-size: 0.8rem;}
.WriteOffList{color:#5D5D5D;padding:0 0.4rem;display: flex;}
.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;}
.backgroundcolor{background-color:#fff;}
</style>
<template>     
  <div class="container Capital jfBaseSize" v-cloak v-bind:style="vh?'height:100vh':'height: 100%;'" v-bind:class="nodatashow?'backgroundcolor':''"> 
    <div class="WriteOff_Total">
         <div class="TotalShow clearfix">
             <ul class="clearfix">
               <li class="total">
                 <div class="count">{{VerifyCount.TotalVerifyCount}}</div>
                 <span class="name">累计核销</span>
              </li>
              <li></li>
              <li class="total">
                  <div class="count">{{VerifyCount.TodayVerifyCount}}</div>
                  <span class="name">今日核销</span>
              </li>
            </ul>
        </div>
    </div>
    <div class="WriteOff_Main">
        <div class="WriteOff_Title">
            <div class="WriteOff_Title_Left"><span>核销记录</span></div> 
            <div class="WriteOff_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="WriteOff_List">
            <ul>
               <li v-for="item in DataList" :key="item.ID">
                <div class="WriteOffCode">核销码:<span v-html="item.VerificationCode"></span></div>
                <div class="WriteOffList">
                  <div class="WriteOff_List_Left_One">
                    <img :src="item.Gift_ProductImg" />
                  </div>
                  <div class="WriteOff_List_Left">
                    <p class="name" v-html="item.Gift_Name"></p>
                    <p class="date" v-html="item.VerificationTime" style="font-size:0.8rem;"></p>
                  </div>
                  <div class="WriteOff_List_Right">核销员:<span v-html="CutStr(item.VerificationUserName)"></span></div>
                </div>
              </li>
            </ul>
        </div>
    </div>
    <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>
      <ReturnHome ref="returnhome"></ReturnHome>
  </div>
</template>
<script>
import Vue from 'vue'
import { Toast,DatetimePicker,Indicator,Picker } from 'mint-ui';
import channelHelper from "@/assets/js/channelHelper.js";
	import ReturnHome from "@/components/channel/temp001/ReturnHome";
import { base64 } from "@/assets/js/cryptoHelper";

import utils from "@/assets/js/utils.js";
Vue.component(DatetimePicker.name, DatetimePicker)
export default {
  name: "Key_StoreWriteOff",
    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(),
      VerifyCount:{
        TotalVerifyCount:0,
        TodayVerifyCount:0
      },
      DataList:[]
    };
  },
  methods: {
    CutStr(str){
      if(str.length>8)
      {
         return str.substring(0,8)+"...";
      }
      else{
         return str;
      }
    },
     goPage(pagetype){
        this.$parent.changeSelectedPage(pagetype);
    },
    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();
      return new Date(y + '-01');
	},
  selectDate(){
        this.$refs.picker.open();
        $(".picker-slot")[2].style.display="none";
    },
    handleConfirm (date) {
      var that=this;
      that.selectedValue = that.formateDate(date);   
      that.LoadList(that.GetCurrentMonth(date));
    },
    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;
    },LoadBaseCount(){
       var that = this;
      var eno = that.sup8.context.enterpriseno;
        var url = "/channel/GetVerifyCount";
        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.VerifyCount=res.data;
            }
        };
        //请求后端
        channelHelper.CommonCallService(url,dataParams,cbSuccess,cbError,null,null);
      },
      LoadList(MonthDate){
         var that = this;
      var eno = that.sup8.context.enterpriseno;
        var url = "/channel/GetVerifyRecordList";
        var dataParams = {
            SearchMonth:MonthDate,
            UserToken:channelHelper.GetUserToken(),
            EnterpriseNo: eno,
            LanguageType:channelHelper.GetLanguageType()
        };
        var cbError=function(){Indicator.close();}
        var cbSuccess = function(res){
          Indicator.close();
            if (res.flag){
                that.DataList=res.data.Rows;
                that.nodatashow=false;
                if(res.data.Total==0)
                {
                  that.nodatashow=true;
                }
                that.MyGiftCountOne=res.data.Total;
            }else
            {
               that.nodatashow=true;
            }
        };
        //请求后端
        channelHelper.CommonCallService(url,dataParams,cbSuccess,cbError,null,null);
      }
  },
  watch: {
  },
  created: function() {
    var that=this;
     that.LoadBaseCount();
    that.LoadList(that.GetCurrentMonth(new Date()));
  },
  mounted: function() {
      //如果登录了则自动跳转到首页
      // if(localStorage.getItem("loginInfo")!=null)
      // {
      //     //var loginInfo=JSON.parse(localStorage.getItem("loginInfo"));
      //     this.login(true);
      // }
      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>

