
<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;}
.comp-login {background-color:#fff;height:100%;height:100vh;}
.input-box {background:#FFF;}
.comp-login {padding:0;margin:0;}
.Owner_StoreView{background: #F3F6FF;}
.layoutInfo{background-color: #fff;margin-bottom:0.3rem;}
.titleClerkInfo{padding:0.8rem 3%;padding-bottom:0;text-indent:1.2rem;color:#3A8AFB;background: url(http://image.supercarrier8.com/h5_key/icon-info.png) no-repeat 3% 0.8rem;background-size:1rem;background-color: #fff;font-weight: 700;}
.titleClerkInfo.useFunction{background-image: url(http://image.supercarrier8.com/h5_key/icon_function.png);background-size: 0.98rem;}
.titleClerkInfo.storeInfo{background-image: url(http://image.supercarrier8.com/h5_key/icon_managementStore.png);background-size: 0.94rem;}
.titleClerkInfo .btnAdd{float: right;border: 0.04rem solid #3A8AFB;border-radius: 0.6rem;text-align: center;text-indent: 0;width: 3.8rem;}
.productPanel{background-color: #fff;padding: 0 3%;}
.productWay {padding: 1.06rem 0;border-bottom: 1px solid #E9E9E9;display:flex;line-height: 1;}
.functionItem{display: block;background: url(http://image.supercarrier8.com/h5_key/icon_select_2.png) no-repeat center right;background-size:1.1rem;}
.functionItem.selected{background-image: url(http://image.supercarrier8.com/h5_key/icon_selected.png)}
.functionItem.closed{background-image: url(http://image.supercarrier8.com/h5_key/icon_closeRed.png)}
.productWay .titleInfo{margin-right: 0.6rem}
.productWay .titleInfo span{width:3.75rem;display: inline-block;text-align:justify;text-justify:distribute-all-lines;/*ie6-8*/text-align-last:justify;/* ie9*/-moz-text-align-last:justify;/*ff*/-webkit-text-align-last:justify;/*chrome 20+*/}
.productWay .resultInfo{-webkit-box-flex: 1;flex: 1;}/*icon-tel-blue.png */
.productWay .resultInfo .telCode{color:#3A8AFB;margin-left:0.2rem;font-size:0.75rem;padding-right:0.9rem;background: url(http://image.supercarrier8.com/h5_key/icon-tel-blue.png) no-repeat 98% center;background-size:0.8rem 0.8rem;}
.storeDropPopu .btnHeader{display: flex;}
.storeDropPopu .btnHeader button{flex: 1;}
.storeDropPopu .searchHearder{width: 80%;max-width:37.5rem;position: relative;margin: 0 auto;background-color:#f3f6ff;border-radius: 0.8rem;}
.storeDropPopu .searchHearder input {display: block;width:100%;padding: 0.3rem 1rem;padding-right:1.8rem;border-width:0;border-radius: 0.8rem;background-color:#f3f6ff;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
.storeDropPopu .searchHearder span{display: inline-block;width:1.6rem;height: 100%;position: absolute;top:0;right: 0;background: url(http://image.supercarrier8.com/h5_key/icon-search.png) no-repeat center center;background-size:1.2rem 1.2rem; }
.storeDropPopu .storeCheck{height: 11.2rem;overflow:auto;}
.storeDropPopu .storeCheck .storeCheckItem{font-size: 0.875rem;padding: 0.4rem 0;display: flex;width:80%;max-width: 37.5rem;margin: 0 auto;}
.storeDropPopu .storeCheck .storeCheckItem .checkSelect{width: 1.6rem;background: url(http://image.supercarrier8.com/h5_key/icon_boxSelect.png) no-repeat center left;background-size:0.8745rem;}
.storeDropPopu .storeCheck .storeCheckItem .valSelect{flex: 1;}
.storeDropPopu .storeCheck .storeCheckItem .storeSelected{background-image: url(http://image.supercarrier8.com/h5_key/icon_boxSelected.png);}
.mint-button{width:92%;margin:0 auto;margin-top:1rem;background-color:#3A8AFB;border-radius: 0.2rem;}
.mask {position: fixed;top: 0;left: 0;height: 100%;width: 100%;background: rgba(0, 0, 0, 0.5);}
</style>
<style>
.mint-toast{z-index:3000;}
.mint-indicator .mint-indicator-mask,.mint-indicator .mint-indicator-wrapper{z-index:3001;}
</style>
<template> 
  <div class="container comp-login jfBaseSize Owner_StoreView" v-cloak v-bind:style="isShow.vh?'height:100vh':'height: 100%;'">
    <div class="layoutInfo">
      <div class="titleClerkInfo">员工信息</div>
      <div class="productPanel">
        <div class="productWay">
            <div class="titleInfo">
              <span>员工编号</span>
            </div>
            <div class="resultInfo">
              <span class="text-gray" v-html="model.BindModel.MemberNo"></span>
            </div>
        </div>
        <div class="productWay">
          <div class="titleInfo">
            <span>员工姓名</span>
          </div>
          <div class="resultInfo">
            <span class="text-gray" v-html="model.BindModel.NickName"></span>
          </div>
        </div>
        <div class="productWay">
          <div class="titleInfo">
            <span>手机号</span>
          </div>
          <div class="resultInfo">
            <span class="text-gray" v-html="model.BindModel.Mobile"></span>
            <a class="telCode" v-bind:href="'tel:'+model.BindModel.Mobile">拨打</a>
          </div>
        </div>
        <div class="productWay">
          <div class="titleInfo">
            <span>注册时间</span>
          </div>
          <div class="resultInfo">
            <span class="text-gray" v-html="model.BindModel.RegTime"></span>
          </div>
        </div>
      </div>
    </div>
    <div class="layoutInfo">
      <div class="titleClerkInfo useFunction">使用功能</div>
      <div class="productPanel">
        <div class="productWay functionItem" v-bind:class="item.isSelected?'selected':''" v-for="(item,i) in model.useFunction" v-bind:key="item.name" v-bind:data-type="item.name" v-on:click="setUseFunction(i)">
            <span v-html="item.name"></span>
        </div>
      </div>
    </div>
    <div class="layoutInfo" style="margin-bottom:0;">
      <div class="titleClerkInfo storeInfo"><span>管理门店信息</span><span class="btnAdd" v-on:click="btnAddClick">编辑</span></div>
      <div class="productPanel">
        <div class="productWay functionItem closed" v-for="(item,i) in model.BindModel.ManageStores" v-bind:key="item.Id" v-bind:data-id="item.Id" v-bind:data-UserId="item.UserId" v-bind:data-StoreId="item.StoreId" v-on:click="H5DeleteDealerEmployeeStore(i,item.Id)">
            <span v-html="item.StoreName"></span>
        </div>
      </div>
    </div>
    <mt-popup class="storeDropPopu"
    v-model="isShow.isAddStore"
    position="bottom" style="width:100%;">
      <div class="picker-toolbar-title">
        <div class="btnHeader">
          <el-button type="text" class="button" @click="isShow.isAddStore=false">取消</el-button>
          <el-button type="text" class="button" @click="HandelConfirm()">确定</el-button>
        </div>
        <div class="searchHearder">
          <input class="text-gray" type="text" placeholder="请输入门店名称搜索" v-model="SearchValue.SearchStoreName" />
          <span > </span>
        </div>
      </div>
      <div class="storeCheck">
        <div class="storeCheckItem" v-for="(item) in model.storeSelectList" v-bind:key="item.ORGANIZATION_NAME" v-on:click="setStoreSelect(item.ORGANIZATION_ID,item.isSelected)">
          <span class="checkSelect" v-bind:class="item.isSelected?'storeSelected':''" v-bind:data-id="item.ORGANIZATION_ID" v-bind:name="item.ORGANIZATION_ID"></span>
          <span class="valSelect" v-html="item.ORGANIZATION_NAME"></span>
        </div>
      </div>
    </mt-popup>
    <div class="mask" v-show="isShow.isAddStore"></div>
     <ReturnHome ref="returnhome"></ReturnHome>
  </div>
</template>
<script>
import Vue from "vue";
import ElementUI from "element-ui";
import { Toast,InfiniteScroll } from 'mint-ui';
import { Indicator,MessageBox  } from 'mint-ui';
import channelHelper from "@/assets/js/channelHelper.js";
import { base64 } from "@/assets/js/cryptoHelper";
import { debug } from 'util';
import ReturnHome from "@/components/channel/temp001/ReturnHome";
import '@/assets/js/libs/js.cookie';
Vue.use(ElementUI);
export default {
  name: "Key_AddStore",
  components: {ReturnHome},
    provide(){       
     return{           
        goPage:this.goPage       
     }   
    },
  props: ["comp", "cfg", "selectedPage"],
  data() { 
    return {
      CheckStoreID:"",
      searchData:{},
      SearchValue:{
        AreaId:"",
        SearchStoreName:""
      },
      model:{
        BindModel:{
           ID:"",
           MemberNo:"",
           NickName:"",
           Mobile:"",
           RegTime:"",
           Menus:{
             StoreManagement:1,
             DataView:1
           },
           ManageStores:[]
        },
        useFunction:[{
          isSelected:false,
          name:'门店管理',
        },{
          isSelected:false,
          name:'数据查看',
        }],
        storeInfoList:[{
          name:'上海浦江1店',
        },{
          name:'上海浦江2店',
        }],
        storeSelectList:[],
      },
      isShow:{
        vh:false,
        isAddStore:false,
      },
    };
  },
  methods: {
    goPage(pagetype){
        this.$parent.changeSelectedPage(pagetype);
    },
    setUseFunction(i){//设置使用功能
      var that=this;
      if (that.model.useFunction[i].isSelected) {
        that.$set(that.model.useFunction[i],'isSelected',false);
      }else{
        that.$set(that.model.useFunction[i],'isSelected',true);
      }
      var StoreManagement=1;var DataViewFlag=1;
      if(!that.model.useFunction[0].isSelected)
      {
        StoreManagement=0;
      }
      if(!that.model.useFunction[1].isSelected)
      {
        DataViewFlag=0;
      }
      that.setPower(StoreManagement,DataViewFlag);
    },
    setPower(StoreManagement,DataViewFlag){
        var that=this;
        Indicator.open();
        var url = "/channel/H5UpdateDealerEmployeeMenu";
        var dataParams = that.searchData;
        dataParams.StoreManagement=StoreManagement;
        dataParams.DataView=DataViewFlag;
        var cbError=function(){Indicator.close();}
        var cbSuccess = function(res){
            Indicator.close();
            if (!res.flag){
              Toast(res.msg);
              that.judgeLogin();
            }
        };
        //请求后端
        channelHelper.CommonCallService(url,dataParams,cbSuccess,cbError,null,null);
    },
    /*获取所有门店 */
    GetStoreDrop(){
         Indicator.open();
        var that=this;
        var url = "/channel/GetAuthorizeStoreList";
        // var dataParams = {
        //     EntranceId:that.sup8.context.entranceid,
        //     AreaId:that.SearchValue.AreaId,
        //     OrganizationName:that.SearchValue.SearchStoreName,
        //     EnterpriseNo:that.sup8.context.enterpriseno,
        //     LanguageType:channelHelper.GetLanguageType(),
        //     OrganizationType:"17",
        //     limit:100,
        //     offset:0,
        //     UserToken:"不传Token"
        // };
        var UserCache=channelHelper.GetUserLoginInfo();
        var dataParams = {
            EnterpriseNo:that.sup8.context.enterpriseno,
            LanguageType:channelHelper.GetLanguageType(),
            UserId:UserCache.UserId,
            Limit:100,
            Offset:0,
            UserToken:"不传Token"
        };
        var cbError=function(){Indicator.close();}
        var cbSuccess = function(res){ Indicator.close();
            var storeSelectList=[];
            if(res.flag)
            {
              if (res.data&&res.data.Rows&&res.data.Rows.length>0) {
                storeSelectList=res.data.Rows;
                $.each(storeSelectList,function(m,n){
                  storeSelectList[m].isSelected=false;
                  for(var i=0;i<that.model.BindModel.ManageStores.length;i++){
                    if(n.ORGANIZATION_ID==that.model.BindModel.ManageStores[i].StoreId)
                    {
                      storeSelectList[m].isSelected=true;
                      return;
                    }
                  }
                });
              }
              that.model.storeSelectList=storeSelectList;
              // $.each(that.model.storeSelectList,function(m,n){
              //   that.model.storeSelectList[m].isSelected=false;
              //   for(var i=0;i<that.model.BindModel.ManageStores.length;i++){
              //     if(n.ORGANIZATION_ID==that.model.BindModel.ManageStores[i].StoreId)
              //     {
              //       console.log(n.ORGANIZATION_ID+'    '+n.ORGANIZATION_NAME);
              //       that.model.storeSelectList[m].isSelected=true;
              //       return;
              //     }
              //   }
              // });
            } 
            Indicator.close();
        };
        //请求后端
        channelHelper.CommonCallService(url,dataParams,cbSuccess,cbError,null,null);
    },
    /* 检测门店ID在已有的数据中是否存在 不存在则可以加 不存在返回true */
    CheckStoreIDIsAdd:function(id){
        var CheckFlag=true;
        $.each(this.model.BindModel.ManageStores,function(x,y){
            if(y.StoreId==id)
            {
               CheckFlag=false;
            }
        });
        return CheckFlag;
    },
    /* 确定新增门店 */
    HandelConfirm:function(){
      var that=this;
      /* 校验勾选的门店数据 */
      var StoreIds=new Array();
      $(".checkSelect").each(function(){
          if($(this).hasClass("storeSelected")&&that.CheckStoreIDIsAdd($(this).data("id")))
          {
            StoreIds.push($(this).data("id"));
          }
      }); 
      if(StoreIds.length==0)
      {
        Toast("请选择一个需要新增的门店!(若门店已经存在请再选择一个)");
        return false;
      }
      var that=this;
      that.H5BatchAddDealerEmployeeStore(StoreIds.join(","));
    },
    H5DeleteDealerEmployeeStore:function(i,ManageStoreId){
      var that=this;
      MessageBox.confirm('确定执行此操作?').then(action => {
        Indicator.open();
        var url = "/channel/H5DeleteDealerEmployeeStore";
        var dataParams = that.searchData;
        dataParams.ManageStoreId=ManageStoreId;
        var cbError=function(){Indicator.close();}
        var cbSuccess = function(res){
          Indicator.close();
          if(!res.flag){
            Toast(res.msg);
            that.judgeLogin();
          }else{
            Toast(res.msg);
            var ManageStores=that.model.BindModel.ManageStores;
            ManageStores.splice(i,1);
            that.$set(that.model.BindModel,'ManageStores',ManageStores);
          }
        };
        //请求后端
        channelHelper.CommonCallService(url,dataParams,cbSuccess,cbError,null,null);
      });
    },
    /* 获取经销商员工信息 */
    H5GetDealerClerkInfo:function(flag){
      var that=this;
      if(flag){
        Indicator.open();
      }
      var url = "/channel/H5GetDealerClerkInfo";
      var dataParams = that.searchData;
      var cbError=function(){Indicator.close();}
      var cbSuccess = function(res){
          Indicator.close();
          debugger
          if (res.flag&&res.data){
            that.model.BindModel=res.data;
            if(that.model.BindModel.Menus)
            {
              if(that.model.BindModel.Menus.StoreManagement==1)
              {
                that.model.useFunction[0].isSelected=true;
              }
              if(that.model.BindModel.Menus.DataView==1)
              {
                that.model.useFunction[1].isSelected=true;
              }
              if (!that.model.BindModel.ManageStores) {
                that.$set(that.model.BindModel,'ManageStores',[]);
              }
            }
          }else{
            Toast(res.msg);
            that.judgeLogin();
          }
      };
      //请求后端
      channelHelper.CommonCallService(url,dataParams,cbSuccess,cbError,null,null);
    },
    /* 批量新增门店 */
    H5BatchAddDealerEmployeeStore:function(StoreIds){
      var that=this;
      Indicator.open();
      var url = "/channel/H5BatchAddDealerEmployeeStore";
      var dataParams = that.searchData;
      dataParams.StoreIds=StoreIds;
      var cbError=function(){Indicator.close();}
      var cbSuccess = function(res){
          Indicator.close();
          if (res.flag){
            Toast("操作成功!");
            that.$set(that.isShow,'isAddStore',false);
            that.H5GetDealerClerkInfo(false);
          }else{
            Toast(res.msg);
            that.judgeLogin();
          }
      };
      //请求后端
      channelHelper.CommonCallService(url,dataParams,cbSuccess,cbError,null,null);
    },
    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;
      }
    },
    btnAddClick:function(){
      var that=this;
      if (that.isShow.isAddStore) {
        return;
      }
      that.$set(that.isShow,'isAddStore',true);
      that.GetStoreDrop();
    },
    setStoreSelect:function(nameid,flag){
      var that=this;
      if(!flag){
         if($("span[name='"+nameid+"']").hasClass("storeSelected"))
         {
            $("span[name='"+nameid+"']").removeClass("storeSelected");
         }
         else
         { 
            $("span[name='"+nameid+"']").addClass("storeSelected");
         }
      }
      // if (that.model.storeSelectList[i].isSelected) {
      //   that.$set(that.model.storeSelectList[i],'isSelected',false);
      // }else{
      //   that.$set(that.model.storeSelectList[i],'isSelected',true);
      // }
    }
  },
  created: function() {
    var that = this;
    var isDesign = location.pathname.indexOf('design');
    if(isDesign!=-1)
    {
        return;
    }
    //判断是否登录
    that.judgeLogin();
    var data=JSON.parse(sessionStorage.getItem("OwnerStoreManager"));
    if (data&&data.ID) {
      that.$set(that,'searchData',{
        UserToken:channelHelper.GetUserToken(),
        EnterpriseNo:that.sup8.context.enterpriseno,
        LanguageType:channelHelper.GetLanguageType(),
        ClerkId:(data.ID?data.ID:""),
      });

      that.H5GetDealerClerkInfo(true);
    }
  },
  mounted: function() {
    
  }
};
</script>
