<template>
  <div class="dynamic-page">
    <div class="page-header">
      <h2 class="page-title">邀请好友获得红旗资产</h2>
    </div>
    
    <div class="rewards-section">
      <div class="rewards-list">
        <div class="reward-card" v-for="item in rewards" :key="item.renshu">
          <div class="card-header">
            <div class="reward-info">
              <h3 class="reward-title">{{ item.title }}</h3>
              <p class="reward-amount">{{ item.reward }}</p>
            </div>
            <div class="reward-badge">
              <span class="badge-text">{{ item.renshu }}人</span>
            </div>
          </div>
          <div class="card-footer">
            <button
              class="reward-btn"
              :class="{ received: item.received }"
              :disabled="item.received"
              @click="receiveReward(item.renshu, item.received)"
            >
              {{ item.received ? '已领取' : '立即领取' }}
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 实名认证提示弹窗 -->
    <div v-if="showAuthDialog" class="dialog-overlay">
      <div class="gov-dialog auth-dialog">
        <div class="dialog-header">
          <h3 class="dialog-title">系统提醒</h3>
          <div class="close-btn" @click="showAuthDialog = false">
            <span class="close-icon">×</span>
          </div>
        </div>
        <div class="dialog-body">
          <div class="warning-icon">⚠️</div>
          <div class="dialog-content">
            <p>您还未完成实名认证</p>
            <p>请先进行实名认证后再领取奖励</p>
          </div>
          <button class="gov-btn primary" @click="goToAuth">立即认证</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Dynamic',
  data() {
    return {
      activeTab: 'all',
      loading: false,
      showLoadMore: true,
      showAuthDialog: false,
      tabs: [
        { key: 'all', name: '全部' },
        { key: 'policy', name: '政策' },
        { key: 'finance', name: '金融' },
        { key: 'culture', name: '文化' },
        { key: 'technology', name: '科技' }
      ],
      newsList: [
        {
          id: 1,
          title: '红旗资产管理平台正式上线运营',
          summary: '经过精心筹备，红旗资产管理平台正式面向全国用户开放服务，为广大人民群众提供专业的资产管理服务。',
          type: 'policy',
          source: '官方发布',
          publishTime: '2024-03-15 10:30',
          readCount: 1205,
          cover: null
        },
        {
          id: 2,
          title: '新一轮金融政策解读：惠民利民新举措',
          summary: '国家出台新一轮金融扶持政策，重点支持民生领域发展，为老百姓带来更多实惠。',
          type: 'finance',
          source: '财经日报',
          publishTime: '2024-03-14 16:20',
          readCount: 892,
          cover: null
        },
        {
          id: 3,
          title: '传承红色文化 弘扬爱国精神',
          summary: '在新时代背景下，如何更好地传承红色文化，弘扬爱国主义精神，成为当前文化建设的重要课题。',
          type: 'culture',
          source: '文化周报',
          publishTime: '2024-03-13 14:15',
          readCount: 756,
          cover: null
        },
        {
          id: 4,
          title: '科技创新助力资产管理数字化转型',
          summary: '利用大数据、人工智能等先进技术，推动资产管理行业向数字化、智能化方向发展。',
          type: 'technology',
          source: '科技前沿',
          publishTime: '2024-03-12 09:45',
          readCount: 634,
          cover: null
        },
        {
          id: 5,
          title: '关于加强资产安全保障的通知',
          summary: '为确保用户资产安全，平台将进一步完善安全保障机制，提升风险防控能力。',
          type: 'policy',
          source: '监管部门',
          publishTime: '2024-03-11 11:30',
          readCount: 523,
          cover: null
        },
        {
          id: 6,
          title: '金融服务实体经济发展成效显著',
          summary: '近年来，金融业持续深化改革，不断提升服务实体经济能力，取得显著成效。',
          type: 'finance',
          source: '金融时报',
          publishTime: '2024-03-10 15:20',
          readCount: 441,
          cover: null
        }
      ],
      rewards: [
        { renshu: 5, title: '邀请5人实名认证', reward: '奖励60000元红旗资产', received: false },
        { renshu: 10, title: '邀请10人实名认证', reward: '奖励150000元红旗资产', received: false },
        { renshu: 20, title: '邀请20人实名认证', reward: '奖励300000元红旗资产', received: false },
        { renshu: 50, title: '邀请50人实名认证', reward: '奖励800000元红旗资产', received: false },
        { renshu: 100, title: '邀请100人实名认证', reward: '奖励1800000元红旗资产', received: false },
        { renshu: 150, title: '邀请150人实名认证', reward: '获得国家神秘奖励', received: false }
      ],
      userInfo: {}
    }
  },
  computed: {
    filteredNews() {
      if (this.activeTab === 'all') {
        return this.newsList
      }
      return this.newsList.filter(item => item.type === this.activeTab)
    }
  },
  methods: {
    switchTab(tabKey) {
      this.activeTab = tabKey
    },
    getTypeText(type) {
      const typeMap = {
        policy: '政策',
        finance: '金融',
        culture: '文化',
        technology: '科技'
      }
      return typeMap[type] || '资讯'
    },
    formatTime(timeString) {
      const now = new Date()
      const time = new Date(timeString)
      const diff = now - time
      const days = Math.floor(diff / (1000 * 60 * 60 * 24))
      const hours = Math.floor(diff / (1000 * 60 * 60))
      const minutes = Math.floor(diff / (1000 * 60))
      
      if (days > 0) {
        return `${days}天前`
      } else if (hours > 0) {
        return `${hours}小时前`
      } else if (minutes > 0) {
        return `${minutes}分钟前`
      } else {
        return '刚刚'
      }
    },
    readNews(news) {
      // 跳转到资讯详情页
      this.$router.push({
        path: '/cultureDetail',
        query: { 
          id: news.id,
          type: 'news'
        }
      })
    },
    loadMore() {
      this.loading = true
      // 模拟加载更多数据
      setTimeout(() => {
        // 这里可以调用API加载更多数据
        this.loading = false
        // 如果没有更多数据，隐藏加载更多按钮
        // this.showLoadMore = false
      }, 1000)
    },
    async getUserInfo() {
      try {
        // 模拟API调用
        this.userInfo = { if_real: 1 }
      } catch (error) {
        console.error('获取用户信息失败:', error);
      }
    },
    async getShareccbList() {
      try {
        // 模拟API调用，保持原有逻辑结构
        console.log('获取奖励列表')
      } catch (error) {
        console.error('获取奖励列表失败:', error);
      }
    },
    async receiveReward(renshu, received) {
      if (received) return;
      if (this.userInfo.if_real === 0) {
        this.showAuthDialog = true;
        return;
      }
      try {
        // 模拟API调用
        alert('领取成功！');
        // 更新状态
        const item = this.rewards.find(r => r.renshu === renshu);
        if (item) {
          item.received = true;
        }
      } catch (e) {
        console.error('领取奖励失败:', e);
      }
    },
    goToAuth() {
      this.showAuthDialog = false;
      this.$router.push('/user-center');
    }
  },
  created() {
    this.getUserInfo();
    this.getShareccbList();
  }
}
</script>

