<template>
    <div class="login_container">
        <div class="login_box">
            <div class="system_name">云南省叶酸发放服务平台</div>
            <div class="login_context">
                <div class="left_img">
                    <img src="../../static/images/login_logo.png" alt="">
                </div>
                <a-form-model :model="formData" :rules="formRules" class="login_form" ref="formRef">
                    <a-form-model-item prop="username">
                        <a-input placeholder="请输入用户名" v-model="formData.username" size="large" @keyup.enter="login">
                            <a-icon slot="prefix" type="user"/>
                        </a-input>
                    </a-form-model-item>
                    <a-form-model-item prop="password">
                        <a-input-password placeholder="请输入密码" v-model="formData.password" size="large"
                                          @keyup.enter="login">
                            <a-icon slot="prefix" type="lock"/>
                        </a-input-password>
                    </a-form-model-item>
                    <a-form-model-item v-show="!captchaVerificationVis">
                        <Verify
                                @success="success"
                                :mode="'fixed'"
                                :captchaType="'blockPuzzle'"
                                :imgSize="{
                                width: '340px',
                                height: '155px',
                            }"
                                ref="verify"
                        ></Verify>
                    </a-form-model-item>
                    <a-form-model-item v-show="captchaVerificationVis">
                        <a-alert
                                message="验证通过"
                                type="success"
                                show-icon
                        />
                    </a-form-model-item>
                    <a-button @click="login" type="primary" block size="large" :disabled="!captchaVerificationVis"
                              :loading="loading" @keyup.enter="login">登录
                    </a-button>
                </a-form-model>
            </div>
        </div>
    </div>
</template>
<script>
import Verify from "@/views/components/verifition/Verify";
import {singleLogin, aesEncrypt} from "./utils/loginApi";
import md5 from 'js-md5';

export default {
    components: {Verify},
    data() {
        return {
            userList: [],
            formData: {
                username:"4040050358",
                password:"YNybs2021?"
            },
            formRules: {},
            captchaVerificationVis: true,
            captchaVerification: {},
            loading: false,
        }
    },
    created() {
    },
    methods: {
        login() {
            this.loading = true;
            let fromData = new FormData();
            fromData.append("username", aesEncrypt(this.formData.username));
            fromData.append("password", aesEncrypt(this.formData.password));
            fromData.append(
                "captchaVerification",
                this.captchaVerification.captchaVerification
            );
            singleLogin(fromData).then(res => {
                if (res.data.code === "SUCCESS") {
                    document.cookie = 'bGNnd3lwdF9hdA=' + res.data.data.token + ';';
                    sessionStorage.setItem("systemType", 1);
                    this.$router.push('/Home/inStock');
                    this.$message.success(res.data.msg)
                } else {
                    this.$message.error(res.data.msg)
                }
                this.loading = false;
            }).catch(res => {
                this.loading = false;
            });
        },
        toNetwork() {
            this.$router.push('/networkPortLogin')
        },
        // 验证成功
        success(params) {
            this.captchaVerification = params;
            this.captchaVerificationVis = true;
        },
    },
}
</script>
<style lang="less" scoped>
.login_container {
  background-image: url("../../static/images/bg.jpg");
  background-size: 100% 100%;
  height: 100%;

  .login_box {
    width: 950px;
    height: 510px;
    border-radius: 2.5rem;
    box-shadow: 1px 1px 20px #043B26;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    .system_name {
      font-size: 24px;
      text-align: center;
      height: 90px;
      line-height: 100px;
      color: #497FF7;
    }

    .login_form {
      width: 340px;
    }
  }

  .login_context {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 400px;
    padding: 0 80px;
  }
}
</style>
-->
-->
