<template>
    <div class="tjm_login">
        <el-carousel height="100vh" :pause-on-hover="false">
            <el-carousel-item>
                <img src="@/assets/images/welcomebg1.png" alt="" />
            </el-carousel-item>
            <el-carousel-item>
                <img src="@/assets/images/welcomebg2.png" alt="" />
            </el-carousel-item>
        </el-carousel>
        <div class="left">
            <div class="logo">
                <img src="@/assets/images/welcomelogo.png" alt="" />
            </div>
        </div>
        <div class="right">
            <div class="title">{{projectName}}</div>
            <div class="title sub-title">欢迎登录</div>
            <!-- <div class="select_login_type">
                <div class="type_item type_item_active">
                    <span>密码登录</span>
                    <div class="select"></div>
                </div>
                <div class="type_item">
                    <span>短信登录</span>
                    <div class="select"></div>
                </div>
                <div class="type_item">
                    <span>扫码登录</span>
                    <div class="select"></div>
                </div>
            </div> -->
            <div class="input_tjm account_ctx">
                <div>
                    <input v-model="username" placeholder="请输入用户名" />
                </div>
                <div class="tjm_input_icon">
                    <img src="@/assets/images/user.png" alt="" />
                </div>
            </div>
            <div class="input_tjm pwd_ctx">
                <div>
                    <input v-model="password" type="password" placeholder="请输入密码" />
                </div>
                <div class="tjm_input_icon">
                    <img src="@/assets/images/pwd.png" alt="" />
                </div>
            </div>
            <div class="tjm_login_btn" @click="login">登录</div>
            <!-- <div class="tjm_other_opea">
                <span>操作手册</span><span>忘记密码</span>
            </div> -->
        </div>
    </div>
    <!-- 强制修改密码 -->
    <el-dialog
        title="修改密码"
        v-model="passwordOpen"
        width="680px"
        append-to-body
    >
        <el-form ref="userRef" :model="form" :rules="rules" label-width="100px">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="用户名" prop="username">
                        <el-input
                        v-model="form.username"
                        placeholder="请输入用户名"
                        clearable
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="原密码" prop="oldPassword">
                        <el-input
                        v-model="form.oldPassword"
                        type="password"
                        placeholder="请输入原密码"
                        clearable
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="新密码" prop="newPassword">
                        <el-input
                        v-model="form.newPassword"
                        type="password"
                        placeholder="请输入新密码"
                        clearable
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="确认密码" prop="confirmPassword">
                        <el-input
                        v-model="form.confirmPassword"
                        placeholder="请再次确认密码"
                        clearable
                        />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 强制验证手机号 -->
    <el-dialog
        title="手机号验证"
        v-model="phoneOpen"
        width="680px"
        append-to-body
    >
        <el-form
            ref="phoneRef"
            :model="mobileForm"
            :rules="mobileRules"
            label-width="100px"
        >
            <el-row>
                <el-col :span="24">
                    <el-form-item label="手机号" prop="mobileNumber">
                        <el-input
                        v-model="mobileForm.mobileNumber"
                        placeholder="请输入手机号"
                        clearable
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="验证码" prop="verificationCode">
                        <el-input class="input-with-select" v-model="mobileForm.verificationCode" placeholder="请输入验证码">
                            <template #append>
                                <el-button :disabled="countdown > 0" @click="sendVerificationCode">
                                    {{ countdown > 0 ? countdown + '秒后重新获取' : '获取验证码' }}
                                </el-button>
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="submitPhoneForm">确 定</el-button>
                <el-button @click="phoneCancel">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { getConfig } from '@/config/config'
import { useUserStore } from '@/store/user.js'
import { passwordChange, sendSmsCode, userUnlock } from '@/api/login'
import CryptoJS from 'crypto-js'
// const route = useRoute()
const router = useRouter()
const passwordOpen = ref(false)
const phoneOpen = ref(false)
const username = ref('')
const password = ref('')
const { proxy } = getCurrentInstance()
const countdown = ref(0) // 倒计时秒数
const projectName = ref(getConfig('projectName'))

const form = ref({
    username: null,
    oldPassword: null,
    newPassword: null,
    confirmPassword: null
})
const mobileForm = ref({
    mobileNumber: null,
    verificationCode: null
})
const mobileRules = ref({
    mobileNumber: [
        { required: true, message: '手机号不能为空', trigger: 'blur' }
    ],
    verificationCode: [
        { required: true, message: '验证码不能为空', trigger: 'blur' }
    ]
})
const rules = ref({
    username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
    oldPassword: [{ required: true, message: '旧密码不能为空', trigger: 'blur' }],
    newPassword: [
        { required: true, message: '新密码不能为空', trigger: 'blur' },
        {
            pattern:
                /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/,
            message: '新密码必须至少8位，且必须包含大小写字母、数字和特殊符号',
            trigger: 'blur'
        }
    ],
    confirmPassword: [
        { required: true, message: '请在此输入新密码', trigger: 'blur' },
        {
            validator: (rule, value, callback) => {
                if (value !== form.value.newPassword) {
                    console.log(value, form.value.newPassword, 'Lingci')
                    callback(new Error('两次输入的密码不一致'))
                } else {
                    callback()
                }
            },
            trigger: 'blur'
        }
    ]
})

const login = () => {
    useUserStore()
        .login({
            username: username.value,
            password: password.value
        })
        .then(() => {
            router.push('/')
        })
        .catch(code => {
            console.log('错误进来了', code)
            if (code === 204) {
                console.log('强制修改密码')
                password.value = ''
                passwordOpen.value = true
            } else if (code === 203) {
                password.value = ''
                phoneOpen.value = true
            }
        })
}

