
<style scoped>
input[type="button"], input[type="submit"], input[type="reset"] {-webkit-appearance: none;} 
.ScanRecord {background-color:#fff;height:100%;height:100vh;position: relative;}
.ScanRecord_List .ScanRecord_List_Left {
  flex: 0.7;
}

.ScanRecord_List .ScanRecord_List_Right {
  flex: 0.3;color:#FC997B;text-align: right;}
.ScanRecord_List .reduce{color:#6D6D6D;}
.ScanRecord_Top .ScanRecord_product{
  line-height: 4rem;
height: 4rem;
margin-left: 1rem;margin-right: 1rem;
}
.ScanRecord_Top .ScanRecord_product label{
  float: left;margin-right: 0.5rem;
}
.ScanRecord_Top .ScanRecord_product input{
    border-radius: 0.6rem;width: 83%;
    background: #F0F4FF;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:#f0f4ff;
    padding-left: 0.6rem;
}
.ScanRecord_Top .ScanRecord_date{
  margin-left: 1rem;/* margin-top:0.5rem; */
}
.ScanRecord_Top .ScanRecord_date label{
  float: left;margin-right: 0.5rem;
}
.ScanRecord_Top .ScanRecord_date span.week{background:#F0F4FF;border-radius: 0.6rem;width:11%;display: block;float: left;color:#7f7f80;text-align:center;margin-right:0.5rem;padding-top: 0.06rem;}
.ScanRecord_Top .ScanRecord_date span{float: left;padding:0rem 0.6rem;line-height:1.5;height: 1.5; margin-right:0.1rem;border-radius:1rem;background-color: #f3f6ff;color:#868689;}
.ScanRecord_Top .ScanRecord_date span.selected{background-color: #b1d0fe;color:#599cfd;}
.ScanRecord_Top .ScanRecord_date .uercustom {width:14%; margin:0;float: right;margin-right: 1rem; padding-right: 1rem;background-image: url(https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_key/icon-customerdown.png);background-repeat: no-repeat;background-size: 0.6rem;background-position: 92% center;}
.ScanRecord_Top .ScanRecord_date .headerTimeSearch{position:absolute;top:3.8rem;right:0rem;background-position: 96% center;background-color: #fff;margin-right:1rem;}
.ScanRecord_Top .ScanRecord_date .headerTimeSearch i{display: block;font-size: 0.7rem;font-style: normal;}


.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: #F0F4FF; padding-right: 0.5rem; 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{
  margin: 0.6rem 6%;height: 3rem;line-height: 3rem;border-bottom: 1px solid #E6E6E6;
}
.ScanRecord_Main .ScanRecord_Title_Left{float:left;color:#67A2FC;font-weight: bold;}
.ScanRecord_Main .ScanRecord_Date_Right{float:right;text-align: right;width: 6rem;  line-height: 1.2rem; height: 1.2rem;margin-top: 1rem;margin-right:0.4rem;}
.ScanRecord_Main .ScanRecord_Title_Left span{padding: 0;padding-left: 1.3rem;padding-top:0.3rem;padding-left: 1.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 ul{list-style-type: none;margin: 0px;padding: 0 6%;}
.ScanRecord_List li{padding:0 0.4rem;border-bottom: 1px solid #E6E6E6;margin-bottom: 0.5rem;display: flex;}
.ScanRecord_List li .date{color:#9A9A9A;}
.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;}

.mint-popup-bottom{width:100%;}
.picker-toolbar-title .btnHeader{display: flex;}
.picker-toolbar-title .btnHeader .button{width: 50%;text-align: center;}
.picker-toolbar-title .btnHeader button{flex: 1;}
.picker-toolbar-title .searchHearderNew{width: 80%;max-width:37.5rem;position: relative;margin: 0 auto;background-color:#f3f6ff;border-radius: 0.8rem;}
.picker-toolbar-title .searchHearderNew 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 .searchHearderNew 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-toolbar-title .setDateHearder{display: flex;}
.picker-toolbar-title .setDateHearder div{flex: 1;text-align: left;padding: 0.4rem 0;margin-left: 2%;}
.picker-toolbar-title .setDateHearder div p{margin:0;}
.picker-toolbar-title .setDateHearder div p:nth-of-type(1){font-size: 0.76rem;color:#868689;}
.picker-toolbar-title .setDateHearder div p:nth-last-of-type(1){padding:0.8rem 0;font-weight: 600;}
.picker-toolbar-title .setDateHearder div p.selected{border-bottom: 2px solid #3b8afc;}
</style>
<style>
.mint-popup-bottom{width:100%;}
.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">
            <label>时间:</label>
            <div class="date_search" 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-if="!isShow.isDateSearch">自定义</span>
              <span  class="uercustom headerTimeSearch"  @click="WeekSelect($event,'custom')" v-if="isShow.isDateSearch">
                  <i v-html='dateTimeObj.dateTimeValNew1'></i>
                  <i v-html='dateTimeObj.dateTimeValNew2'></i>
              </span>
            </div>
            <div class="date_search" v-show="customshow">
              <input type="text" id="startdate" class="input start" v-model="SearchValue.StartDate" @click="selectDate1"/>
              <span class="to">至</span>
              <input type="text" id="enddate" class="input end"  v-model="SearchValue.EndDate" @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>扫码记录</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-show="nodatashow">你还没有扫码记录！</div>
        <div class="ScanRecord_List">
            <ul>
              <li v-for="item in DataList" :key="item.Id">
                <div class="ScanRecord_List_Left">
                  <p class="name" v-html="item.ProductName"></p>
                  <p class="date" v-html="item.QueryTime"></p>
                </div>
                <div class="ScanRecord_List_Right">
                  <p v-html="item.AwardsName==''?'无':item.AwardsName"></p>
                </div>
              </li>
            </ul>
        </div>
    </div>
     <mt-popup class="productDropPopu" v-model="popupVisible" popup-transition="popup-fade" closeOnClickModal="true" position="bottom">
            <mt-picker :slots="slots1" ref="picker0" 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" style="width:20%;line-height:2rem; height:2rem;" @click="HandelConfirm()">确定</el-button>
                </div> -->
                <div class="picker-toolbar btnHeader">
                  <span class="mint-datetime-action mint-datetime-cancel" @click="popupVisible =!popupVisible">取消</span>
                  <span class="mint-datetime-action mint-datetime-confirm" @click="HandelConfirm()">确定</span>
                </div>
                <div class="searchHearderNew">
                  <input class="text-gray" type="text" placeholder="请输入商品名称搜索" v-model="SearchValue.ProductName"/>
                  <span @click="SearchTo"> </span>
                </div>
              </div>
            </mt-picker>
    </mt-popup>


    <mt-popup v-model="isShow.isDateTimeShow" popup-transition="popup-fade" closeOnClickModal="true" position="bottom">
      <mt-picker :slots="dateTimeObj.slots1" ref="picker1" value-key="dateTimeStart" :show-toolbar="true"  v-show="isShow.datetimed1" v-on:change="onDateChange1">
          <div class="picker-toolbar-title">
            <div class="btnHeader">
              <el-button type="text" name="button" class="button" v-on:click="setDateCancel">取消</el-button>
              <el-button type="text" name="button" class="button" v-on:click="setDateOk">确定</el-button>
            </div>
            <div class="setDateHearder">
              <div>
                <p>开始时间</p>
                <p class="selected" v-html='dateTimeObj.dateTimeVal1?dateTimeObj.dateTimeVal1:"请选择"'></p>
              </div>
              <div @click="selectedDateTab(2)">
                <p>结束时间</p>
                <p v-html='dateTimeObj.dateTimeVal2?dateTimeObj.dateTimeVal2:"请选择"'></p>
              </div>
            </div>
          </div>
      </mt-picker>
      <mt-picker :slots="dateTimeObj.slots2" ref="picker2" value-key="dateTimeEnd" :show-toolbar="true"  v-show="isShow.datetimed2" v-on:change="onDateChange2">
          <div class="picker-toolbar-title">
            <div class="btnHeader">
              <el-button type="text" name="button" class="button" v-on:click="setDateCancel">取消</el-button>
              <el-button type="text" name="button" class="button" v-on:click="setDateOk">确定</el-button>
            </div>
            <div class="setDateHearder">
              <div @click="selectedDateTab(1)">
                <p>开始时间</p>
                <p v-html='dateTimeObj.dateTimeVal1?dateTimeObj.dateTimeVal1:"请选择"'></p>
              </div>
              <div>
                <p>结束时间</p>
                <p class="selected" v-html='dateTimeObj.dateTimeVal2?dateTimeObj.dateTimeVal2:"请选择"'></p>
              </div>
            </div>
          </div>
      </mt-picker>
    </mt-popup>
       <ReturnHome ref="returnhome"></ReturnHome>
  </div>
</template>
<script>
import Vue from 'vue';
import ElementUI from "element-ui";
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";
import ReturnHome from "@/components/channel/temp001/ReturnHome";
Vue.component(DatetimePicker.name, DatetimePicker);
Vue.use(ElementUI);
export default {
  name: "Key_ScanRecord",
  components: {ReturnHome},
  provide(){       
     return{           
        goPage:this.goPage       
     }   
  },
  props: ["comp", "cfg", "selectedPage"],
  data() {
    var that=this;
    return {
      isShow:{
        isDateSearch:false,
        isDateTimeShow:false,
        datetimed1:false,
        datetimed2:false
      },
      dateTimeObj:{
        dateTimeVal1:"",
        dateTimeVal2:"",
        dateTimeValNew1:"",
        dateTimeValNew2:"",
        slots1:[{
            flex: 1,
            values: [],
            className: 'slot1',
            textAlign: 'center',
            defaultIndex:1
          }, {
            flex: 1,
            values: [],
            className: 'slot2',
            textAlign: 'center',
            defaultIndex:1
          }, {
            flex: 1,
            values: [],
            className: 'slot3',
            textAlign: 'center',
            defaultIndex:1
          }],
        slots2:[
          {
            flex: 1,
            values: [],
            className: 'slot1',
            textAlign: 'center',
            defaultIndex:1
          }, {
            flex: 1,
            values: [],
            className: 'slot2',
            textAlign: 'center',
            defaultIndex:1
          }, {
            flex: 1,
            values: [],
            className: 'slot3',
            textAlign: 'center',
            defaultIndex:1
          }
        ],
        dateTimeValOld1:[],
        dateTimeValOld2:[],
        isDateTime1:false,
        isDateTime2:false
      },
      DefaultValue: new Date(),
      popupVisible: false,
      ProductName:"全部",
      ProductId:"",
      SearchValue:{
        ProductName:"",
        StartDate:"",
        EndDate:""
      },
      showToolbar1: true,
      slots1: [{
          values:[]
      }],
      customshow:false, 
      nodatashow:false,
      ScanTotal:0,
      vh:false,
      DataList:[],
      ProductDataList:[]
    };
  },
  methods: {
    goPage(pagetype){
        this.$parent.changeSelectedPage(pagetype);
    },
     //显示
    setDateTimeShow:function(){
      this.$set(this.isShow,'isDateTimeShow',true);
      this.$set(this.isShow,'datetimed1',true);
      this.$set(this.isShow,'datetimed2',false);
      this.$set(this.dateTimeObj,'dateTimeValOld1',[this.dateTimeObj.slots1[0].defaultIndex,this.dateTimeObj.slots1[1].defaultIndex,this.dateTimeObj.slots1[2].defaultIndex]);
      this.$set(this.dateTimeObj,'dateTimeValOld2',[this.dateTimeObj.slots2[0].defaultIndex,this.dateTimeObj.slots2[1].defaultIndex,this.dateTimeObj.slots2[2].defaultIndex]);
    },
    //开始/结束
    selectedDateTab:function(type){
      if(type==1){
        this.$set(this.isShow,'datetimed1',true);
        this.$set(this.isShow,'datetimed2',false);
      }else{
        this.$set(this.isShow,'datetimed1',false);
        this.$set(this.isShow,'datetimed2',true);
      }
    },
    //取消
    setDateCancel:function(){
      this.$set(this.isShow,'isDateTimeShow',false);
      this.$set(this.isShow,'datetimed1',false);
      this.$set(this.isShow,'datetimed2',false);
      this.$set(this.dateTimeObj.slots1[0],'defaultIndex',this.dateTimeObj.dateTimeValOld1[0]);
      this.$set(this.dateTimeObj.slots1[1],'defaultIndex',this.dateTimeObj.dateTimeValOld1[1]);
      this.$set(this.dateTimeObj.slots1[2],'defaultIndex',this.dateTimeObj.dateTimeValOld1[2]);
      this.$set(this.dateTimeObj.slots2[0],'defaultIndex',this.dateTimeObj.dateTimeValOld2[0]);
      this.$set(this.dateTimeObj.slots2[1],'defaultIndex',this.dateTimeObj.dateTimeValOld2[1]);
      this.$set(this.dateTimeObj.slots2[2],'defaultIndex',this.dateTimeObj.dateTimeValOld2[2]);
    },
    //确定
    setDateOk:function(){
    
      var startdate=this.dateTimeObj.dateTimeVal1;
      var enddate=this.dateTimeObj.dateTimeVal2;
      if(Date.parse(startdate.replace(/\./g,"-"))<=Date.parse(enddate.replace(/\./g,"-")))
      {  
        $(".ScanRecord_date span").removeClass("selected");
        this.$set(this.isShow,'isDateSearch',true);
        this.$set(this.isShow,'isDateTimeShow',false);
        this.$set(this.dateTimeObj,'dateTimeValNew1',this.dateTimeObj.dateTimeVal1);
        this.$set(this.dateTimeObj,'dateTimeValNew2',this.dateTimeObj.dateTimeVal2);
        this.LoadList(startdate.replace(/\./g,"-"),enddate.replace(/\./g,"-"),this.ProductId)
      }
      else
      {
        Toast("开始时间不能大于结束时间！");return false;
      }
    },
    onDateChange1:function(picker, values,column) {
      if(this.dateTimeObj.isDateTime1){
        values[0]=this.dateTimeObj.slots1[0].values[this.dateTimeObj.slots1[0].defaultIndex];
        values[1]=this.dateTimeObj.slots1[1].values[this.dateTimeObj.slots1[1].defaultIndex];
        values[2]=this.dateTimeObj.slots1[2].values[this.dateTimeObj.slots1[2].defaultIndex];
        this.$set(this.dateTimeObj,'isDateTime1',false);
      }else{
        this.$set(this.dateTimeObj.slots1[2],'defaultIndex',(parseInt(values[2])-1));
        this.$set(this.dateTimeObj.slots1[1],'defaultIndex',(parseInt(values[1])-1));
        for(var i=0;i<this.dateTimeObj.slots1[0].values.length;i++){
          if(this.dateTimeObj.slots1[0].values[i].toString()==values[0].toString()){
            this.$set(this.dateTimeObj.slots1[0],'defaultIndex',i);
          }
        }
      }
      var nowDateLast=new Date(values[0], values[1], 0).getDate();
      var arr=this.dateTimeObj.slots1[2].values;
      var vLen=arr.length;
      var index=Math.abs(nowDateLast-vLen);
      if(index!=0){
        if(vLen<nowDateLast){
          for(var i=1;i<=index;i++){
            arr.push(vLen+i);
          }
        }else if(vLen>nowDateLast){
          arr.splice(nowDateLast,index);
          if(parseInt(values[2])>nowDateLast){
            this.$set(this.dateTimeObj.slots1[2],'defaultIndex',(nowDateLast-1));
            this.$set(this.dateTimeObj.slots1[1],'defaultIndex',(parseInt(values[1])-1));
            for(var i=0;i<this.dateTimeObj.slots1[0].values.length;i++){
              if(this.dateTimeObj.slots1[0].values[i].toString()==values[0].toString()){
                this.$set(this.dateTimeObj.slots1[0],'defaultIndex',i);
              }
            }
            values[2]=nowDateLast;
            this.$set(this.dateTimeObj,'isDateTime1',true);
          }
        }
        this.$set(this.dateTimeObj.slots1[2],'values',arr);
      }
      this.$set(this.dateTimeObj,'dateTimeVal1',values[0]+'.'+values[1]+'.'+values[2]);
    },
    onDateChange2:function(picker, values,column) {
      if(this.dateTimeObj.isDateTime2){
        values[0]=this.dateTimeObj.slots2[0].values[this.dateTimeObj.slots2[0].defaultIndex];
        values[1]=this.dateTimeObj.slots2[1].values[this.dateTimeObj.slots2[1].defaultIndex];
        values[2]=this.dateTimeObj.slots2[2].values[this.dateTimeObj.slots2[2].defaultIndex];
        this.$set(this.dateTimeObj,'isDateTime2',false);
      }else{
        this.$set(this.dateTimeObj.slots2[2],'defaultIndex',(parseInt(values[2])-1));
        this.$set(this.dateTimeObj.slots2[1],'defaultIndex',(parseInt(values[1])-1));
        for(var i=0;i<this.dateTimeObj.slots2[0].values.length;i++){
          if(this.dateTimeObj.slots2[0].values[i].toString()==values[0].toString()){
            this.$set(this.dateTimeObj.slots2[0],'defaultIndex',i);
          }
        }
      }
      var nowDateLast=new Date(values[0], values[1], 0).getDate();
      var arr=this.dateTimeObj.slots2[2].values;
      var vLen=arr.length;
      var index=Math.abs(nowDateLast-vLen);
      if(index!=0){
        if(vLen<nowDateLast){
          for(var i=1;i<=index;i++){
            arr.push(vLen+i);
          }
        }else if(vLen>nowDateLast){
          arr.splice(nowDateLast,index);
          if(parseInt(values[2])>nowDateLast){
            this.$set(this.dateTimeObj.slots2[2],'defaultIndex',(nowDateLast-1));
            this.$set(this.dateTimeObj.slots2[1],'defaultIndex',(parseInt(values[1])-1));
            for(var i=0;i<this.dateTimeObj.slots2[0].values.length;i++){
              if(this.dateTimeObj.slots2[0].values[i].toString()==values[0].toString()){
                this.$set(this.dateTimeObj.slots2[0],'defaultIndex',i);
              }
            }
            values[2]=nowDateLast;
            this.$set(this.dateTimeObj,'isDateTime2',true);
          }
        }
        this.$set(this.dateTimeObj.slots2[2],'values',arr);
      }
      this.$set(this.dateTimeObj,'dateTimeVal2',values[0]+'.'+values[1]+'.'+values[2]);
    },
    getYearMM:function(){
      var dataNow=new Date();
      var yearNow=dataNow.getFullYear();
      var nowMonth=dataNow.getMonth()+1;
      var nowDay=dataNow.getDate();
      var yearArr=[yearNow];
      for(var i=1;i<=20;i++){
        yearArr.unshift((yearNow-i).toString());
      }
      this.$set(this.dateTimeObj.slots1[0],'values',yearArr);
      this.$set(this.dateTimeObj.slots2[0],'values',yearArr);
      this.$set(this.dateTimeObj.slots1[0],'defaultIndex',20);
      this.$set(this.dateTimeObj.slots2[0],'defaultIndex',20);
      var MM=[];
      for(var j=1;j<=12;j++){
        if(j<10){
          MM.push('0'+j);
        }else{
          MM.push(j.toString());
        }
      }
      this.$set(this.dateTimeObj.slots1[1],'values',MM);
      this.$set(this.dateTimeObj.slots2[1],'values',MM);
      this.$set(this.dateTimeObj.slots1[1],'defaultIndex',nowMonth-1);
      this.$set(this.dateTimeObj.slots2[1],'defaultIndex',nowMonth-1);
      var nowDateLast=new Date(yearNow, nowMonth, 0).getDate();
      var DD=[];
      for(var e=1;e<=nowDateLast;e++){
        if(e<10){
          DD.push('0'+e);
        }else{
          DD.push(e.toString());
        }
      }
      this.$set(this.dateTimeObj.slots1[2],'values',DD);
      this.$set(this.dateTimeObj.slots2[2],'values',DD);
      this.$set(this.dateTimeObj.slots1[2],'defaultIndex',nowDay-1);
      this.$set(this.dateTimeObj.slots2[2],'defaultIndex',nowDay-1);
      this.$set(this.dateTimeObj,'dateTimeVal1',yearArr[20]+'.'+MM[nowMonth-1]+'.'+DD[nowDay-1]);
      this.$set(this.dateTimeObj,'dateTimeVal2',yearArr[20]+'.'+MM[nowMonth-1]+'.'+DD[nowDay-1]);
    },
    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.StartDate=that.GetCurrentMonth(date);
    },
    handleConfirm2(date) {
      var that = this;
     that.SearchValue.EndDate=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;
      
       switch(type)
       {
         case "week": $(e.target).addClass("selected").siblings().removeClass("selected");
           that.SearchValue.StartDate=DateOp.getWeekStartDate();
           that.SearchValue.EndDate=DateOp.getWeekEndDate();
           break;
         case "month": $(e.target).addClass("selected").siblings().removeClass("selected");
           that.SearchValue.StartDate=DateOp.getMonthStartDate();
           that.SearchValue.EndDate=DateOp.getMonthEndDate();
           break;
         case "year": $(e.target).addClass("selected").siblings().removeClass("selected");
           that.SearchValue.StartDate=DateOp.getYearStartDate();
           that.SearchValue.EndDate=DateOp.getYearEndDate();
           break;
         case "custom":
          that.$set(that.isShow,'isDateTimeShow',true);
          that.$set(that.isShow,'datetimed1',true);
          that.$set(that.isShow,'datetimed2',false);
          that.$set(that.dateTimeObj,'dateTimeValOld1',[that.dateTimeObj.slots1[0].defaultIndex,that.dateTimeObj.slots1[1].defaultIndex,that.dateTimeObj.slots1[2].defaultIndex]);
          that.$set(that.dateTimeObj,'dateTimeValOld2',[that.dateTimeObj.slots2[0].defaultIndex,that.dateTimeObj.slots2[1].defaultIndex,that.dateTimeObj.slots2[2].defaultIndex]);
   
           break;
       }

       if(type!="custom"){ that.isShow.isDateSearch=false;
         that.LoadList(that.SearchValue.StartDate,that.SearchValue.EndDate,that.ProductId);
       }
    },
    HandelConfirm(){
      var that=this;
      var currentobj=this.$refs.picker0.getValues()[0];
      that.ProductId=currentobj.PRODUCT_ID;
      that.ProductName=currentobj.PRODUCT_NAME;
      this.popupVisible =!this.popupVisible;
      that.LoadList(that.SearchValue.StartDate,that.SearchValue.EndDate,that.ProductId);
    },
    LoadList(StartTime,EndTime,ProductId) {
      if(new Date(StartTime)>new Date(EndTime))
      {
         alert("开始时间不能大于结束时间！");return false;
      }
      var that = this;
      var eno = that.sup8.context.enterpriseno;
      var url = "/channel/GetProductSacnCodeRecord";
      var dataParams = {
        StartTime: StartTime,
        EndTime:EndTime,
        ProductId:ProductId,
        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.DataList = res.data.Rows;
          that.ScanTotal = res.data.Total;
          that.nodatashow=false;
          if(res.data.Total==0)
          {
            that.nodatashow=true;
          }
        }else
          {
              that.nodatashow=true;
          }
      };
      //请求后端
      channelHelper.CommonCallService(url, dataParams,  cbSuccess, cbError,  null, null );
    },
    LoadProductList(isSearch){
      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.ProductName,
        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) {
          var all=[{PRODUCT_ID:'',PRODUCT_NAME:'全部',PRODUCT_NO:''}];
          if (isSearch) {
            all=[];
          }
          that.slots1[0].values=all.concat(res.data.Rows);
        }
      };
      //请求后端
      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.LoadProductList();
    that.SearchValue.StartDate=DateOp.getWeekStartDate();
    that.SearchValue.EndDate=DateOp.getWeekEndDate();
    that.LoadList(that.SearchValue.StartDate,that.SearchValue.EndDate,that.ProductId);
    that.getYearMM();
  },
  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={
    //获得本周的开始日期
    getWeekStartDate:function() {
        var now = new Date(); //当前日期
        return DateOp.formatDate(now.getFullYear(), now.getMonth()+1, now.getDate() - now.getDay());
    },
    //获得本周的结束日期
    getWeekEndDate:function () {
        var now = new Date(); //当前日期
        return DateOp.formatDate(now.getFullYear(), now.getMonth()+1, now.getDate() + (6 - now.getDay()));
    },
    //获得本月的开始日期
    getMonthStartDate:function(){
        var now = new Date(); //当前日期
        return DateOp.formatDate(now.getFullYear(), now.getMonth()+1, 1);
    },
    //获得本月的结束日期
    getMonthEndDate: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 monthStartDate = new Date(now.getYear(), myMonth, 1);
        var monthEndDate = new Date(now.getYear(), myMonth + 1, 1);
        var days = (monthEndDate - monthStartDate)/(1000 * 60 * 60 * 24);
        return days;
    },
    //获得本年的开始日期
    getYearStartDate:function(){
        var date=new Date();
        return DateOp.formatDate(date.getFullYear(),1,1);
    },
    //获得本年的结束日期
    getYearEndDate: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>

