<script setup>
import { ref, reactive } from 'vue';
import { User, Lock } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';

const foreuser = reactive({ username: '', password: '', mobile: '' });
const router = useRouter();
const userType = ref('');
const rules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ],
});

// 模拟的管理员数据
const adims = [
  { mobile: 'admin', password: '123456' },
];

// 模拟的快递员数据
const users = [
  { mobile: 'user', password: '123456' },
];

// 登录函数
const login = () => {
  if (!userType.value) {
    ElMessage.error('请选择用户类型');
    return;
  }

  // 表单验证
  if (!foreuser.username || !foreuser.password) {
    ElMessage.error('请输入完整的账号和密码');
    return;
  }

  // 根据用户类型验证登录
  if (userType.value === '0') { // 管理员
    const admin = adims.find(item => item.mobile === foreuser.username && item.password === foreuser.password);
    if (admin) {
      ElMessage.success('登陆成功！');
      router.push({ name: 'notice' });  // 跳转到管理员首页
    } else {
      ElMessage.error('用户名或密码错误！');
    }
  } else if (userType.value === '1') { // 快递员
    const user = users.find(item => item.mobile === foreuser.username && item.password === foreuser.password);
    if (user) {
      ElMessage.success('登陆成功！');
      router.push({ name: 'indexDeliveryman' });  // 跳转到快递员首页
    } else {
      ElMessage.error('用户名或密码错误！');
    }
  }
};

const goBack = () => {
  router.go(-1)
}
</script>
<template>
  <div class="login-container">
    <el-card class="login-card">
      <template #header>
        <h2 class="card-title">后台登陆</h2>
      </template>
      <el-form :model="foreuser" :rules="rules" ref="ruleFormRef" action="#">
        <el-row :gutter="10" class="form-row">
          <el-col :span="4" :offset="1">
            <span class="label">账号<span v-if="!foreuser.username" class="required">*</span></span>
          </el-col>
          <el-col :span="15" :offset="0">
            <el-form-item prop="username">
              <el-input placeholder="账号" class="input" v-model="foreuser.username" :prefix-icon="User" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10" class="form-row">
          <el-col :span="4" :offset="1">
            <span class="label">密码<span v-if="!foreuser.password" class="required">*</span></span>
          </el-col>
          <el-col :span="15" :offset="0">
            <el-form-item prop="password">
              <el-input placeholder="密码" class="input" v-model="foreuser.password" :prefix-icon="Lock" show-password />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10" class="form-row">
          <el-col :span="5" :offset="0">
            <span class="label">用户类型</span>
          </el-col>
          <el-col :span="15" :offset="0">
            <el-form-item>
              <el-select v-model="userType" placeholder="点击选择" class="select">
                <el-option label="管理员" value="0" />
                <el-option label="快递员" value="1" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <a href="#" class="link">忘记密码？</a>
        </el-form-item>

        <el-form-item>
          <el-button class="btn primary-btn" type="primary" @click="login">登录</el-button>
          <el-button class="btn secondary-btn" @click="goBack">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>



<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.login-card {
  background-color: #fff;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 400px;
  max-width: 100%;
}

.card-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 20px;
}

.form-row {
  margin-bottom: 10px; /* 增加每个输入框之间的间距 */
}

.input {
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.input input {
  border: none;
  outline: none;
  box-shadow: none;
}

.select {
  width: 100%;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.select select {
  border: none;
  outline: none;
  box-shadow: none;
}

.link {
  color: #409eff;
  text-decoration: none;
  cursor: pointer;
  float: right;
  margin-left: 220px;
}

.link:hover {
  text-decoration: underline;
}

.btn {
  margin-right: 10px;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.primary-btn {
  background-color: #409eff;
  color: #fff;
  margin-left: 100px;
}

.primary-btn:hover {
  background-color: #66b1ff;
}

.secondary-btn {
  background-color: #fff;
  color: #409eff;
  border: 1px solid #409eff;
}

.secondary-btn:hover {
  background-color: #e4e7ed;
  color: #303133;
}

.label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  color: #606266;
}

.required {
  color: red;
  margin-left: 2px;
}
</style>