
<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_clerkManager{overflow: hidden;background: #F3F6FF;}
.cm_listTitle,.cm_listContent{padding: 0 3%;}
.cm_listTitle .cm_lt_tab{display: inline-block;}
.cm_listTitle .cm_lt_tab span{float: left;margin:0.2rem 0.4rem;}
.cm_listTitle .cm_lt_tab span.selected{color:#3A8AFB;border-bottom: 0.0625rem solid #3A8AFB;}
.cm_listTitle .cm_lt_count{float:right;text-align: right;padding: 0.4rem;}
.cm_listContent{height: 100%;overflow: auto;}
.cm_list{margin-bottom: 6rem;}
.cm_list .cm_list_item{margin: 0.4rem 0;display: flex;padding: 0.2rem 0.4rem;background: #fff;border-radius: 0.4rem;}
.cm_list .cm_list_item:nth-of-type(1){margin-top: 0;}
.cm_list .cm_list_item .cm_item_img{width:3.2rem;height: 3.2rem;margin-right: 0.14rem;padding-top: 0.5rem;}
.cm_list .cm_list_item .cm_item_img img{width: 100%;height: 100%;display: block;}
.cm_list .cm_list_item .cm_item_content{flex:3;}
.cm_list .cm_list_item .cm_item_content p{overflow: hidden;height: 1rem;line-height: 1rem;margin:0.6rem 0;}
.cm_list .cm_list_item .cm_item_content p:nth-of-type(1){margin-bottom: 0.9rem;display: flex;}
.cm_list .cm_list_item .cm_item_content p .cm_userName{overflow: hidden;display: inline;max-width:8.4rem;}
.cm_list .cm_list_item .cm_item_content p .cm_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;}
.cm_list .cm_list_item .cm_item_btn{width:3.2rem;text-align: center;}
.cm_list .cm_list_item .cm_item_btn p{border:0.0625rem solid #3A8AFB; border-radius: 0.8rem;color:#fff;background-color:#3A8AFB;margin:0;padding: 0.2rem 0.4rem;}
.cm_list .cm_list_item .cm_item_btn :nth-of-type(1){margin-bottom:0.8rem;}
.cm_list .cm_list_item .cm_item_btn :nth-of-type(2){background-color: #fff;color:#3A8AFB;}
.cm_list .cm_list_item .cm_item_btn .disabled{background-color:#454545;border-color: #454545;}
.cm_list .cm_list_item .cm_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%;}
.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-storeAssistant.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;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_nodataDealer.png) no-repeat center center;background-size: 10rem;}
</style>
<style>
.qrCode img{margin: 0 auto;}
</style>
<template>
  <div class="jfBaseSize Owner_clerkManager" v-cloak v-bind:style="isShow.vh?'height:100vh':'height: 100%;'"> 
    <div class="cm_listTitle clearfix">
      <p class="cm_lt_tab clearfix">
        <span v-bind:class="searchData.TabType=='1'?'selected':''" v-on:click="tabTypeChange(1)">经销商列表</span>
        <span v-bind:class="searchData.TabType=='2'?'selected':''" v-on:click="tabTypeChange(2)" v-if="isShow.isTabAudit">经销商审核</span>
      </p>
      <p class="cm_lt_count" v-if="searchData.TabType=='1'">
        经销商（<span class="text-orange" v-html="cmList.DealerList.length"></span>）个
      </p>
      <p class="cm_lt_count" v-else>
        待审核经销商（<span class="text-orange" v-html="cmList.dealerAuditList.length"></span>）个
      </p>
    </div>
    <div class="cm_listContent">
      <div class="nodata" v-if="((searchData.TabType=='1'&&!(cmList.DealerList&&cmList.DealerList.length>0))||(searchData.TabType=='2'&&!(cmList.dealerAuditList&&cmList.dealerAuditList.length>0)))">您还没有经销商记录, 快去添加经销商吧！</div>
      <div class="cm_list" v-if="searchData.TabType=='1'&&cmList.DealerList&&cmList.DealerList.length>0">
        <div class="cm_list_item" v-for="(item,i) in cmList.DealerList" v-bind:key="item.ORGANIZATION_ID">
          <div class="cm_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="cm_item_content"> 
            <p><span class="cm_userName" v-html="item.DealerName"></span><span class="cm_lookInfo" v-on:click="getLookInfo(i,'DealerList')">查看</span></p>
            <p v-html="item.ContactTel"></p>
          </div>
          <div class="cm_item_btn">
            <p v-if="item.FLAG =='0'" v-on:click="UpdateDealerStatus(i,1)">启用</p>
            <p v-if="item.FLAG =='1'" class="disabled" v-on:click="UpdateDealerStatus(i,0)">禁用</p>
            <p v-if="item.FLAG !='1'" v-on:click="H5DeleteDealer(i)">删除</p>
          </div>
        </div>
      </div>
      <div class="cm_list"  v-else-if="searchData.TabType=='2'&&cmList.dealerAuditList&&cmList.dealerAuditList.length>0">
        <div class="cm_list_item" v-for="(item,i) in cmList.dealerAuditList" v-bind:key="item.ORGANIZATION_ID">
          <div class="cm_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="cm_item_content">
            <p><span class="cm_userName" v-html="item.DealerName"></span>
            <!-- <span class="cm_lookInfo" v-on:click="getLookInfo(i,'dealerAuditList')">查看</span> -->
            </p>
            <p v-html="item.ContactTel"></p>
          </div>
          <div class="cm_item_btn">
            <p @click="GetRoleID(i,1)">通过</p>
            <p @click="GetRoleID(i,2)" class="noPass">拒绝</p>
          </div>
        </div>
      </div>
    </div>
    <div class="btnContent" v-show="searchData.TabType=='1'&&isShow.isShowAdd">
      <mt-button class="btnAddClerk" type="danger" size="large" v-on:click="addClerk">新增经销商</mt-button>
    </div>
    <div class="mask" v-show="isShow.IsshowMask"></div>
    <div class="addClerkPopu" 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 { 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 ReturnHome from "@/components/channel/temp001/ReturnHome";
import { Indicator,MessageBox  } from 'mint-ui';
import QRCode from 'qrcodejs2';
export default {
  name: "JfCompLogin",
  	components: {ReturnHome},
    provide(){       
     return{           
        goPage:this.goPage       
     }   
    },
  props: ["comp", "cfg", "selectedPage"],
  data() {
    return {
      searchData:{
        TabType:'1',//1:经销商;2:审核
      },
      cmList:{
        DealerList:[],
        dealerAuditList:[],
      },
      isShow:{
        vh:false,
        IsshowMask:false,
        IsAdd:false,
        isShowAdd:false,
        isTabAudit:false,
      },
      qrCode:'',
      timeoutVal:'',
    };
  },
  methods: {
    /* 页面跳转 */
    goPage:function(pagetype){
        this.$parent.changeSelectedPage(pagetype);
    },
    /* 切换管理列表和审核列表 */
    tabTypeChange:function(tabType){
      this.$set(this.searchData,'TabType',tabType);
      this.GetDealerListByES();
    },
    /* 获取基础设置 控制审核 新增按钮 */
    H5KeySetting:function(){
      var that=this;
      Indicator.open();
      var url = "/channel/H5KeySetting";
      var dataParams = that.searchData;
      var cbError=function(){Indicator.close();}
      var cbSuccess = function(res){
          if (res.flag) {
            if (res.data) {
              var DealerAudit=res.data.DealerAudit;
              if (DealerAudit&&DealerAudit.indexOf("1")!=-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.GetDealerListByES();
            }
          }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);
    },
     /* 获取经销商列表 */
    GetDealerListByES:function(){
      var that=this;
      Indicator.open();
      var url = "/channel/GetDealerListByES";
      var dataParams = that.searchData;
      dataParams.Offset=0;
      dataParams.Limit=100;
      var cbError=function(){Indicator.close();}
      var cbSuccess = function(res){
          Indicator.close();
          if (res.flag){
              if (that.searchData.TabType=='1') {
                if (res.data.Rows&&res.data.Rows.length) {
                  that.$set(that.cmList,'DealerList',res.data.Rows);
                }else{
                  that.$set(that.cmList,'DealerList',[]);
                }
              }else{
                if (res.data.Rows&&res.data.Rows.length) {
                  that.$set(that.cmList,'dealerAuditList',res.data.Rows);
                }else{
                  that.$set(that.cmList,'dealerAuditList',[]);
                }
              }
          }else{
            Toast(res.msg);
            that.judgeLogin();
          }
      };
      //请求后端
      channelHelper.CommonCallService(url,dataParams,cbSuccess,cbError,null,null);
    },
     /* 获取经销商负责人角色 进行审核操作 */
    GetRoleID:function(i,auditState){
        Indicator.open();
        var that=this;
        var url = "/channel/GetSysParaTypeList";
        var dataParams = {
            EnterpriseNo: that.sup8.context.enterpriseno,
            LanguageType:channelHelper.GetLanguageType(),
            TypeId:"6c0ebd2614e74dc1ae260d5aeabacbbb"
        };
        var cbError=function(){Indicator.close();}
        var cbSuccess = function(res){
          Indicator.close();
          if (res.flag&&res.data){
              that.searchData.RoleIdArr=res.data[0].DATA_VALUE;
              that.H5AuditClerk(i,auditState);
          }else{
            Toast(res.msg?res.msg:'操作失败!');
            Indicator.close();
            that.judgeLogin();
          }
        };
        //请求后端
        channelHelper.CommonCallService(url,dataParams,cbSuccess,cbError,null,null);
    },
    /* 启用禁用状态处理 */
    UpdateDealerStatus:function(i,Flag){//启用/禁用
      var that=this;

      MessageBox.confirm('确定执行'+(Flag==0?'禁用':'启用')+'操作?').then(action => {
        Indicator.open();
        var url = "/channel/UpdateDealerStatus";
        var dataParams = that.searchData;
        dataParams.RowVer=that.cmList.DealerList[i].ROW_VER;
        dataParams.Id=that.cmList.DealerList[i].ORGANIZATION_ID;
        dataParams.OrganizationId=that.cmList.DealerList[i].ORGANIZATION_ID;
        dataParams.Status =Flag ;
        var cbError=function(){Indicator.close();}
        var cbSuccess = function(res){
            Toast(res.msg);
            if (res.flag){
              that.GetDealerListByES();
            }else{
              Indicator.close();
              that.judgeLogin();
            }
        };
        //请求后端
        channelHelper.CommonCallService(url,dataParams,cbSuccess,cbError,null,null);
      });
    },
    /* 删除经销商 */
    H5DeleteDealer:function(i){//删除
      var that=this;
      MessageBox.confirm('确定执行删除操作?').then(action => {
          Indicator.open();
          var url = "/channel/DeleteDealer";
          var dataParams = that.searchData;
          dataParams.OrganizationId=that.cmList.DealerList[i].ORGANIZATION_ID;
          dataParams.RowVer=that.cmList.DealerList[i].ROW_VER;
          var cbError=function(){Indicator.close();}
          var cbSuccess = function(res){
              Toast(res.msg);
              if (res.flag){
                that.GetDealerListByES();
              }else{
                Indicator.close();
                that.judgeLogin();
              }
          };
          //请求后端
          channelHelper.CommonCallService(url,dataParams,cbSuccess,cbError,null,null);
      });
    },
     /* 查看经销商 */
    getLookInfo:function(i,listType){
      var that=this;
      var data={
        TabType:that.searchData.TabType,
        ID:that.cmList[listType][i].ORGANIZATION_ID
      };
      console.log(JSON.stringify(data));
      sessionStorage.setItem("OwnerStoreManager",JSON.stringify(data));
      that.$parent.changeSelectedPage('E_StoreV');
    },
    /* 审核驳回 */
    H5AuditClerk:function(i,auditState){
      var that=this;
      MessageBox.confirm('确定执行'+(auditState==1?'通过':'拒绝')+'操作?').then(action => {
        Indicator.open();
        var loginInfo=JSON.parse(localStorage.getItem("loginInfo"));
        if (!loginInfo) {
          that.judgeLogin();
        }
        var url = "/channel/H5AuditClerk";
        var dataParams = that.searchData;
        dataParams.ClerkId=that.cmList.dealerAuditList[i].ORGANIZATION_ID;
        dataParams.AuditState=auditState;
        dataParams.RefuseReason=auditState==1?'':'h5拒绝';
        var cbError=function(){Indicator.close();}
        var cbSuccess = function(res){
          if (res.flag){
            Toast(res.msg?res.msg:'操作成功!');
            that.GetDealerListByES();
          }else{
            Toast(res.msg?res.msg:'操作失败!');
            Indicator.close();
            that.judgeLogin();
          }
        };
        //请求后端
        channelHelper.CommonCallService(url,dataParams,cbSuccess,cbError,null,null);
      });
    },
    /* 新增店员 */
    addClerk: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 UserCache=channelHelper.GetUserLoginInfo();
      that.qrCode=channelHelper.GetDashUrl();
      var url=that.qrCode+"/key?eno="+eno+"&entranceid=3&parentuserid="+UserCache.UserId+"&orgid="+UserCache.OrganizationId+"&targetreg=true&timestamp="+Date.parse(new Date());
      console.log(url);
      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 eno = this.sup8.context.enterpriseno;
      var that=this;
        var UserCache=channelHelper.GetUserLoginInfo();
          that.qrCode=channelHelper.GetDashUrl();
      if (that.timeoutVal) {
        clearTimeout(that.timeoutVal);
        that.QRCode.clear();
        var url=that.qrCode+"/key?eno="+eno+"&entranceid=3&parentuserid="+UserCache.UserId+"&orgid="+UserCache.OrganizationId+"&targetreg=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: {
    
  },
  created: function() {
    var that = this;
    var isDesign = location.pathname.indexOf('design');
    if(isDesign!=-1)
    {
        return;
    }
    var entranceid=this.sup8.context.entranceid;
    //判断是否登录
    that.judgeLogin();
    var data=JSON.parse(sessionStorage.getItem("OwnerStoreManager"));
    that.$set(that,'searchData',{
      SettingType:3,
      UserToken:channelHelper.GetUserToken(),
      EnterpriseNo:that.sup8.context.enterpriseno,
      LanguageType:channelHelper.GetLanguageType(),
      TabType:(data&&data.TabType?data.TabType:'1')
    });
    sessionStorage.removeItem("OwnerStoreManager");
    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>

