<template>
  <div class="user-list-container">
    <!-- 联系人列表页面 -->
    <div v-if="!showAddForm" class="contact-list-page">

      <!-- 我的参观人标题 -->
      <div class="page-title">
        <h2>我的参观人</h2>
      </div>

      <!-- 联系人列表 -->
      <div class="contact-list">
        <div v-for="(contact, index) in contactList" :key="index" class="contact-card">
          <div class="contact-info">
            <div class="contact-row">
              <span class="label">姓名</span>
              <span class="value">{{ contact.name }}</span>
              <button class="edit-btn">编辑</button>
            </div>
            <div class="contact-row">
              <span class="label">证件号</span>
              <span class="value">{{ contact.idNumber }}</span>
            </div>
            <div class="contact-row">
              <span class="label">电话号码</span>
              <span class="value">{{ contact.phone }}</span>
            </div>
          </div>
        </div>
        <div class="tips">温馨提示：每个账号最多添加5个常用参观人</div>
      </div>
      <!-- 新增参观人按钮 -->
      <div class="add-button-container">
        <button class="add-visitor-btn" @click="showAddVisitor">新增参观人</button>
      </div>
    </div>

    <!-- 新增参观人表单页面 -->
    <div v-if="showAddForm" class="add-form-page">
      <!-- 新增参观人标题 -->
      <div class="page-title">
        <h2>新增参观人</h2>
      </div>

      <!-- 新增表单 -->
      <div class="form-container">
        <div class="visitor-card">
          <el-form :model="newVisitor" class="visitor-form">
            <div class="form-item">
              <div class="form-label">姓名</div>
              <div class="form-input">
                <el-input v-model="newVisitor.name" placeholder="请输入您的姓名" @blur="validateName"
                  :class="['bottom-line-input', newVisitor.nameError ? 'error-line' : '']" />
                <div v-if="newVisitor.nameError" class="error-msg">{{ newVisitor.nameError }}</div>
              </div>
            </div>

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

            <div class="form-item">
              <div class="form-label">证件类型</div>
              <div class="form-input">
                <el-select v-model="newVisitor.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="newVisitor.idNumber" placeholder="请输入18位证件编码" @blur="validateIdNumber"
                  :class="['bottom-line-input', newVisitor.idNumberError ? 'error-line' : '']" />
                <div v-if="newVisitor.idNumberError" class="error-msg">{{ newVisitor.idNumberError }}</div>
              </div>
            </div>
          </el-form>
        </div>
      </div>

      <!-- 确认按钮 -->
      <div class="confirm-button-container">
        <button class="confirm-btn" @click="confirmAdd">确认</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElInput, ElSelect, ElOption, ElForm } from 'element-plus'

// 响应式数据
const showAddForm = ref(false)
const contactList = ref([])
const newVisitor = ref({
  name: '',
  phone: '',
  idType: '身份证',
  idNumber: '',
  nameError: '',
  phoneError: '',
  idNumberError: ''
})

// 显示新增参观人表单
const showAddVisitor = () => {
  showAddForm.value = true
  resetForm()
}

// 重置表单
const resetForm = () => {
  newVisitor.value = {
    name: '',
    phone: '',
    idType: '身份证',
    idNumber: '',
    nameError: '',
    phoneError: '',
    idNumberError: ''
  }
}

// 验证姓名
const validateName = () => {
  if (!newVisitor.value.name.trim()) {
    newVisitor.value.nameError = '请输入姓名'
    return false
  }
  if (!/^[\u4e00-\u9fa5a-zA-Z]+$/.test(newVisitor.value.name)) {
    newVisitor.value.nameError = '姓名只能包含中文和英文字母'
    return false
  }
  newVisitor.value.nameError = ''
  return true
}

// 验证电话号码
const validatePhone = () => {
  if (!newVisitor.value.phone.trim()) {
    newVisitor.value.phoneError = '请输入电话号码'
    return false
  }
  if (!/^1[3-9]\d{9}$/.test(newVisitor.value.phone)) {
    newVisitor.value.phoneError = '请输入正确的11位手机号码'
    return false
  }
  newVisitor.value.phoneError = ''
  return true
}

