<script lang="ts" setup>
import { ref, watch, onMounted, onBeforeUnmount, shallowRef } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import { userLogin } from '@/api/permission/user'
import { useCache } from '@/hooks/web/useCache'
const { wsCache } = useCache()
const router = useRouter()
const route = useRoute()
const props = defineProps({
    id: String,
    name: String,
    isExecuteEvent: Boolean,
})
const form = ref({
    username: '',
    password: ''
})
const loginRules = ref({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' }
    ]
})
const ruleFormRef = ref<FormInstance>()
const loginTitle: any = ref('')
const submitForm = async (formEl: FormInstance | undefined) => {
    if (props.isExecuteEvent) {
        return
    }
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            const params = {
                appid:props.id,
                username: form.value.username,
                password: form.value.password
            }
            userLogin(params).then(res => {
              if(res.data.code == '0'){
                let userInfo = {
                    nickname: res.data.data.nickname,
                    username: res.data.data.username,
                    id: res.data.data.id,
                    phone: res.data.data.phone,
                    email: res.data.data.email,
                }
                wsCache.set('Permission-userinfo', userInfo)
                ElMessage.success('登录成功')
                router.push({
                    path: '/PreviewSystem',
                    query: { id: props.id, name: props.name }
                })
              }else{
                ElMessage.error(res.data.msg)
                return
              }
            })
        } else {

        }
    })
}
onMounted(() => {
    loginTitle.value = props.name
})
onBeforeUnmount(() => {

});
</script>
<template>
    <div class="login-box">
        <div class="login-container">
            <div class="login-title">
                <div class="login-title-left"><img src="@/assets/img/titleline.png" alt=""></div>
                <div class="login-title-text">{{ loginTitle }}</div>
                <div class="login-title-right"><img src="@/assets/img/titleline.png" alt=""></div>
            </div>
            <div class="login-form">
                <div class="login-form-title">欢迎登录</div>
                <el-form ref="ruleFormRef" :model="form" :rules="loginRules" label-width="0px" style="margin:0px 20px;">
                    <el-form-item label="" prop="username">
                        <div class="logininput">
                            <el-input v-model="form.username" placeholder="请输入用户名">
                                <template #prepend>
                                    <img src="@/assets/img/username.png" alt="">
                                </template>
                            </el-input>
                            <img class="login-splitline" src="@/assets/img/splitline2.png"
                                style="width:100%;height: 1px;" alt="">
                        </div>
                    </el-form-item>
                    <el-form-item label="" prop="password">
                        <div class="logininput">
                            <el-input v-model="form.password" show-password placeholder="请输入密码" type="password">
                                <template #prepend>
                                    <img src="@/assets/img/password.png" alt="">
                                </template>
                            </el-input>
                            <img class="login-splitline" src="@/assets/img/splitline1.png"
                                style="width:100%;height: 1px;" alt="">
                        </div>
                    </el-form-item>
                    <div class="login-button" @click="submitForm(ruleFormRef)">登录</div>
                </el-form>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.login-box {
    width: 100%;
    height: 100vh;
    background: url(/images/loginbg.png) no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    padding-top: 8%;

    .login-container {

        .login-title {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 60px;
            margin-bottom: 100px;

            .login-title-left {
                transform: rotate(-180deg);
                margin-top: 10px;
            }

            .login-title-text {
                text-align: center;
                font-size: 35px;
                font-weight: bold;
                color: #fff;
                margin: 0px 30px;
                background: linear-gradient(to bottom, #ffffff, #0089ff);
                -webkit-background-clip: text;
                background-clip: text;
                color: transparent;
            }

            .login-title-right {
                margin-bottom: 5px;
            }
        }

        .login-form {
            width: 400px;
            height: 350px;
            margin: 0 auto;
            background: #fff;
            border-radius: 5px;
            padding: 20px;
            text-align: center;
            background: url(/images/loginform.png) no-repeat;
            background-size: 100% 100%;
            padding: 40px 20px;

            .login-form-title {
                font-size: 20px;
                font-weight: 600;
                color: #fff;
                margin-bottom: 20px;
            }

            .logininput {
                position: relative;
                height: 40px;
                width: 100%;

                .login-splitline {
                    position: absolute;
                    bottom: 0px;
                    left: 0px;
                }
            }

        }

        .login-button {
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            color: #fff;
            background: url(/images/loginbtn.png) no-repeat;
            background-size: 100% 100%;
            margin-top: 40px;
            cursor: pointer;
        }
    }
}
</style>
<style>
.logininput .el-input__wrapper {
    background-color: transparent;
    border: none;
    box-shadow: none;
}

.logininput .el-input-group__prepend {
    box-shadow: none;
    background-color: transparent;
}

.logininput .el-input__inner {
    color: #fff;
}

.logininput .el-form-item.is-error .el-input-tag__wrapper,
.el-form-item.is-error .el-input-tag__wrapper.is-focus,
.el-form-item.is-error .el-input-tag__wrapper:focus,
.el-form-item.is-error .el-input-tag__wrapper:hover,
.el-form-item.is-error .el-input__wrapper,
.el-form-item.is-error .el-input__wrapper.is-focus,
.el-form-item.is-error .el-input__wrapper:focus,
.el-form-item.is-error .el-input__wrapper:hover,
.el-form-item.is-error .el-select__wrapper,
.el-form-item.is-error .el-select__wrapper.is-focus,
.el-form-item.is-error .el-select__wrapper:focus,
.el-form-item.is-error .el-select__wrapper:hover,
.el-form-item.is-error .el-textarea__inner,
.el-form-item.is-error .el-textarea__inner.is-focus,
.el-form-item.is-error .el-textarea__inner:focus,
.el-form-item.is-error .el-textarea__inner:hover {
    box-shadow: none;
    border: none;
    box-shadow: none;
}

.login-form .el-form-item__error {
    padding-top: 4px;
}
</style>
