<template>
  <div class="container resource" style="min-height: 458px;">
      <div class="pop-banner clearfix">
        <div class="operate-btns"> 
          <a href="javascript:void(0)" class="fbtn fb-modify" v-if="!disabledForUpdate" @click="update">修改</a>
          <a href="javascript:void(0)" class="fbtn fb-modify" style="color:#DCDCDC" v-disabled="disabledForUpdate" v-if="disabledForUpdate">修改</a>
          <a href="javascript:void(0)" class="fbtn fb-add" v-if="!disabledForAdd" @click="insert"  >添加</a>
          <a href="javascript:void(0)" class="fbtn fb-add" style="color:#DCDCDC" v-disabled="disabledForAdd" v-if="disabledForAdd">添加</a>     
          <a href="javascript:;" class="fbtn fb-save" @click="save"  v-if="'/operator/dataadmin:saveMfdistrbStaffAndMdsistributionVO'  | myqx !disabled ">保存</a>
          <a href="javascript:;" class="fbtn fb-save"  style="color:#DCDCDC" v-if="'/operator/dataadmin:saveMfdistrbStaffAndMdsistributionVO'  | myqx disabled "  >保存</a>
          <template v-if="stateAll">
          <template v-if="mfdistrbStaffAndMdsistributionVO.mfdistribution.bizstate!='Y' &&  mfdistrbStaffAndMdsistributionVO.mfdistribution.bizstate!='E'">
              <a href="javascript:;" class="fbtn fb-valid"   @click="mfdistributionBizState('Y',0)" v-if="'/operator/dataadmin:mfdistributionBizStateY' | myqx !disabled" >启用</a>
              <a href="javascript:;" class="fbtn fb-valid"    style="color:#DCDCDC"    v-if="'/operator/dataadmin:mfdistributionBizStateY' | myqx disabled" >启用</a>
          </template>
          <template v-if="mfdistrbStaffAndMdsistributionVO.mfdistribution.bizstate!='S' &&  mfdistrbStaffAndMdsistributionVO.mfdistribution.bizstate!='E'">
              <a href="javascript:;" class="fbtn fb-unused"   @click="mfdistributionBizState('S',0)" v-if="'/operator/dataadmin:mfdistributionBizStateS' | myqx !disabled" >停用</a>
              <a href="javascript:;" class="fbtn fb-unused"    style="color:#DCDCDC"    v-if="'/operator/dataadmin:mfdistributionBizStateS' | myqx disabled" >停用</a>
          </template>
         <template v-if="mfdistrbStaffAndMdsistributionVO.mfdistribution.bizstate!='E'">
             <a href="javascript:;" class="fbtn fb-dump"     @click="mfdistributionBizState('E',1)" v-if="'/operator/dataadmin:mfdistributionBizStateE' | myqx !disabled" >作废</a>
             <a href="javascript:;" class="fbtn fb-dump"    style="color:#DCDCDC"    v-if="'/operator/dataadmin:mfdistributionBizStateE' | myqx disabled" >作废</a>
        </template>
        </template>
        </div>
      <h3 class="current-module">配送商资料初始化</h3>
      </div>
    <div class="pd-form md-20">
     <div class="group-row">
      <div class="form-group form-required">
        <label class="label" for="cn1">配送商</label>
        <div class="control">
          <input type="text" id="cn1" maxlength="20" v-model="mfdistrbStaffAndMdsistributionVO.mfdistribution.name" v-bind:readonly="readonly"   @change="validAccountExist1" v-rule>
        </div>
      </div>
     <div class="form-group form-requireds" >
        <label class="label" for="cn2">业务状态</label>
        <div class="control">
         <select-ui :list="bizstate" :selected.sync="mfdistrbStaffAndMdsistributionVO.mfdistribution.bizstate"   empty-text="请选择" v-bind:disabled="disabled"></select-ui> 
        </div>
      </div>

    </div>
       <div class="group-row edit-logo">
      <div class="form-group">
        <label for="cn2" class="label">配送商图标</label>
        <div class="ep-title">
          <div class="ep-pic">
          <avatars class="avatar" :json-str="avatar"></avatars> 
          </div>
          <div class="ep-cast">
            <div class="form-group form-group-long">
              <div class="edit-links"> 
                 <upload :model.sync="avatar" type="avatar" v-on:file-change="setHeadImg" >   
                 <button class="edit-logo-btn btn-upload" v-bind:readonly="readonly">上传</button>
                 </upload>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="form-group">
        <label class="label">地址</label>
         <div class="control">
              <div class="address-select" >
                <city :province.sync="mfdistrbStaffAndMdsistributionVO.mfdistribution.province"
                  :city.sync="mfdistrbStaffAndMdsistributionVO.mfdistribution.city"
                  :area.sync="mfdistrbStaffAndMdsistributionVO.mfdistribution.district"
                  :readonly="readonly"
                  ></city>
              </div>
            </div>
           </div>
    <div class="form-group">
      <label class="label" for="cn1">详细地址</label>
      <div class="control">
        <input type="text" id="cn1" v-model="mfdistrbStaffAndMdsistributionVO.mfdistribution.address"  v-bind:readonly="readonly">
      </div>
    </div>
    <div class="group-row">
      <div class="form-group">
        <label class="label" for="cn1">联系人</label>
        <div class="control">
          <input type="text" id="cn1" maxlength="8" v-model="mfdistrbStaffAndMdsistributionVO.mfdistribution.linkman"  v-bind:readonly="readonly" v-rule>
        </div>
      </div>
      <div class="form-group">
        <label class="label" for="cn1">联系电话</label>
        <div class="control">
          <input type="text" id="cn1" maxlength="11" v-model="mfdistrbStaffAndMdsistributionVO.mfdistribution.contacttel"  v-bind:readonly="readonly">
        </div>
      </div>
    </div>
  </div>

  <div class="fheader no-bottom">
    <h4 class="no-icon">开通管理员账号</h4>
    <div class="checkbox-control checkbox-alone">
      <input type="checkbox" id="cc31" v-model="selected1"  v-bind:disabled="disabled" >
       <label for="cc31" class="checkbox">
    </div>
  </div>
  <div class="pd-form">
    <div class="group-row">
      <div class="form-group form-required">
        <label class="label" for="cn1">姓名</label>
        <div class="control ">
          <input type="text" maxlength="8"  v-model="mfdistrbStaffAndMdsistributionVO.mfdistrbstaff.realname" id="cn1"  v-bind:readonly="readonly" v-rule>
        </div>
      </div>
      <div class="form-group">
        <label class="label primary-text">性别</label>
        <div class="control">
          <div class="radio-control">
            <input type="radio" id="radio03" value="1" v-model="mfdistrbStaffAndMdsistributionVO.mfdistrbstaff.sex"  v-bind:readonly="readonly">
              <label class="radio" for="radio03">男</label>
              <input type="radio" id="radio04" value="2" v-model="mfdistrbStaffAndMdsistributionVO.mfdistrbstaff.sex"  v-bind:readonly="readonly">
              <label class="radio" for="radio04">女</label>
          </div>
        </div>
      </div>
    </div>
    <div class="group-row">
      <div class="form-group form-required">
        <label class="label" for="cn22">登录帐号</label>
        <div class="control ">
          <input type="text" maxlength="20" v-model="mfdistrbStaffAndMdsistributionVO.mfdistrbstaff.logonuser"  @change="validAccountExist"   id="cn22" v-bind:readonly="!logonuserdisabled"  >
           <!--v-bind:disabled="!logonuserdisabled"  -->
        </div>
      </div>
      <div class="form-group">
        <label class="label primary-text">接收短信通知</label>
        <div class="control">
          <div class="radio-control">
            <input type="radio" id="radio05" value="Y" v-model="mfdistrbStaffAndMdsistributionVO.mfdistrbstaff.isreceivesms"  v-bind:readonly="readonly">
              <label class="radio" for="radio05">是</label>
              <input type="radio" id="radio06" value="N" v-model="mfdistrbStaffAndMdsistributionVO.mfdistrbstaff.isreceivesms"  v-bind:readonly="readonly">
              <label class="radio" for="radio06">否</label>
          </div>
        </div>
      </div>
    </div>
    <div class="group-row">
     <div class="form-group">
            <label for="cn3" class="label">登录密码</label>
            <div class="control input-has-btn form-required">
              <input type="password" maxlength="15" v-model="mfdistrbStaffAndMdsistributionVO.mfdistrbstaff.pwd" v-bind:readonly="readonly" id="cn3" style="width:286px;height:30px">
          <span class="input-pwd-show" id="show" style="display:none" @click="showOrHide('show')"></span>
          <span class="input-pwd-hide" id="hide" @click="showOrHide('hide')"></span>
            </div>
          </div>

      <div class="form-group">
        <label class="label primary-text">接收微信通知</label>
        <div class="control">
          <div class="radio-control">
           <input type="radio" id="radio07" value="Y" v-model="mfdistrbStaffAndMdsistributionVO.mfdistrbstaff.isreceivewebchart" 
           v-bind:readonly="readonly">
              <label class="radio" for="radio07">是</label>
              <input type="radio" id="radio08" value="N" v-model="mfdistrbStaffAndMdsistributionVO.mfdistrbstaff.isreceivewebchart" 
               v-bind:readonly="readonly">
              <label class="radio" for="radio08">否</label>
          </div>
        </div>
      </div>
    </div>
    <div class="group-row">
      <div class="form-group form-required">
        <label class="label" for="cn4">手机号</label>
        <div class="control ">
          <input type="text" maxlength="11" v-model="mfdistrbStaffAndMdsistributionVO.mfdistrbstaff.mobiletel" id="cn1"  v-bind:readonly="readonly">
        </div>
      </div>
      <div class="form-group">
        <label class="label primary-text">接收邮件通知</label>
        <div class="control">
          <div class="radio-control">
            <input type="radio" id="radio09" value="Y" v-model="mfdistrbStaffAndMdsistributionVO.mfdistrbstaff.isreceiveemail" v-bind:readonly="readonly">
             <label class="radio" for="radio09">是</label>
             <input type="radio" id="radio10" value="N" v-model="mfdistrbStaffAndMdsistributionVO.mfdistrbstaff.isreceiveemail"  v-bind:readonly="readonly">
             <label class="radio" for="radio10">否</label>
          </div>
        </div>
      </div>
    </div>
    <div class="group-row">
      <div class="form-group form-required">
        <label class="label" for="cn5">邮箱</label>
        <div class="control ">
          <input type="text" v-model="mfdistrbStaffAndMdsistributionVO.mfdistrbstaff.eMail" id="cn1"  v-bind:readonly="readonly">
        </div>
      </div>
     <div class="form-group">
        <label class="label primary-text">接收APP通知</label>
        <div class="control">
          <div class="radio-control">
            <input type="radio" id="radio11" value="Y" v-model="mfdistrbStaffAndMdsistributionVO.mfdistrbstaff.isreceiveapp" v-bind:readonly="readonly">
              <label class="radio" for="radio11">是</label>
              <input type="radio" id="radio12" value="N" v-model="mfdistrbStaffAndMdsistributionVO.mfdistrbstaff.isreceiveapp"  v-bind:readonly="readonly">
              <label class="radio" for="radio12">否</label>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>
