<!-- 域登录 -->
<template>
  <div v-loading="loading">
    <el-form ref="loginForm" class="login-form" :model="loginForm" :rules="loginFormRules">
      <el-form-item prop="tenantId" v-if="componentName == 'CustomLogin'">
        <el-select size="large" prefix-icon="el-icon-switch-button" v-model="loginForm.tenantId" placeholder="请选择企业">
          <i class="el-icon-organiza large-prefix-icon" slot="prefix"></i>
          <el-option v-for="item in tenantList" :key="item.tenantId" :label="item.tenantName" :value="item.tenantId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="loginId">
        <el-input size="large" v-model="loginForm.loginId" prefix-icon="el-icon-user" :placeholder="componentName == 'CustomLogin'?'请输入办公电脑登录账户名':'请输入掌上恩斯迈账户名'"></el-input>
      </el-form-item>
      <el-form-item prop="loginPwdOriginal">
        <el-input
          size="large"
          v-model="loginForm.loginPwdOriginal"
          prefix-icon="el-icon-lock"
          :placeholder="componentName == 'CustomLogin'?'请输入办公电脑登录密码':'请输入掌上恩斯迈密码'"
          @keyup.enter.native="checkLogin('loginForm')"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item v-if="showCode" prop="code">
        <div class="verify-code-warp">
          <el-input
            v-model="loginForm.code"
            class="verify-left"
            size="large"
            prefix-icon="el-icon-key"
            placeholder="请输入计算结果"
            @keyup.enter.native="checkLogin('loginForm')"
          ></el-input>
          <div class="verify-code" @click="updateCode"><el-image fit="contain" class="code-img" :src="verification" /></div>
        </div>
      </el-form-item>
    </el-form>
    <ForgetPassword @forgetPassword="forgetPassword" />
    <el-button type="primary" size="large" class="login-button" @click="checkLogin('loginForm')">登 录</el-button>
    <!-- 服务协议以及隐私协议 -->
    <CheckAgreement ref="CheckAgreement" v-if="!hidenAgreement" @changeOpinion="changeOpinion" :consentCheck="consentCheck" />
  </div>
</template>

<script>
import { validPwd } from '../utils/rule'; //校验规则
import CheckAgreement from './checkAgreement.vue';
import ForgetPassword from './forgetPassword.vue';
export default {
  name: 'CustomLogin',
  components: {
    CheckAgreement, //隐私模块
    ForgetPassword //忘记密码模块
  },
  props: {
    //设置默认当前租户id
    tenantId: {
      type: String,
      default: () => null
    },
    //协议同意
    consent: {
      type: Boolean,
      default: false
    },
    tenantList: {
      type: Array,
      default: () => []
    },
    //验证码base64
    base64Code: {
      type: String,
      default: () => null
    },
    //登录loading
    loading: {
      type: Boolean,
      default: false
    },
    //是否显示验证码模块
    showCode: {
      type: Boolean,
      default: false
    },
    //是否隐藏协议
    hidenAgreement: {
      type: Boolean,
      default: false
    },
    //是否显示验证码模块
    componentName: {
      type: String,
      default: 'CustomLogin'
    }
  },
  watch: {
    tenantId: {
      handler(newVal) {
        this.loginForm.tenantId = newVal;
      },
      immediate: true,
      deep: true
    },
    base64Code: {
      handler(newVal) {
        this.verification = `data:image/png;base64,${this.base64Code}`;
      },
      immediate: true,
      deep: true
    }
  },
  computed:{

  },
  data() {
    return {
      verification: `data:image/png;base64,${this.base64Code}`,
      consentCheck: this.consent, //是否同意协议
      loginForm: {
        loginId: null, //域账号
        loginPwdOriginal: null, //域密码未加密
        loginType: 1, //登录类型
        tenantId: this.tenantId, //选择登录租户
        code: null, //生成base64输入验证码
        fireflyType: this.componentName //登录方式
      },
      //校验规则
      loginFormRules: {
        tenantId: [
          {
            required: true,
            message: '请选择企业',
            trigger: 'change'
          }
        ],
        loginId: [
          {
            required: true,
            message: this.componentName == 'CustomLogin'?'请输入办公电脑登录账户名':'请输入掌上恩斯迈账户名',
            trigger: 'blur'
          }
        ],
        loginPwdOriginal: [
          {
            required: true,
            message: this.componentName == 'CustomLogin'?'请输入办公电脑登录密码':'请输入掌上恩斯迈密码',
          },
          {
            validator: (rule, value, callback) => {
              if (!validPwd(value)) {
                callback(new Error('密码格式不正确'));
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ],
        code: [
          {
            required: true,
            message: '请输入计算结果',
            trigger: 'blur'
          }
        ]
      }
    };
  },
  methods: {
    //更新验证码
    updateCode() {
      this.$emit('updateCode');
    },
    //忘记密码操作
    forgetPassword() {
      this.$emit('forgetPassword');
    },
    //接受子组件的参数
    changeOpinion(value) {
      this.consentCheck = value;
    },
    //登录
    checkLogin(formName) {
      let _this = this;
      _this.$refs[formName].validate(valid => {
        if (valid) {
          if (!_this.hidenAgreement) {
            _this.$refs.CheckAgreement.verify();
            console.log(_this.consentCheck, '_this.consentCheck');
            if (_this.consentCheck) {
              _this.$emit('login', _this.loginForm);
            }
          } else {
            _this.$emit('login', _this.loginForm);
          }
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import '../css/loginPublic.scss';
//暂时填写下拉框的样式
.large-prefix-icon {
  line-height: 40px;
}
:deep .el-select {
  width: 100%;
}
</style>