<template>
  <view class="admin-page">
    <view class="admin-card header-card">
      <view class="breadcrumb">
        <text class="back" @click="goBack">返回</text>
        <text class="sep">/</text>
        <text class="current">微信关注回复</text>
      </view>
    </view>
    
    <view class="admin-card content-card reply-editor-wrap">
      <view class="phone-preview">
        <!-- 简化的手机预览 -->
        <view class="phone-header">
          <text class="time">9:36</text>
        </view>
        <view class="phone-body">
          <view class="chat-item">
            <view class="avatar">🐷</view>
            <view class="bubble">{{ replyContent }}</view>
          </view>
        </view>
      </view>
      
      <view class="reply-form">
        <view class="form-item">
          <text class="label">消息状态：</text>
          <radio-group class="radio-group">
            <label><radio value="1" checked />启用</label>
            <label><radio value="0" />禁用</label>
          </radio-group>
        </view>
        
        <view class="form-item">
          <text class="label">消息类型：</text>
          <view class="filter-select">
            <text>文字消息</text>
            <text class="arrow">▼</text>
          </view>
        </view>
        
        <view class="form-item">
          <text class="label">消息内容：</text>
          <textarea v-model="replyContent" class="reply-textarea" placeholder="请输入内容"></textarea>
        </view>
        
        <view class="form-btns">
          <button class="btn primary">保存并发布</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="uts">
import { ref } from 'vue'

const replyContent = ref('567856875687')

const goBack = () => {
  // 返回逻辑
}
</script>

<style scoped>
.reply-editor-wrap {
  display: flex;
  flex-direction: row;
  padding: 40px;
  gap: 60px;
}

.phone-preview {
  width: 320px;
  height: 560px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.phone-header {
  height: 60px;
  background-color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.chat-item {
  display: flex;
  padding: 15px;
  gap: 10px;
}

.avatar {
  font-size: 24px;
}

.bubble {
  background-color: #fff;
  padding: 10px;
  border-radius: 4px;
  position: relative;
  max-width: 200px;
  word-break: break-all;
}

.reply-form {
  flex: 1;
}

.form-item {
  margin-bottom: 25px;
  display: flex;
  align-items: flex-start;
}

.form-item .label {
  width: 100px;
  padding-top: 5px;
  color: #606266;
}

.radio-group label {
  margin-right: 20px;
}

.reply-textarea {
  flex: 1;
  height: 120px;
  border: 1px solid #dcdfe6;
  padding: 10px;
  border-radius: 4px;
}

.btn.primary {
  margin-left: 100px;
  background-color: #2d8cf0;
  color: #fff;
}
</style>