<script>
module.exports={
  data: function(){
    return { 
      avatar:'',
      readonly:"disabled",
      selected1:false,
      distributorUserAll:{},
      ishadministrator:[],
      genderList: [{
        value: "1",
        label: "男"
      }, {
        value: "2",
        label: "女"
      }], 
      smsFlag: [{
        value: "Y",
        label: "是"
      }, {
        value: "N",
        label: "否"
      }],
      wxFlag: [{
        value: "Y",
        label: "是"
      }, {
        value: "N",
        label: "否"
      }],
      emailFlag: [{
        value: "Y",
        label: "是"
      }, {
        value: "N",
        label: "否"
      }],
       bizstate: [{
        value: "Y",
        label: "启用"
      }, {
        value: "S",
        label: "停用"
      }, {
        value: "E",
        label: "作废"
      }],
       codes: ['启用', '停用', '作废'],
      resource: [],
      selectedResource: [],
      product:{},
      readonly:"disabled",
      //operationFlag:"0",
      bigTypes:[],
      checked : "",
 
  mfdistrbStaffAndMdsistributionVO:{
        mfdistribution:{},
        mfdistrbstaff:{
          sex:'1',
          isreceivesms:'Y',
          isreceivewebchart:'Y',
          isreceivewebchart:'Y',
          isreceiveemail:'Y',
          isreceiveapp:'Y',
          ishadministrator:'y',
        },
        preAdminStatus:'',
      },
      preAdminFlag:'',
      disabled: true,
      logonuserdisabled:false,
      disabledForUpdate:false,
      disabledForAdd:false,
      disabledForDelete:true,
      disabledForSave:true,
      disabledForStopDestroy:true,
      stateAll:true,
     };
  },
  
  methods: {
      //修改头像
     setHeadImg:function(){
        this.$set('mfdistrbStaffAndMdsistributionVO.mfdistribution.pictcontent',this.avatar);
    },
    getData: function(){
      var self = this;
if(this.$route.params.iguid != 0 ){
      Ajax.get('/dataadmin/mfdistrbStaffAndMdsistributionVO/'+this.$route.params.guid)
        .then(function (response){
          var data = response.data.data;
          self.$set('mfdistrbStaffAndMdsistributionVO',data);
          self.$set('preAdminFlag',data.mfdistrbstaff.ishadministrator);
       if (self.mfdistrbStaffAndMdsistributionVO.mfdistrbstaff.ishadministrator == 'Y') {
            self.selected1 = true;
          } else {
            self.selected1= false;
            }
           if(self.mfdistrbStaffAndMdsistributionVO.mfdistribution.pictcontent!=null){
              self.avatar = self.mfdistrbStaffAndMdsistributionVO.mfdistribution.pictcontent;
            }else{
               self.$set('avatar',null);
            }
              self.$set('disabled',true);
              self.$set('readonly',true);
        })
        self.$set('disabledForUpdate',false);
        self.$set('logonuserdisabled',false);
        self.$set('disabledForAdd',true);
        self.$set('disabledForDelete',true);
        self.$set('disabledForSave',true);
        self.$set('disabledForStopDestroy',true);
        self.$set('stateAll',true);
    }else{
        self.defaultData();
        self.$set('disabledForUpdate',true);
        self.$set('readonly',false);
        self.$set('disabled',false);
        self.$set('disabledForAdd',true);
        self.$set('logonuserdisabled',false);
        self.$set('disabledForDelete',true);
        self.$set('disabledForSave',false);
        self.$set('disabledForStopDestroy',false);
        self.$set('stateAll',false);
       }
     },
defaultData:function(){
          this.$set('mfdistrbStaffAndMdsistributionVO.mfdistrbstaff.sex',1);
          this.$set('mfdistrbStaffAndMdsistributionVO.mfdistrbstaff.isreceivesms','Y');
          this.$set('mfdistrbStaffAndMdsistributionVO.mfdistrbstaff.isreceivewebchart','Y');
          this.$set('mfdistrbStaffAndMdsistributionVO.mfdistrbstaff.isreceiveemail','Y');
          this.$set('mfdistrbStaffAndMdsistributionVO.mfdistrbstaff.isreceiveapp','Y');
          this.$set('mfdistrbStaffAndMdsistributionVO.mfdistrbstaff.isreceivewebchart','Y');
          this.$set('mfdistrbStaffAndMdsistributionVO.mfdistrbstaff.ishadministrator','Y');
          this.$set('avatar', null);
     },

    update:function() {
       var self = this;
       self.$set('disabled',false);
       self.$set('readonly',false);
       self.$set('disabledForUpdate',true);
       self.$set('disabledForAdd',false);

       self.$set('logonuserdisabled',true);

       self.$set('disabledForDelete',false);
       self.$set('disabledForSave',false);
       self.$set('disabledForStopDestroy',false);
       self.$set('stateAll',true);
       return;
    },
   insert:function() {
      var self = this;
       self.operationFlag = "0";
       self.$set('mfdistrbStaffAndMdsistributionVO',{});
       				self.$set('mfdistrbStaffAndMdsistributionVO.mfdistribution.bizstate', "Y");

       self.$set('disabled',false);
       self.$set('readonly',false);
       self.$set('disabledForUpdate',true);
       self.$set('disabledForAdd',true);
       self.$set('logonuserdisabled',true);
       self.$set('disabledForDelete',true);
       self.$set('disabledForSave',false);
       // self.$set('disabledForStopDestroy',true);
       self.$set('stateAll',false);
        $("#cn22").removeAttr("readonly",true);
       return;
    },
    showOrHide:function(sign){
          if(sign=='hide'){
              $("#cn3").attr("type","text");
              $("#hide").css("display","none");
              $("#show").css("display","block");
          }else if(sign=='show'){
              $("#cn3").attr("type","password");
              $("#show").css("display","none");
              $("#hide").css("display","block");
          }
    },
 
    // 验证登录名
    validAccountExist:function(){
          var self=this;         
          var logonuser = encodeURIComponent(encodeURIComponent(self.mfdistrbStaffAndMdsistributionVO.mfdistrbstaff.logonuser));
         Ajax.get('/dataadmin/validMfdistrbstaff/'+ logonuser)
            .then(function (response) {
                 var data=response.data;
                 // alert(JSON.stringify(response));
                 if(data.errorCode!=0){
                self.MessageBox({title:'提示',message:'登录帐号已存在，请重新输入！',type:'alert'},function(action){
                  self.$set('mfdistrbStaffAndMdsistributionVO.mfdistrbstaff.logonuser','');
                });
                return;
             }
          });
      },

// 验证医疗机构名
    validAccountExist1:function(){
      var self=this;
      var name = encodeURIComponent(encodeURIComponent(self.mfdistrbStaffAndMdsistributionVO.mfdistribution.name));
      Ajax.get('/dataadmin/validMfdistrbstaff1/' + name)
          .then(function (response) {
               var data=response.data;
                if(data.errorCode!=0){
              self.MessageBox({title:'提示',message:'配送商名称已存在，请重新输入！',type:'alert'},function(action){
                  self.$set('mfdistrbStaffAndMdsistributionVO.mfdistribution.name','');
              });
              return;
           }
        });
      }, 
    save:function() {
    var self = this;
     if (self.selected1) {
        self.mfdistrbStaffAndMdsistributionVO.mfdistrbstaff.ishadministrator = 'Y';
      } else {
        self.mfdistrbStaffAndMdsistributionVO.mfdistrbstaff.ishadministrator= 'N';
      } 
      // 配送商名称
      if(self.mfdistrbStaffAndMdsistributionVO.mfdistribution.name==null || self.mfdistrbStaffAndMdsistributionVO.mfdistribution.name==''){
            layer.msg('配送商名称不能为空！');
            return;
        }
         // 账号
        if(self.mfdistrbStaffAndMdsistributionVO.mfdistrbstaff.logonuser==null || self.mfdistrbStaffAndMdsistributionVO.mfdistrbstaff.logonuser==''){
            layer.msg('登录账号不能为空！');
            return;
        }
        // 手机号
        if(self.mfdistrbStaffAndMdsistributionVO.mfdistrbstaff.mobiletel.length!=11){
            layer.msg('手机号不是11位！');
            return;
            }
        if(!self.mfdistrbStaffAndMdsistributionVO.mfdistrbstaff.mobiletel.match(/^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1})|(19[0-9]{1}))+\d{8})$/)){
            layer.msg('手机号必须是有效！');
            return;
        }
        // 密码 
        if(!self.mfdistrbStaffAndMdsistributionVO.mfdistrbstaff.pwd || self.mfdistrbStaffAndMdsistributionVO.mfdistrbstaff.pwd.length < 8){
                  layer.msg('请输入长度不小于8位数的密码！');
                  self.$set('mfdistrbStaffAndMdsistributionVO.mfdistrbstaff.pwd', '');
                  return;
                }
                 var pwdRegex = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z]).{8,30}'); 
                 if (!pwdRegex.test(self.mfdistrbStaffAndMdsistributionVO.mfdistrbstaff.pwd)) {
                   layer.msg("您的密码复杂度太低（密码中必须包含字母、数字），请及时修改密码！");
                   self.$set('mfdistrbStaffAndMdsistributionVO.mfdistrbstaff.pwd', '');
                   return;
                }
          self.mfdistrbStaffAndMdsistributionVO.preAdminStatus=self.preAdminFlag;
       Ajax.post('/dataadmin/saveMfdistrbStaffAndMdsistributionVO',this.mfdistrbStaffAndMdsistributionVO)
        .then(function (response){
              var data=response.data;
              if(data.errorCode==0){
              self.MessageBox({
                title:'提示',message:'保存成功！',type:'alert'
              },function(action){
                self.$route.router.go('/dataAdminDistribution');
              })
            }else{
              layer.msg(data.message);
            }
         });  

    },

     // 业务状态
  mfdistributionBizState: function (bizsate,num) {
        var self = this;
        // updateUser的参数说明：guid=医疗机构资料的GUID，bizstate=操作代码
        // bizstate代码说明：Y=有效，S=停用，N=作废 
        Ajax.post('/dataadmin/mfdistributionBizState/' + this.mfdistrbStaffAndMdsistributionVO.mfdistribution.guid + '/' + bizsate )
          .then(function (response) { 
              var data = response.data;
                 if (data.errorCode == 0) {
             self.MessageBox({title:'提示', message:'更新成功', type: 'alert'},function(action){
                if (action == 'confirm') {
                    self.getData();
                    // self.$route.router.go('/dataAdminDistributionDetail');
                   }
                })
            } else {
              layer.msg(response.data.message);
            }
        });
      },
      // 删除方法（误删）
   // deleteUser: function () {
   //      var self = this; 
   //      Ajax.get('/dataadmin/deleteMfdistribution/' + this.mfdistrbStaffAndMdsistributionVO.mfdistribution.guid)
   //        .then(function (response) {
   //                  var data = response.data;
   //          if (data.errorCode == 0) {
   //           self.MessageBox({title:'提示', message:'删除成功', type: 'alert'},function(action){
   //              if (action == 'confirm') {
   //                  self.$route.router.go('/dataAdminDistribution');
   //                }
   //              })
   //          } else {
   //           self.MessageBox({title:'警告', message:response.data.message, type: 'alert'},function(action){
   //            });
   //         } 
   //       });
   //    },


      getAll:function() {
      var self = this;
 Ajax.get('/dataadmin/distributorUserAll').then(function (response) {
            self.distributorUserAll = _.map(response.data.data, function (item) {
                return {
                    label: item.name,
                    value: item.id
                };
            });
        })
     },     
  },
  route:{
    activate : function(){
        if (this.$route.params.guid == 'true') {
            this.mfdistrbStaffAndMdsistributionVO={};
            this.insert();
            this.defaultData();
      } else {
       this.getData();
       this.getAll();
       this.defaultData();
      }
      
    }
  }
};
</script>