<template>
  <view class="page">
    <!-- 顶部导航栏 -->
    <uni-nav-bar
      left-icon="left"
      title="修改邮箱"
      @clickLeft="goBack"
      fixed
      color="#8B2316"
      height="140rpx"
      :border="false"
      backgroundColor="#eeeeee"
    />

    <view class="content">
        {{ eitType === 'email' }}
      <!-- 邮箱输入框 -->
      <view class="input-wrapper">
        <input
         v-if="eitType === 'email'"
          class="input"
          type="text"
          :placeholder="placeholder"
          placeholder-class="ph"
          v-model.trim="content"
         
        >
        </input>
        <textarea v-model.trim="content" placeholder="请输入您的个人简介(500字以内)" placeholder-class="ph" auto-height v-else > </textarea>
      </view>

      

      <!-- 提示文案 -->
      <view class="hint">请填写您的真实邮箱，以便联系上您</view>
    </view>

    <!-- 底部保存按钮 -->
    <view class="footer">
      <button class="save-btn" @click="onSave">保存</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const content = ref('')
const eitType = ref('1ww');
const placeholder = ref('请输入您的邮箱');

const goBack = () => {
  uni.navigateBack()
}

const isValidEmail = (val) => {
  if (!val) return false
  const re = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/
  return re.test(val)
}

const onSave = () => {
  if (!isValidEmail(email.value)) {
    uni.showToast({ title: '请输入有效的邮箱', icon: 'none' })
    return
  }

  // 这里调用保存接口（占位）
  // await api.updateEmail({ email: email.value })
  uni.showToast({ title: '保存成功', icon: 'success' })
  setTimeout(() => goBack(), 800)
}
</script>

<style lang="scss" scoped>
.page {
  background-color: #fff;
  min-height: 100vh;
}

.content {
  padding: 24rpx 30rpx;
}

.input-wrapper {
  background: #fff;
  border: 2rpx solid #e6e6e6;
  border-radius: 16rpx;
  padding: 16rpx 20rpx;
}

.input {
  height: 60rpx;
  line-height:60rpx;
  font-size: 28rpx;
  color: #333;
}

.ph {
  color: #c7c7c7;
}

.hint {
  margin-top: 24rpx;
  font-size: 26rpx;
  color: #333;
}

.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: env(safe-area-inset-bottom);
  padding: 24rpx 30rpx calc(24rpx + env(safe-area-inset-bottom));
  background-color: #fff;
}

.save-btn {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  color: #8b2316;
  font-size: 30rpx;
  border: 2rpx solid #8b2316;
  border-radius: 16rpx;
  background: #fff;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
}
</style>


