<template>
  <view class="general-code-container">
    <!-- 页面标题 -->
    <view class="page-header">
      <view class="header-left" @click="goBack">
        <view class="back-icon">←</view>
      </view>
      <view class="header-title">通用会员推广码</view>
      <view class="header-right" @click="refreshCode">
        <view class="refresh-btn">刷新</view>
      </view>
    </view>
    
    <!-- 推广码信息 -->
    <view class="code-info-section">
      <view class="section-title">推广码信息</view>
      <view class="info-card">
        <view class="info-row">
          <view class="info-label">推广码</view>
          <view class="info-value">{{ generalCode }}</view>
        </view>
        <view class="info-row">
          <view class="info-label">生成时间</view>
          <view class="info-value">{{ createTime }}</view>
        </view>
        <view class="info-row">
          <view class="info-label">有效期</view>
          <view class="info-value">{{ validityPeriod }}</view>
        </view>
        <view class="info-row">
          <view class="info-label">使用次数</view>
          <view class="info-value">{{ usageCount }}次</view>
        </view>
      </view>
    </view>
    
    <!-- 推广二维码 -->
    <view class="qrcode-section">
      <view class="section-title">推广二维码</view>
      <view class="qrcode-card">
        <view class="qrcode-image">
          <!-- 模拟二维码图片 -->
          <view class="mock-qrcode">
            <view class="qrcode-pattern"></view>
            <view class="qrcode-text">{{ generalCode }}</view>
          </view>
        </view>
        <view class="qrcode-hint">
          这是通用推广二维码，适用于所有渠道的推广活动
        </view>
        <view class="qrcode-actions">
          <view class="action-btn download-btn" @click="downloadQrcode">
            下载二维码
          </view>
          <view class="action-btn share-btn" @click="shareQrcode">
            分享二维码
          </view>
        </view>
      </view>
    </view>
    
    <!-- 使用记录 -->
    <view class="usage-record-section">
      <view class="section-title">使用记录</view>
      <view class="record-card">
        <view class="record-header">
          <view class="header-item">时间</view>
          <view class="header-item">使用人</view>
          <view class="header-item">操作</view>
        </view>
        <view class="record-list">
          <view 
            v-for="(record, index) in usageRecords" 
            :key="index"
            class="record-item"
          >
            <view class="record-cell">{{ record.time }}</view>
            <view class="record-cell">{{ record.user }}</view>
            <view class="record-cell">{{ record.action }}</view>
          </view>
        </view>
        <view class="record-footer">
          <view class="footer-text">
            共 {{ totalRecords }} 条记录，显示最近 {{ usageRecords.length }} 条
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref, onMounted } from "vue"

  // 推广码信息
  const generalCode = ref('GC202601290001')
  const createTime = ref('2026-01-29 10:00:00')
  const validityPeriod = ref('永久有效')
  const usageCount = ref(123)
  
  // 使用记录
  const usageRecords = ref([
    {
      time: '2026-01-29 15:30:00',
      user: '张三',
      action: '扫码注册'
    },
    {
      time: '2026-01-29 14:20:00',
      user: '李四',
      action: '购买会员'
    },
    {
      time: '2026-01-29 13:10:00',
      user: '王五',
      action: '扫码注册'
    }
  ])
  
  const totalRecords = ref(100)
  
  onMounted(() => {
    // 实际项目中应从接口获取通用推广码信息
    // loadGeneralCodeInfo()
  })
  
  // 返回上一页
  function goBack() {
    uni.navigateBack({ delta: 1 })
  }
  
  // 刷新推广码
  function refreshCode() {
    uni.showModal({
      title: '刷新推广码',
      content: '刷新推广码后，原推广码将失效，确定要刷新吗？',
      success: function(res) {
        if (res.confirm) {
          uni.showLoading({ title: '刷新中...' })
          
          setTimeout(() => {
            uni.hideLoading()
            // 模拟刷新后生成新的推广码
            generalCode.value = 'GC' + new Date().getTime().toString().substring(0, 12)
            createTime.value = new Date().toLocaleString('zh-CN')
            usageCount.value = 0
            uni.showToast({ 
              title: '推广码已刷新', 
              icon: 'success' 
            })
            // 实际项目中应调用接口刷新推广码
            // refreshGeneralCode()
          }, 1500)
        }
      }
    })
  }
  
  // 下载二维码
  function downloadQrcode() {
    uni.showLoading({ title: '下载中...' })
    
    setTimeout(() => {
      uni.hideLoading()
      uni.showToast({ 
        title: '二维码已下载', 
        icon: 'success' 
      })
      // 实际项目中应调用接口下载二维码
      // downloadGeneralQrcode()
    }, 1000)
  }
  
  // 分享二维码
  function shareQrcode() {
    uni.showActionSheet({
      itemList: ['分享到微信', '分享到朋友圈', '复制推广链接'],
      success: function(res) {
        switch(res.tapIndex) {
          case 0:
            uni.showToast({ title: '分享到微信', duration: 1000 })
            break
          case 1:
            uni.showToast({ title: '分享到朋友圈', duration: 1000 })
            break
          case 2:
            uni.setClipboardData({
              data: `https://example.com/register?code=${generalCode.value}`,
              success: function() {
                uni.showToast({ title: '推广链接已复制', duration: 1000 })
              }
            })
            break
        }
      }
    })
  }
