<template>
  <div class="chart-card">
    <el-carousel
      height="100%"
      arrow="hover"
	  trigger="click"
    >
      <el-carousel-item>
        <div class="carousel-item-inner">
          <div class="chart-card-header">
            <span class="chart-card-title">分类收入分析</span>
          </div>
          <div class="content-box">
            <el-table
              :data="categoryIncomeData"
              stripe
              style="width: 100%; height: 100%"
              empty-text="暂无分类收入数据"
              :row-style="{
                background: 'transparent',
                border: 'none'
              }"
              :cell-style="{
                border: 'none',
                borderBottom: '1px solid rgba(26, 80, 139, 0.3)'
              }"
            >
              <el-table-column prop="categoryName" label="分类名称" width="120" />
			  <el-table-column prop="index01" label="1月" width="65" />
			  <el-table-column prop="index01" label="2月" width="65" />
			  <el-table-column prop="index01" label="3月" width="65" />
			  <el-table-column prop="index01" label="4月" width="65" />
			  <el-table-column prop="index01" label="5月" width="65" />
			  <el-table-column prop="index01" label="6月" width="65" />
			  <el-table-column prop="index01" label="7月" width="65" />
			  <el-table-column prop="index01" label="8月" width="65" />
			  <el-table-column prop="index01" label="9月" width="65" />
			  <el-table-column prop="index01" label="10月" width="65" />
			  <el-table-column prop="index01" label="11月" width="65" />
			  <el-table-column prop="index01" label="12月" width="65" />
            </el-table>
          </div>
        </div>
      </el-carousel-item>
      <el-carousel-item>
        <div class="carousel-item-inner">
          <div class="chart-card-header">
            <span class="chart-card-title">支出收入分析</span>
          </div>
          <div class="content-box">
            <el-table
              :data="expenseIncomeData"
              stripe
              style="width: 100%; height: 100%"
              empty-text="暂无收支分析数据"
              :row-style="{
                background: 'transparent',
                border: 'none'
              }"
              :cell-style="{
                border: 'none',
                borderBottom: '1px solid rgba(26, 80, 139, 0.3)'
              }"
            >
              <el-table-column prop="categoryName" label="分类名称" width="120" />
              <el-table-column prop="index01" label="1月" width="65" />
              <el-table-column prop="index01" label="2月" width="65" />
              <el-table-column prop="index01" label="3月" width="65" />
              <el-table-column prop="index01" label="4月" width="65" />
              <el-table-column prop="index01" label="5月" width="65" />
              <el-table-column prop="index01" label="6月" width="65" />
              <el-table-column prop="index01" label="7月" width="65" />
              <el-table-column prop="index01" label="8月" width="65" />
              <el-table-column prop="index01" label="9月" width="65" />
              <el-table-column prop="index01" label="10月" width="65" />
              <el-table-column prop="index01" label="11月" width="65" />
              <el-table-column prop="index01" label="12月" width="65" />
            </el-table>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup>
import { ElCarousel, ElCarouselItem, ElTable, ElTableColumn, ElButton } from 'element-plus'
import { ref } from 'vue'

const categoryIncomeData = ref([
  {
    categoryName: '产品销售',
    amount: '285.60',
    proportion: '68.5',
    month: '2026-03',
    lastMonthAmount: '268.40',
    growthRate: '+6.4'
  },
  {
    categoryName: '服务收入',
    amount: '85.20',
    proportion: '20.4',
    month: '2026-03',
    lastMonthAmount: '78.90',
    growthRate: '+7.9'
  },
  {
    categoryName: '其他收入',
    amount: '46.80',
    proportion: '11.1',
    month: '2026-03',
    lastMonthAmount: '42.50',
    growthRate: '+10.1'
  },
  {
    categoryName: '其他收入',
    amount: '46.80',
    proportion: '11.1',
    month: '2026-03',
    lastMonthAmount: '42.50',
    growthRate: '+10.1'
  },
  {
    categoryName: '其他收入',
    amount: '46.80',
    proportion: '11.1',
    month: '2026-03',
    lastMonthAmount: '42.50',
    growthRate: '+10.1'
  },
  {
    categoryName: '其他收入',
    amount: '46.80',
    proportion: '11.1',
    month: '2026-03',
    lastMonthAmount: '42.50',
    growthRate: '+10.1'
  },
  {
    categoryName: '其他收入',
    amount: '46.80',
    proportion: '11.1',
    month: '2026-03',
    lastMonthAmount: '42.50',
    growthRate: '+10.1'
  },
  {
    categoryName: '其他收入',
    amount: '46.80',
    proportion: '11.1',
    month: '2026-03',
    lastMonthAmount: '42.50',
    growthRate: '+10.1'
  },
  {
    categoryName: '其他收入',
    amount: '46.80',
    proportion: '11.1',
    month: '2026-03',
    lastMonthAmount: '42.50',
    growthRate: '+10.1'
  },
  {
    categoryName: '其他收入',
    amount: '46.80',
    proportion: '11.1',
    month: '2026-03',
    lastMonthAmount: '42.50',
    growthRate: '+10.1'
  },
  {
    categoryName: '其他收入',
    amount: '46.80',
    proportion: '11.1',
    month: '2026-03',
    lastMonthAmount: '42.50',
    growthRate: '+10.1'
  },
  {
    categoryName: '其他收入',
    amount: '46.80',
    proportion: '11.1',
    month: '2026-03',
    lastMonthAmount: '42.50',
    growthRate: '+10.1'
  },
  {
    categoryName: '其他收入',
    amount: '46.80',
    proportion: '11.1',
    month: '2026-03',
    lastMonthAmount: '42.50',
    growthRate: '+10.1'
  },
  {
    categoryName: '其他收入',
    amount: '46.80',
    proportion: '11.1',
    month: '2026-03',
    lastMonthAmount: '42.50',
    growthRate: '+10.1'
  },
  {
    categoryName: '其他收入',
    amount: '46.80',
    proportion: '11.1',
    month: '2026-03',
    lastMonthAmount: '42.50',
    growthRate: '+10.1'
  },
  {
    categoryName: '其他收入',
    amount: '46.80',
    proportion: '11.1',
    month: '2026-03',
    lastMonthAmount: '42.50',
    growthRate: '+10.1'
  },
  {
    categoryName: '其他收入',
    amount: '46.80',
    proportion: '11.1',
    month: '2026-03',
    lastMonthAmount: '42.50',
    growthRate: '+10.1'
  },
  {
    categoryName: '其他收入',
    amount: '46.80',
    proportion: '11.1',
    month: '2026-03',
    lastMonthAmount: '42.50',
    growthRate: '+10.1'
  }
])

