<template>
  <view class="container">
    <!-- 顶部通知栏 -->
    <view class='tui-notice-board' v-if="showNotice">
      <view class="tui-icon-bg">
        <tui-icon name="news-fill" :size='24' color='#f54f46'></tui-icon>
      </view>
      <view class="tui-scorll-view">
        <view class="tui-notice" :class="[animation ? 'tui-animation' : '']">B站10分日本动漫已消失，9.9分仅剩12部，这一部动漫包揽三席！</view>
      </view>
    </view>

    <!-- 主要内容 -->
    <view class="main-content">

      <!-- 填写信息部分 -->
      <view class="info-section">
        <view class="page-header">
          <text class="page-title">填写信息</text>
        </view>

        <view class="form-container">
          <!-- 手机号输入 -->
          <view class="form-item">
            <view class="input-container">
              <input
                  class="form-input"
                  type="number"
                  v-model="phoneNumber"
                  placeholder="请输入对方手机号"
                  aria-placeholder="placeholder-style"
              />
            </view>
          </view>
          <!-- 日期时间选择 -->
          <view class="form-item">
            <view class="input-container date-container" @tap="showTuiDatetime">
              <view class="date-icon">
                <image src="../../assets/time-32.svg" mode="aspectFit" class="icon-calendar"></image>
              </view>
              <text class="date-text">{{ selectedDate || '选择日期时间' }}</text>
            </view>
          </view>
          <!-- 使用tui-datetime组件 -->
          <tui-datetime
              ref="datetimeRef"
              :type="1"
              :start="startYear"
              :end="endYear"
              @confirm="onDatetimeConfirm"
          ></tui-datetime>

          <!-- 日期提示信息 -->
          <view class="tip-container">
            <view class="tip-icon">
              <image src="../../assets/waring-32.svg" mode="aspectFit" class="icon-info"></image>
            </view>
            <view class="tip-text-wrapper">
              <text class="tip-text">如果选择时间，我们将在指定时间为您送达(节假日高峰可能存在延迟)，不选择时间将立即发送！</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 编辑短信部分 -->
      <view class="edit-section">
        <view class="page-header">
          <view class="title-price-section">
            <view class="title-section">
              <text class="page-title">编辑短信</text>
              <text class="price-info">(短信发送价格: 3.99元/条)</text>
            </view>
            <!-- 模板按钮 -->
            <view class="template-button-container">
              <button class="template-button" hover-class="button-hover" @tap="useBuiltContent">AI文案美化</button>
            </view>
          </view>
        </view>

        <view class="form-container">

          <!-- 添加图标 -->
          <view class="textarea-icon">
            <image src="../../assets/staples.svg" mode="aspectFit" class="icon-message"></image>
          </view>

          <!-- 文本输入区 -->
          <view class="textarea-container">
            <!-- 使用tui-textarea替换原来的textarea -->
            <tui-textarea 
                v-model="messageContent" 
                height="200rpx" 
                min-height="200rpx" 
                placeholder="请输入要传达的内容(表白、晚安、祝福～～)"
                :maxlength="500"
                :borderTop="false"
                :borderBottom="false"
                padding=10
                id="message-textarea"
            ></tui-textarea>
          </view>

          <!-- 字数统计和预览按钮 - 更改为非绝对定位 -->
          <view class="actions-row">
            <view class="character-count">
              <text class="count-text">{{ messageContent.length }}/</text>
              <text class="count-limit">20个字一条，共{{ calculateMessageCost() }}元</text>
            </view>

            <view class="preview-button-container">
              <button class="template-button" @tap="previewMessage">预览短信</button>
            </view>
          </view>

        </view>
      </view>

      <!-- 发送按钮 -->
      <view class="send-button-container">
        <button class="send-button" @tap="sendMessage">
          <!-- 添加图标 -->
          <view class="send-icon">
            <image src="../../assets/sending.svg" mode="aspectFit" class="icon-message"></image>
          </view>
          <text class="send-text">发送</text>
        </button>
      </view>

      <!-- 添加使用说明文字 -->
      <view class="usage-description">
        <text class="usage-text">1. 填写对方手机号码，系统将向该号码发送短信</text>
        <text class="usage-text">2. 可选择未来的发送时间，不选则立即发送</text>
        <text class="usage-text">3. 使用AI文案美化功能可自动生成不同类型的短信内容</text>
        <text class="usage-text">4. 短信按20字一条计费，发送前可预览效果</text>
        <text class="usage-text">5. 短信按20字一条计费，发送前可预览效果</text>
        <text class="usage-text">5. 短信按20字一条计费，发送前可预览效果</text>
        <text class="usage-text">5. 短信按20字一条计费，发送前可预览效果</text>
        <text class="usage-text">5. 短信按20字一条计费，发送前可预览效果</text>
        <text class="usage-text">5. 短信按20字一条计费，发送前可预览效果</text>
        <text class="usage-text">5. 短信按20字一条计费，发送前可预览效果</text>
        <text class="usage-text">5. 短信按20字一条计费，发送前可预览效果</text>
        <text class="usage-text">5. 短信按20字一条计费，发送前可预览效果</text>
        <text class="usage-text">5. 短信按20字一条计费，发送前可预览效果</text>
        <text class="usage-text">5. 短信按20字一条计费，发送前可预览效果</text>
        <text class="usage-text">5. 短信按20字一条计费，发送前可预览效果</text>
        <text class="usage-text">5. 短信按20字一条计费，发送前可预览效果</text>
      </view>

    </view>

    <!-- 日期选择器弹窗 -->
    <view class="date-picker-popup" v-if="showDatePickerPopup">
      <view class="date-picker-mask" @tap="hideDatePicker"></view>
      <view class="date-picker-content">
        <view class="date-picker-header">
          <text class="picker-title">选择发送时间</text>
          <text class="picker-close" @tap="hideDatePicker">×</text>
        </view>
        <picker-view
            class="date-picker"
            :value="dateTimeValue"
            @change="onDateTimeChange"
        >
          <picker-view-column>
            <view class="picker-item" v-for="(date, index) in dateOptions" :key="'date-'+index">{{ date }}</view>
          </picker-view-column>
          <picker-view-column>
            <view class="picker-item" v-for="(hour, index) in hourOptions" :key="'hour-'+index">{{ hour }}</view>
          </picker-view-column>
          <picker-view-column>
            <view class="picker-item" v-for="(minute, index) in minuteOptions" :key="'minute-'+index">{{ minute }}</view>
          </picker-view-column>
        </picker-view>
        <view class="date-picker-footer">
          <button class="picker-confirm" @tap="confirmDatePicker">确认</button>
        </view>
      </view>
    </view>

    <!-- 预览短信弹窗 -->
    <view class="preview-popup" v-if="showPreviewPopup">
      <view class="preview-mask" @tap="hidePreview"></view>

      <view class="preview-content">
        <view class="preview-header">
          <text class="preview-title">收件人: 12356789876</text>
          <text class="preview-close" @tap="hidePreview">×</text>
        </view>

        <view class="preview-message">
          <view class="message-bubble">
            <text class="message-text">{{ messageContent || '暂无内容' }}</text>
          </view>
        </view>

        <view class="preview-footer">
          <button class="preview-confirm" @tap="hidePreview">确认</button>
        </view>
      </view>
    </view>

    <!-- 使用tui-drawer组件的实现ai文案类型选择 -->
    <tui-drawer mode="bottom" :visible="showBuiltContentStatus" @close="hideBuiltContentStatus">
      <view class="template-content">
        <view class="template-header">
          <text class="template-title">生成短信类型</text>
          <text class="template-close" @tap="hideBuiltContentStatus">×</text>
        </view>
        <view class="template-category-list">
          <view
              class="template-category-item"
              v-for="(template, index) in messageTemplates"
              :key="index"
              @tap="selectTemplate(template)"
          >
            <text class="template-category-text">{{ template.type }}</text>
          </view>
        </view>

        <!-- 底部提示文案 -->
        <view class="template-tip-text">
          点击类型进行内容生成 @提升好感度！
        </view>

      </view>
    </tui-drawer>



  </view>