</script>

<style lang="scss" scoped>
  /* #ifndef APP-NVUE */
  page {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: #f5f7fa;
    min-height: 100%;
    height: auto;
  }

  view {
    font-size: 14px;
    line-height: inherit;
  }
  /* #endif */

  .general-code-container {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  /* 页面头部 */
  .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 120rpx;
    background-color: #fff;
    padding: 0 32rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  }
  
  .header-left {
    width: 60rpx;
  }
  
  .back-icon {
    font-size: 40rpx;
    color: #303133;
    cursor: pointer;
  }
  
  .header-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #303133;
  }
  
  .header-right {
    width: 60rpx;
    text-align: right;
  }
  
  .refresh-btn {
    font-size: 24rpx;
    color: #409eff;
    font-weight: 600;
    cursor: pointer;
  }
  
  /* 通用部分样式 */
  .code-info-section,
  .qrcode-section,
  .usage-record-section {
    padding: 32rpx;
    background-color: #fff;
    margin: 0 16rpx 16rpx;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  }
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #303133;
    margin-bottom: 24rpx;
    padding-left: 12rpx;
    border-left: 8rpx solid #409eff;
    line-height: 1.2;
  }
  
  /* 推广码信息 */
  .info-card {
    background-color: #f9f9f9;
    border-radius: 12rpx;
    padding: 24rpx;
  }
  
  .info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16rpx;
  }
  
  .info-row:last-child {
    margin-bottom: 0;
  }
  
  .info-label {
    font-size: 24rpx;
    color: #606266;
  }
  
  .info-value {
    font-size: 24rpx;
    color: #303133;
    font-weight: 600;
  }
  
  /* 推广二维码 */
  .qrcode-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24rpx;
  }
  
  .qrcode-image {
    display: flex;
    justify-content: center;
  }
  
  .mock-qrcode {
    width: 300rpx;
    height: 300rpx;
    background-color: #f9f9f9;
    border-radius: 12rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .qrcode-pattern {
    width: 240rpx;
    height: 240rpx;
    background-color: #303133;
    margin-bottom: 16rpx;
  }
  
  .qrcode-text {
    font-size: 20rpx;
    color: #606266;
  }
  
  .qrcode-hint {
    font-size: 20rpx;
    color: #606266;
    text-align: center;
    line-height: 1.4;
    padding: 0 24rpx;
  }
  
  .qrcode-actions {
    display: flex;
    gap: 16rpx;
  }
  
  .action-btn {
    padding: 12rpx 24rpx;
    border-radius: 8rpx;
    font-size: 20rpx;
    font-weight: 600;
    cursor: pointer;
  }
  
  .download-btn {
    background-color: #ecf5ff;
    color: #409eff;
  }
  
  .share-btn {
    background-color: #f0f9eb;
    color: #67c23a;
  }
  
  /* 使用记录 */
  .record-card {
    background-color: #f9f9f9;
    border-radius: 12rpx;
    padding: 24rpx;
  }
  
  .record-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16rpx;
    padding-bottom: 16rpx;
    border-bottom: 1rpx solid #e0e0e0;
  }
  
  .header-item {
    flex: 1;
    font-size: 20rpx;
    font-weight: bold;
    color: #606266;
    text-align: center;
  }
  
  .record-list {
    display: flex;
    flex-direction: column;
    gap: 16rpx;
    margin-bottom: 16rpx;
  }
  
  .record-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16rpx;
    background-color: #fff;
    border-radius: 8rpx;
  }
  
  .record-cell {
    flex: 1;
    font-size: 20rpx;
    color: #303133;
    text-align: center;
  }
  
  .record-footer {
    text-align: center;
  }
  
  .footer-text {
    font-size: 18rpx;
    color: #909399;
  }
</style>