<style scoped>
.dynamic-page {
  min-height: 100vh;
  background: linear-gradient(to bottom, #2f9580 0%, #4fb3a1 100%);
  padding: 20px 16px 80px;
  box-sizing: border-box;
}

.page-header {
  margin-bottom: 24px;
  text-align: center;
}

.page-title {
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  padding: 0 16px;
  line-height: 1.4;
}

.rewards-section {
  
}

.rewards-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.reward-card {
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.reward-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.card-header {
  background: linear-gradient(135deg, #f8fffe 0%, #f0fdfb 100%);
  padding: 20px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.reward-info {
  flex: 1;
}

.reward-title {
  font-size: 16px;
  font-weight: 600;
  color: #2f9580;
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.reward-amount {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
  line-height: 1.4;
}

.reward-badge {
  background: linear-gradient(135deg, #2f9580 0%, #4fb3a1 100%);
  border-radius: 20px;
  padding: 8px 16px;
}

.badge-text {
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
}

.card-footer {
  padding: 20px;
  display: flex;
  justify-content: flex-end;
}

.reward-btn {
  padding: 12px 24px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid transparent;
  min-width: 100px;
}

.reward-btn:not(.received) {
  background: #2f9580;
  color: #ffffff;
  border-color: #2f9580;
}

.reward-btn:not(.received):hover {
  background: #268371;
  border-color: #268371;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(47, 149, 128, 0.3);
}

.reward-btn.received {
  background: #f3f4f6;
  color: #9ca3af;
  border-color: #e5e7eb;
  cursor: not-allowed;
}

/* 弹窗样式 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: fadeIn 0.3s ease;
}

.gov-dialog {
  width: 320px;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  animation: slideIn 0.3s ease;
}

.dialog-header {
  background: linear-gradient(135deg, #f8fffe 0%, #f0fdfb 100%);
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dialog-title {
  font-size: 18px;
  font-weight: 600;
  color: #2f9580;
  margin: 0;
}

.close-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.close-icon {
  font-size: 20px;
  color: #6b7280;
  font-weight: bold;
}

.close-btn:hover {
  background: rgba(47, 149, 128, 0.1);
}

.close-btn:hover .close-icon {
  color: #2f9580;
}

.dialog-body {
  padding: 32px 24px;
  text-align: center;
}

.warning-icon {
  font-size: 56px;
  margin-bottom: 20px;
}

.dialog-content {
  margin-bottom: 32px;
}

.dialog-content p {
  font-size: 15px;
  color: #6b7280;
  margin: 0 0 8px;
  line-height: 1.5;
}

.dialog-content p:last-child {
  margin-bottom: 0;
}

.gov-btn {
  padding: 14px 28px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.gov-btn.primary {
  background: #2f9580;
  color: #ffffff;
  border-color: #2f9580;
}

.gov-btn.primary:hover {
  background: #268371;
  border-color: #268371;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(47, 149, 128, 0.3);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .dynamic-page {
    padding: 16px 12px 80px;
  }
  
  .page-header .page-title {
    font-size: 18px;
    padding: 0 12px;
  }
  
  .reward-card .card-header {
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .reward-info {
    width: 100%;
  }
  
  .reward-title {
    font-size: 15px;
  }
  
  .reward-amount {
    font-size: 13px;
  }
  
  .reward-badge {
    align-self: flex-end;
    padding: 6px 12px;
  }
  
  .badge-text {
    font-size: 11px;
  }
  
  .card-footer {
    padding: 16px;
  }
  
  .reward-btn {
    width: 100%;
    padding: 14px 20px;
  }
  
  .gov-dialog {
    width: 300px;
    margin: 0 12px;
  }
  
  .dialog-header {
    padding: 16px 20px;
  }
  
  .dialog-title {
    font-size: 16px;
  }
  
  .dialog-body {
    padding: 24px 20px;
  }
  
  .warning-icon {
    font-size: 48px;
    margin-bottom: 16px;
  }
  
  .dialog-content p {
    font-size: 14px;
  }
}
</style> 