<script lang="ts" setup>
import { downloadReport } from '@/pagesBank/api'
import { DateDimension } from '@/typings/bank'

definePage({
  style: {
    navigationBarTitleText: '报表下载',
  },
})

// 从路由参数获取报表信息
const reportId = ref('')
const reportName = ref('')

// 日期维度选项
const dimensionOptions = [
  { label: '按日', value: DateDimension.DAY },
  { label: '按月', value: DateDimension.MONTH },
  { label: '按季', value: DateDimension.QUARTER },
  { label: '自定义', value: DateDimension.CUSTOM },
]

// 当前选中的日期维度
const activeDimension = ref(DateDimension.DAY)

// 当前选中的日期
const selectedDate = ref('2025-12-25')

// 日期选择器显示状态
const showDatePicker = ref(false)

// 下载中状态
const downloading = ref(false)

// 获取日期维度标签
function getDimensionLabel(dimension: DateDimension) {
  const option = dimensionOptions.find(opt => opt.value === dimension)
  return option?.label || ''
}

// 切换日期维度
function handleDimensionChange(dimension: DateDimension) {
  activeDimension.value = dimension
  // 根据维度更新默认日期
  updateDefaultDate(dimension)
}

// 根据维度更新默认日期
function updateDefaultDate(dimension: DateDimension) {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  
  switch (dimension) {
    case DateDimension.DAY:
      selectedDate.value = `${year}-${month}-${day}`
      break
    case DateDimension.MONTH:
      selectedDate.value = `${year}-${month}`
      break
    case DateDimension.QUARTER:
      const quarter = Math.floor(now.getMonth() / 3) + 1
      selectedDate.value = `${year}-Q${quarter}`
      break
    case DateDimension.CUSTOM:
      selectedDate.value = `${year}-${month}-${day}`
      break
  }
}

// 显示日期选择器
function showDateSelector() {
  showDatePicker.value = true
}

// 日期选择确认
function handleDateConfirm(e: any) {
  const { value } = e
  const date = new Date(value)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  
  if (activeDimension.value === DateDimension.MONTH) {
    selectedDate.value = `${year}-${month}`
  } else {
    selectedDate.value = `${year}-${month}-${day}`
  }
  
  showDatePicker.value = false
}

// 下载报表
async function handleDownload() {
  if (downloading.value) return
  
  downloading.value = true
  try {
    await downloadReport({
      reportId: reportId.value,
      dimension: activeDimension.value,
      date: selectedDate.value
    })
    
    uni.showToast({
      title: '下载成功',
      icon: 'success'
    })
  } catch (error) {
    uni.showToast({
      title: '下载失败',
      icon: 'none'
    })
  } finally {
    downloading.value = false
  }
}

onLoad((options: any) => {
  if (options.reportId) {
    reportId.value = options.reportId
  }
  if (options.reportName) {
    reportName.value = decodeURIComponent(options.reportName)
  }
})
</script>

<template>
  <view class="download-page">
    <!-- 报表信息卡片 -->
    <view class="report-info-card">
      <view class="report-icon">
        <text class="i-carbon-document"></text>
      </view>
      <view class="report-details">
        <text class="report-name">{{ reportName }}</text>
        <text class="report-id">报表编号: {{ reportId }}</text>
      </view>
    </view>

    <!-- 日期维度筛选 -->
    <view class="dimension-section">
      <view class="section-title">选择日期维度</view>
      <view class="dimension-tabs">
        <view
          v-for="option in dimensionOptions"
          :key="option.value"
          class="dimension-tab"
          :class="{ active: activeDimension === option.value }"
          @click="handleDimensionChange(option.value)"
        >
          {{ option.label }}
        </view>
      </view>
    </view>

    <!-- 日期选择 -->
    <view class="date-section">
      <view class="section-title">选择日期</view>
      <view class="date-picker" @click="showDateSelector">
        <view class="date-display">
          <text class="i-carbon-calendar"></text>
          <text class="date-value">{{ selectedDate }}</text>
        </view>
        <text class="i-carbon-chevron-right"></text>
      </view>
    </view>

    <!-- 下载区域 -->
    <view class="download-section">
      <view class="format-tag">EXCEL</view>
      <button
        class="download-btn"
        :class="{ loading: downloading }"
        :disabled="downloading"
        @click="handleDownload"
      >
        <text v-if="downloading" class="i-carbon-circle-dash loading-icon"></text>
        <text>{{ downloading ? '下载中...' : '点击下载' }}</text>
      </button>
    </view>

    <!-- 使用帮助 -->
    <view class="help-section">
      <view class="help-title">
        <text class="i-carbon-help"></text>
        <text>Excel格式: 使用帮助</text>
      </view>
      <view class="help-content">
        <view class="help-item">
          <text class="help-number">1</text>
          <text class="help-text">选择要下载报表的日期</text>
        </view>
        <view class="help-item">
          <text class="help-number">2</text>
          <text class="help-text">点击下载按钮进行下载</text>
        </view>
        <view class="help-item">
          <text class="help-number">3</text>
          <text class="help-text">下载后自动打开文件，可以点击手机右上角的【...】进行转发或保存文件</text>
        </view>
      </view>
    </view>

    <!-- 日期选择器弹窗 -->
    <wd-datetime-picker
      v-model="selectedDate"
      v-model:show="showDatePicker"
      type="date"
      @confirm="handleDateConfirm"
      @cancel="showDatePicker = false"
    />
  </view>
