
<style scoped> 
input[type="button"], input[type="submit"], input[type="reset"] {-webkit-appearance: none;} 
.ScanRecord {background-color:#f0f4ff;height:100%;height:100vh;}
.ScanRecord_Top .ScanRecord_product{line-height: 3rem;height: 3rem;margin:0 0.8rem;display: flex;}
.ScanRecord_Top .ScanRecord_product label{margin-right: 0.5rem;}
.ScanRecord_Top .ScanRecord_product div{flex: 1;}
.ScanRecord_Top .ScanRecord_product input{text-indent: 0.5rem;border-radius: 0.6rem;width: 100%;border:none; height:1.5rem;
background: url(http://image.supercarrier8.com/h5_key/icon-arrowDown.png) no-repeat center right;background-position-x: 96%;
background-size: 0.8rem;background-color:#fff;}
.ScanRecord_Top .ScanRecord_date{
  margin:0 0.8rem;margin-top:0.5rem;
}
.ScanRecord_Top .ScanRecord_date label{
  float: left;margin-right: 0.5rem;
}
.ScanRecord_Top .ScanRecord_date span.week{
background:#fff;border-radius: 0.6rem;width:18%;display: block;float: left;
color:#7f7f80;text-align:center;margin-right:0.5rem;
}
.ScanRecord_Top .ScanRecord_date span.uercustom{
background:#fff;border-radius: 0.6rem;width:20%;display: block;float: right;
color:#7f7f80;text-align:center;margin-left:1rem;
}
.ScanRecord_Top .ScanRecord_date span.selected{
  background:#3D8AFC;color:#fff;
}
.ScanRecord_Top .ScanRecord_date .date_search{margin-left: 1rem;}
.date_search .input{border: none;width:25%;  border-radius: 0.6rem;
background: url(http://image.supercarrier8.com/h5_key/icon-arrow-gray.png) no-repeat center right;
background-size: 0.3rem;background: #fff; padding:0 0.4rem; text-align: center;}
.date_search .btnsearch{border-radius: 0.6rem;    background: #3D8AFC;    color: #fff;
    border: none;    width: 20%;}
.date_search .to{color:#3D8AFC;padding:0 0.3rem;}
.ScanRecord_Title{
  height: 3rem;line-height: 3rem;
}
.ScanRecord_Main .ScanRecord_Title_Left{float:left;color:#67A2FC;font-weight: bold;}
.ScanRecord_Main .ScanRecord_Date_Right{float:right;line-height: 1.2rem; height: 1.2rem;margin-top: 1rem;margin-right:0.8rem;}
.ScanRecord_Main .ScanRecord_Title_Left span{
  margin-left: 0.8rem;  padding-left: 1.3rem;padding-top:0.3rem;background: url('http://image.supercarrier8.com/h5_key/icon-billDetails.png');background-repeat: no-repeat;background-position: 0rem 50%;background-size: 1.1rem 1.1rem;
}
.ScanRecord_List{background: #fff;margin: 0 0.8rem;height:70vh;overflow: auto;}
.ScanRecord_List .SR_List{list-style-type: none;margin: 0px;padding: 0 0.8rem;}
.ScanRecord_List .SR_List >div{height: 3rem;line-height: 3rem;border-bottom: 1px solid #E6E6E6;}
.ScanRecord_List .SR_List >div.header{border-bottom: 1px solid #E6E6E6;}
.ScanRecord_List .SR_List >div div.rank{width: 23.3%;float: left;text-align:center;}
.ScanRecord_List .SR_List >div div.clerk{width: 53.3%;float: left;text-align:center;}
.ScanRecord_List .SR_List >div div.sale{width: 23.3%;float: left; text-align: right;color:rgb(253, 141, 106);}
.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-toolbar-title .btnHeader{display: flex;}
.picker-toolbar-title .btnHeader .button{width: 50%;height: 3rem;text-align: center;}
.picker-toolbar-title .btnHeader button{flex: 1;}
.picker-toolbar-title .searchHearder{width: 80%;max-width:37.5rem;position: relative;margin: 0 auto;background-color:#f3f6ff;border-radius: 0.8rem;}
.picker-toolbar-title .searchHearder input {display: block;width:100%;padding: 0.3rem 1rem;padding-right:1.8rem;border-width:0;border-radius: 0.8rem;background-color:#f3f6ff;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
.picker-toolbar-title .searchHearder span{display: inline-block;width:1.6rem;height: 100%;position: absolute;top:0;right: 0;background: url(https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_key/icon-search.png) no-repeat center center;background-size:1.2rem 1.2rem; }
.picker-items{width: 100%;}
</style>
<style>
.picker-items{width: 100%;}
.mint-popup-bottom{width:100%;}
.productDropPopu .picker-toolbar{height: auto;}
</style>
<template>     
  <div class="container ScanRecord jfBaseSize" v-cloak v-bind:style="vh?'height:100vh':'height: 100%;'"> 
    <div class="ScanRecord_Top">
        <div class="ScanRecord_product">
            <label>产品:</label>
            <div class="product_search"><input type="text" readonly="readonly" id="productId" v-model="ProductName" @click="SelectProduct()" style="border:none;"/></div>
        </div> 
       <div class="ScanRecord_date clearfix" style="margin-top:0;">
           <label>对象:</label>
          <div class="date_search clearfix">
              <span class="week" :class="(item.val==SearchValue.ObjectCategory?'selected':'')" v-for="(item) in Setting.DataAccessList" v-bind:key="item.val" v-html="item.name" @click="tabChange(item.val,$event)"></span>
          </div>
       </div>
        <div class="ScanRecord_date clearfix">
            <label>时间:</label>
            <div class="date_search clearfix" v-show="!customshow">
              <span class="week selected" @click="WeekSelect($event,'week')">本周</span>
              <span  class="week"  @click="WeekSelect($event,'month')">本月</span>
              <span  class="week"  @click="WeekSelect($event,'year')">本年</span>
              <span  class="uercustom"  @click="WeekSelect($event,'custom')" v-show="false">自定义</span>
            </div>
            <div class="date_search" v-show="customshow">
              <input type="text" id="StartTime" class="input start" v-model="SearchValue.StartTime" @click="selectDate1"/>
              <span class="to">至</span>
              <input type="text" id="EndTime" class="input end"  v-model="SearchValue.EndTime" @click="selectDate2"/>

              <input type="button" value="查询" class="btnsearch"/>
            </div>
       </div>
    </div>
    <div style="clear:both;"></div>
    <div class="ScanRecord_Main">
        <div class="ScanRecord_Title">
            <div class="ScanRecord_Title_Left">
               <span v-show="SearchValue.ObjectCategory==3">经销商数据</span>
               <span v-show="SearchValue.ObjectCategory==2">门店数据</span>
               <span v-show="SearchValue.ObjectCategory==1">店员数据</span>
            </div> 
            <div class="ScanRecord_Date_Right">累计销量:<font style="margin-left:0.2rem;color:#FD8D6A;">{{ScanTotal}}</font></div>
        </div>
        <div style="clear:both;"></div>
        <div class="nodata" v-if="nodatashow">您还没有数据查看记录!</div>
        <div class="ScanRecord_List" v-else>
            <div class="SR_List"
              v-infinite-scroll="LoadList"
              infinite-scroll-disabled="loading"
              infinite-scroll-distance="10">
              <div class="header">
                 <div class="rank">排名</div>
                 <div class="clerk">
                    <span v-show="SearchValue.ObjectCategory==3">经销商</span>
                    <span v-show="SearchValue.ObjectCategory==2">门店</span>
                    <span v-show="SearchValue.ObjectCategory==1">店员</span>
                  </div>
                  <div class="sale">销量</div>
              </div>
              <div v-for="(item,index) in DataList" v-bind:key="index">
                <div class="rank" v-html="item.Sort?item.Sort:'-'"></div>
                <div class="clerk" v-html="item.ObjectName?item.ObjectName:'-'"></div>
                <div class="sale" v-html="item.ScanCount?item.ScanCount:'-'"></div>
              </div>
              <div v-if="loading&&!isFinished" style="text-align: center">加载中...</div>
            </div>
        </div>
    </div>
     <mt-popup class="productDropPopu" v-model="popupVisible" popup-transition="popup-fade" closeOnClickModal="true" position="bottom">
            <mt-picker :slots="slots1" ref="picker1" value-key="PRODUCT_NAME" :show-toolbar="true"  v-show="showToolbar1">
                <div class="picker-toolbar-title">
                  <div class="btnHeader">
                    <el-button type="text" class="button"  @click="popupVisible =!popupVisible">取消</el-button>
                    <el-button type="text" class="button"  @click="HandelConfirm()">确定</el-button>
                  </div>
                   <div class="searchHearder">
                      <input class="text-gray" type="text" placeholder="请输入商品名称搜索" v-model="SearchValue.KeyWord"/>
                      <span @click="SearchTo"> </span>
                    </div>
                </div>
            </mt-picker>
    </mt-popup>

     <div class="pickerPop" @touchmove.prevent>
      <mt-datetime-picker 
        v-model="DefaultValue" 
        ref="picker2"
        type="date"
        @confirm="handleConfirm1"
        year-format="{value} 年"
        month-format="{value} 月" 
      ></mt-datetime-picker>
    </div>
      <div class="pickerPop" @touchmove.prevent>
      <mt-datetime-picker 
        v-model="DefaultValue"
        ref="picker3"
        type="date"
        @confirm="handleConfirm2"
        year-format="{value} 年"
        month-format="{value} 月"  
      ></mt-datetime-picker>
    </div>
      <ReturnHome ref="returnhome"></ReturnHome>
  </div>
</template>
<script>
import Vue from 'vue'
import ElementUI from "element-ui";
import { Toast,DatetimePicker,Indicator,Picker,InfiniteScroll  } from 'mint-ui';
import channelHelper from "@/assets/js/channelHelper.js";
import { base64 } from "@/assets/js/cryptoHelper";
import ReturnHome from "@/components/channel/temp001/ReturnHome";
import utils from "@/assets/js/utils.js";import "element-ui/lib/theme-chalk/index.css";
Vue.use(ElementUI);
Vue.use(InfiniteScroll);
Vue.component(DatetimePicker.name, DatetimePicker);
export default {
  name: "Key_ScanRecord",
    components: {ReturnHome},
  provide(){       
     return{           
        goPage:this.goPage       
     }   
  },
  props: ["comp", "cfg", "selectedPage"],
  data() {
    var that=this;
    return {
      EntranceId:this.sup8.context.entranceid,
      DefaultValue: new Date(),
      popupVisible: false,
      ProductName:"全部",
      SearchValue:{
        KeyWord:"",
        UserToken: channelHelper.GetUserToken(),
        EnterpriseNo: this.sup8.context.enterpriseno,
        LanguageType: channelHelper.GetLanguageType(),
        ProductId:'',
        ObjectCategory:1,// (查看对象：1:店员，2：门店，3:经销商)
        MenuType:that.sup8.context.entranceid,//(菜单：2:店长，3：经销商，4:经销商业务员,5:企业业务员)
        OrgId: channelHelper.GetUserLoginInfo().OrganizationId,
        StartTime: '',
        EndTime:'',
        Limit:10,
        Offset:0
      },
      Setting:{
        DataAccess:'',
        DataAccessList:[]
      },
      showToolbar1: true,
      slots1: [{
          values:[]
      }],
      customshow:false, 
      nodatashow:false,
      ScanTotal:0,
      vh:false,
      DataList:[],
      ProductDataList:[],
      loading:true,
      isFinished:false,
    };
  },
  methods: {
    tabChange(type,e){//对象选择
      if (type!=this.SearchValue.ObjectCategory) {
        this.$set(this.SearchValue,'ObjectCategory',type);
        //  $(e.target).addClass("selected").siblings().removeClass("selected");
        this.clearLoadList();
      }
    },
    H5KeySetting(SettingType){
      var that=this;
      var url = "/channel/H5KeySetting";
      Indicator.open();
      var dataParams = {
          SettingType:SettingType,
          EnterpriseNo:that.sup8.context.enterpriseno,
          LanguageType:channelHelper.GetLanguageType()
      };
      var cbError=function(){Indicator.close();}
      var cbSuccess = function(res){
        var DataAccessList=[];
        Indicator.close();
        if(res.flag)
        {
          if (res.data&&res.data.DataAccess) {
            that.$set(that,'Setting',res.data);
            if(that.EntranceId==5)
            { 
              if(that.Setting.DataAccess.indexOf('1')!=-1)
              {
                DataAccessList.push({val:3,name:'经销商'});
              }
              if(that.Setting.DataAccess.indexOf('2')!=-1)
              {
                DataAccessList.push({val:2,name:'门店'});
              }
              if(that.Setting.DataAccess.indexOf('3')!=-1)
              {
                DataAccessList.push({val:1,name:'店员'});
              }
            }else{
              if(that.Setting.DataAccess.indexOf('0')!=-1)
              {
                DataAccessList.push({val:2,name:'门店'});
              }
              if(that.Setting.DataAccess.indexOf('1')!=-1)
              {
                DataAccessList.push({val:1,name:'店员'});
              }
            }
            that.$set(that.SearchValue,'ObjectCategory',DataAccessList[0].val);
            that.$set(that.Setting,'DataAccessList',DataAccessList);
            that.$set(that,'loading',false);
            return false;
          }
        } 
        that.$set(that.SearchValue,'ObjectCategory',-1);
        that.$set(that.Setting,'DataAccessList',[]);
        Toast("数据获取失败");
      };
      //请求后端
      channelHelper.CommonCallServiceAuto(url,dataParams,cbSuccess,cbError,null,null);
    },
    SelectProduct(){//商品选择
      var that=this;
      that.popupVisible =true;
      that.showToolbar1 =true;
    },
    selectDate1() {
      this.$refs.picker2.open();
    },
    selectDate2() {
      this.$refs.picker3.open();
    },
    handleConfirm1(date) {
      var that = this;
      that.SearchValue.StartTime=that.GetCurrentMonth(date);
    },
    handleConfirm2(date) {
      var that = this;
     that.SearchValue.EndTime=that.GetCurrentMonth(date);
    },
    GetCurrentMonth(date) {
      var date = new Date(date);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      var d=date.getDate();
      m = m > 9 ? m : "0" + m;
      if(d < 10){
          d = "0" + d;
      }
      return y +"-"+ m+"-"+d;
    },
    SearchTo(){
       var that=this;
       that.LoadProductList(true);
    },
    WeekSelect(e,type){
      var that=this;
       $(e.target).addClass("selected").siblings().removeClass("selected");
       switch(type)
       {
         case "week":
           that.SearchValue.StartTime=DateOp.getWeekStartTime();
           that.SearchValue.EndTime=DateOp.getWeekEndTime();
           break;
         case "month":
           that.SearchValue.StartTime=DateOp.getMonthStartTime();
           that.SearchValue.EndTime=DateOp.getMonthEndTime();
           break;
         case "year":
           that.SearchValue.StartTime=DateOp.getYearStartTime();
           that.SearchValue.EndTime=DateOp.getYearEndTime();
           break;
         case "custom":
           that.customshow=true;
           that.SearchValue.StartTime=DateOp.getMonthStartTime();
           that.SearchValue.EndTime=DateOp.getMonthEndTime();
           break;
       }
       if(type!="custom"){
         that.clearLoadList();
       }
    },
    HandelConfirm(){
      var that=this;
      var currentobj=this.$refs.picker1.getValues()[0];
      that.SearchValue.ProductId=currentobj.PRODUCT_ID;
      that.ProductName=currentobj.PRODUCT_NAME;
      this.popupVisible =!this.popupVisible;
      that.clearLoadList();
    },
    goPage(pagetype){
        this.$parent.changeSelectedPage(pagetype);
    },
    clearLoadList(){
      this.$set(this,'isFinished',false);
      this.$set(this.SearchValue,'Offset',0);
      this.$set(this,'DataList',[]); 
      this.LoadList();
    },
    LoadList() {
      var that = this;
      if (that.isFinished) {
        return false;
      }
      var StartTime=that.SearchValue.StartTime,EndTime=that.SearchValue.EndTime;
      if(new Date(StartTime)>new Date(EndTime))
      {
         alert("开始时间不能大于结束时间！");return false;
      }
      that.$set(that,'loading',true);
      var url = "/channel/H5GetScanCodeCountRank";
      var dataParams = that.SearchValue;
      Indicator.open();
      var cbError = function() {
        Indicator.close();
      };
      var cbSuccess = function(res) {
        Indicator.close();
        if (res.flag) {
          if (res.data&&res.data.Rows&&res.data.Rows.length>0) {
            if (that.SearchValue.Offset==0) {
              that.$set(that,'DataList',res.data.Rows); 
            }else{
              that.$set(that,'DataList',that.DataList.concat(res.data.Rows)); 
            }
            var nextCont=that.SearchValue.Limit+that.SearchValue.Offset;
            if (res.data.Total>nextCont) {
              that.$set(that.SearchValue,'Offset',nextCont);
              that.$set(that,'loading',false);
            }else{
              that.$set(that,'isFinished',true);
            }
            that.$set(that,'ScanTotal',res.data.TotalScanCount);
            that.$set(that,'nodatashow',false);
            return false;
          }
        }
        that.$set(that,'DataList',[]); 
        that.$set(that,'isFinished',true);
        that.$set(that,'loading',true);
        that.$set(that,'ScanTotal',0);
        that.$set(that,'nodatashow',true);
      };
      //请求后端
      channelHelper.CommonCallService(url, dataParams,  cbSuccess, cbError,  null, null );
    },
    LoadProductList(isProductSearch){
      var that = this;
      var eno = that.sup8.context.enterpriseno;
      //判断是否登录
      if (!channelHelper.CheckLogin(this.$parent,eno,that.sup8.context.entranceid)) {
        return false;
      }
      Indicator.open();
      var url = "/channel/GetProductList";
      var dataParams = {
        KeyWord:that.SearchValue.KeyWord,
        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) {
          if (res.data&&res.data.Rows&&res.data.Rows.length>0) {
            that.slots1[0].values=res.data.Rows;
            if(!isProductSearch){
              var all={"PRODUCT_ID":"","PRODUCT_NAME":"全部","PRODUCT_NO":""};
              that.slots1[0].values.unshift(all);
            }
            return;
          }
          that.slots1[0].values=[];
          return ;
          
        }
      };
      //请求后端
      channelHelper.CommonCallService(url, dataParams,  cbSuccess, cbError,  null, null );
    }
  },
  watch: {
  },
  created: function() {
    var that=this;
    var isDesign = location.pathname.indexOf('design');
    if(isDesign!=-1)
    {
        return;
    }
    var entranceid=that.sup8.context.entranceid;
    that.SearchValue.StartTime=DateOp.getWeekStartTime();
    that.SearchValue.EndTime=DateOp.getWeekEndTime();
    that.LoadProductList();
    that.H5KeySetting(entranceid);
    //that.LoadList(that.SearchValue.StartTime,that.SearchValue.EndTime,that.ProductId);
  },
  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);
  }
};

var DateOp={
    //获得本周的开始日期
    getWeekStartTime:function() {
        var now = new Date(); //当前日期
        return DateOp.formatDate(now.getFullYear(), now.getMonth()+1, now.getDate() - now.getDay()+1);
    },
    //获得本周的结束日期
    getWeekEndTime:function () {
        var now = new Date(); //当前日期
        return DateOp.formatDate(now.getFullYear(), now.getMonth()+1, now.getDate() + (7 - now.getDay()));
    },
    //获得本月的开始日期
    getMonthStartTime:function(){
        var now = new Date(); //当前日期
        return DateOp.formatDate(now.getFullYear(), now.getMonth()+1, 1);
    },
    //获得本月的结束日期
    getMonthEndTime:function(){
        var now = new Date(); //当前日期
        return DateOp.formatDate(now.getFullYear(), now.getMonth()+1,DateOp.getMonthDays(now.getMonth()));
    },
    //获得某月的天数
    getMonthDays:function(myMonth){
        var now = new Date(); //当前日期
        var monthStartTime = new Date(now.getYear(), myMonth, 1);
        var monthEndTime = new Date(now.getYear(), myMonth + 1, 1);
        var days = (monthEndTime - monthStartTime)/(1000 * 60 * 60 * 24);
        return days;
    },
    //获得本年的开始日期
    getYearStartTime:function(){
        var date=new Date();
        return DateOp.formatDate(date.getFullYear(),1,1);
    },
    //获得本年的结束日期
    getYearEndTime:function(){
        var date=new Date();
        return DateOp.formatDate(date.getFullYear(),12,DateOp.getMonthDays(12));
    },
    //格式化日期：yyyy-MM-dd
    formatDate:function(myyear,mymonth,myweekday) {
        if(mymonth < 10){
          mymonth = "0" + mymonth;
        }
        if(myweekday < 10){
          myweekday = "0" + myweekday;
        }
        return (myyear+"-"+mymonth + "-" + myweekday);
    } 
};
</script>

