<template>
  <div class="visit-people-container">
    <!-- 预约日期信息 -->
    <div class="date-info" v-if="!showExistingPage">
      <img class="bg-img" src="@/assets/indexPage/img.png" alt="">
      <div class="date-content">
        <div class="date-label"><span class="title">预约日期：</span>{{ selectedDate }}</div>
        <div class="time-label"><span class="title">入馆时间：</span>{{ selectedTime }}</div>
      </div>
    </div>

    <!-- 新增参观人页面 -->
    <div v-if="!showExistingPage" class="main-content">
      <!-- 新增参观人和选择已有参观人按钮 -->
      <div class="action-buttons">
        <button class="add-new-btn" @click="addNewVisitor">新增参观人</button>
        <button class="select-existing-btn" @click="showExistingVisitors">选择已有参观人</button>
      </div>

      <!-- 参观人信息列表 -->
      <div class="visitor-list">
        <div v-for="(visitor, index) in visitors" :key="index" class="visitor-card">
          <div class="visitor-header">
            <span class="visitor-title">参观人信息{{ index + 1 }}</span>
            <button class="delete-btn" @click="removeVisitor(index)"><el-icon :size="20">
                <Delete style="margin-right: 4px;" />
              </el-icon>删除</button>
          </div>

          <el-form :model="visitor" class="visitor-form">
            <div class="form-item">
              <div class="form-label">姓名</div>
              <div class="form-input">
                <el-input v-model="visitor.name" placeholder="请输入您的姓名" @blur="validateName(index)"
                  :class="['bottom-line-input', visitor.nameError ? 'error-line' : '']" />
                <div v-if="visitor.nameError" class="error-msg">{{ visitor.nameError }}</div>
              </div>
            </div>

            <div class="form-item">
              <div class="form-label">电话号码</div>
              <div class="form-input">
                <el-input v-model="visitor.phone" placeholder="请输入11位数字" @blur="validatePhone(index)"
                  :class="['bottom-line-input', visitor.phoneError ? 'error-line' : '']" />
                <div v-if="visitor.phoneError" class="error-msg">{{ visitor.phoneError }}</div>
              </div>
            </div>

            <div class="form-item">
              <div class="form-label">证件类型</div>
              <div class="form-input">
                <el-select v-model="visitor.idType" placeholder="请选择证件类型" :class="['bottom-line-select']">
                  <el-option label="身份证" value="身份证" />
                </el-select>
              </div>
            </div>

            <div class="form-item">
              <div class="form-label">证件号码</div>
              <div class="form-input">
                <el-input v-model="visitor.idNumber" placeholder="请输入18位证件编码" @blur="validateIdNumber(index)"
                  :class="['bottom-line-input', visitor.idNumberError ? 'error-line' : '']" />
                <div v-if="visitor.idNumberError" class="error-msg">{{ visitor.idNumberError }}</div>
              </div>
            </div>
          </el-form>
        </div>
      </div>

      <!-- 下一步按钮 -->
      <div class="next-button-container">
        <div class="next-btn" @click="submitReservation" :disabled="!isFormValid">下一步</div>
      </div>
    </div>

    <!-- 选择已有参观人页面 -->
    <div v-if="showExistingPage" class="existing-page">
      <div class="existing-visitors-list">
        <div v-for="(existingVisitor, index) in existingVisitors" :key="index" class="existing-visitor-item"
          @click="toggleExistingVisitor(index)">
          <div class="visitor-info">
            <div class="visitor-name">姓名：{{ existingVisitor.name }}</div>
            <div class="visitor-id">证件号：{{ existingVisitor.idNumber }}</div>
            <div class="visitor-phone">电话号码：{{ existingVisitor.phone }}</div>
          </div>
          <div class="checkbox" :class="{ checked: existingVisitor.selected }">
            <span v-if="existingVisitor.selected">✓</span>
          </div>
        </div>
      </div>
      <div class="existing-actions">
        <div class="confirm-btn" @click="confirmExistingVisitors">确定</div>
      </div>
    </div>

    <!-- 成功弹窗 -->
    <div v-if="showSuccessModal" class="modal-overlay" @click="closeSuccessModal">
      <div class="success-modal" @click.stop>
        <div class="success-icon">
          <el-icon :size="40">
            <Check />
          </el-icon>
        </div>
        <div class="success-text">预约成功</div>
        <button class="success-btn" @click="closeSuccessModal">确认</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 响应式数据