// 验证身份证号码
const validateIdNumber = () => {
  if (!newVisitor.value.idNumber.trim()) {
    newVisitor.value.idNumberError = '请输入证件号码'
    return false
  }
  if (!/^[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]$/.test(newVisitor.value.idNumber)) {
    newVisitor.value.idNumberError = '请输入正确的18位身份证号码'
    return false
  }
  newVisitor.value.idNumberError = ''
  return true
}

// 确认添加
const confirmAdd = async () => {
  // 验证所有字段
  const isNameValid = validateName()
  const isPhoneValid = validatePhone()
  const isIdNumberValid = validateIdNumber()

  if (!isNameValid || !isPhoneValid || !isIdNumberValid) {
    return
  }

  try {
    // 这里应该调用API添加联系人
    await addContactToServer(newVisitor.value)

    // 添加成功后回到联系人列表并刷新数据
    showAddForm.value = false
    await fetchContactList()
  } catch (error) {
    console.error('添加联系人失败:', error)
    // 这里可以显示错误提示
  }
}

// 模拟API调用 - 添加联系人
const addContactToServer = async (contact) => {
  // 模拟API调用
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ success: true })
    }, 500)
  })
}

// 获取联系人列表
const fetchContactList = async () => {
  try {
    // 这里应该调用API获取联系人列表
    const response = await getContactListFromServer()
    contactList.value = response.data || []
  } catch (error) {
    console.error('获取联系人列表失败:', error)
  }
}

// 模拟API调用 - 获取联系人列表
const getContactListFromServer = async () => {
  // 模拟API调用，返回示例数据
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        data: [
          {
            name: '张三',
            idNumber: '110101199001011234',
            phone: '13812345678'
          },
          {
            name: '李四',
            idNumber: '621121199004251608',
            phone: '13923456789'
          }
        ]
      })
    }, 300)
  })
}

// 组件挂载时获取联系人列表
onMounted(() => {
  fetchContactList()
})
</script>

<style lang="scss" scoped>
.user-list-container {
  height: 100vh;
  background: url('@/assets/components/bg.png') no-repeat center center;
  background-size: cover;
  overflow-y: auto;

  .header-image {
    position: relative;
    margin: 16px;

    .bg-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 8px;
    }
  }

  .tips {
    width: 100%;
    text-align: center;
    color: #B1967B;
    font-size: 12px;
  }
}

.page-title {
  text-align: left;
  margin: 20px;

  h2 {
    color: #584735;
    font-size: 20px;
    font-weight: bold;
    margin: 0;
  }
}

.contact-list {
  height: calc(100vh - 180px);
  overflow-y: auto;
  padding: 0 16px;
  margin-bottom: 20px;
}

.contact-card {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.contact-info {
  .contact-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;

    &:last-child {
      margin-bottom: 0;
    }

    .label {
      color: #B1967B;
      font-size: 14px;
      min-width: 60px;
    }

    .value {
      flex: 1;
      color: #584735;
      font-size: 14px;
      margin-left: 12px;
    }

    .edit-btn {
      background: none;
      border: none;
      color: #F45151;
      font-size: 14px;
      cursor: pointer;
    }
  }
}

.add-button-container {
  width: 100%;
  position: absolute;
  bottom: 24px;
  padding: 0 16px 20px;
}

.add-visitor-btn {
  width: 100%;
  height: 48px;
  background: #B1967B;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    background: #9A8169;
  }
}

.form-container {
  padding: 0 16px;
  margin-bottom: 20px;
}

.visitor-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.visitor-form {
  padding: 0;
}

.form-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 30px;
  position: relative;

  &:last-child {
    margin-bottom: 0;
  }
}

.form-label {
  min-width: 80px;
  color: #B1967B;
  font-size: 14px;
  line-height: 32px;
  margin-right: 20px;
}

.form-input {
  flex: 1;
  position: relative;
}

.bottom-line-input :deep(.el-input__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-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;
}

.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-input__wrapper),
.error-line :deep(.el-select__wrapper) {
  border-bottom-color: #F45151;
  box-shadow: none;
}

.error-msg {
  position: absolute;
  bottom: -20px;
  right: 0;
  color: #F45151;
  font-size: 12px;
}

.confirm-button-container {
  width: 100%;
  position: absolute;
  bottom: 24px;
  padding: 0 16px 20px;
}

.confirm-btn {
  width: 100%;
  height: 48px;
  background: #B1967B;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    background: #9A8169;
  }
}
</style>