<template>
  <view class="page">
    <!-- 顶部导航栏 -->
    <uni-nav-bar
      left-icon="left"
      :title="title"
      @clickLeft="goBack"
      fixed
      color="#8B2316"
      height="180rpx"
      :border="false"
      backgroundColor="#eeeeee"
    />
  
    <view class="content">
     
      <!-- 输入区域（邮箱或其他文本） -->
      <view class="input-wrapper">
        <input
         v-if="editType === 'email'"
          class="input"
          type="text"
          :placeholder="placeholder"
          placeholder-class="ph"
          v-model.trim="content"
          :adjust-position="false"
         
        >
        </input>
        <textarea   v-else   v-model.trim="content" :placeholder="placeholderTextArea" placeholder-class="ph" auto-height :adjust-position="false"> </textarea>
      </view>

      

      <!-- 提示文案 -->
      <view class="hint">{{ hint }}</view>
    </view>

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

<script setup>
import { ref } from 'vue'
const title = ref('修改邮箱');
import { onLoad } from '@dcloudio/uni-app';
const content = ref('')
const editType = ref('');
const placeholder = ref('请输入您的邮箱');
const placeholderTextArea = ref('请输入您的个人简介(500字以内)');
const hint = ref('请填写您的真实邮箱，以便联系上您');
onLoad((options) => {
  editType.value = options && options.editType ? options.editType : '';
  content.value = (options && options.value) ? options.value : '';
  switch (editType.value) {
    case 'email':
      title.value = '修改邮箱';
      placeholder.value = '请输入您的邮箱';
      hint.value = '请填写您的真实邮箱，以便联系上您';
      break;
    case 'name':
      title.value = '修改姓名';
      placeholder.value = '请输入您的姓名';
      hint.value = '';
      break;
    case 'officePhone':
      title.value = '修改科室电话';
      placeholder.value = '请输入您的科室电话';
      hint.value = '';
      break;
    case 'certificate':
      title.value = '修改执业医师证编号';
      placeholder.value = '请输入您的执业医师证编号';
      hint.value = '';
      break;
    case 'intro':
      title.value = '修改个人简介';
      placeholderTextArea.value = '请输入您的个人简介(500字以内)';
      hint.value = '';
      break;
    default:
      break;
  }
})


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 (editType.value === 'email' && !isValidEmail(content.value)) {
    uni.showToast({ title: '请输入有效的邮箱', icon: 'none' })
    return
  }

  // 将数据回传到上一页（personInfo），监听事件名：writeInfoSaved
  uni.$emit('writeInfoSaved', {
    editType: editType.value,
    content: content.value
  })

  uni.showToast({ title: '保存成功', icon: 'none' })
  setTimeout(() => goBack(), 300)
}
</script>

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

.content {
  padding: 24rpx 30rpx;
  textarea{
	  min-height:400rpx;
  }
}

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