const selectedDate = ref('2025.05.26')
const selectedTime = ref('10:00-14:00')
const visitors = ref([])
const showExistingPage = ref(false)
const showSuccessModal = ref(false)

// 已有参观人数据
const existingVisitors = ref([
  {
    name: '周明明',
    idNumber: '210112196705041430',
    phone: '18416573665',
    selected: false
  },
  {
    name: '李明',
    idNumber: '621124199504251508',
    phone: '13902376115',
    selected: false
  }
])

// 计算属性
const isFormValid = computed(() => {
  if (visitors.value.length === 0) return false
  return visitors.value.every(visitor =>
    visitor.name &&
    visitor.phone &&
    visitor.idNumber &&
    !visitor.nameError &&
    !visitor.phoneError &&
    !visitor.idNumberError
  )
})

// 方法
const addNewVisitor = () => {
  // if (visitors.value.length >= 5) {
  //   alert('最多只能添加5个参观人')
  //   return
  // }
  visitors.value.unshift({
    name: '',
    phone: '',
    idType: '身份证',
    idNumber: '',
    nameError: '',
    phoneError: '',
    idNumberError: ''
  })
}

const removeVisitor = (index) => {
  visitors.value.splice(index, 1)
}

const validateName = (index) => {
  const visitor = visitors.value[index]
  if (!visitor.name.trim()) {
    visitor.nameError = '请输入姓名'
  } else if (visitor.name.length < 2) {
    visitor.nameError = '姓名至少2个字符'
  } else {
    visitor.nameError = ''
  }
}

const validatePhone = (index) => {
  const visitor = visitors.value[index]
  const phoneRegex = /^1[3-9]\d{9}$/
  if (!visitor.phone) {
    visitor.phoneError = '请输入电话号码'
  } else if (!phoneRegex.test(visitor.phone)) {
    visitor.phoneError = '请输入正确的11位手机号码'
  } else {
    visitor.phoneError = ''
  }
}

const validateIdNumber = (index) => {
  const visitor = visitors.value[index]
  const idRegex = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
  if (!visitor.idNumber) {
    visitor.idNumberError = '请输入证件号码'
  } else if (!idRegex.test(visitor.idNumber)) {
    visitor.idNumberError = '请输入正确的18位身份证号码'
  } else {
    visitor.idNumberError = ''
  }
}

const showExistingVisitors = () => {
  showExistingPage.value = true
}

const toggleExistingVisitor = (index) => {
  existingVisitors.value[index].selected = !existingVisitors.value[index].selected
}

const confirmExistingVisitors = () => {
  const selectedVisitors = existingVisitors.value.filter(visitor => visitor.selected)

  selectedVisitors.forEach(existingVisitor => {
    if (visitors.value.length < 5) {
      visitors.value.push({
        name: existingVisitor.name,
        phone: existingVisitor.phone,
        idType: '身份证',
        idNumber: existingVisitor.idNumber,
        nameError: '',
        phoneError: '',
        idNumberError: ''
      })
    }
  })

  // 重置选择状态
  existingVisitors.value.forEach(visitor => {
    visitor.selected = false
  })

  // 隐藏已有参观人页面，回到新增参观人页面
  showExistingPage.value = false
}

const submitReservation = async () => {
  if (!isFormValid.value) {
    alert('请完善所有参观人信息')
    return
  }

  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))

    // 显示成功弹窗
    showSuccessModal.value = true
  } catch (error) {
    alert('预约失败，请重试')
  }
}

const closeSuccessModal = () => {
  showSuccessModal.value = false
  // 可以跳转到其他页面或重置表单
  router.push('/indexPage')
}

// 初始化时添加一个空的参观人
onMounted(() => {
  addNewVisitor()
})
</script>

<style scoped lang="scss">
.visit-people-container {
  height: 100vh;
  padding-bottom: 100px;
}

.date-info {
  position: relative;

  .bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  margin: 16px;
}

.date-content {
  position: absolute;
  width: 70%;
  top: 20px;
  left: 35px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  text-align: left;
}