// 模拟支出收入分析数据
const expenseIncomeData = ref([
  {
    month: '2026-01',
    totalIncome: '428.50',
    totalExpense: '298.60',
    netProfit: '129.90',
    profitMargin: '30.3'
  },
  {
    month: '2026-02',
    totalIncome: '456.80',
    totalExpense: '312.40',
    netProfit: '144.40',
    profitMargin: '31.6'
  },
  {
    month: '2026-03',
    totalIncome: '417.60',
    totalExpense: '289.50',
    netProfit: '128.10',
    profitMargin: '30.7'
  }
])
</script>

<style scoped>
.chart-card {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.1) url("@/assets/images/k2style.png") no-repeat;
  background-size: 100% 100%;
}

.carousel-item-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.chart-card-header {
  height: 40px;
  line-height: 40px;
  padding: 0 16px;
  background-color: rgba(26, 80, 139, 0.5);
  border-bottom: 1px solid #1a508b;
  display: flex;
  align-items: center;
}

.chart-card-title {
  font-size: 16px;
  font-weight: 600;
  color: #409EFF;
  letter-spacing: 0.5px;
}

.content-box {
  flex: 1;
  width: 100%;
  height: calc(100% - 40px);
  padding: 10px;
  overflow: auto;
  background-size: 100% 100%;
}

:deep(.el-carousel) {
  height: 100% !important;
}
:deep(.el-carousel__container) {
  height: 100% !important;
}
:deep(.el-carousel__item) {
  background: transparent;
}

:deep(.el-table) {
  --el-table-text-color: #b4c7e7;
  --el-table-header-text-color: #b4c7e7;
  --el-table-row-hover-bg-color: rgba(26, 80, 139, 0.2);
  --el-table-border-color: transparent !important;
  --el-table-stripe-row-bg-color: rgba(0, 0, 0, 0.1);
  background-color: transparent !important;
  border: none !important;
}

:deep(.el-table__header-wrapper),
:deep(.el-table__header),
:deep(.el-table__header tr),
:deep(.el-table__header th) {
  background-color: transparent !important;
  background: transparent !important;
}

:deep(.el-table__header th) {
  border: none !important;
  border-bottom: 1px solid rgba(26, 80, 139, 0.3) !important;
  color: #b4c7e7 !important;
  font-weight: 600; 
}

:deep(.el-table td) {
  border: none !important;
  border-bottom: 1px solid rgba(26, 80, 139, 0.3) !important;
  background-color: transparent !important;
  color: #b4c7e7 !important;
}

:deep(.el-table__row:hover > td) {
  background-color: rgba(26, 80, 139, 0.2) !important;
  color: #b4c7e7 !important;
}

:deep(.el-table-empty-text) {
  color: #b4c7e7 !important;
  background-color: transparent !important;
}

.content-box::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.content-box::-webkit-scrollbar-thumb {
  background: rgba(26, 80, 139, 0.5);
  border-radius: 3px;
}
.content-box::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}

:deep(.el-button--text) {
  color: #409EFF !important;
}
:deep(.el-button--text:hover) {
  color: #66b1ff !important;
}
</style>