<template>
  <view class="add-contact-page">
    <!-- 表单 -->
    <view class="form-container">
      <view class="form-item" @click="showIdTypePicker = true">
        <view class="form-label">证件类型</view>
        <view class="form-value">
          <text>{{ formData.idType }}</text>
          <text class="arrow">›</text>
        </view>
      </view>

      <view class="form-item">
        <view class="form-label">姓名</view>
        <view class="form-value">
          <input
            class="form-input"
            v-model="formData.name"
            placeholder="请输入姓名"
            placeholder-class="placeholder"
          />
        </view>
      </view>

      <view class="form-item">
        <view class="form-label">证件号码</view>
        <view class="form-value">
          <input
            class="form-input"
            v-model="formData.idCard"
            placeholder="请输入身份证号码"
            placeholder-class="placeholder"
          />
        </view>
      </view>

      <view class="form-item">
        <view class="form-label">手机号码</view>
        <view class="form-value">
          <input
            class="form-input"
            v-model="formData.phone"
            placeholder="请输入手机号码"
            placeholder-class="placeholder"
            type="number"
          />
        </view>
      </view>

      <view class="form-item">
        <view class="form-label">邮箱</view>
        <view class="form-value">
          <input
            class="form-input"
            v-model="formData.email"
            placeholder="请输入邮箱"
            placeholder-class="placeholder"
          />
        </view>
      </view>

      <view class="form-item">
        <view class="form-label">地址</view>
        <view class="form-value">
          <input
            class="form-input"
            v-model="formData.address"
            placeholder="请输入地址"
            placeholder-class="placeholder"
          />
        </view>
      </view>

      <view class="form-item switch-item">
        <view class="form-label">设置为默认联系人</view>
        <view class="form-value">
          <switch
            :checked="formData.isDefault"
            @change="handleSwitchChange"
            color="#C93639"
          />
        </view>
      </view>
    </view>

    <!-- 提示信息 -->
    <view class="hint-message" v-if="showHint">
      <text class="hint-icon">ℹ</text>
      <text class="hint-text">{{ hintText }}</text>
    </view>

    <!-- Toast提示 -->
    <view class="toast-message" v-if="showToast">
      <text class="toast-text">{{ toastMessage }}</text>
    </view>

    <!-- 提示文字 -->
    <view class="info-text">
      <text class="info-hint">默认关闭，可切换开关</text>
    </view>

    <view class="warning-text">
      <text>联系人用于接收比赛信息，成绩和证书。</text>
    </view>

    <!-- 按钮 -->
    <view class="btn-wrapper">
      <view class="btn save-btn disabled" v-if="!isFormValid">保存</view>
      <view class="btn save-btn" v-else @click="handleSave">保存</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        idType: '身份证',
        name: '',
        idCard: '',
        phone: '',
        email: '',
        address: '',
        isDefault: false
      },
      showHint: false,
      hintText: '',
      showToast: false,
      toastMessage: '',
      showIdTypePicker: false
    };
  },
  computed: {
    isFormValid() {
      return (
        this.formData.name &&
        this.formData.idCard &&
        this.formData.phone &&
        this.validateIdCard(this.formData.idCard) &&
        this.validatePhone(this.formData.phone)
      );
    }
  },
  methods: {
    validateIdCard(idCard) {
      return /^\d{18}$/.test(idCard);
    },
    validatePhone(phone) {
      return /^1\d{10}$/.test(phone);
    },
    handleSwitchChange(e) {
      this.formData.isDefault = e.detail.value;
    },
    handleSave() {
      if (!this.isFormValid) {
        if (this.formData.phone && !this.validatePhone(this.formData.phone)) {
          this.toastMessage = '手机号码格式不正确';
          this.showToast = true;
          setTimeout(() => {
            this.showToast = false;
          }, 2000);
        } else if (this.formData.idCard && !this.validateIdCard(this.formData.idCard)) {
          this.toastMessage = '身份证号码格式不正确';
          this.showToast = true;
          setTimeout(() => {
            this.showToast = false;
          }, 2000);
        } else {
          this.hintText = '请完善信息';
          this.showHint = true;
          setTimeout(() => {
            this.showHint = false;
          }, 2000);
        }
        return;
      }

      // 实际保存逻辑
      uni.showToast({
        title: '保存成功',
        icon: 'success'
      });
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    }
  }
};
</script>

<style lang="scss" scoped>
.add-contact-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 200rpx;
}

.form-container {
  background-color: #fff;
  margin: 30rpx;
  border-radius: 16rpx;
  overflow: hidden;
}

.form-item {
  display: flex;
  align-items: center;
  padding: 35rpx 30rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.form-item:last-child {
  border-bottom: none;
}

.switch-item {
  padding: 30rpx;
}

.form-label {
  width: 180rpx;
  font-size: 30rpx;
  color: #333333;
}

.form-value {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.form-input {
  flex: 1;
  font-size: 30rpx;
  color: #333333;
}

.placeholder {
  color: #cccccc;
}

.arrow {
  font-size: 40rpx;
  color: #cccccc;
  margin-left: 10rpx;
}

.hint-message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 30rpx 50rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  gap: 15rpx;
  z-index: 9999;
}

.hint-icon {
  font-size: 40rpx;
}

.hint-text {
  font-size: 28rpx;
}

.toast-message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 30rpx 50rpx;
  border-radius: 16rpx;
  z-index: 9999;
}

.toast-text {
  font-size: 28rpx;
}

.info-text {
  margin: 20rpx 30rpx;
  text-align: center;
}

.info-hint {
  font-size: 24rpx;
  color: #C93639;
}

.warning-text {
  margin: 20rpx 30rpx;
  text-align: center;
  font-size: 24rpx;
  color: #C93639;
}

.btn-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30rpx;
  background-color: #f5f5f5;
}

.btn {
  width: 100%;
  text-align: center;
  padding: 30rpx;
  border-radius: 12rpx;
  font-size: 32rpx;
  font-weight: bold;
}

.save-btn {
  background-color: #C93639;
  color: #fff;
}

.save-btn.disabled {
  background-color: rgba(201, 54, 57, 0.5);
}
</style>
