<style scoped>
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{overflow:hidden;_zoom:1;}
input{background:none;outline:none;border:0px;}
.text-gray{color:#717171;}
.text-orange{color:#eb7741;}
.text-danger{color:#c03546;}
.customerManager{position: relative;}
.headerCustomer{height:11rem;background-color: #f3f6ff;overflow: hidden;}
.headerModel{background-color: #fff;padding: 1rem 0;padding-bottom:0;}
.headerModel .headerSearch{border-radius: 1rem;padding:0.2rem 20%;background-color: #f3f6ff;margin:0 3%;margin-bottom: 1rem;}
.headerModel .headerSearch img{float:left;height: 1rem;margin-right: 0.2rem;}
.headerModel .headerSearch input{float:left;width:80%;text-align: center;}
.headerModel .headerBreadcrumb{display: flex;border-bottom:1px solid #E9E9E9;}
.headerModel .headerBreadcrumb div{flex:1;}
.headerModel .headerBreadcrumb div p{text-align: center;font-weight: 600;}
.headerModel .headerBreadcrumb div p.selected{color:#3b8afc;}
.headerModel .headerBreadcrumb div i{width:2rem;height: 0.18rem;display: block;margin:0 auto;}
.headerModel .headerBreadcrumb div i.selected{background-color:#3b8afc;}
.headerModel .headerTime{margin: 0 3%;position: relative;padding:0.8rem 0;}
.headerModel .headerTime span{float: left;padding: 0.2rem 0.7rem;/*line-height:1;*/margin-right:0.2rem;border-radius:1rem;background-color: #f3f6ff;color:#868689;}
.headerModel .headerTime span.selected{background-color: #b1d0fe;color:#599cfd;}
.headerModel .headerTime .headerTimeRight {margin:0;float: right;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;}
.headerModel .headerTime .headerTimeSearch{position:absolute;top:0.5rem;right:0rem;background-position: 96% center;background-color: #fff;}
.headerModel .headerTime .headerTimeSearch i{display: block;font-size: 0.7rem;font-style: normal;}
.middleModel{background-color: #f3f6ff;padding:0.6rem 4.5%;padding-top: 0.4rem;}
.middleModel .rightManager{float: right;}
.bottomModel{position:absolute;bottom:0;top: 0;width: 100%;margin-top: 10.6rem;margin-bottom:3.4rem;background-color: #f3f6ff;overflow-y: auto;}
.bottomModel .bottomItem{margin:0 3%;margin-bottom:0.6rem;background-color: #fff;border-radius: 0.4rem;display: flex;padding:1rem 2.4%;padding-bottom:0.6rem;}
.bottomModel .bottomItem .imgTop{width: 2.2rem;}
.bottomModel .bottomItem img{width:2.2rem;height:2.2rem;border-radius: 100%;}
.bottomModel .bottomItem .bottomInfo{flex:1;padding: 0 0.3rem;}
.bottomModel .bottomItem .bottomInfo h4{margin:0;margin-bottom:0.6rem;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 1;-webkit-box-orient: vertical;display: -webkit-box;word-wrap:break-word;word-break:break-all;}
.bottomModel .bottomItem .bottomInfo p{margin:0;margin-bottom:0.4rem;font-size: 0.7rem;color: #868689;}
.bottomModel .bottomItem .bottomInfo .valHidden{overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 1;-webkit-box-orient: vertical;display: -webkit-box;height: 0.9rem;}
.bottomModel .bottomItem .bottomInfo p span{margin-left: 2px;}
.bottomModel .bottomItem .bottomTel{position:relative;}
.bottomModel .bottomItem .bottomTel i.btnCancel{position: absolute;background: url(https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_key/icon-btn-cancel.png) no-repeat center center;display: inline-block;width:1rem;height:1rem;background-size: 100%;right:0;top:0;top: -0.6rem;}
.bottomModel .bottomItem .bottomTel span{margin-top: 1rem;border-radius: 1rem;padding: 0.1rem 0.4rem;display:block;background-color: #3b8afc;color:#fff;font-size: 0.7rem;}
.bottomModel .bottomItem .bottomTel i.btnDowns{display: block;margin:0 auto;margin-top:0.9rem;background: url(https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_key/icon-customerdown.png) no-repeat center 0.1rem;height:2rem;width:2rem;}
.bottomModel .bottomItem .bottomTel i.btnUp{background-image: url(https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_key/icon-customerup.png);}
.mint-button{width:94%;margin:0 auto;margin-top:0.4rem;background-color:#3A8AFB;border-radius: 0.2rem;}
.btnContent{height:3.4rem;background-color:#F3F6FF;position: absolute;bottom:0;width: 100%;}
.mask {position: absolute;top: 0;left: 0;height: 100%;width: 100%;background: rgba(0, 0, 0, 0.5);}
.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 .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;}
.memberRecruitment{padding:0;}
.memberRecruitmentHeader{display: flex;padding: 0 4%;padding-top: 1.2rem;}
.memberRecruitmentHeader div{flex:1;line-height: 1;}
.memberRecruitmentHeader div.memberRecruitmentHeaderL{padding:0 0.4rem;padding-left:1.2rem;padding-top:0.2rem;text-align: left;background: url(https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_key/icon-addMember.png) no-repeat left top;background-size: 1rem 1.0745rem;}
.memberRecruitmentHeader div.memberRecruitmentHeaderR{text-align: right;}
.memberRecruitmentHeader div.memberRecruitmentHeaderR span{display: inline-block;padding:0.14rem 0;padding-left:1.2rem;background: url(https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_key/icon-list.png) no-repeat left top;background-size: 1rem 1.0745rem;}
.memberRecruitmentLink {display: flex;padding:1rem 14%;padding-top:1.2rem;border-bottom: 0.6rem solid #f3f6ff;}
.memberRecruitmentLink div{flex:1;text-align: center;}
.memberRecruitmentLink div img{height:4rem;width:4rem;display: block;margin:0 auto;}
.memberRecruitmentCancel{text-align: center;padding: 0.8rem 0;}
.nodata {margin:0 auto;color:#616161;font-size:0.7rem;padding-top:12rem;text-align: center;background: url(http://image.supercarrier8.com/h5_key/icon_nodataEmployee.png) no-repeat center center;background-size: 10rem;}
.nodata.nodataTip{background-image: url(http://image.supercarrier8.com/h5_key/icon-nodataMessage.png);}
.addClerkPopu{position: absolute;text-align: center;top:50%;margin-top:-10rem;min-height: 15.4rem;width: 84%;background: rgba(255, 255, 255, 1);margin-left:8%;border-radius: 0.2rem;}
.addClerkPopu h4{text-align: left;padding-left: 3%;text-indent: 1.3rem;background: url(http://image.supercarrier8.com/h5_key/icon-QRCodeMember.png) no-repeat 3% top;background-size:1.2rem 1.2rem;}
.addClerkPopu .closeImg{width: 2rem;height: 2rem;position: absolute;bottom: -3.2rem;margin-left:-1rem;left: 50%;}
.addClerkPopu p{width:10.2rem;text-align: right; margin:0 auto;margin-bottom:1rem;color:#3A8AFB;}
.qrCode{padding:0.8rem 0;border-top:0.0625rem solid #f5f5f5; }
.memberPoster{width:100%;height:100%;position: relative;}
.memberPoster img{width:100%;height:100%;display: block;}
.memberPoster .posterContent{width: 84%;position: absolute;bottom:10%;left:7%;text-align: center;}
.memberPoster .posterContent .qrCode{border-width: 0;width:100px;background-color:#fff ;margin: 0 auto;padding: 5px;}
.memberPoster .posterContent .strong{font-weight: 600;}
/* .memberPoster .closePoster{width: 2rem;height: 2rem;position: absolute;top:0;right:0;} */
</style>
<style>
.picker-toolbar{height: auto;}
.qrCode img{margin: 0 auto;}
</style>
<template>     
  <div class="jfBaseSize customerManager" v-cloak v-bind:style="isShow.vh?'height:100vh':'height: 100%;'"> 
    <div class="headerCustomer">
      <div class="headerModel">
        <div class="headerSearch clearfix">
          <form action='javascript:void(0)'>
            <img src="http://image.supercarrier8.com/h5_key/icon-search.png" alt="">
            <input type="search" placeholder="请输入手机号" v-model="searchRequest.Mobile" @key.13="getSearchList" @input="getSearchList"/>
          </form>
        </div>
        <div class="headerBreadcrumb">
          <div>
            <p v-bind:class="searchRequest.Type==0?'selected':''" v-on:click="changeCustomer(0)">全部客户</p>
            <i v-bind:class="searchRequest.Type==0?'selected':''"></i>
          </div>
          <div>
            <p v-bind:class="searchRequest.Type==1?'selected':''" v-on:click="changeCustomer(1)">有效客户</p>
            <i v-bind:class="searchRequest.Type==1?'selected':''"></i>
          </div>
          <div v-if="searchRequest.EntranceId!=0&&setResponse.RePurchaseTip==1">
            <p v-bind:class="searchRequest.Type==2?'selected':''" v-on:click="changeCustomer(2)">待提醒客户</p>
            <i v-bind:class="searchRequest.Type==2?'selected':''"></i>
          </div>
          <div>
            <p v-bind:class="searchRequest.Type==3?'selected':''" v-on:click="changeCustomer(3)">失效客户</p>
            <i v-bind:class="searchRequest.Type==3?'selected':''"></i>
          </div>
        </div>
        <div class="headerTime clearfix" v-if="searchRequest.Type!=2">
          <span v-bind:class="searchRequest.dateType==0?'selected':''" v-on:click="changeTime(0)">全部</span>
          <span v-bind:class="searchRequest.dateType==1?'selected':''" v-on:click="changeTime(1)">今日</span>
          <span v-bind:class="searchRequest.dateType==2?'selected':''" v-on:click="changeTime(2)">昨日</span>
          <span v-bind:class="searchRequest.dateType==3?'selected':''" v-on:click="changeTime(3)">近7日</span>
          <span class="headerTimeRight" v-on:click="setDateTimeShow" v-if="!isShow.isDateSearch">自定义</span>
          <span class="headerTimeRight headerTimeSearch" v-on:click="setDateTimeShow" v-if="isShow.isDateSearch">
            <i v-html='dateTimeObj.dateTimeVal1'></i>
            <i v-html='dateTimeObj.dateTimeVal2'></i>
          </span>
        </div>
        <div class="headerTime clearfix" v-else>
          <!-- <span v-bind:class="searchRequest.dateType==0?'selected':''" v-on:click="changeTime(0)">全部</span> -->
        </div>
      </div>
      <div class="middleModel" v-if="responseResult.Total>0">
        共<span class="text-orange" v-html="responseResult.Total"></span>个客户
        <span class="rightManager" v-if='searchRequest.Type==2&&responseResult.Total' v-html="isShow.isRemindManager?'完成':'管理'" v-on:click='isShow.isRemindManager=!isShow.isRemindManager'></span>
      </div>
    </div>
    <div v-if="responseResult.Total>0">
      <div class="bottomModel" v-if='searchRequest.Type!=2'>
        <div class='bottomItem' v-for="item in responseResult.Rows" v-bind:key="item.ID" v-on:click="goDetails(item.ID)">
          <div class="imgTop">
            <img v-bind:src="item.HeadImage?item.HeadImage:'http://image.supercarrier8.com/h5_key/icon_headDefault.png'" alt="">
          </div>
          <div class="bottomInfo">
            <h4 v-html='item.NickName'></h4>
            <p>手机号:<span v-html='item.Mobile?item.Mobile:"-"'></span></p>
            <p>绑定时间:<span v-html='item.BindDateTime?item.BindDateTime:"-"'></span></p>
            <p>最后扫码时间:<span v-html='item.LastScanCodeDateTime?item.LastScanCodeDateTime:"-"'></span></p>
          </div>
          <div class="bottomTel" v-if="item.Mobile">
            <span v-on:click.stop="goTel(item.Mobile)">立即联系</span>
          </div>
        </div>
      </div>
      <div class="bottomModel" v-else>
        <div class='bottomItem' v-for="(item,itemIndex) in responseResult.Rows" v-bind:key="item.ID" v-on:click="goDetails(item.ID)">
          <div class="imgTop">
            <img v-bind:src="item.HeadImage?item.HeadImage:'http://image.supercarrier8.com/h5_key/icon_headDefault.png'" alt="">
          </div>
          <div class="bottomInfo">
            <h4 v-html='item.NickName'></h4>
            <p>手机号:<span v-html='item.Mobile?item.Mobile:"-"'></span></p>
            <div v-if="!item.listDetailsShow">
              <p class="valHidden">购买商品:<span v-html='item.NoticProductList&&item.NoticProductList.length>0?(item.NoticProductList[0].ProductName?item.NoticProductList[0].ProductName:"-"):"-"'></span></p>
              <p>购买时间:<span v-html='item.NoticProductList&&item.NoticProductList.length>0?(item.NoticProductList[0].ScanCodeDateTime?item.NoticProductList[0].ScanCodeDateTime:"-"):"-"'></span></p>
              <p>距离到期时间:<span v-html='item.NoticProductList&&item.NoticProductList.length>0?(item.NoticProductList[0].ExpireDay?item.NoticProductList[0].ExpireDay+"天":"-"):"-"'></span></p>
            </div>
            <div v-for="(obj,index) in item.NoticProductList" v-bind:key="index" v-else>
              <p class="valHidden">购买商品:<span v-html='obj.ProductName?obj.ProductName:"-"'></span></p>
              <p>购买时间:<span v-html='obj.ScanCodeDateTime?obj.ScanCodeDateTime:"-"'></span></p>
              <p>距离到期时间:<span v-html='obj.ExpireDay?obj.ExpireDay+"天":"-"'></span></p>
            </div>
          </div>
          <div class="bottomTel">
            <i class="btnCancel" v-on:click.stop="SetCancelNotic(itemIndex)" v-if="isShow.isRemindManager"></i>
            <span v-on:click.stop="goTel(item.Mobile)" v-if="item.Mobile">立即联系</span>
            <i class="btnDowns" v-if="(!item.listDetailsShow)&&item.NoticProductList&&item.NoticProductList.length>1" v-on:click.stop="pullDown(itemIndex)"></i>
            <i class="btnDowns btnUp" v-if="item.listDetailsShow&&item.NoticProductList&&item.NoticProductList.length>1" v-on:click.stop="pullDown(itemIndex)"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="bottomModel" v-else-if='searchRequest.Type!=2'>
      <div class="nodata">当前没有客户!</div>
    </div>
    <div class="bottomModel" v-else>
      <div class="nodata nodataTip">您还没有待提醒客户!</div>
    </div>
    <div class="btnContent" >
      <mt-button class="btnAddStore" type="danger" size="large" v-on:click="addMember" v-if="setMemberResponse.openObj[searchRequest.EntranceId]">会员招募</mt-button>
    </div>
    <div class="mask" v-show="isShow.IsshowMask"></div>
    <mt-popup v-model="isShow.isDateTimeShow" popup-transition="popup-fade" v-bind:closeOnClickModal="isShow.iscloseOnClickModal" position="bottom">
      <mt-picker :slots="dateTimeObj.slots1" ref="picker1" value-key="dateTimeStart" :show-toolbar="true" style="width:100%;" v-show="isShow.datetimed1" v-on:change="onDateChange1">
          <div class="picker-toolbar-title">
            <div class="btnHeader">
              <el-button type="text" class="button" v-on:click="setDateCancel">取消</el-button>
              <el-button type="text" 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 v-on: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" style="width:100%;" v-show="isShow.datetimed2" v-on:change="onDateChange2">
          <div class="picker-toolbar-title">
            <div class="btnHeader">
              <el-button type="text" class="button" v-on:click="setDateCancel">取消</el-button>
              <el-button type="text" class="button" v-on:click="setDateOk">确定</el-button>
            </div>
            <div class="setDateHearder">
              <div v-on: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>
    <mt-popup v-model="isShow.isMemberShow" popup-transition="popup-fade" v-bind:closeOnClickModal="isShow.iscloseOnClickModal" position="bottom" style="width:100%;">
        <div class="memberRecruitment">
          <div class="memberRecruitmentHeader">
            <div class="memberRecruitmentHeaderL">选择邀请方式:</div>
            <div class="memberRecruitmentHeaderR" v-show="setMemberResponse.IsOpen==1" v-on:click="goPage('K_Record')"><span>邀请转化记录</span></div>
          </div>
          <div class="memberRecruitmentLink">
            <div id="copyBtn" ref='copyBtn' v-on:click="copyText($event)">
              <img src="https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_key/icon-link.png" alt="">
              <p>链接邀请</p>
            </div>
            <div v-on:click="linkQRCode">
              <img src="https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_key/icon-qrCode.png" alt="">
              <p>二维码邀请</p>
            </div>
            <div v-on:click="pasterQRCode">
              <img src="https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_key/icon-poster.png" alt="">
              <p>海报邀请</p>
            </div>
          </div>
          <div class="memberRecruitmentCancel" v-on:click="cancelMember">
            取消
          </div>
        </div>
    </mt-popup>
    <mt-popup v-model="isShow.isMemberCodeShow" popup-transition="popup-fade" v-bind:closeOnClickModal="isShow.iscloseOnClickModal" style="width:100%;">
      <div class="addClerkPopu">
        <h4>扫码注册成为会员</h4><!-- icon-refresh.png -->
        <div id="qrCode" ref="qrCodeDiv" class="qrCode"></div>
        <p>加入会员享更多专属特权！</p>
        <img class="closeImg" src="http://image.supercarrier8.com/h5_key/icon-close-white.png" alt="close" @click="closeMember"> 
      </div>
    </mt-popup>
    <mt-popup v-model="isShow.isMemberPosterShow" popup-transition="popup-fade" v-bind:closeOnClickModal="isShow.iscloseOnClickModal" style="max-width: 540px;width:100%;height:100%;">
      <div class="memberPoster" v-on:click="closeMember">
        <img v-bind:src="setMemberResponse.GraphicValue" alt="">
        <div class="posterContent">
          <div id="qrCodePoster" ref="qrCodePosterDiv" class="qrCode"></div>
          <p class="strong">扫码立即领取注册好礼</p>
          <p>截图保存图片，推荐好友注册</p>
        </div>
      </div>
    </mt-popup>

      <ReturnHome ref="returnhome"></ReturnHome>
  </div>
</template>
<script>
import Vue from 'vue';
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import { Toast,DatetimePicker,Indicator,Picker,MessageBox } from 'mint-ui';
import channelHelper from "@/assets/js/channelHelper.js";
import { base64 } from "@/assets/js/cryptoHelper";
import { debug } from 'util';

import '@/assets/js/libs/js.cookie';
import utils from "@/assets/js/utils.js";
import QRCode from 'qrcodejs2';
import Clipboard from 'clipboard';
Vue.use(ElementUI);
import ReturnHome from "@/components/channel/temp001/ReturnHome";
export default {
  name: "Key_CustomerList",
  components: {
    ElementUI,ReturnHome
  },
  provide(){       
     return{           
        goPage:this.goPage       
     }   
  },
  props: ["comp", "cfg", "selectedPage"],
  data() {
    return {
      isShow:{
        vh:true,
        iscloseOnClickModal:false,
        isDateTimeShow:false,
        datetimed1:false,
        datetimed2:false,
        isDateSearch:false,
        isRemindManager:false,
        IsshowMask:false,
        isMemberShow:false,
        isMemberCodeShow:false,
        isMemberPosterShow:false,
        isRequestLimit:false,
        isRequestLimitOk:false,
        isCopyInit:true,
        isSearchOk:true,
      },
      dateTimeObj:{
        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
          }
        ],
        dateTimeVal1:'',
        dateTimeVal2:'',
        dateTimeValOld1:[],
        dateTimeValOld2:[],
        isDateTime1:false,
        isDateTime2:false,
      },
      searchRequest:{
        Mobile:'',
        Type:0,
        BeginTime:'',
        EndTime:'',
        Offset:0,
        Limit:100,
        EntranceId:this.sup8.context.entranceid,
        EnterpriseNo:this.sup8.context.enterpriseno,
        UserToken:channelHelper.GetUserToken(),
        LanguageType:"zh-cn",
        dateType:0,
      },
      setResponse:{},
      responseResult:{
        Rows:[],
        Total:0,
      },
      setMemberResponse:{
        openObj:{},
        url:'',
      },
      CheckRecommendLimit:'',
    }
  },
  methods: {
    goPage(pagetype){
        this.$parent.changeSelectedPage(pagetype);
    },
    goDetails(id){
      sessionStorage.setItem('Key_CustomerList_DetailID',id);
      this.goPage("K_CView");
    },
    goTel(Mobile){
      if(Mobile){
        window.location.href = 'tel://'+Mobile;
      }
    },
    //配置获取
    GetCustomerSetting(){
      var that=this;
      var url = "/channel/GetCustomerSetting";
      var dataParams = that.searchRequest;
      Indicator.open();
      var cbSuccess = function(res){
        if (res.flag) {
          var data=res.data;
          that.$set(that,'setResponse',data);
        }else
        { 
            Toast(res.msg);
        }
        Indicator.close();
      };
      var cbError = function(jqXHR, textStatus, errorThrown){
        Toast(jqXHR.responseText);
      };
      //请求后端
      channelHelper.CommonCallService(url,dataParams,cbSuccess,cbError,null,null);
    },
    getSearchList(){
      var that=this;
      if(that.isShow.isSearchOk){
        that.$set(that.isShow,'isSearchOk',false);
        setTimeout(() => {
          that.$set(that.isShow,'isSearchOk',true);
          that.GetCustomerDataList();
        }, 500);
      }
    },
    //列表获取
    GetCustomerDataList(){
      var that=this; 
      var url = "/channel/GetCustomerDataList";
      if(that.searchRequest.Mobile){
        var reg=/^(1{1}[0-9]{10})|([0-9]{1,10})$/;
        if(!reg.test(that.searchRequest.Mobile)){
          Toast('仅限输入手机号数字');
          return;
        }
      }
      var dataParams = that.searchRequest;
      if(dataParams.BeginTime&&dataParams.BeginTime.length==10){
        dataParams.BeginTime=dataParams.BeginTime+' 00:00:00';
      }
      if(dataParams.EndTime&&dataParams.EndTime.length==10){
        dataParams.EndTime=dataParams.EndTime+' 23:59:59';
      }
      Indicator.open();
      var cbSuccess = function(res){
        if (res.flag) {
          var data=res.data;
          if(data&&data.Rows&&data.Rows.length>0){
            for(var i=0;i<data.Rows.length;i++){
              var obj=data.Rows[i];
              if(obj.BindDateTime){
                data.Rows[i].BindDateTime=utils.formatDate("yyyy.MM.dd hh:mm",obj.BindDateTime);
              }
              if(obj.LastScanCodeDateTime){
                data.Rows[i].LastScanCodeDateTime=utils.formatDate("yyyy.MM.dd hh:mm",obj.LastScanCodeDateTime);
              }
              if(that.searchRequest.Type==2&&obj.NoticProductList&&obj.NoticProductList.length>0){
                for(var j=0;j<obj.NoticProductList.length;j++){
                  var NoticProductObj=obj.NoticProductList[j];
                  if(NoticProductObj.ScanCodeDateTime){
                    data.Rows[i].NoticProductList[j].ScanCodeDateTime=utils.formatDate("yyyy.MM.dd hh:mm",NoticProductObj.ScanCodeDateTime);
                  }
                }
                data.Rows[i]['listDetailsShow']=false;
              }
            }
            that.$set(that.responseResult,'Total',data.Total);
            that.$set(that.responseResult,'Rows',data.Rows);
          }else{
            that.$set(that.responseResult,'Total',0);
            that.$set(that.responseResult,'Rows',[]);
          }
        }else
        { 
          that.$set(that.responseResult,'Total',0);
          that.$set(that.responseResult,'Rows',[]);
          Toast(res.msg);
        }
        Indicator.close();
      };
      var cbError = function(jqXHR, textStatus, errorThrown){
        Toast(jqXHR.responseText);
      };
      //请求后端
      channelHelper.CommonCallService(url,dataParams,cbSuccess,cbError,null,null);
    },
    //提醒删除
    SetCancelNotic(itemIndex){
      var that=this;
      Indicator.open();
      var item=that.responseResult.Rows[itemIndex];
      var url = "/channel/SetCancelNotic";
      var dataParams = {
        EnterpriseNo:that.searchRequest.EnterpriseNo,
        UserToken:that.searchRequest.UserToken,
        LanguageType:that.searchRequest.LanguageType,
        RowVer:item.ROW_VER,
        ID:item.ID
      };
      var cbSuccess = function(res){
        if (res.flag) {
          that.GetCustomerDataList();
          Toast(res.msg);
        }else
        { 
          Toast(res.msg);
        }
        Indicator.close();
      };
      var cbError = function(jqXHR, textStatus, errorThrown){
        Toast(jqXHR.responseText);
      };
      //请求后端
      channelHelper.CommonCallService(url,dataParams,cbSuccess,cbError,null,null);
    },
    pullDown(type){
      this.$set(this.responseResult.Rows[type],'listDetailsShow',!this.responseResult.Rows[type].listDetailsShow);
    },
    //有效客户切换
    changeCustomer(Type){
      var that=this;
      if(Type!=that.searchRequest.Type){
        that.getYearMM();
        that.$set(that.searchRequest,'BeginTime',"");
        that.$set(that.searchRequest,'EndTime',"");
        that.$set(that.searchRequest,'dateType',0);
        that.$set(that.searchRequest,'Type',Type);
        that.$set(that.responseResult,'Rows',[]);
        that.$set(that.isShow,'isDateSearch',false);
        that.GetCustomerDataList();
      }
    },
    //时间切换
    changeTime(type){
      var that=this;
      that.$set(that.isShow,'isDateSearch',false);
      var dataNow=new Date();
      var yearNow=dataNow.getFullYear();
      var nowMonth=dataNow.getMonth()+1;
      var nowDay=dataNow.getDate();
      var nowDateLast=new Date(yearNow, nowMonth, 0).getDate();
      if(type==0){
        that.$set(that.searchRequest,'BeginTime','');
        that.$set(that.searchRequest,'EndTime','');
      }else if(type==1){
        that.$set(that.searchRequest,'BeginTime',utils.formatDate("yyyy-MM-dd",dataNow)+' 00:00:00');
        that.$set(that.searchRequest,'EndTime',utils.formatDate("yyyy-MM-dd",dataNow)+' 23:59:59');
      }else if(type==2){
        dataNow.setTime(dataNow.getTime()-24*60*60*1000);
        var mm=(dataNow.getMonth()+1);
        var dateTime= dataNow.getFullYear()+"-" + (mm<10?('0'+mm):mm) + "-" + dataNow.getDate();
        that.$set(that.searchRequest,'BeginTime',dateTime+' 00:00:00');
        that.$set(that.searchRequest,'EndTime',dateTime+' 23:59:59');
      }else if(type==3){
        that.$set(that.searchRequest,'BeginTime',that.getDay(-6)+' 00:00:00');
        that.$set(that.searchRequest,'EndTime',that.getDay(0)+' 23:59:59');
      }
      that.$set(that.searchRequest,'dateType',type);
      that.GetCustomerDataList();
    },
    //显示时间
    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 that=this;
      var startdate=this.dateTimeObj.dateTimeVal1.replace(/\./g,"-");
      var enddate=this.dateTimeObj.dateTimeVal2.replace(/\./g,"-");
      if(Date.parse(startdate)<=Date.parse(enddate))
      { 
        that.$set(that.searchRequest,'dateType',4);
        that.$set(that.searchRequest,'BeginTime',startdate);
        that.$set(that.searchRequest,'EndTime',enddate);
        that.$set(that.isShow,'isDateSearch',true);
        this.$set(this.isShow,'isDateTimeShow',false);
        this.$set(this.isShow,'datetimed1',false);
        this.$set(this.isShow,'datetimed2',false);
        that.GetCustomerDataList();
      }
      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]);
    },
    getDay:function (day){
      var that=this;
      var today = new Date();
      var targetday_milliseconds=today.getTime() + 1000*60*60*24*day;
      today.setTime(targetday_milliseconds); //注意，这行是关键代码
      var tYear = today.getFullYear();
      var tMonth = today.getMonth();
      var tDate = today.getDate();
      tMonth = that.doHandleMonth(tMonth + 1);
      tDate = that.doHandleMonth(tDate);
      return tYear+"-"+tMonth+"-"+tDate;
    },
    doHandleMonth:function (month){
      var that=this;
      var m = month;
      if(month.toString().length == 1){
      m = "0" + month;
      }
      return m;
    },
    judgeLogin:function(){
      var eno = this.sup8.context.enterpriseno;
      if (!channelHelper.CheckLogin(this.$parent,eno,this.sup8.context.entranceid)) {
        this.$parent.changeSelectedPage('Key_Login');
        return false;
      }
    },
    //会员招募-添加
    addMember(){
      var that=this;
      that.$set(that,'CheckRecommendLimit','');
      Indicator.open();
      var url = "/channel/CheckRecommendLimit";
      var dataParams = {
        EnterpriseNo:that.searchRequest.EnterpriseNo,
        UserToken:that.searchRequest.UserToken,
        LanguageType:that.searchRequest.LanguageType,
      };
      var cbSuccess = function(res){//CheckRecommendLimit
        if (!res.flag) {
          that.$set(that,'CheckRecommendLimit',res.msg);
        }
        Indicator.close();
        that.$set(that.isShow,'isMemberShow',true);
      };
      var cbError = function(jqXHR, textStatus, errorThrown){
        that.$set(that,'CheckRecommendLimit',jqXHR.responseText);
        that.$set(that.isShow,'isMemberShow',true);
      };
      //请求后端
      channelHelper.CommonCallService(url,dataParams,cbSuccess,cbError,null,null);
    },
    //会员招募-取消
    cancelMember(){
      var that=this;
      that.$set(that.isShow,'isMemberShow',false);
    },
    //会员招募-配置
    setMember(){
      var that=this;
      var url = "/channel/GetBaseSetDetailEno";
      var dataParams = that.searchRequest;
      Indicator.open();
      var cbSuccess = function(res){
        if (res.flag) {
          var data=res.data;
          var OpenObjectInt=parseInt(data.OpenObject?data.OpenObject:0);
          var openObj={};
          if(OpenObjectInt>0){
            //2:消费者，4:店员，8：店长
            if(OpenObjectInt-8>0||OpenObjectInt-8==0){
              openObj['2']=true;
              OpenObjectInt=OpenObjectInt-8;
            }
            if(OpenObjectInt-4>0||OpenObjectInt-4==0){
              openObj['1']=true;
              OpenObjectInt=OpenObjectInt-4;
            }
            if(OpenObjectInt==2){
              openObj['0']=true;
            }
          }
          data['openObj']=openObj;
          var UserCache=channelHelper.GetUserLoginInfo();
          var dashUrl=channelHelper.GetDashUrl();
          var url='';
          if(data.Link==1){
            url=dashUrl+"/key?eno="+that.searchRequest.EnterpriseNo+"&entranceid=0&targetreg=true&parentuserid="+UserCache.UserId;
          }else{
            if(data.LinkValue.indexOf("#")!=-1||data.LinkValue.indexOf("?")!=-1){
              url=data.LinkValue+"&eno="+that.searchRequest.EnterpriseNo+"&entranceid=0&targetreg=true&parentuserid="+UserCache.UserId;
            }else{
              url=data.LinkValue+"?eno="+that.searchRequest.EnterpriseNo+"&entranceid=0&targetreg=true&parentuserid="+UserCache.UserId;
            }
          }
          // debugger
          data["url"]=url;
          // if(data.Graphic!=1){
          //   data.GraphicValue='';
          // }
          that.$set(that,'setMemberResponse',data);
          that.setClipboard();
        }else
        { 
            Toast(res.msg);
        }
        Indicator.close();
      };
      var cbError = function(jqXHR, textStatus, errorThrown){
        Toast(jqXHR.responseText);
      };
      //请求后端
      channelHelper.CommonCallService(url,dataParams,cbSuccess,cbError,null,null);
    },
    //实例化复制
    setClipboard:function(){
      var that=this;
      this.clipboard = new Clipboard(this.$refs.copyBtn,{
        text: ()=>this.setMemberResponse.url
      });
    },
    //复制链接
    copyText:function(){
      var that=this;
      if(that.CheckRecommendLimit){
        that.cancelMember();
        Toast(that.CheckRecommendLimit);
        return;
      }
      if(!that.setMemberResponse.url){
        that.cancelMember();
        Toast('暂未生成链接请稍后再试');
        return;
      }
      that.clipboard.on('success', function(e) {
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);
        that.cancelMember();
        Toast('链接复制成功');
        // e.clearSelection();
        // // 释放内存
        // clipboard.off('error')
        // clipboard.off('success')
        // clipboard.destroy()
      });
      that.clipboard.on('error', function(e) {
        // 不支持复制
        Toast('该浏览器不支持自动复制');
        // // 释放内存
        // clipboard.off('error')
        // clipboard.off('success')
        // clipboard.destroy()
      });
    },
    bindQRCode: function () {//二维码生成
      var that=this;
      if(!that.setMemberResponse.url){
        return;
      }
      var url=that.setMemberResponse.url;//+"&timestamp="+Date.parse(new Date())
      if(that.QRCode){
        that.QRCode.makeCode(url);
      }else{
        that.QRCode=new QRCode(that.$refs.qrCodeDiv, {
          text: url,
          width: "150",
          height: "150",
          colorDark: "#333333", //二维码颜色
          colorLight: "#ffffff", //二维码背景色
          correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
        });
      }
    },
    linkQRCode(){
      var that=this;
      if(that.CheckRecommendLimit){
        that.cancelMember();
        Toast(that.CheckRecommendLimit);
        return;
      }
      that.bindQRCode();
      that.cancelMember();
      that.$set(that.isShow,'isMemberCodeShow',true);
    },
    closeMember:function(){
      var that=this;
      that.$set(that.isShow,'isMemberCodeShow',false);
      that.$set(that.isShow,'isMemberPosterShow',false);
      if (that.QRCode) {
        that.QRCode.clear();
      }
      if (that.PosterQRCode) {
        that.PosterQRCode.clear();
      }
    },
    pasterQRCode:function(){
      var that=this;
      if(that.CheckRecommendLimit){
        that.cancelMember();
        Toast(that.CheckRecommendLimit);
        return;
      }
      that.bindPosterQRCode();
      that.cancelMember();
      that.$set(that.isShow,'isMemberPosterShow',true);
    },
    bindPosterQRCode: function () {//海报二维码生成
      var that=this;
      if(!that.setMemberResponse.url){
        return;
      }
      var url=that.setMemberResponse.url;//+"&timestamp="+Date.parse(new Date())
      if(that.PosterQRCode){
        that.PosterQRCode.makeCode(url);
      }else{
        that.PosterQRCode=new QRCode(that.$refs.qrCodePosterDiv, {
          text: url,
          width: "100",
          height: "100",
          colorDark: "#333333", //二维码颜色
          colorLight: "#ffffff", //二维码背景色
          correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
        });
      }
    },
  },
  watch: {},
  created: function() {
    var that = this;
    var isDesign = location.pathname.indexOf('design');
    if(isDesign!=-1)
    {
        return;
    }
    //判断是否登录
    that.judgeLogin();
    that.setMember();
    that.GetCustomerSetting();
    that.GetCustomerDataList();
    that.getYearMM();
  },
  mounted: function() {
    var that =this;
    var isDesign = location.pathname.indexOf('design');
    if (!(isDesign>-1)) {
        that.$set(that.isShow,'vh',true);
    }else{
        that.$set(that.isShow,'vh',false);
    }
  }
};
</script>

