<template>
  <div class="login">
    <div class="header">
      <img :src="logo" alt="" />
    </div>
    <div class="center">
      <div class="left">
        <img :src="left" alt="" />
      </div>
      <div class="right">
        <div class="logo">
          <img :src="logo" alt="" />
        </div>
        <div class="tips">账号密码登陆</div>
        <div class="form">
          <a-form
            id="components-form-demo-normal-login"
            :form="form"
            class="login-form"
            @submit="handleSubmit"
          >
            <a-form-item>
              <a-input
                v-decorator="[
                  'userName',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请输入体检卡号码！',
                      },
                    ],
                  },
                ]"
                placeholder="请输入体检卡号码"
              >
                <a-icon
                  slot="prefix"
                  type="user"
                  style="color: rgba(0, 0, 0, 0.25)"
                />
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-input
                v-decorator="[
                  'password',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请输入卡号密码！',
                      },
                    ],
                  },
                ]"
                type="password"
                placeholder="请输入密码（默认身份证后6位）"
              >
                <a-icon
                  slot="prefix"
                  type="lock"
                  style="color: rgba(0, 0, 0, 0.25)"
                />
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-button
                type="primary"
                html-type="submit"
                class="login-form-button"
                :disabled="isSub"
              >
                登陆
              </a-button>
            </a-form-item>
          </a-form>
          <div class="concat">
            如果遇到操作问题，请拨打椋鸟健康热线
            <span class="code">400-820-6523</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  components: {},
  data() {
    return {
      logo: require("../../assets/imgs/login/logo.png"),
      left: require("../../assets/imgs/login/left-bg.png"),
      isSub: true,
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: "normal_login" });
  },

  methods: {
    // 控制提交是否可用
    subState() {
      this.isSub = false;
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log("Received values of form: ", values);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  min-height: 100vh;
  background: url(../../assets/imgs/login/bg.png) 100%;
  .header {
    padding: 2.5px 21.5px;
    background: rgba(225, 225, 225, 0.32);
  }
  .center {
    display: flex;
    justify-content: center;
    margin: 69.5px auto;
    .left {
      img {
        width: 320.5px;
      }
      position: relative;
      left: 27.5px;
      top: 58px;
    }
    .right {
      padding-bottom: 38px;
      position: relative;
      right: 27.5px;
      .tips {
        text-align: center;
        margin-bottom: 23.5px;
        margin-top: 5px;
      }
      .logo {
        width: 115.5px;
        height: 44.5px;
        background: url("../../assets/imgs/login/right-bg.png");
        background-size: 100% 100%;
        text-align: center;
        margin: 0 auto;

        img {
          width: 29.7px;
          height: 29.7px;
          position: relative;
          top: 7px;
        }
        position: relative;
        top: -21px;
      }
      width: 340px;
      background: #ffffff;
      box-shadow: 0px 7px 14px 1px rgba(214, 207, 194, 0.14);
      border-radius: 12px;
      .concat {
        font-size: 12px;
        text-align: center;
        transform: scale(0.8);
        .code {
          color: #3f7ffb;
        }
      }
      .form {
        ::v-deep .ant-form {
          .ant-input {
            font-size: 12px;
          }
          width: 260.8px;
          margin: 0 auto;
          .login-form-button {
            width: 96%;
            position: relative;
            left: 2%;
          }
        }
      }
    }
  }
}
</style>
