<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>

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

    <!-- 按钮 -->
    <view class="btn-wrapper">
      <view class="btn save-btn" :class="{ disabled: !isFormValid || saving }" @click="handleSave">
        {{ saving ? '保存中...' : '保存' }}
      </view>
    </view>
  </view>
</template>

<script>
import athleteAPI from '@/api/athlete.js';

export default {
  data() {
    return {
      formData: {
        idType: '身份证',
        name: '',
        idCard: '',
        phone: '',
        email: '',
        address: '',
        isDefault: false
      },
      showToast: false,
      toastMessage: '',
      saving: 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{17}[\dXx]$/.test(idCard);
    },
    validatePhone(phone) {
      return /^1\d{10}$/.test(phone);
    },
    handleSwitchChange(e) {
      this.formData.isDefault = e.detail.value;
    },
    showToastMsg(msg) {
      this.toastMessage = msg;
      this.showToast = true;
      setTimeout(() => { this.showToast = false; }, 2000);
    },
    async handleSave() {
      if (!this.isFormValid || this.saving) return;

      if (!this.validatePhone(this.formData.phone)) {
        this.showToastMsg('手机号码格式不正确');
        return;
      }
      if (!this.validateIdCard(this.formData.idCard)) {
        this.showToastMsg('身份证号码格式不正确');
        return;
      }

      this.saving = true;
      try {
        await athleteAPI.saveContact(this.formData);
        uni.showToast({ title: '保存成功', icon: 'success' });
        
        // Set flag to notify previous page
        uni.setStorageSync('contactListNeedRefresh', true);
        
        // Notify previous page to refresh contact list
        try {
          const pages = getCurrentPages();
          console.log('页面栈长度:', pages.length);
          console.log('页面栈:', pages);
          if (pages.length >= 2) {
            const prevPage = pages[pages.length - 2];
            console.log('上一页:', prevPage);
            // Try different ways to access the component
            const vm = prevPage.$vm || prevPage;
            console.log('vm:', vm);
            if (vm && typeof vm.loadContactList === 'function') {
              console.log('调用 loadContactList');
              vm.loadContactList();
            } else if (vm && vm.$refs && vm.$refs.page && typeof vm.$refs.page.loadContactList === 'function') {
              console.log('通过 $refs 调用');
              vm.$refs.page.loadContactList();
            }
          }
        } catch (e) {
          console.error('通知上一页失败:', e);
        }
        
        // Also emit event as backup
        uni.$emit('contactAdded');
        
        setTimeout(() => { uni.navigateBack(); }, 1500);
      } catch (err) {
        console.error('保存联系人失败:', err);
        this.showToastMsg('保存失败，请重试');
      } finally {
        this.saving = false;
      }
    }
  }
};
</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; }

.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; }

.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>
