<template>
  <div class="chart-card">
    <el-carousel height="100%" arrow="hover" trigger="click" :autoplay="false">
      <el-carousel-item>
        <div class="carousel-item-inner">
          <div class="chart-card-header">
            <span class="chart-card-title">账户收入分析</span>
          </div>
          <div class="table-container">
            <div class="custom-loading" v-if="dataLoading">
              <el-icon class="loading-icon"><Loading /></el-icon>
              <span class="loading-text">加载中...</span>
            </div>
            <el-table
              :data="incomeData"
              stripe
              empty-text="暂无账户收入数据"
              :row-style="{ background: 'transparent' }"
              :cell-style="{ borderBottom: '1px solid rgba(26, 80, 139, 0.3)' }"
              :header-row-style="{ background: 'transparent' }"
              :header-cell-style="{ borderBottom: '1px solid rgba(26, 80, 139, 0.3)' }"
            >
              <el-table-column prop="xaxis" label="账户名称" width="120" fixed="left" />
              <el-table-column v-for="m in 12" :key="`in-${m}`" :prop="`index${String(m).padStart(2, '0')}`" :label="`${m}月`" align="center" />
			  <el-table-column prop="indexSum" label="合计" width="120" fixed="right" />
            </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="table-container">
            <div class="custom-loading" v-if="dataLoading">
              <el-icon class="loading-icon"><Loading /></el-icon>
              <span class="loading-text">加载中...</span>
            </div>
            <el-table
              :data="expenseData"
              stripe
              empty-text="暂无账户支出数据"
              :row-style="{ background: 'transparent' }"
              :cell-style="{ borderBottom: '1px solid rgba(26, 80, 139, 0.3)' }"
              :header-row-style="{ background: 'transparent' }"
              :header-cell-style="{ borderBottom: '1px solid rgba(26, 80, 139, 0.3)' }"
            >
              <el-table-column prop="xaxis" label="账户名称" width="120" fixed="left" />
              <el-table-column v-for="m in 12" :key="`ex-${m}`" :prop="`index${String(m).padStart(2, '0')}`" :label="`${m}月`" align="center" />
			  <el-table-column prop="indexSum" label="合计" width="120" fixed="right" />
            </el-table>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { getItemInfoList } from '@/api/bizApi'

const props = defineProps({
  formParams: {
    type: Object,
    default: () => ({})
  }
})

const incomeData = ref([])
const expenseData = ref([])
const dataLoading = ref(false)

async function getIncomeList() {
  try {
    const res = await getItemInfoList({ ...props.formParams, itemCode: 'ERP_YEAR_ACCOUNT_Y001' })
    incomeData.value = res || []
  } catch (e) {
    incomeData.value = []
    console.error('数据加载失败:', e)
  }
}

async function getExpenseList() {
  try {
    const res = await getItemInfoList({ ...props.formParams, itemCode: 'ERP_YEAR_ACCOUNT_Y002' })
    expenseData.value = res || []
  } catch (e) {
    expenseData.value = []
    console.error('数据加载失败:', e)
  }
}

async function getList() {
  dataLoading.value = true
  await Promise.all([getIncomeList(), getExpenseList()])
  dataLoading.value = false
}

watch(() => props.formParams, () => getList(), { deep: true, immediate: true })
</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 !important;
  background-size: 100% 100% !important;
}

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

.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;
}

.table-container {
  flex: 1;
  width: 100%;
  height: calc(100% - 40px);
  padding: 10px;
  overflow: auto;
  background: transparent !important;
  position: relative;
}

.custom-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.1) !important; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.loading-icon {
  font-size: 24px;
  color: #409EFF;
  animation: loading-rotate 2s linear infinite;
  margin-bottom: 8px;
}

.loading-text {
  font-size: 14px;
  color: #b4c7e7;
}

@keyframes loading-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

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

:deep(.el-table) {
  --el-table-bg-color: transparent !important;
  --el-table-text-color: #b4c7e7 !important;
  --el-table-header-text-color: #b4c7e7 !important;
  --el-table-row-hover-bg-color: rgba(26, 80, 139, 0.2) !important;
  --el-table-border-color: transparent !important;
  --el-table-stripe-row-bg-color: rgba(0, 0, 0, 0.1) !important;
  
  background: transparent !important;
  border: none !important;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

:deep(.el-table *),
:deep(.el-table__inner-wrapper),
:deep(.el-table__body-wrapper),
:deep(.el-table__header-wrapper),
:deep(.el-table__body),
:deep(.el-table__header),
:deep(.el-table__body tr),
:deep(.el-table__header tr) {
  background: transparent !important;
  background-color: transparent !important;
}

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

:deep(.el-table__empty-block),
:deep(.el-table__empty-text) {
  background: transparent !important;
  color: #b4c7e7 !important;
}

.table-container::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.table-container::-webkit-scrollbar-thumb {
  background: rgba(26, 80, 139, 0.5);
  border-radius: 3px;
}
.table-container::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}
</style>