<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue'
import { Button, Select, Space, message, Row, Col, Card, Statistic, Table, DatePicker } from 'ant-design-vue'
import type { ColumnsType } from 'ant-design-vue/es/table'
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons-vue'
import { getConsumptionByType, getUnitConsumption } from '@/api/energy'
import { getProjectSelectorList } from '@/api/project'

// 能源类型映射
const energyTypeMap: Record<string, { color: string; text: string }> = {
  ELECTRICITY: { color: '#faad14', text: '电力' },
  WATER: { color: '#1890ff', text: '水' },
  GAS: { color: '#fa541c', text: '燃气' },
  CENTRAL_HEATING: { color: '#f5222d', text: '集中供热' },
  CENTRAL_COOLING: { color: '#13c2c2', text: '集中供冷' }
}

// 项目选择选项
const projectOptions = ref<{ value: string; label: string }[]>([])

// 查询参数
const queryParams = reactive({
  projectId: '',
  month: ''
})

// 数据状态
const loading = ref(false)
const byTypeData = ref<{ energyType: string; consumption: number; amount: number }[]>([])
const unitData = ref<{ indicatorName: string; value: number; unit: string }[]>([])

// 总计
const totalConsumption = ref(0)
const totalAmount = ref(0)

// 表格列定义（分项统计）
const byTypeColumns: ColumnsType = [
  { title: '能源类型', dataIndex: 'energyType', key: 'energyType', width: 150 },
  { title: '消耗量(kWh)', dataIndex: 'consumption', key: 'consumption', width: 150 },
  { title: '费用(元)', dataIndex: 'amount', key: 'amount', width: 150 },
  {
    title: '占比',
    key: 'percentage',
    width: 150,
    customRender: ({ record }: { record: { consumption: number } }) => {
      const pct = totalConsumption.value > 0
        ? ((record.consumption / totalConsumption.value) * 100).toFixed(1)
        : '0.0'
      return `${pct}%`
    }
  }
]

// 单方能耗列定义
const unitColumns: ColumnsType = [
  { title: '指标名称', dataIndex: 'indicatorName', key: 'indicatorName', width: 200 },
  { title: '指标值', dataIndex: 'value', key: 'value', width: 150 },
  { title: '单位', dataIndex: 'unit', key: 'unit', width: 100 }
]

// 获取项目列表
const fetchProjects = async () => {
  try {
    const res = await getProjectSelectorList()
    projectOptions.value = (res.data.data || []).map((item: any) => ({
      value: item.id,
      label: item.name
    }))
  } catch {
    message.error('获取项目列表失败')
  }
}

// 获取月度格式化
const getCurrentMonth = () => {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  return `${year}-${month}`
}

// 获取分项统计数据
const fetchByTypeData = async () => {
  if (!queryParams.projectId || !queryParams.month) return
  loading.value = true
  try {
    const res = await getConsumptionByType(queryParams.projectId, queryParams.month)
    byTypeData.value = res.data.data || []
    // 计算总计
    totalConsumption.value = byTypeData.value.reduce((sum, item) => sum + item.consumption, 0)
    totalAmount.value = byTypeData.value.reduce((sum, item) => sum + item.amount, 0)
  } catch {
    message.error('获取分项统计数据失败')
  } finally {
    loading.value = false
  }
}

// 获取单方能耗数据
const fetchUnitData = async () => {
  if (!queryParams.projectId || !queryParams.month) return
  try {
    const res = await getUnitConsumption(queryParams.projectId, queryParams.month)
    unitData.value = res.data.data || []
  } catch {
    message.error('获取单方能耗数据失败')
  }
}

// 搜索
const handleSearch = () => {
  if (!queryParams.projectId) {
    message.warning('请先选择项目')
    return
  }
  if (!queryParams.month) {
    message.warning('请选择月份')
    return
  }
  fetchByTypeData()
  fetchUnitData()
}

// 重置
const handleReset = () => {
  queryParams.projectId = ''
  queryParams.month = ''
  byTypeData.value = []
  unitData.value = []
  totalConsumption.value = 0
  totalAmount.value = 0
}

// 获取能源类型标签
const getEnergyTypeTag = (type: string) => {
  return energyTypeMap[type] || { color: 'default', text: type }
}

onMounted(() => {
  fetchProjects()
  queryParams.month = getCurrentMonth()
})
</script>