function submitForm() {
    proxy.$refs['userRef'].validate(valid => {
        if (valid) {
            passwordChange({
                userName: form.value.username,
                oldPassword: CryptoJS.MD5(form.value.oldPassword).toString(),
                newPassword: CryptoJS.MD5(form.value.newPassword).toString(),
                enterPassword: CryptoJS.MD5(form.value.confirmPassword).toString()
            }).then(res => {
                if (res.success) {
                    ElMessage({
                        message: '修改成功，请重新登录！',
                        type: 'success'
                    })
                    passwordOpen.value = false
                }
            })
        } else {
            console.log('检验不通过')
        }
    })
}

function cancel() {
    passwordOpen.value = false
    form.value = {
        username: null,
        oldPassword: null,
        newPassword: null,
        confirmPassword: null
    }
}

function sendVerificationCode() {
    // 这里实现发送验证码的逻辑
    if (!mobileForm.value.mobileNumber) return
    sendSmsCode({ mobile: mobileForm.value.mobileNumber }).then(res => {
        if (res.success) {
            ElMessage({
                message: '验证码发生成功！',
                type: 'success'
            })
            // 发送成功后开始倒计时
            countdown.value = 60
            let interval = setInterval(() => {
                countdown.value--
                if (countdown.value <= 0) {
                    clearInterval(interval)
                }
            }, 1000)
        }
    })
}

function submitPhoneForm() {
    proxy.$refs['phoneRef'].validate(valid => {
        if (valid) {
            userUnlock({
                mobile: mobileForm.value.mobileNumber,
                code: mobileForm.value.verificationCode
            }).then(res => {
                if (res.success) {
                    ElMessage({
                        message: '校验成功，请重新登录',
                        type: 'success'
                    })
                    phoneOpen.value = false
                }
            })
        } else {
            console.log('校验不通过')
        }
    })
}

function phoneCancel() {
    phoneOpen.value = false
    mobileForm.value = {
        mobileNumber: null,
        verificationCode: null
    }
}
</script>

<style lang='scss' scoped>
.tjm_login {
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  .el-carousel {
    position: fixed; //视频定位方式设为固定
    right: 0;
    bottom: 0; //视频位置
    min-width: 100%;
    min-height: 100%; //不会因视频尺寸造成页面需要滚动
    width: auto;
    height: auto; //尺寸保持原视频大小
    z-index: -100; //z轴定位，小于0即可

    img {
      width: 100%;
      height: 100%;
    }
  }

  .left {
    position: fixed; //视频定位方式设为固定
    height: 100%;
    min-height: 100%; //不会因视频尺寸造成页面需要滚动
    .logo {
      img {
        width: 316px;
        height: 72px;
        margin: 46px 0 0 80px;
        // border:1px solid red;
      }
    }
  }
  .right {
    position: fixed; //视频定位方式设为固定
    width: 500px;
    right: 0;
    min-height: 100%; //不会因视频尺寸造成页面需要滚动
    background: rgba(255, 255, 255, 0.68);
    border-left: 1px solid #ffffff;
    box-shadow: 2px 0px 0px 0px rgba(255, 255, 255, 1) inset;
    display: flex;
    flex-direction: column;
    align-items: center;
    .title {
      width: 81.6%;
      font-family: PingFang SC;
      font-size: 36px;
      font-weight: 600;
      line-height: 28px;
      margin: 100px 0 0;
    }

    .sub-title {
      font-size: 28px;
      font-weight: 500;
    }
    .select_login_type {
      width: 81.6%;
      height: 38px;
      margin: 86px 0 0 0px;
      display: flex;
      .type_item {
        font-family: PingFang SC;
        font-size: 16px;
        font-weight: 500;
        text-align: left;
        line-height: 28px;
        color: rgba(102, 102, 102, 1);
        margin-right: 40px;
        cursor: pointer;
      }
      .type_item_active {
        color: rgba(0, 0, 0, 1);
        font-family: PingFang SC;
        font-size: 16px;
        font-weight: 600;
        line-height: 28px;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .select {
          width: 65px;
          height: 4px;
          gap: 0px;
          border-radius: 8px 0px 0px 0px;
          opacity: 0px;

          background: linear-gradient(270.6deg, #165dff 2.71%, #45b1ff 99.81%);
        }
      }
    }
    .input_tjm {
      width: 81.6%;
      position: relative;
      //
      .tjm_input_icon {
        position: absolute;
        top: 40px;
        left: 24px;
        width: 24px;
        height: 24px;
        img {
          width: 24px;
          height: 24px;
        }
      }
      input {
        width: 100%;
        height: 52px;
        margin-top: 28px;
        background: rgba(255, 255, 255, 1);
        border-radius: 8px;
        border: none;
        user-select: none;
        outline: none;
        font-family: PingFang SC;
        font-size: 16px;
        font-weight: 600;
        line-height: 52px;
        text-align: left;
        color: rgba(29, 33, 41, 1);
        text-indent: 68px;
      }
    }
    .account_ctx {
      margin-top: 40px;
    }
    .tjm_login_btn {
      cursor: pointer;
      width: 81.6%;
      height: 56px;
      background: linear-gradient(270.6deg, #165dff 2.71%, #45b1ff 99.81%);
      margin: 72px 0 0 0px;
      color: rgba(255, 255, 255, 1);
      font-family: PingFang SC;
      font-size: 20px;
      font-weight: 600;
      line-height: 56px;
      text-align: center;
      border-radius: 8px;
    }
    .tjm_other_opea {
      width: 81.6%;
      height: 22px;
      margin: 28px 0 0 0px;
      gap: 0px;
      opacity: 0px;
      display: flex;
      justify-content: space-between;
      span {
        cursor: pointer;
        font-size: 16px;
        font-weight: 400;
        text-align: center;
        color: rgba(29, 33, 41, 0.65);
      }
    }
  }
}
</style>