</template>

<script setup lang="ts">

import TuiDrawer from "@/components/thorui/tui-drawer/tui-drawer.vue";
import TuiDatetime from "@/components/thorui/tui-datetime/tui-datetime.vue";
import TuiTextarea from "@/components/thorui/tui-textarea/tui-textarea.vue";

const animation = ref<boolean>(false);
const showNotice = ref<boolean>(true);

// 表单数据
const phoneNumber = ref<string>('');
const messageContent = ref<string>('');
const selectedDate = ref<string>('');

// 光标位置控制
const cursorPosition = ref<number>(-1);
const selectionStart = ref<number>(-1);
const selectionEnd = ref<number>(-1);

// 在messageContent变化时更新光标位置
watch(messageContent, (newVal) => {
  if (newVal) {
    cursorPosition.value = newVal.length;
    selectionStart.value = newVal.length;
    selectionEnd.value = newVal.length;
  }
});

// 日期选择器
const showDatePickerPopup = ref<boolean>(false);
const dateTimeValue = ref<number[]>([0, 0, 0]); // 默认选中第一项
const dateOptions = ref<string[]>([]);
const hourOptions = ref<string[]>([]);
const minuteOptions = ref<string[]>([]);

// 日期时间选择相关
const datetimeRef = ref(null);
const startYear = ref(new Date().getFullYear()); // 开始年份默认为当前年
const endYear = ref(startYear.value + 1); // 结束年份默认为明年