<template>
  <div class="page-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2 class="page-title">能耗统计</h2>
    </div>

    <!-- 筛选区 -->
    <div class="filter-bar">
      <Space>
        <Select
          v-model:value="queryParams.projectId"
          placeholder="请选择项目"
          style="width: 240px"
          allow-clear
          :options="projectOptions"
        />
        <DatePicker
          v-model:value="queryParams.month"
          picker="month"
          placeholder="选择月份"
          style="width: 140px"
          :format="(value: any) => value ? value.format('YYYY-MM') : ''"
        />
        <Button type="primary" @click="handleSearch">
          <SearchOutlined /> 查询
        </Button>
        <Button @click="handleReset">
          <ReloadOutlined /> 重置
        </Button>
      </Space>
    </div>

    <!-- 统计卡片 -->
    <Row :gutter="16" style="margin-bottom: 24px">
      <Col :span="6">
        <Card>
          <Statistic
            title="月度总消耗"
            :value="totalConsumption"
            suffix="kWh"
            :precision="2"
          />
        </Card>
      </Col>
      <Col :span="6">
        <Card>
          <Statistic
            title="月度总费用"
            :value="totalAmount"
            prefix="¥"
            :precision="2"
          />
        </Card>
      </Col>
      <Col :span="6">
        <Card>
          <Statistic
            title="计量点数量"
            :value="byTypeData.length"
          />
        </Card>
      </Col>
      <Col :span="6">
        <Card>
          <Statistic
            title="统计月份"
            :value="queryParams.month || '-'"
          />
        </Card>
      </Col>
    </Row>

    <!-- 分项统计饼图区域 -->
    <Row :gutter="24" style="margin-bottom: 24px">
      <Col :span="24">
        <Card title="分项能耗构成">
          <!-- 简单饼图实现 -->
          <div class="pie-container">
            <div class="pie-chart">
              <div
                v-for="(item, index) in byTypeData"
                :key="item.energyType"
                class="pie-segment"
                :style="{
                  '--percentage': `${(item.consumption / totalConsumption) * 100 || 0}%`,
                  '--color': getEnergyTypeTag(item.energyType).color,
                  '--index': index
                }"
              >
                <div class="pie-label">
                  <span class="pie-color" :style="{ background: getEnergyTypeTag(item.energyType).color }"></span>
                  <span class="pie-text">{{ getEnergyTypeTag(item.energyType).text }}</span>
                  <span class="pie-value">{{ ((item.consumption / totalConsumption) * 100 || 0).toFixed(1) }}%</span>
                </div>
              </div>
            </div>
          </div>
        </Card>
      </Col>
    </Row>

    <Row :gutter="24">
      <!-- 分项能耗表格 -->
      <Col :span="12">
        <Card title="分项能耗明细">
          <a-table
            :columns="byTypeColumns"
            :data-source="byTypeData"
            :loading="loading"
            :row-key="(record: any) => record.energyType"
            :pagination="false"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'energyType'">
                <span :style="{ color: getEnergyTypeTag(record.energyType).color }">
                  {{ getEnergyTypeTag(record.energyType).text }}
                </span>
              </template>
            </template>
          </a-table>
          <a-empty v-if="!queryParams.projectId || byTypeData.length === 0" description="请先选择项目和月份进行查询" />
        </Card>
      </Col>

      <!-- 单方能耗指标 -->
      <Col :span="12">
        <Card title="单方能耗指标">
          <a-table
            :columns="unitColumns"
            :data-source="unitData"
            :loading="loading"
            :row-key="(record: any) => record.indicatorName"
            :pagination="false"
          />
          <a-empty v-if="!queryParams.projectId || unitData.length === 0" description="请先选择项目和月份进行查询" />
        </Card>
      </Col>
    </Row>
  </div>
</template>

<style scoped>
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.page-title {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  color: #262626;
}

.filter-bar {
  margin-bottom: 24px;
  padding: 16px;
  background: #fafafa;
  border-radius: 8px;
}

/* 简单饼图样式 */
.pie-container {
  padding: 20px 0;
}

.pie-chart {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

.pie-segment {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  border-left: 4px solid var(--color);
  background: #fafafa;
  border-radius: 4px;
  min-width: 200px;
}

.pie-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pie-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.pie-text {
  font-weight: 500;
  color: #262626;
}

.pie-value {
  color: #8c8c8c;
  margin-left: 8px;
}
</style>