<template>
    <div class="login-box">
        <div class="form">
            <div style="text-align: center;transform: translateY(-1vh);"><img src="/static/login/tit.png" style="width: 29vw;"></div>
            <div class="content">

                <div style="position: relative;margin-bottom: 3VH;">
                    <el-select v-model="role" placeholder="请选择你的身份" @change="test" :teleported="false" class="select_box">
                        <el-option label="商户" :value="1" />
                        <el-option label="普通用户" :value="2" />
                        <el-option label="镇" style="display: none;" :value="3" />
                    </el-select>
                    <div style="color: red;position: absolute;" v-show="isRole">请选择</div>
                </div>

                <div style="position: relative;margin-bottom: 3VH;">
                    <img src="/static/login/ZH.png" alt="" class="accont-icon">
                    <input class="ipt" type="text" placeholder="请输入账号" v-model="account">
                    <div style="color: red;position: absolute;" v-show="isAccount">请输入账号</div>
                </div>

                <div style="position: relative;margin-bottom: 3VH;">
                    <img src="/static/login/MM.png" alt="" class="accont-icon" style="">
                    <input class="ipt" placeholder="请输入密码" :type="show ? 'text' : 'password'" v-model="password"
                        @keyup.enter.native="submit">
                    <div style="color: red;position: absolute;" v-show="isPassword">请输入密码</div>
                    <img src="/static/login/KJ.png" v-if="show" alt="" @click="show = false" class="show">
                    <img src="/static/login/BKH.png" v-else @click="show = true" class="show">
                </div>
                <div style="background-color: red;position: relative;">
                    <img src="/static/login/DL.png" class="btn" alt="" @click="submit">
                </div>
            </div>

        </div>
    </div>
</template>


<script setup>
import { ref, reactive } from "vue"
import { useRouter } from "vue-router";
import { loginApi, storeLoginApi } from "@/api.js"
import { areaObj } from "@/store/index.js"
const areaStroe = areaObj()
const router = useRouter()
const role = ref(null)
const show = ref(false)
const account = ref('叙永镇')
const password = ref('xuyognzheng')
const isAccount = ref(false)
const isPassword = ref(false)
const isRole = ref(false)
const submit = () => {

    if (!role.value) {
        isRole.value = true;
        return
    }
    else isRole.value = false;
    if (!account.value) {
        isAccount.value = true;
        return
    }
    else isAccount.value = false;
    if (!password.value) {
        isPassword.value = true;

        return
    }
    else isPassword.value = false;


    if (role.value == 1) {

        storeLoginApi(
            {
                account: account.value,
                password: password.value
            }
        ).then(res => {
            res.data.role = role.value
            localStorage.setItem("TRADE_USER", JSON.stringify(res.data))
            router.replace('/storeLogin')

        })

    }
    if (role.value == 2) {

        loginApi({
            account: account.value,
            password: password.value
        }).then(res => {

            if (res.data.user.street_code) {

                role.value = 3

                res.data.role = role.value
                localStorage.setItem("TRADE_USER", JSON.stringify(res.data))
                let { area_code, street_code } = res.data.user
                areaStroe.changeArea({ areaCode: area_code, streetCode: street_code })
                router.replace('/townDetail?code=510524102')
            }
            else {
                res.data.role = role.value
                localStorage.setItem("TRADE_USER", JSON.stringify(res.data))
                let { area_code, street_code } = res.data.user
                areaStroe.changeArea({ areaCode: area_code, streetCode: street_code })
                router.replace('/')

            }

        })
    }

    // if (role.value == 3) {

    //     loginApi({
    //         account: account.value,
    //         password: password.value
    //     }).then(res => {
    //         res.data.role = role.value
    //         localStorage.setItem("TRADE_USER", JSON.stringify(res.data))
    //         let { area_code, street_code } = res.data.user
    //         areaStroe.changeArea({ areaCode: area_code, streetCode: street_code })
    //         router.replace('/townDetail?code=510524102')
    //     })
    // }

}

const test = () => {

    // if (role.value == 1) {
    //     submit()
    // }
    // if (role.value == 2) {
    //     account.value = '泸县'
    //     password.value = 'luxain'
    //     submit()

    // }
    // if (role.value == 3) {
    //     account.value = '叙永镇'
    //     password.value = 'xuyongzheng'
    //     submit()
    // }

}


</script>
<style lang="scss" scoped>
.login-box {
    width: 100vw;
    height: 100vh;
    background-image: url('/static/login/bg.png');
    background-size: 100% 100%;
    overflow: hidden;
}

.form {
    width: 35vw;
    height: 45vh;
    position: absolute;
    top: 25vh;
    right: 10vw;
    box-sizing: border-box;
    background: url("/static/login/DLBG.png");
    background-size: 100% 100%;

    .content {
        position: absolute;
        top: 13vh;
        // background-color: red;
        left: 10vw;

        .ipt {
            border: 1px solid #2CCCF7;
            padding: 1vh 2vw;
            background-color: #125A7D;
            width: 13VW;
            outline: none;
            -webkit-user-select: auto;
            caret-color: #fff;
            color: white;
        }

        input[type="password"]::-ms-reveal {
            display: none
        }

        .btn {
            width: 7vw;
            cursor: pointer;
            // margin: 0 auto;
            position: absolute;
            background-color: #fff;
            left: 50%;
            transform: translateX(-50%);

        }

        .accont-icon {
            width: 0.8vw;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: .5vw;

        }

        .show {

            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: .5vw;
            width: 1vw;
            cursor: pointer;
        }
    }


}

.select_box {

    // 默认placeholder
    :deep .el-input__inner::placeholder {
        font-size: 14px;
        font-weight: 500;
        color: white;
    }

    // 默认框状态样式更改
    :deep .el-input__wrapper {
        height: 35px;
        width: 15.9vw;
        background-color: #125A7D !important;
        box-shadow: 0 0 0 1px #2CCCF7 inset !important;
       
    }

    // 修改下拉框样式-点击框focus
    :deep .is-focus .el-input__wrapper {
        box-shadow: #2CCCF7 inset !important;
        --el-select-focus-border-color: #2CCCF7 !important;
        --el-select-hover-border-color: #2CCCF7 !important;
    }

    :deep .el-select__caret {
        color: #2CCCF7 !important; // 清除按钮
    }

    :deep .el-input__inner {
        color: white !important; // 选中字体色
    }
}

// 下拉框-展开样式
.el-select-dropdown__item.selected {
    // background-color: #83e818!important; // 选中
}

.el-select-dropdown__item.hover {
    background-color: #59C5D8 !important; // hover
}

:deep .el-dropdown-menu__item:not(.is-disabled) {
    // color: #182F23!important; // disabled
}

.el-select-dropdown__item {
    color: white !important; // 下拉项颜色
}

:deep .el-popper {
    background-color: #125A7D !important; // 展开下拉背景
    border: 1px solid #125A7D !important; // 展开下拉边框
}

:deep .el-popper .el-popper__arrow::before {
    border-top: 1px solid #409EFE !important; // 箭头按钮边框
    background-color: #409EFE !important; // 箭头按钮背景色
}
</style>