
<style scoped>  
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{overflow:hidden;_zoom:1;}
.text-gray{color:#717171;}
.text-orange{color:#eb7741;}
.text-danger{color:#c03546;}
.mask {position: absolute;top: 0;left: 0;height: 100%;width: 100%;background: rgba(0, 0, 0, 0.5);}
.Owner_storeManager{overflow: hidden;background: #F3F6FF;}
.sm_listTitle,.sm_listContent{padding: 0 3%;}
.sm_listTitle .sm_lt_tab{display: inline-block;}
.sm_listTitle .sm_lt_tab span{float: left;margin:0.2rem 0.4rem;}
.sm_listTitle .sm_lt_tab span.selected{color:#3A8AFB;border-bottom: 0.0625rem solid #3A8AFB;}
.sm_listTitle .sm_lt_count{float:right;text-align: right;padding: 0.4rem;}
.sm_listContent{height: 100%;overflow: auto;}
.sm_list{margin-bottom: 6rem;}
.sm_list .sm_list_item{margin: 0.4rem 0;display: flex;padding: 0.2rem 0.4rem;background: #fff;border-radius: 0.4rem;}
.sm_list .sm_list_item:nth-of-type(1){margin-top: 0;}
.sm_list .sm_list_item .sm_item_img{width:3.2rem;height: 3.2rem;margin-right: 0.14rem;padding-top: 0.5rem;}
.sm_list .sm_list_item .sm_item_img img{width: 100%;height: 100%;display: block;}
.sm_list .sm_list_item .sm_item_content{flex:3;}
.sm_list .sm_list_item .sm_item_content p{overflow: hidden;height: 1rem;line-height: 1rem;margin:0.6rem 0;}
.sm_list .sm_list_item .sm_item_content p:nth-of-type(1){margin-bottom: 0.9rem;display: flex;}
.sm_list .sm_list_item .sm_item_content p .sm_userName{overflow: hidden;display: inline;max-width:8.4rem;}
.sm_list .sm_list_item .sm_item_content p .sm_lookInfo{padding-left:0.2rem;padding-right:0.5rem;color:#3A8AFB;background: url(http://image.supercarrier8.com/h5_key/icon-arrow-gray.png) no-repeat right 30%;background-size:0.4rem 0.7rem;font-size: 0.8rem;}
.sm_list .sm_list_item .sm_item_btn{width:3.2rem;text-align: center;}
.sm_list .sm_list_item .sm_item_btn p{border:0.0625rem solid #3A8AFB; border-radius: 0.8rem;color:#fff;background-color:#3A8AFB;margin: 0;padding: 0.2rem 0.4rem;}
.sm_list .sm_list_item .sm_item_btn :nth-of-type(1){margin-bottom: 0.8rem;}
.sm_list .sm_list_item .sm_item_btn :nth-of-type(2){background-color: #fff;color:#3A8AFB;}
.sm_list .sm_list_item .sm_item_btn .disabled{background-color:#454545;border-color: #454545;}
.sm_list .sm_list_item .sm_item_btn .noPass{color:#454545;border-color: #454545;}
.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%;}
.addStorePopu{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;}
.addStorePopu h4{text-align: left;padding-left: 3%;text-indent: 1.3rem;background: url(http://image.supercarrier8.com/h5_key/icon-storeAssistant.png) no-repeat 3% top;background-size:1.2rem 1.2rem;}
.addStorePopu .closeImg{width: 2rem;height: 2rem;position: absolute;bottom: -3.2rem;margin-left:-1rem;left: 50%;}
.addStorePopu p{width:10.2rem;text-align: right; margin:0rem auto;margin-bottom:1rem;color:#3A8AFB;background: url(http://image.supercarrier8.com/h5_key/icon-refresh.png) no-repeat left center;background-size:1rem 1rem;}
.qrCode{padding:0.8rem 0;border-top:0.0625rem solid #f5f5f5; }
.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/icon_nodataStore.png) no-repeat center center;background-size: 10rem;}
</style>
<style >
.qrCode img{margin: 0 auto;}
</style>
<template>     
  <div class="jfBaseSize Owner_storeManager" v-cloak v-bind:style="isShow.vh?'height:100vh':'height: 100%;'"> 
    <div class="sm_listTitle clearfix">
      <p class="sm_lt_tab clearfix">
        <span v-bind:class="searchData.QueryType=='1'?'selected':''" v-on:click="QueryTypeChange(1)">门店列表</span>
        <span v-bind:class="searchData.QueryType=='2'?'selected':''" v-on:click="QueryTypeChange(2)" v-if="isShow.isTabAudit">门店审核</span>
      </p>
      <p class="sm_lt_count" v-if="searchData.QueryType=='1'">
        门店（<span class="text-orange" v-html="smList.storeList.Total"></span>）个
      </p>
      <p class="sm_lt_count" v-else>
        待审核门店（<span class="text-orange" v-html="smList.storeAuditList.Total"></span>）个
      </p>
    </div>
    <!-- <div class="sm_listContent" v-infinite-scroll="getStoreList"> -->
    <div class="sm_listContent">
      <div class="nodata" v-if="((searchData.QueryType=='1'&&!(smList.storeList.Rows&&smList.storeList.Rows.length>0))||(searchData.QueryType=='2'&&!(smList.storeAuditList.Rows&&smList.storeAuditList.Rows.length>0)))">您还没有门店记录, 快去添加门店吧！</div>
      <div class="sm_list" v-if="searchData.QueryType=='1'&&smList.storeList.Rows&&smList.storeList.Rows.length>0">
        <div class="sm_list_item" v-for="(item,i) in smList.storeList.Rows" v-bind:key="item.ORGANIZATION_ID">
          <div class="sm_item_img">
            <img v-bind:src="item.LOGO_IMG?item.LOGO_IMG.split(',')[0]:'http://image.supercarrier8.com/h5_key/icon_storeDefault.png'" alt="">
          </div>
          <div class="sm_item_content">
            <p><span class="sm_userName" v-html="item.ORGANIZATION_NAME"></span><span class="sm_lookInfo" v-on:click="getLookInfo(i,'storeList')">查看</span></p>
            <p v-html="item.TELEPHONE"></p>
          </div>
          <div class="sm_item_btn">
            <p v-if="item.FLAG=='1'" v-on:click="GetSysParaTypeList(i,2,'启用')">启用</p>
            <p v-if="item.FLAG=='2'" class="disabled" v-on:click="GetSysParaTypeList(i,1,'禁用')">禁用</p>
            <p v-if="item.FLAG!='2'" v-on:click="StoreDelete(i)">删除</p>
          </div>
        </div>
      </div>
      <div class="sm_list" v-else-if="searchData.QueryType=='2'&&smList.storeAuditList.Rows&&smList.storeAuditList.Rows.length>0">
        <div class="sm_list_item" v-for="(item,i) in smList.storeAuditList.Rows" v-bind:key="item.ORGANIZATION_ID">
          <div class="sm_item_img">
            <img v-bind:src="item.LOGO_IMG?item.LOGO_IMG.split(',')[0]:'http://image.supercarrier8.com/h5_key/icon_storeDefault.png'" alt="">
          </div>
          <div class="sm_item_content">
            <p><span class="sm_userName" v-html="item.ORGANIZATION_NAME"></span></p>
            <p v-html="item.TELEPHONE"></p>
          </div>
          <div class="sm_item_btn">
            <p @click="GetSysParaTypeList(i,2,'通过')">通过</p>
            <p @click="GetSysParaTypeList(i,7,'拒绝')" class="noPass">拒绝</p>
          </div>
        </div>
      </div>
    </div>
    <div class="btnContent" v-show="searchData.QueryType=='1'&&isShow.isShowAdd">
      <mt-button class="btnAddStore" type="danger" size="large" v-on:click="addStore">新增门店</mt-button>
    </div>
    <div class="mask" v-show="isShow.IsshowMask"></div>
    <div class="addStorePopu" v-show="isShow.IsAdd">
      <h4>出示二维码添加门店</h4><!-- icon-refresh.png -->
      <div id="qrCode" ref="qrCodeDiv" class="qrCode"></div>
      <p @click="setTimingRefresh">二维码2分钟后自动更新</p>
      <img class="closeImg" src="http://image.supercarrier8.com/h5_key/icon-close-white.png" alt="close" @click="addClose"> 
    </div>
     <ReturnHome ref="returnhome"></ReturnHome>
  </div>
</template>
<script>
// import Vue from "vue";
import { Toast } 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 { Indicator,MessageBox} from 'mint-ui';
import ReturnHome from "@/components/channel/temp001/ReturnHome";
// import InfiniteScroll from 'vue-infinite-scroll'
import QRCode from 'qrcodejs2';
// Vue.use(InfiniteScroll);
export default {
  name: "JfCompLogin",
  components: {ReturnHome},
    provide(){       
     return{           
        goPage:this.goPage       
     }   
    },
  props: ["comp", "cfg", "selectedPage"],
  data() {
    return {
      searchData:{
        QueryType:'1',//1:门店;2:审核
        PARENT_ORGANIZATION:'',//经销商ID
        Limit:100000,
        Offset:0,
        LanguageType:channelHelper.GetLanguageType(),
        EnterpriseNo:this.sup8.context.enterpriseno,
        UserToken:channelHelper.GetUserToken(),
        PARENT_ORGANIZATION:channelHelper.GetUserLoginInfo().OrganizationId,
      },
      smList:{
        storeList:{},
        storeAuditList:{},
      },
      isShow:{
        vh:false,
        IsshowMask:false,
        IsAdd:false,
        isFinished:false,
        isShowAdd:false,
        isTabAudit:false
      },
      qrCode:'',
      timeoutVal:'',
    };
  },
  methods: {
    goPage:function(pagetype){
        this.$parent.changeSelectedPage(pagetype);
    },
    QueryTypeChange:function(QueryType){
      if (QueryType==this.searchData.QueryType) {
        return;
      }
      this.$set(this.searchData,'QueryType',QueryType);
      this.searchClear();
    },
    /* 设置方法  控制按钮 */
    H5KeySetting:function(){
      var that=this;
      Indicator.open();
      var url = "/channel/H5KeySetting";
      var dataParams = that.searchData;
      dataParams.SettingType=2;
      var cbError=function(){Indicator.close();}
      var cbSuccess = function(res){
          if (res.flag) {
            if (res.data) {
              var StoreAudit=res.data.StoreAudit;
              if (StoreAudit&&StoreAudit.indexOf("2")!=-1) {
                that.$set(that.isShow,'isTabAudit',true);
              }else{
                that.$set(that.isShow,'isTabAudit',false);
                that.$set(that.searchData,'TabType','1');
              }
              var RegisterType=res.data.RegisterType;
              if (RegisterType&&RegisterType.indexOf("1")!=-1) {
                that.$set(that.isShow,'isShowAdd',true);
              }else{
                that.$set(that.isShow,'isShowAdd',false);
              }
              // that.getStaffList();
            }
          }else{
            that.$set(that.isShow,'isShowAdd',false);
            that.$set(that.isShow,'isTabAudit',false);
            Indicator.close();
            Toast(res.msg);
            that.judgeLogin();
          }
      };
      //请求后端
      channelHelper.CommonCallService(url,dataParams,cbSuccess,cbError,null,null);
    },
    searchClear:function(){//查询清空
      var isClear=false;
      // this.$set(this.smList,'storeList',{Rows:[],Total:0});
      // this.$set(this.smList,'storeAuditList',{Rows:[],Total:0});
      // if (this.searchData.QueryType=='1') {
      //   if (!this.smList.storeAuditList.Total) {
      //     isClear=true;
      //   }
      // }else{
      //   if (!this.smList.storeList.Total) {
      //     isClear=true;
      //   }
      // }
      // this.$set(this.smList,'storeList',{Rows:[],Total:0});
      // this.$set(this.smList,'storeAuditList',{Rows:[],Total:0});
      // this.$set(this.isShow,'isFinished',false);
      // this.$set(this.searchData,'Offset',0);
      // if (isClear) {
        // this.getStoreList();
      // }
      this.$set(this.isShow,'isFinished',false);
      this.$set(this.searchData,'Offset',0);
      this.getStoreList();
    },
    getStoreList:function(){
      var that=this;
      if (that.isShow.isFinished) {
        return;
      }
      Indicator.open();
      var url = "/channel/GetStoreList";
      var dataParams = that.searchData;
      var cbError=function(){Indicator.close();}
      var cbSuccess = function(res){
        Indicator.close();
        if (res.flag){
          // res.data={Total:0,Rows:[]};
          if (that.searchData.QueryType=='1') {
            if (res.data&&res.data.Rows&&res.data.Rows.length) {
              // if (that.searchData.Offset!==0) {
              //   var list=that.smList.storeList.Rows.concat(res.data.Rows);
              //   that.$set(that.smList,'storeList',{
              //     Total:res.data.Total,
              //     Rows:list
              //   });
              // }else {
              //   that.$set(that.smList,'storeList',res.data);
              // }
              // if (that.smList.storeList.Rows.length<that.smList.storeList.Total) {
              //   that.$set(that.searchData,'Offset',that.searchData.Offset+that.searchData.Limit);
              // }else{
              //   that.$set(that.isShow,'isFinished',true);
              // }
              that.$set(that.smList,'storeList',{
                Total:res.data.Total,
                Rows:res.data.Rows
              });
            }else{
              that.$set(that.smList,'storeList',{Rows:[],Total:0});
              that.$set(that.isShow,'isFinished',true);
            }
          }else{
            if (res.data&&res.data.Rows&&res.data.Rows.length) {
              // if (that.searchData.Offset!==0) {
              //   var list=that.smList.storeAuditList.Rows.concat(res.data.Rows);
              //   that.$set(that.smList,'storeAuditList',{
              //     Total:res.data.Total,
              //     Rows:list
              //   });
              // }else {
              //   that.$set(that.smList,'storeAuditList',res.data);
              // }
              // if (that.smList.storeAuditList.Rows.length<that.smList.storeAuditList.Total) {
              //   that.$set(that.searchData,'Offset',that.searchData.Offset+that.searchData.Limit);
              // }else{
              //   that.$set(that.isShow,'isFinished',true);
              // }
              that.$set(that.smList,'storeAuditList',{
                Total:res.data.Total,
                Rows:res.data.Rows
              });
            }else{
              that.$set(that.smList,'storeAuditList',{Rows:[],Total:0});
              that.$set(that.isShow,'isFinished',true);
            }
          }
        }else{
          Toast(res.msg?res.msg:'操作失败！');
          that.judgeLogin();
        }
      };
      //请求后端
      channelHelper.CommonCallService(url,dataParams,cbSuccess,cbError,null,null);
    },
    GetSysParaTypeList:function(i,Flag,html){//短信时间
      var that=this;
      MessageBox.confirm('确定执行'+html+'操作?').then(action => {
        Indicator.open();
        var url = "/channel/GetSysParaTypeList";
        var dataParams = that.searchData;
        dataParams.TypeId='62a8bce8fab34c8a94420ad2b5a68693';
        var cbError=function(){Indicator.close();}
        var cbSuccess = function(res){
          if (res.flag){
            if (res.data&&res.data.length>0&&res.data[0]&&res.data[0].DATA_VALUE) {
              that.StoreManage(i,Flag,res.data[0].DATA_VALUE);
            }else {
              that.StoreManage(i,Flag,'0');
            }
          }else{
            Toast(res.msg?res.msg:'操作失败！');
            Indicator.close();
            that.judgeLogin();
          }
        };
        //请求后端
        channelHelper.CommonCallService(url,dataParams,cbSuccess,cbError,null,null);
      }).catch(err=>{
        if(err=='cancel'){
          Indicator.close();
        }
      });
    },
    StoreManage:function(i,Flag,dv){//启用/禁用&通过/拒绝
      var that=this;
      Indicator.open();
      var url = "/channel/StoreManage";
      var dataParams = that.searchData;
      if (that.searchData.QueryType=='1') {//启用禁用
        dataParams.isAudit = 0;
        dataParams.ID =that.smList.storeList.Rows[i].ORGANIZATION_ID;
      }else{//通过拒绝
        dataParams.isAudit = 1;
        dataParams.ID=that.smList.storeAuditList.Rows[i].ORGANIZATION_ID;
      }
      dataParams.ROW_UPDATE_USER=dataParams.PARENT_ORGANIZATION;
      dataParams.Flag = Flag;
      dataParams.IntervalCount =dv;
      var cbError=function(){Indicator.close();}
      var cbSuccess = function(res){
        if (res.flag){
          Toast(res.msg?res.msg:'操作成功!');
          that.searchClear();
        }else{
          Toast(res.msg?res.msg:'操作失败!');
          // Indicator.close();
          // that.judgeLogin();
          that.searchClear();
        }
      };
      //请求后端
      channelHelper.CommonCallService(url,dataParams,cbSuccess,cbError,null,null);
    },
    StoreDelete:function(i){//删除
      var that=this;
      MessageBox.confirm('确定执行删除操作?').then(action => {
        Indicator.open();
        var url = "/channel/StoreDelete";
        var dataParams = that.searchData;
        dataParams.ID =that.smList.storeList.Rows[i].ORGANIZATION_ID;
        var cbError=function(){Indicator.close();}
        var cbSuccess = function(res){
          if (res.flag){
            that.searchClear();
          }else{
            Toast(res.msg?res.msg:'操作失败！');
            Indicator.close();
            that.judgeLogin();
          }
        };
        //请求后端
        channelHelper.CommonCallService(url,dataParams,cbSuccess,cbError,null,null);
      });
    },
    getLookInfo:function(i,listType){//查看
      var that=this;
      var data={
        QueryType:that.searchData.QueryType,
        ID:that.smList[listType].Rows[i].ORGANIZATION_ID
      };
      sessionStorage.setItem("AgentStoreManager",JSON.stringify(data));
      that.$parent.changeSelectedPage('A_StoreV');
    },
    addStore:function(){//新增门店
      var that=this;
      if (!that.QRCode) {
        that.bindQRCode();
      }
      that.setTimingRefresh();
      that.$set(that.isShow,'IsshowMask',true);
      that.$set(that.isShow,'IsAdd',true);
    },
    addClose:function(){//关闭新增
      var that=this;
      that.$set(that.isShow,'IsshowMask',false);
      that.$set(that.isShow,'IsAdd',false);
      if (that.QRCode) {
        that.QRCode.clear();
      }
      if (that.timeoutVal) {
        clearTimeout(that.timeoutVal);
      }
    },
    bindQRCode: function () {//二维码生成
      var that=this;
      var eno = this.sup8.context.enterpriseno;
      var entranceid=this.sup8.context.entranceid;
      var UserCache=channelHelper.GetUserLoginInfo();
      that.qrCode=channelHelper.GetDashUrl();
      //var url=that.qrCode+"/key?eno="+eno+"&entranceid=2&parentuserid="+(entranceid==3?'':UserCache.UserId)+"&orgid="+UserCache.OrganizationId+"&targetstore=true&timestamp="+Date.parse(new Date());
      var url=that.qrCode+"/key?eno="+eno+"&entranceid=2&parentuserid="+UserCache.UserId+"&orgid="+UserCache.OrganizationId+"&targetstore=true&timestamp="+Date.parse(new Date());
      
      that.QRCode=new QRCode(that.$refs.qrCodeDiv, {
        text: url,
        width: "150",
        height: "150",
        colorDark: "#333333", //二维码颜色
        colorLight: "#ffffff", //二维码背景色
        correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
      })
    },
    setTimingRefresh:function(){
      var that=this;
      var eno = this.sup8.context.enterpriseno;
      var entranceid=this.sup8.context.entranceid;
      var UserCache=channelHelper.GetUserLoginInfo();
      if (that.timeoutVal) {
        clearTimeout(that.timeoutVal);
        that.QRCode.clear();
        that.qrCode=channelHelper.GetDashUrl();
        //var url=that.qrCode+"/key?eno="+eno+"&entranceid=2&parentuserid="+(entranceid==3?'':UserCache.UserId)+"&orgid="+UserCache.OrganizationId+"&targetstore=true&timestamp="+Date.parse(new Date());
        var url=that.qrCode+"/key?eno="+eno+"&entranceid=2&parentuserid="+UserCache.UserId+"&orgid="+UserCache.OrganizationId+"&targetstore=true&timestamp="+Date.parse(new Date());
        that.QRCode.makeCode(url);
      }
      that.$set(that,'timeoutVal',setTimeout(that.setTimingRefresh, 120000));
    },
    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;
      }
    },
  },
  watch: {
    
  },
  // components: {
  //   InfiniteScroll
  // },
  created: function() {
    var that = this;
    var isDesign = location.pathname.indexOf('design');
    if(isDesign!=-1)
    {
        return;
    }
    //判断是否登录
    that.judgeLogin();
    sessionStorage.removeItem("AgentStoreManager");
    that.getStoreList();
     that.H5KeySetting();
  },
  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>
