<template>
  <BasicDrawer @register="registerBaseDrawer" style="margin-top:5px" title="评估统计表" width="1200" destroyOnClose>
    <div style="margin-top:5px">
      <a-card :bordered="false" style="height: 100%">
        <a-tabs v-model:activeKey="activeKey" animated @change="tabChange">
          <a-tab-pane key="1" tab="得分统计">
            <a-row>
              <a-col :span="12">
                <Barw :chartData="barDataSource" height="50vh" 
                      :option="{ title: { text: '各领域得分统计', left: 'center' } }"></Barw>
              </a-col>
              <a-col :span="12">
                <a-form-item style="margin-bottom: 20px; font-weight: bold; font-size: 16px;">
                  总分：{{ dftjsum }}
                </a-form-item>
                <div class="table-container">
                  <table class="statistics-table">
                    <thead>
                      <tr class="table-header">
                        <th style="width:25%">领域</th>
                        <th>评估要素</th>
                        <th style="width:10%">得分</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="(item,i) in keyitemDataSource" :key="i">
                        <td>{{ item.domain }}</td>
                        <td>{{ item.name }}</td>
                        <td>{{ item.value }}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </a-col>
            </a-row>
          </a-tab-pane>

          <a-tab-pane key="2" tab="得分率统计" force-render>
            <a-row>
              <a-col :span="24">
                <Barwbfh :chartData="ratioDataSource" height="50vh" 
                         :option="{ title: { text: '各领域得分率统计', left: 'left' } }"></Barwbfh>
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </a-card>
    </div>
  </BasicDrawer>
</template>

<script lang="ts" setup>
import { ref, onUnmounted } from 'vue';
import { BasicDrawer, useDrawerInner } from '/src/components/Drawer';
import Barw from '../Bar.vue';
import Barwbfh from '../BarBFH.vue';
import { rateStaiList, rateStaikeyitemList, rateStaiRatioList, rateStaiSum } from '../RateTask.api';

// 定义数据类型
interface KeyItem {
  domain: string;
  name: string;
  value: number | string;
}

interface ChartDataItem {
  [key: string]: any;
}

// 响应式数据
const barDataSource = ref<ChartDataItem[]>([])
const keyitemDataSource = ref<KeyItem[]>([])
const ratioDataSource = ref<ChartDataItem[]>([])
const taskid = ref<string>('')
const dftjsum = ref<string>('')
const activeKey = ref<string>('1')

// 注册抽屉
const [registerBaseDrawer] = useDrawerInner(async (data: { id: string }) => {
  taskid.value = data.id;
  
  // 并行请求所有数据
  try {
    const [barData, keyItemData, ratioData, sumData] = await Promise.all([
      rateStaiList({ taskid: taskid.value }),
      rateStaikeyitemList({ taskid: taskid.value }),
      rateStaiRatioList({ taskid: taskid.value }),
      rateStaiSum({ taskid: taskid.value })
    ]);
    
    barDataSource.value = barData;
    keyitemDataSource.value = keyItemData;
    ratioDataSource.value = ratioData;
    dftjsum.value = sumData.value || '';
  } catch (error) {
    console.error('加载统计数据失败:', error);
  }
});

// tab切换
function tabChange(key: string) {
  console.log('切换的key:', key);
  activeKey.value = key;
}

// 清理
onUnmounted(() => {
  // 清理资源
});
</script>

<style scoped>
.table-container {
  max-height: 50vh;
  overflow-y: auto;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
}

.statistics-table {
  width: 100%;
  border-collapse: collapse;
  background: #FFFFFF;
  font-size: 14px;
}

.statistics-table th,
.statistics-table td {
  border: 1px solid #d9d9d9;
  padding: 8px 12px;
  text-align: left;
  line-height: 1.5;
}

.statistics-table th {
  background: #fafafa;
  font-weight: 600;
}

.table-header {
  background: #83bff6;
  position: sticky;
  top: 0;
  z-index: 1;
}

.statistics-table tbody tr:hover {
  background-color: #f5f5f5;
}

.statistics-table tbody tr:nth-child(even) {
  background-color: #fafafa;
}
</style>