<template>
    <el-dialog v-model="visible" title="修改密码" width="680px">
        <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="请输入用户名" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="原密码" prop="oldPassword">
                        <el-input v-model="form.oldPassword" type="password" show-password placeholder="请输入原密码" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="新密码" prop="newPassword">
                        <el-input v-model="form.newPassword" type="password" show-password placeholder="请输入新密码" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="确认密码" prop="confirmPassword">
                        <el-input v-model="form.confirmPassword" type="password" show-password placeholder="请再次确认密码" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <template #footer>
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import CryptoJS from "crypto-js";
import { useUserStore } from "@/store/user";
import { passwordChange } from "@/api/login";

const userRef = ref();
const visible = ref(false);
const form = ref({
    username: null,
    oldPassword: null,
    newPassword: null,
    confirmPassword: null
})

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

const open = () => {
    visible.value = true;
}

function submitForm() {
    userRef.value.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.success("修改成功，请重新登录！");
                    visible.value = false;
                }
            });
        } else {
            return false;
        }
    })
}

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

defineExpose({
    open
})
</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>