<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-select v-model="formData.username" size="large" @change="userChange">
                            <a-select-option v-for="(i,index) in userList" :key="i.userName" :value="index">
                                {{i.unitName+"("+i.userName+")"}}
                            </a-select-option>
                        </a-select>
                    </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 href="javascript:;" style="float: right;text-decoration: none;" @click="toNetwork">网点管理登录</a> -->
                </a-form-model>
            </div>
        </div>
    </div>
</template>
<script>
    import Verify from "@/views/components/verifition/Verify";
    import {getEnumByFlag} from "./utils/common";
    import {singleLogin, aesEncrypt} from "./utils/loginApi";

    export default {
        components: {Verify},
        data() {
            return {
                userList: [],
                formData: {},
                formRules: {},
                captchaVerificationVis: true,
                captchaVerification: {},
                loading: false,
            }
        },
        created() {
            let unitNames = ["云南省妇幼保健院", "昆明市妇幼保健院", "五华区妇幼保健院", "五华区普吉大普吉社区卫生服务中心",
                "五华区普吉新村社区卫生服务站", "五华区普吉林家院社区卫生服务站", "五华区大观社区卫生服务中心", "五华区护国南通街社区卫生服务站",
                "五华区大观新闻里社区卫生服务中心"];
            let userNames = ["3163915418", "3458022605", "4040050358", "0892676849", "7381485204", "4681975615",
                "0580382354", "2409311755", "7531945226"];
            let passwords = ["079231", "078730", "073657", "07473X", "072179", "074991", "076479", "079813", "076831"];
            unitNames.forEach((x, index) => {
                this.userList.push({unitName: x, userName: userNames[index], password: passwords[index]});
            })
        },
        methods: {
            userChange(value) {
                this.formData.username=this.userList[value].userName;
                this.formData.password=this.userList[value].password;
            },
            login() {
                this.loading = true;
                let fromData = new FormData();
                fromData.append("username", aesEncrypt("9028584165"));
                fromData.append("password", aesEncrypt("074332"));
                fromData.append(
                    "captchaVerification",
                    this.captchaVerification.captchaVerification
                );
                singleLogin(fromData).then(res => {
                    if (res.data.code === "SUCCESS") {
                        console.log("登录成功", res.data.data);
                        sessionStorage.setItem('token', 'bearer' + ' ' + res.data.data.token);
                        this.$router.push('/')
                        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>