.date-label,
.time-label {
  font-size: 16px;
  color: #333;
  margin: 5px 0;

  .title {
    color: #B1967B;
  }
}

.action-buttons {
  display: flex;
  gap: 10px;
  padding: 0 16px;
  margin-bottom: 20px;
}

.add-new-btn,
.select-existing-btn {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
}

.add-new-btn {
  background-color: #B1967B;
  color: #fff;
}

.select-existing-btn {
  background-color: transparent;
  color: #A78A6D;
  border: 1px solid #B1967B;
}

.visitor-list {
  height: calc(100vh - 300px);
  padding: 0 16px 16px 16px;
  overflow: auto;
}

.visitor-card {
  background: white;
  border-radius: 8px;
  padding: 20px 20px 10px 20px;
  margin-bottom: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.visitor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd;
}

.visitor-title {
  font-size: 16px;
  font-weight: bold;
  color: #B1967B;
}

.delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #F45151;
  cursor: pointer;
  font-size: 14px;
}

.visitor-form {
  padding: 0;
}

.form-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
  height: 40px;
}

.form-label {
  width: 80px;
  font-size: 14px;
  color: #584735;
  font-weight: 500;
  line-height: 40px;
  flex-shrink: 0;
}

.form-input {
  position: relative;
  flex: 1;
  margin-left: 20px;
}

.bottom-line-input :deep(.el-input__wrapper) {
  border: none;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.bottom-line-input :deep(.el-input__inner) {
  text-align: right;
}

.bottom-line-input :deep(.el-input__wrapper):hover {
  border-bottom-color: rgba(88, 71, 53, 0.2);
}

.bottom-line-input :deep(.el-input__wrapper.is-focus) {
  border-bottom-color: rgba(88, 71, 53, 0.6);
  box-shadow: none;
}

.error-line :deep(.el-input__wrapper) {
  border-bottom-color: #F45151;
  box-shadow: none;
}

.bottom-line-select :deep(.el-select__wrapper) {
  border: none;
  border-bottom: 1px solid rgba(88, 71, 53, 0.2);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  text-align: right;
}

.bottom-line-select :deep(.el-select__wrapper):hover {
  border-bottom-color: rgba(88, 71, 53, 0.2);
}

.bottom-line-select :deep(.el-select__wrapper.is-focused) {
  border-bottom-color: rgba(88, 71, 53, 0.6);
  box-shadow: none;
}

.error-line :deep(.el-select__wrapper) {
  border-bottom-color: #F45151;
  box-shadow: none;
}

.error-msg {
  position: absolute;
  bottom: -20px;
  color: #F45151;
  font-size: 12px;
  margin-top: 5px;
}

/* 已有参观人页面 */
.existing-page {
  padding: 20px;
}

.existing-visitors-list {
  margin-bottom: 20px;
}

.existing-visitor-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: white;
  border-radius: 8px;
  margin-bottom: 10px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.existing-visitor-item:hover {
  background-color: #f9f9f9;
}

.visitor-info {
  flex: 1;
}

.visitor-name,
.visitor-id,
.visitor-phone {
  font-size: 14px;
  color: #333;
  margin-bottom: 5px;
}

.checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid #ddd;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

.checkbox.checked {
  background-color: #B1967B;
  border-color: #B1967B;
}

.existing-actions {
  // position: fixed;
  // bottom: 20px;
  // left: 20px;
  // right: 20px;
  // z-index: 100;
}

.confirm-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 15px;
  background-color: #B1967B;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}

.next-button-container {
  margin: 24px 24px 0 24px;
  // position: fixed;
  // bottom: 20px;
  // left: 20px;
  // right: 20px;
  // z-index: 100;
}

.next-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 15px;
  background-color: #B1967B;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}

.next-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.success-modal {
  background: white;
  border-radius: 8px;
  padding: 40px 20px;
  text-align: center;
  width: 280px;
}

.success-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
  background-color: #7DBE2B;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.success-icon img {
  width: 30px;
  height: 30px;
}

.success-text {
  font-size: 18px;
  color: #333;
  margin-bottom: 30px;
}

.success-btn {
  width: 100%;
  padding: 12px;
  background-color: #B1967B;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
}
</style>