</template>

<style lang="scss" scoped>
.download-page {
  min-height: 100vh;
  background: #f8f9fa;
  padding: 30rpx;
}

.report-info-card {
  background: #fff;
  border-radius: 24rpx;
  padding: 30rpx;
  display: flex;
  align-items: center;
  gap: 24rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.02);
  
  .report-icon {
    width: 96rpx;
    height: 96rpx;
    background: linear-gradient(135deg, #00c05a 0%, #34d19d 100%);
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    text {
      font-size: 48rpx;
      color: #fff;
    }
  }
  
  .report-details {
    flex: 1;
    
    .report-name {
      font-size: 32rpx;
      font-weight: 700;
      color: #333;
      display: block;
      margin-bottom: 8rpx;
    }
    
    .report-id {
      font-size: 24rpx;
      color: #999;
    }
  }
}

.dimension-section,
.date-section {
  background: #fff;
  border-radius: 24rpx;
  padding: 30rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.02);
}

.section-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 24rpx;
}

.dimension-tabs {
  display: flex;
  gap: 16rpx;
  
  .dimension-tab {
    flex: 1;
    height: 72rpx;
    background: #f8f9fa;
    border-radius: 12rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26rpx;
    color: #666;
    transition: all 0.2s;
    
    &.active {
      background: #00c05a;
      color: #fff;
      font-weight: 600;
    }
  }
}

.date-picker {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
  
  .date-display {
    display: flex;
    align-items: center;
    gap: 16rpx;
    
    text:first-child {
      font-size: 36rpx;
      color: #00c05a;
    }
    
    .date-value {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
  }
  
  text:last-child {
    font-size: 28rpx;
    color: #adb5bd;
  }
}

.download-section {
  background: #fff;
  border-radius: 24rpx;
  padding: 40rpx 30rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30rpx;
  
  .format-tag {
    font-size: 24rpx;
    color: #00c05a;
    background: rgba(0, 192, 90, 0.1);
    padding: 8rpx 24rpx;
    border-radius: 8rpx;
    font-weight: 600;
  }
  
  .download-btn {
    width: 100%;
    height: 96rpx;
    background: linear-gradient(135deg, #00c05a 0%, #34d19d 100%);
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12rpx;
    font-size: 32rpx;
    font-weight: 600;
    color: #fff;
    border: none;
    transition: all 0.2s;
    
    &:active:not(:disabled) {
      opacity: 0.8;
      transform: scale(0.98);
    }
    
    &:disabled {
      opacity: 0.6;
    }
    
    &.loading {
      opacity: 0.8;
    }
    
    .loading-icon {
      font-size: 32rpx;
      animation: spin 1s linear infinite;
    }
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.help-section {
  background: #fff;
  border-radius: 24rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.02);
  
  .help-title {
    display: flex;
    align-items: center;
    gap: 12rpx;
    margin-bottom: 24rpx;
    
    text:first-child {
      font-size: 32rpx;
      color: #4d80f0;
    }
    
    text:last-child {
      font-size: 28rpx;
      font-weight: 600;
      color: #333;
    }
  }
  
  .help-content {
    .help-item {
      display: flex;
      align-items: flex-start;
      gap: 16rpx;
      margin-bottom: 20rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .help-number {
        width: 40rpx;
        height: 40rpx;
        background: #4d80f0;
        color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22rpx;
        font-weight: 600;
        flex-shrink: 0;
      }
      
      .help-text {
        flex: 1;
        font-size: 26rpx;
        color: #666;
        line-height: 1.6;
      }
    }
  }
}
</style>