// 显示tui-datetime日期选择器
const showTuiDatetime = () => {
  (datetimeRef.value as any)?.show();
};

// 日期时间确认
const onDatetimeConfirm = (e:any) => {

  const { year, month, day, hour, minute } = e;

  selectedDate.value = `${year}年${month}月${day}日 ${hour}:${minute}`;

};

// 预览弹窗
const showPreviewPopup = ref<boolean>(false);

// 模板选择弹窗
const showBuiltContentStatus = ref<boolean>(false);


const messageTemplates = ref([
  { typeId: 1, type: '表白' },
  { typeId: 2, type: '道歉' },
  { typeId: 3, type: '祝福' },
  { typeId: 4, type: '问候' },
  { typeId: 4, type: '晚安' },
  { typeId: 5, type: '思念' }
]);

// 各类型对应的模板内容
const templateContents = {
  1: ['我很喜欢你，可以和你交往吗？', '遇见你是我最大的幸运，我想请你做我的女朋友。'],
  2: ['对不起，是我考虑不周，希望你能原谅我。', '我为我的行为道歉，我知道我伤害了你的感受。'],
  3: ['祝你生日快乐，愿所有的幸福都围绕在你身边！', '祝福你在新的一年里事事顺心，万事如意！'],
  4: ['早安，愿你今天心情愉快，万事顺利！', '晚安，愿你有个甜美的梦。'],
  5: ['不知不觉已经很久没见了，很想念你。', '每当夜深人静的时候，总是会想起你。']
};

// 初始化日期数据
const initDateOptions = () => {
  // 生成未来7天的日期选项
  const today = new Date();
  dateOptions.value = Array.from({ length: 7 }, (_, i) => {
    const date = new Date(today);
    date.setDate(today.getDate() + i);
    return `${date.getMonth() + 1}月${date.getDate()}日`;
  });

  // 生成小时选项
  hourOptions.value = Array.from({ length: 24 }, (_, i) => {
    return `${String(i).padStart(2, '0')}时`;
  });

  // 生成分钟选项
  minuteOptions.value = Array.from({ length: 60 }, (_, i) => {
    return `${String(i).padStart(2, '0')}分`;
  });
};

// 显示日期选择器
const showDatePicker = () => {
  showDatePickerPopup.value = true;
};

// 隐藏日期选择器
const hideDatePicker = () => {
  showDatePickerPopup.value = false;
};

// 日期时间选择变化
const onDateTimeChange = (e:any) => {
  dateTimeValue.value = e.detail.value;
};

