<!-- @desc:登录表格  @auth:洪旭东  @time:2022/5/13 17:04 -->
<template>
  <Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit">
    <!--    <FormItem prop="soCode" v-if="$route.name == 'login'">-->
    <!--      <Input prefix="md-briefcase" v-model="form.soCode" size="large" @on-change="handleSoCodeChange"-->
    <!--             :placeholder="$t('pleaseEnterDealer')">-->
    <!--      </Input>-->
    <!--    </FormItem>-->
    <!--用户-->
    <FormItem prop="userCode">
      <Input ref="userCode" prefix="ios-person" v-model="form.userCode" size="large"
             :placeholder="$t('pleaseEnterUserName')" @on-change="handleUserChange">
      </Input>
    </FormItem>
    <!--密码-->
    <FormItem prop="userPwd">
      <Input prefix="md-lock" type="password" size="large" v-model="form.userPwd" password
             :placeholder="$t('pleaseEnterPassWord')">
      </Input>
    </FormItem>
    <Checkbox v-model="rememberMe" class="remember-me">&nbsp;&nbsp;记住用户名</Checkbox>
    <FormItem style="padding-top: 4px;margin-bottom: 10px !important;">
      <Button class="login-class" @click="handleSubmit" size="large" type="primary" long :disabled="loading">
        <span v-if="!loading">{{ $t('login') }}</span>
        <span v-else>loading...</span>
      </Button>

    </FormItem>
  </Form>
</template>
<script>
export default {
  name: 'LoginForm',
  props: {
    type: {
      type: String,
      default: ''
    },
    loading: {
      type: Boolean,
      default: false
    },
  },
  data() {
    let self = this
    return {
      rules: {
        userCode: {required: true, message: self.$t('pleaseEnterUserName_placeholder'), trigger: 'blur'},
        userPwd: {required: true, message: self.$t('pleaseEnterPassWord_placeholder'), trigger: 'blur'},
      },
      rememberMe: false,
      form: {
        userCode: '',
        userPwd: '',
        appUuid: '',
        rememberMe: false
      }
    }
  },
  computed: {},
  methods: {
    /**
     * @desc   : 转大写
     * @author : 周兴
     * @date   : 2022/8/5 15:19
     */
    handleSoCodeChange(e) {
      let selectionStart = e.target.selectionStart;
      // 转大写
      let value = this.form.soCode;
      if (value) {
        value = value.toUpperCase();
      }
      // 中间输入的时候把光标移动回来
      setTimeout(() => {
        e.target.selectionStart = selectionStart;
        e.target.selectionEnd = selectionStart;
      }, 30)
      this.form.soCode = value;
    },
    /**
     * @desc   : 转大写
     * @author : 周兴
     * @date   : 2022/8/5 15:19
     */
    handleUserChange(e) {
      let selectionStart = e.target.selectionStart;
      // 转大写
      let value = this.form.userCode;
      if (value) {
        value = value.trim();
        value = value.toUpperCase();
      }
      // 中间输入的时候把光标移动回来
      setTimeout(() => {
        e.target.selectionStart = selectionStart;
        e.target.selectionEnd = selectionStart;
      }, 30)
      this.form.userCode = value;
    },
    /**
     *   @desc   : 提交登录信息
     *   @date   : 2022/5/13 16:53
     *   @author : 洪旭东
     */
    handleSubmit() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          if (this.rememberMe) {
            sessionStorage.setItem('rememberMe', this.form.userCode)
          } else {
            sessionStorage.removeItem('rememberMe')
          }
          this.$emit('on-success-valid', {
            // sysId: this.$route.name == 'login' ? this.$config.sysType.SYS_MERCHANT : this.$config.sysType.SYS_HEGII,
            // appUuid: this.$route.name == 'login' ? this.$config.appType.APP_WEB_MERCHANT : this.$config.appType.APP_WEB_HEGII,
            // soCode: this.form.soCode,
            userCode: this.form.userCode,
            userPwd: this.form.userPwd,
            appCode: this.$config.appCode.WEB
            // rememberMe: this.form.rememberMe
          })
        }
      })
    },
    /**
     *   @desc   : 记住密码
     *   @date   : 2022/5/13 16:53
     *   @author : 洪旭东
     */
    getRememberMe() {
      if (sessionStorage.getItem('rememberMe')) {
        this.form.userCode = sessionStorage.getItem('rememberMe')
        this.rememberMe = true
      }
    }
  },
  created() {
    //记住密码
    this.getRememberMe()
  }
}
</script>
<style lang="less" scoped>

.remember-me {
  margin-bottom: 20px;
  font-size: 14px!important;
}

/deep/ input::-webkit-input-placeholder {
  -webkit-text-fill-color: #95A8CB !important;
}

/deep/ input::-moz-input-placeholder {
  -webkit-text-fill-color: #95A8CB !important;
}

/deep/ input::-ms-input-placeholder {
  -webkit-text-fill-color: #95A8CB !important;
}


/deep/ .ivu-input {
  border-radius: 4px !important;
  height: 40px !important;
  font-size: 14px !important;
  color: #1B365D !important;
}

.login-class {
  background: #3B6EE5;
  border-radius: 8px;
  height: 40px;
  border-radius: 44px;
}

/deep/ .ivu-btn > span {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}

/deep/.ivu-form-item-error-tip{
  padding-top: 4px !important;
}

/deep/.ivu-input-wrapper-large .ivu-input-prefix i{
  font-size: 16px;
  line-height: 40px;
}

</style>
