<template>
  <div class="login-wrap"
       :id="theme==='dark'?'dark-login-wrap':''"
       :style="rootStyle">
    <slot name="leftLogo">
      <div class="left-logo-wrap">
        <div class="left-logo"></div>
      </div>
    </slot>

    <div class="login-container">
      <el-form :model="loginForm"
               ref="loginFormRef"
               :rules="loginRules">
        <el-form-item :label="$t(titleLabel)"></el-form-item>
        <el-form-item prop="userName">
          <el-input v-model.trim="loginForm.userName"
                    clearable
                    :placeholder="$t('ht.login.text_2')">
            <i class="el-icon-user-solid"
               slot="prefix"></i>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input show-password
                    clearable
                    :placeholder="$t('ht.login.text_3')"
                    v-model.trim="loginForm.password">
            <i class="el-icon-lock"
               slot="prefix"></i>
          </el-input>
        </el-form-item>
        <slot name="form"></slot>
        <el-form-item class="login-btn-wrap">
          <el-button type="primary"
                     :loading="loading"
                     @click.stop="onLogin"
                     icon="el-icon-check">{{$t('ht.login.text_1')}}</el-button>
          <el-button icon="el-icon-refresh"
                     @click.stop="resetFormHandler">{{$t('ht.common.reset')}}</el-button>
        </el-form-item>
      </el-form>
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HtLogin',
  data () {
    return {
      loginForm: {
        userName: '',
        password: ''
      },
      loginRules: {
        userName: [
          {
            required: true,
            message: this.$t('ht.login.text_2'),
            trigger: 'change'
          }
        ],
        password: [
          {
            required: true,
            validator: this.passValidator,
            // message: this.$t('ht.login.text_3'),
            trigger: 'change'
          }
        ]
      }
    }
  },
  props: {
    // 内容区登录title
    titleLabel: {
      type: String,
      default: 'ht.login.text_4'
    },
    // 开启loading
    loading: {
      type: Boolean,
      default: false
    },
    // 主题色
    theme: {
      type: String,
      default: 'light',
      validate: value => {
        return ['light', 'dark'].includes(value)
      }
    },
    // 密码正则
    pwdRegex: {
      type: RegExp,
      validator: (value) => {
        let flag = value instanceof RegExp
        return flag
      },
      default: () => /\d/
    },
    // 密码正则校验提示文案
    pwdRegexTipMsg: {
      type: String,
      default: 'ht.login.text_5'
    }
  },
  computed: {
    rootStyle () {
      let theme = this.theme === 'dark' ? '#000' : '#fff'
      return {
        '--theme': theme
      }
    }
  },
  methods: {
    async passValidator (rule, value, callback) {
      if (!value) {
        return callback(new Error(this.$t('ht.login.text_3')))
      }
      if (this.pwdRegex) {
        let flag = this.pwdRegex && this.pwdRegex.test(value)
        if (!flag) {
          return callback(new Error(this.$t(this.pwdRegexTipMsg)))
        }
        callback()
      }
    },
    async resetFormHandler () {
      let dom = this.$refs['loginFormRef']
      if (!dom) return
      dom.resetFields()
    },
    async onLogin () {
      let dom = this.$refs['loginFormRef']
      if (!dom) return
      dom.validate((valid) => {
        if (!valid) return
        this.$emit('onSubmit', this.loginForm)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
#dark-login-wrap {
  /deep/.el-input__inner {
    background: #e5e5e5;
    border: none;
  }
  /deep/.el-form-item__label {
    color: #fff;
  }
}
.login-wrap {
  display: flex;
  align-items: stretch;
  background: var(--theme);
  .left-logo-wrap {
    width: 300px;
    height: 320px;
    > div {
      height: 100%;
    }
  }
  .login-container {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 20px;
  }

  .left-logo {
    background: url('../../assets/images/totem.png');
    background-position: center center;
    background-size: 100% 100%;
    background-color: rgb(25, 117, 255);
  }
  /deep/.login-btn-wrap {
    display: flex;
    justify-content: center;
  }
}
</style>