// 确认日期选择
const confirmDatePicker = () => {
  const [dateIndex, hourIndex, minuteIndex] = dateTimeValue.value;
  selectedDate.value = `${dateOptions.value[dateIndex]} ${hourOptions.value[hourIndex]}${minuteOptions.value[minuteIndex]}`;
  hideDatePicker();
};

// 计算短信费用
const calculateMessageCost = () => {
  const messageLength = messageContent.value.length;
  if (messageLength === 0) return 0;

  const messageCount = Math.ceil(messageLength / 20);
  return (messageCount * 3.99).toFixed(2);
};

// 更新键盘高度变化处理函数
const handleKeyboardHeightChange = (e: any) => {
  // 不再强制滚动页面，让用户自行滚动
  console.log('键盘高度变化，但不会强制滚动');
};

// 更新focus处理函数
const handleTextareaFocus = (e: any) => {
  // 设置光标位置为文本末尾
  cursorPosition.value = messageContent.value.length;
  selectionStart.value = messageContent.value.length;
  selectionEnd.value = messageContent.value.length;
  console.log("获得焦点 - 光标位置:", cursorPosition.value);
  
  // 不再强制滚动页面，让用户自行滚动
};

// 预览短信
const previewMessage = () => {
  if (!messageContent.value.trim()) {
    // 提示用户输入内容
    uni.showToast({
      title: '请先输入短信内容',
      icon: 'none'
    });
    return;
  }

  showPreviewPopup.value = true;
};

// 隐藏预览
const hidePreview = () => {
  showPreviewPopup.value = false;
};

// 显示模板选择
const useBuiltContent = () => {
  showBuiltContentStatus.value = true;
};

// 隐藏模板选择
const hideBuiltContentStatus = () => {
  showBuiltContentStatus.value = false;
};

// 选择模板
const selectTemplate = (template:any) => {
  messageContent.value = template.content;
  hideBuiltContentStatus();
};

// 发送短信
const sendMessage = () => {
  if (!phoneNumber.value) {
    uni.showToast({
      title: '请输入对方手机号',
      icon: 'none'
    });
    return;
  }

  if (!messageContent.value.trim()) {
    uni.showToast({
      title: '请输入短信内容',
      icon: 'none'
    });
    return;
  }

  // 这里是发送操作，实际项目中应调用API
  uni.showLoading({
    title: '发送中...'
  });

  // 模拟发送过程
  setTimeout(() => {
    uni.hideLoading();
    uni.showToast({
      title: '发送成功',
      icon: 'success'
    });

    // 重置表单
    phoneNumber.value = '';
    messageContent.value = '';
    selectedDate.value = '';
  }, 1500);
};

// 生命周期
onMounted(() => {
  initDateOptions();

  // 启动滚动动画
  setTimeout(() => {
    animation.value = true;
  }, 600);
  
  // 只保留微信环境的键盘监听
  console.log("微信小程序环境");
  uni.$on('keyboardheightchange', handleKeyboardHeightChange);
});

// 更新 onUnmounted
onUnmounted(() => {
  uni.$off('keyboardheightchange', handleKeyboardHeightChange);
});
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f7f7f7;
  position: relative;
}

/* 通知栏样式 */
.tui-notice-board {
  width: 100%;
  padding-right: 30rpx;
  box-sizing: border-box;
  font-size: 28rpx;
  height: 60rpx;
  background: #fff8d5;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 10;
}

.tui-icon-bg {
  background: #fff8d5;
  padding-left: 30rpx;
  position: relative;
  z-index: 10;
}

.tui-scorll-view {
  flex: 1;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  color: #f54f46;
}

.tui-notice {
  -webkit-backface-visibility: hidden;
  transform: translate3d(100%, 0, 0);
}

.tui-animation {
  -webkit-animation: tui-rolling 12s linear infinite;
  animation: tui-rolling 12s linear infinite;
}

@keyframes tui-rolling {
  0% {
    transform: translate3d(100%, 0, 0);
  }
  100% {
    transform: translate3d(-170%, 0, 0);
  }
}

