<template>
  <div class="social-page">
    <div class="container mx-auto px-4 py-8">
      <div class="text-center mb-8">
        <h1 class="text-3xl font-bold text-gray-900 mb-2">社交分享</h1>
        <p class="text-gray-600">与朋友分享情绪故事，获得支持</p>
      </div>

      <div class="max-w-4xl mx-auto">
        <!-- 发布动态 -->
        <div class="card mb-6">
          <h2 class="text-xl font-semibold mb-4">发布动态</h2>
          <div class="space-y-4">
            <el-input
              v-model="postContent"
              type="textarea"
              :rows="4"
              placeholder="分享你的情绪故事..."
            />
            <div class="flex justify-between items-center">
              <el-button type="primary" @click="publishPost">
                发布动态
              </el-button>
              <div class="text-sm text-gray-500">
                还可以输入 {{ 500 - postContent.length }} 字
              </div>
            </div>
          </div>
        </div>

        <!-- 动态列表 -->
        <div class="card">
          <h2 class="text-xl font-semibold mb-4">最新动态</h2>
          <div class="text-center text-gray-500 py-12">
            <el-icon class="text-4xl mb-4">
              <Share />
            </el-icon>
            <p>社交动态功能开发中...</p>
            <p class="text-sm mt-2">这里将显示用户发布的情绪动态</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Share } from '@element-plus/icons-vue'

const postContent = ref('')

const publishPost = () => {
  // TODO: 实现发布动态的逻辑
  console.log('发布动态:', postContent.value)
  postContent.value = ''
}
</script>

<style scoped>
.social-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  background-attachment: fixed;
}

.social-page .container {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
</style> 