<template>
  <div class="main">
    <el-card class="login_box">
      <div class="register-title">注册</div>
      <br>
      <el-form
          ref="formRef"
          :model="form"
          :rules="formRules">
        <!--   头像     -->
        <div class="avatar-div">
          <el-upload
            action="/api/files/upload"
            :show-file-list="false"
            name="file"
            :data="{filePath: 'avatar'}"
            :on-success="handleAvatarSuccess">
            <div
              class="avatar-uploader">
              <img v-if="form.avatar" :src="getFilePrefix + form.avatar" style="max-width: 100%; max-height: 100%;"/>

              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              
            </div>
          </el-upload>
        </div>


        <el-form-item prop="username">
          <el-input
            type="text"
            v-model="form.username"
            placeholder="用户名"
            style="width: 100%"
            class="apple-input"
            @keyup.enter="handleRegister()">
            <template #prefix>
              <el-icon><User /></el-icon>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input
            class="apple-input"
            type="password"
            v-model="form.password"
            placeholder="密码"
            style="width: 100%"
            @keyup.enter="handleRegister()">
            <template #prefix>
              <el-icon><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="nickname">
          <el-input
            type="text"
            class="apple-input"
            v-model="form.nickname"
            placeholder="昵称"
            style="width: 100%"
            @keyup.enter="handleRegister()">
            <template #prefix>
              <el-icon><InfoFilled /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="tourist.realName">
          <el-input
            type="text"
            class="apple-input"
            v-model="form.tourist.realName"
            placeholder="真实姓名"
            style="width: 100%"
            @keyup.enter="handleRegister()">
            <template #prefix>
              <el-icon><InfoFilled /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="tourist.idCard">
          <el-input
            type="text"
            class="apple-input"
            v-model="form.tourist.idCard"
            placeholder="身份证号"
            style="width: 100%"
            @keyup.enter="handleRegister()">
            <template #prefix>
              <el-icon><Folder /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="tourist.phone">
          <el-input
            type="text"
            class="apple-input"
            v-model="form.tourist.phone"
            placeholder="手机号"
            style="width: 100%"
            @keyup.enter="handleRegister()">
            <template #prefix>
              <el-icon><Iphone /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="tourist.email">
          <el-input
            type="text"
            class="apple-input"
            v-model="form.tourist.email"
            placeholder="邮箱"
            style="width: 100%"
            @keyup.enter="handleRegister()">
            <template #prefix>
              <el-icon><Folder /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <br>

        <el-form-item>
          <el-button
            class="login_btn"
            type="success"
            style="width: 100%"
            @click="handleRegister()" >
            注册
          </el-button>

        </el-form-item>

        <el-form-item>
          <el-button
            class="login_btn"
            style="width: 100%"
            link
            @click="jumpLogin()" >
            返回
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'

import { registerTourist } from '@/api/sysUser';
import { setToken } from '@/utils/token';
import Cookies from 'js-cookie';

const { proxy } = getCurrentInstance();
const getFilePrefix = proxy.getFilePrefix;

const formRef = ref();

// 使用 useRouter 创建一个 router 实例
const router = useRouter()

const form = reactive({
  id: null,
  username: null,
  nickname: null,
  avatar: null,
  password: null,
  role: '2',
  status: 0,
  tourist: {
    realName: null,
    idCard: null,
    phone: null,
    email: null
  }
})


const formRules = {
  username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
  password: [{ required: true, message: "密码不能为空", trigger: "blur" }],
  nickname: [{ required: true, message: "昵称不能为空", trigger: "blur" }],
  'tourist.realName': [{ required: true, message: "真实姓名不能为空", trigger: "blur" }],
  'tourist.idCard': [{ required: true, message: "身份证号不能为空", trigger: "blur" }],
  'tourist.phone': [{ required: true, message: "手机号不能为空", trigger: "blur" }],
  'tourist.email': [{ required: true, message: "邮箱不能为空", trigger: "blur" }]
}


const handleRegister = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      registerTourist(form).then((res) => {
        if (res.code === 200) {
          proxy.$message.success('注册成功，请登录')
          router.push('/login')
        } else {
          proxy.$message.error(res.msg)
        }
      })
    } else {
      console.log('验证失败')
      return false
    }
  })

}

function jumpLogin() {
  proxy.$router.push('/login')
}

// 上传成功后
function handleAvatarSuccess(response, uploadFile, uploadFiles) {
  form.avatar = response
  proxy.$message.success('头像上传成功')
}
</script>

<style scoped>
.main {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 100%;
  background-image: url("@/assets/1.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding-right: 10%;
}

.login_box{
  width: 420px;
  text-align: center;
  /* 毛玻璃 */
  /*
	background: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(20px);
  border-radius: 15px;*/
  /* 液态玻璃*/
  /*
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  border-radius: 15px;
  */
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.2);
  padding: 18px 18px 10px;
}
.login_box:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px 0 rgba(31, 38, 135, 0.2);
  transition: all 0.3s ease;
}

.register-title { font-size: 24px; font-weight: 800; color: #1f1f1f; letter-spacing: 2px; }
:deep(.el-form-item) { margin-bottom: 12px; }

/* 头像上传样式 */
.avatar-div {
  margin: 0 auto 18px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #BEBEBE;
  line-height: 100px;
}

.avatar-uploader {
  width: 100px;
  height: 100px;
  display:flex;
  justify-content: center;
  align-items: center;
}

</style>