/* 主内容区域 */
.main-content {
  flex: 1;
  padding: 20rpx 30rpx;
  padding-bottom: 150rpx; /* 增加底部间距，确保内容在键盘出现时仍可滚动查看 */
}

/* 信息和编辑部分 */
.info-section, .edit-section {
  margin-bottom: 30rpx;
}

/* 页面标题 */
.page-header {
  padding: 20rpx 0 30rpx;
}

/* 模板按钮 */
.title-price-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-section {
  flex: 1;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx; /* 添加底部间距 */
}

.price-info {
  font-size: 24rpx;
  color: #999;
  display: block; /* 使其成为块级元素 */
}

/* 表单样式 */
.form-container {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 20rpx;
  position: relative; /* 添加相对定位 */
}

/* 编辑短信的表单容器 - 确保无边框 */
.edit-section .form-container {
  border: none !important;
}

.form-item {
  margin-bottom: 20rpx;
}

.input-container {
  border: 1px solid #e0e0e0;
  border-radius: 35rpx;
  padding: 18rpx 30rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
}

.form-input {
  height: 46rpx;
  width: 100%;
  font-size: 30rpx;
  color: #333;
}

.placeholder-style {
  color: #bdbdbd;
  font-size: 30rpx;
}

/* 日期选择器 */
.date-container {
  display: flex;
  align-items: center;
  min-height: 46rpx; /* 与输入框高度一致 */
  height: 100%;
}

.date-icon {
  margin-right: 10rpx;
  display: flex;
  align-items: center;
  height: 100%;
}

.icon-calendar {
  width: 32rpx;
  height: 32rpx;
}

.date-text {
  flex: 1;
  font-size: 30rpx;
  color: #bdbdbd;
}

/* 提示信息 */
.tip-container {
  display: flex;
  align-items: flex-start;
  margin: 36rpx 15rpx 10rpx;
}

.tip-icon {
  margin-right: 5rpx;
}

.icon-info {
  width: 32rpx;
  height: 32rpx;
}

.tip-text {
  font-size: 22rpx;
  color: #999;
  line-height: 1.5;
}

.tip-text-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 16rpx; /* 与图标高度一致 */
}

/* 短信编辑区 */
.message-edit-section {
  margin-top: 20rpx;
}

/* 模板按钮 */
.template-button-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.template-button {
  background-color: rgba(7, 193, 96, 0.1); /* 微信绿色的浅色背景 */
  color: #07c160; /* 微信绿色文字 */
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 450;
  padding: 0;
  height: 38px;
  width: 120px; /* 减小按钮宽度 */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none; /* 移除阴影 */
}

.template-button::after {
  border: none; /* 移除按钮默认边框 */
}

/* 按钮悬停效果 */
.button-hover {
  opacity: 0.8;
}

/* 基本的textarea样式 - 适用于所有平台 */
.textarea-container {
  border: none !important;
  background-color: transparent !important;
  margin-bottom: 28rpx;
  position: relative;
  transition: all 0.3s ease;
  z-index: 9;
  box-shadow: none !important;
}

/* 确保textarea内部元素样式正确 */
:deep(.tui-textarea__self) {
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 12rpx !important;
  position: relative !important;
  z-index: 5 !important;
}

/* 确保textarea容器可以正确滚动 */
:deep(.tui-textarea__wrap) {
  overflow: visible !important;
  background-color: transparent !important;
  border: none !important;
}

/* 修改placeholder样式 */
:deep(.tui-placeholder) {
  color: #bdbdbd !important;
  font-size: 30rpx !important;
  background-color: transparent !important;
}

/* 清除可能的边框和线条 */
.textarea-container:after {
  display: none !important;
  border: none !important;
  height: 0 !important;
  background: transparent !important;
  content: none !important;
  box-shadow: none !important;
}

.textarea-icon {
  position: absolute;
  left: 15rpx; /* 与 form-container 的内边距保持一致 */
  top: 15rpx; /* 与 form-container 的内边距保持一致 */
  z-index: 10;
}

.icon-message {
  width: 32rpx;
  height: 32rpx;
}

/* 字数统计 */
.actions-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

/* 字数统计 */
.character-count {
  font-size: 26rpx;
  color: #999;
}

.count-text {
  font-size: 26rpx;
  color: #333;
}

.count-limit {
  font-size: 26rpx;
  color: #999;
}

/* 预览按钮 */
.preview-button-container {
  padding-right: 10rpx;
}

.preview-button {
  background-color: #f2f2f2;
  color: #666;
  font-size: 26rpx;
  padding: 10rpx 30rpx;
  border-radius: 30rpx;
  border: none;
  line-height: 1;
}

/* 发送按钮容器 */
.send-button-container {
  margin-top: 40rpx;
  padding: 0 150rpx; /* 增加左右内边距，让按钮变窄 */
}

/* 发送按钮 */
.send-button {
  background-color: #7ed321;
  color: #fff;
  font-size: 30rpx;
  border-radius: 40rpx;
  border: none;
  padding: 30rpx 0; /* 减小上下内边距，让按钮变短 */
  height: 80rpx; /* 固定高度 */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

/* 发送图标 */
.send-icon {
  display: flex;
  align-items: center;
  margin-right: 8rpx; /* 减小图标和文字间距 */
}

/* 图标尺寸 */
.send-icon image {
  width: 32rpx;
  height: 32rpx;
}

/* 发送文本 */
.send-text {
  line-height: 1;
}

/* 使用说明文字样式 */
.usage-description {
  margin-top: 30rpx;
  padding: 0 40rpx 50rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.usage-text {
  font-size: 24rpx;
  color: #999;
  line-height: 1.8;
  text-align: left;
  width: 100%;
}

/* 日期选择器弹窗 */
.date-picker-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
}

.date-picker-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.date-picker-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  border-radius: 16rpx 16rpx 0 0;
  overflow: hidden;
}

.date-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1px solid #f0f0f0;
}

.picker-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.picker-close {
  font-size: 40rpx;
  color: #999;
}

.date-picker {
  height: 400rpx;
  width: 100%;
}

.picker-item {
  line-height: 80rpx;
  text-align: center;
  font-size: 32rpx;
}

.date-picker-footer {
  padding: 20rpx 30rpx;
  border-top: 1px solid #f0f0f0;
}

.picker-confirm {
  background-color: #7ed321;
  color: #fff;
  font-size: 32rpx;
  border-radius: 40rpx;
  border: none;
  padding: 10rpx 0;
}

/* 预览短信弹窗 */
.preview-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
}

.preview-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.preview-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  min-height: 35vh;
  max-height: 65vh;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  display: flex;           /* 添加 flex 布局 */
  flex-direction: column;  /* 垂直排列子元素 */
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;         /* 防止头部被压缩 */
}

.preview-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.preview-close {
  font-size: 40rpx;
  color: #999;
}

.preview-message {
  padding: 30rpx;
  flex: 1;                /* 占用所有可用空间 */
  overflow-y: auto;       /* 内容过多时可滚动 */
}

.message-bubble {
  background-color: #a9eb5c; /* 更鲜亮的绿色 */
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  position: relative;
}

/* 添加气泡小尾巴 */
.message-bubble:after {
  content: '';
  position: absolute;
  bottom: -16rpx;
  right: 30rpx;
  width: 0;
  height: 0;
  border: 8rpx solid transparent;
  border-top-color: #a9eb5c;
  border-right-color: #a9eb5c;
}

.message-text {
  font-size: 30rpx;
  color: #333;
  line-height: 1.5;
  word-break: break-all; /* 允许在任意字符间断行 */
  word-wrap: break-word; /* 确保长单词也能被打断 */
  white-space: normal; /* 确保文本正常换行 */
}

.preview-footer {
  padding: 20rpx 30rpx;
  border-top: 1px solid #f0f0f0;
  flex-shrink: 0;         /* 防止底部被压缩 */
}

.preview-confirm {
  background-color: #7ed321;
  color: #fff;
  font-size: 28rpx; /* 减小字体大小 */
  border-radius: 36rpx; /* 稍微减小圆角 */
  border: none;
  padding: 8rpx 0; /* 减小上下内边距 */
  width: 60%; /* 限制按钮宽度 */
  height: 80rpx; /* 减小高度 */
  line-height: 80rpx; /* 保持文字垂直居中 */
  margin: 0 auto; /* 水平居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 模板选择弹窗 */
.template-content {
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  overflow: hidden;
  padding-bottom: 50rpx;
  min-height: 380rpx;
}

/* 模板类型列表 */
.template-category-list {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx 15rpx;
  justify-content: flex-start;
}

/* 泡泡按钮样式 */
.template-category-item {
  /* 基本形状和大小 */
  background-color: #f7f9fa;
  border-radius: 50rpx;
  padding: 16rpx 32rpx;
  margin: 12rpx;

  /* 自适应文字长度 */
  min-width: 120rpx;
  max-width: max-content;

  /* 居中显示 */
  display: flex;
  justify-content: center;
  align-items: center;

  /* 立体感和气泡效果 */
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.03);

  /* 过渡效果 */
  transition: all 0.2s ease;

  /* 浅色背景变化 */
  position: relative;
  overflow: hidden;
}

/* 不同类型使用不同的浅色背景 */
.template-category-item:nth-child(1) {
  background-color: rgba(255, 182, 193, 0.2); /* 浅粉色 */
}

.template-category-item:nth-child(2) {
  background-color: rgba(173, 216, 230, 0.2); /* 浅蓝色 */
}

.template-category-item:nth-child(3) {
  background-color: rgba(255, 218, 185, 0.2); /* 浅橙色 */
}

.template-category-item:nth-child(4) {
  background-color: rgba(144, 238, 144, 0.2); /* 浅绿色 */
}

.template-category-item:nth-child(5) {
  background-color: rgba(221, 160, 221, 0.2); /* 浅紫色 */
}

/* 类型文本 */
.template-category-text {
  font-size: 28rpx;
  color: #333;
}

/* 模板标题与关闭按钮的容器 */
.template-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 36rpx 40rpx;
  border-bottom: none;
  position: relative;
}

/* 添加下边缘微妙阴影 */
.template-header:after {
  content: '';
  position: absolute;
  left: 30rpx;
  right: 30rpx;
  bottom: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.08), transparent);
}

.template-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #333;
  letter-spacing: 0.5px;
  position: relative;
}

/* 可以考虑添加一个微妙的标题装饰 */
.template-title:before {
  content: '';
  position: absolute;
  left: -16rpx;
  top: 50%;
  transform: translateY(-50%);
  width: 6rpx;
  height: 45rpx;
  background-color: #07c160;
  border-radius: 3rpx;
}

.template-close {
  font-size: 40rpx;
  color: #888;
  width: 70rpx;
  height: 70rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

/* 添加关闭按钮的hover效果 */
.template-close:active {
  background-color: rgba(0, 0, 0, 0.05);
  color: #666;
}

/* 模板类型列表 */
.template-category-list {
  display: flex;
  flex-wrap: wrap;
  padding: 30rpx 20rpx;
  justify-content: space-between;
}


/* 泡泡按钮样式 */
.template-category-item {
  background-color: #f8f8f8;
  border-radius: 40rpx;
  padding: 16rpx 30rpx;
  margin: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.template-category-item:active {
  background-color: #e6e6e6;
  transform: scale(0.98);
}

/* 类型文本 */
.template-category-text {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.template-tip-text {
  width: 100%;
  text-align: center;
  font-size: 28rpx;
  color: #f08a0b;
  margin-top: 30rpx;
}


.template-item {
  padding: 20rpx;
  border-bottom: 1px solid #f0f0f0;
}

.template-preview {
  font-size: 28rpx;
  color: #333;
  line-height: 1.5;
  margin-bottom: 10rpx;
  display: block;
}

.template-type {
  font-size: 24rpx;
  color: #999;
  display: block;
}
</style>