<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { Button, Select, Space, message, Card, Statistic, Row, Col, Table, DatePicker, InputNumber, Form } from 'ant-design-vue'
import type { ColumnsType } from 'ant-design-vue/es/table'
import { ReloadOutlined } from '@ant-design/icons-vue'
import {
  getEnergyMeters,
  getEnergyMeter,
  recordEnergyConsumption,
  getEnergyConsumption,
  type EnergyMeter,
  type EnergyConsumption
} from '@/api/energy'
import { getProjectSelectorList } from '@/api/project'

// 能源类型映射
const energyTypeMap: Record<string, string> = {
  ELECTRICITY: '电力',
  WATER: '水',
  GAS: '燃气',
  CENTRAL_HEATING: '集中供热',
  CENTRAL_COOLING: '集中供冷'
}

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

// 计量点选项
const meterOptions = ref<{ value: string; label: string; energyType: string }[]>([])

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

// 数据状态
const loading = ref(false)
const recordLoading = ref(false)
const consumptionList = ref<EnergyConsumption[]>([])
const selectedMeter = ref<EnergyMeter | null>(null)
const lastRecord = ref<EnergyConsumption | null>(null)

// 录入表单
const formState = reactive({
  meterId: '',
  currentReading: undefined as number | undefined,
  recordedBy: ''
})

// 计算消耗量和费用
const calculatedConsumption = computed(() => {
  if (!selectedMeter.value || formState.currentReading === undefined || lastRecord.value === null) {
    return { consumption: 0, amount: 0 }
  }
  const consumption = formState.currentReading - lastRecord.value.currentReading
  const amount = consumption * (selectedMeter.value.unitPrice || 0)
  return { consumption: Math.max(0, consumption), amount }
})

// 表格列定义
const columns: ColumnsType = [
  { title: '记录日期', dataIndex: 'consumptionDate', key: 'consumptionDate', width: 120 },
  { title: '上次读数', dataIndex: 'previousReading', key: 'previousReading', width: 120 },
  { title: '当前读数', dataIndex: 'currentReading', key: 'currentReading', width: 120 },
  { title: '消耗量', dataIndex: 'consumption', key: 'consumption', width: 100 },
  { title: '费用(元)', dataIndex: 'amount', key: 'amount', width: 100 },
  { title: '记录方式', dataIndex: 'recordMethod', key: 'recordMethod', 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 fetchMeters = async () => {
  if (!queryParams.projectId) {
    meterOptions.value = []
    return
  }
  try {
    const res = await getEnergyMeters(queryParams.projectId)
    const data = res.data.data
    const meters: EnergyMeter[] = data.content || data || []
    meterOptions.value = meters.map(m => ({
      value: m.id!,
      label: `${m.meterName} (${m.meterCode})`,
      energyType: m.energyType
    }))
    queryParams.meterId = ''
    selectedMeter.value = null
    lastRecord.value = null
    formState.currentReading = undefined
  } catch {
    message.error('获取计量点列表失败')
  }
}

// 获取计量点详情和上条记录
const fetchMeterDetail = async () => {
  if (!queryParams.meterId) {
    selectedMeter.value = null
    lastRecord.value = null
    return
  }
  try {
    const meterRes = await getEnergyMeter(queryParams.meterId)
    selectedMeter.value = meterRes.data.data

    // 获取历史记录找最近一条
    const historyRes = await getEnergyConsumption(queryParams.meterId)
    const history = historyRes.data.data || []
    if (history.length > 0) {
      lastRecord.value = history[0]
    } else {
      lastRecord.value = null
    }
  } catch {
    message.error('获取计量点详情失败')
  }
}

// 获取历史记录
const fetchHistory = async () => {
  if (!queryParams.meterId) return
  loading.value = true
  try {
    const res = await getEnergyConsumption(queryParams.meterId)
    consumptionList.value = res.data.data || []
  } catch {
    message.error('获取能耗记录失败')
  } finally {
    loading.value = false
  }
}

// 选择项目
const handleProjectChange = () => {
  queryParams.meterId = ''
  selectedMeter.value = null
  lastRecord.value = null
  formState.currentReading = undefined
  consumptionList.value = []
  fetchMeters()
}

// 选择计量点
const handleMeterChange = () => {
  fetchMeterDetail()
  fetchHistory()
}

// 提交记录
const handleSubmit = async () => {
  if (!formState.meterId) {
    message.warning('请选择计量点')
    return
  }
  if (formState.currentReading === undefined) {
    message.warning('请输入当前读数')
    return
  }
  if (lastRecord.value && formState.currentReading < lastRecord.value.currentReading) {
    message.warning('当前读数不能小于上次读数')
    return
  }
  recordLoading.value = true
  try {
    await recordEnergyConsumption({
      meterId: formState.meterId,
      currentReading: formState.currentReading!,
      recordedBy: formState.recordedBy
    })
    message.success('录入成功')
    // 刷新数据
    fetchMeterDetail()
    fetchHistory()
    formState.currentReading = undefined
  } catch {
    message.error('录入失败')
  } finally {
    recordLoading.value = false
  }
}

// 重置
const handleReset = () => {
  queryParams.projectId = ''
  queryParams.meterId = ''
  selectedMeter.value = null
  lastRecord.value = null
  formState.currentReading = undefined
  formState.recordedBy = ''
  consumptionList.value = []
  meterOptions.value = []
}

onMounted(() => {
  fetchProjects()
})
</script>

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

    <Row :gutter="24">
      <!-- 左侧：录入表单 -->
      <Col :span="10">
        <Card title="录入能耗数据" class="record-card">
          <!-- 筛选区 -->
          <div class="filter-section">
            <Form layout="vertical">
              <Form.Item label="选择项目">
                <Select
                  v-model:value="queryParams.projectId"
                  placeholder="请选择项目"
                  style="width: 100%"
                  :options="projectOptions"
                  @change="handleProjectChange"
                />
              </Form.Item>
              <Form.Item label="选择计量点">
                <Select
                  v-model:value="queryParams.meterId"
                  placeholder="请选择计量点"
                  style="width: 100%"
                  :options="meterOptions"
                  @change="handleMeterChange"
                />
              </Form.Item>
            </Form>
          </div>

          <!-- 计量点信息 -->
          <div v-if="selectedMeter" class="meter-info">
            <Row :gutter="16">
              <Col :span="12">
                <Statistic title="能源类型" :value="energyTypeMap[selectedMeter.energyType] || selectedMeter.energyType" />
              </Col>
              <Col :span="12">
                <Statistic title="单价" :value="selectedMeter.unitPrice || 0" suffix="元" :precision="2" />
              </Col>
            </Row>
            <Row :gutter="16" style="margin-top: 16px">
              <Col :span="12">
                <Statistic title="额定容量" :value="selectedMeter.ratedCapacity || 0" suffix="kW" />
              </Col>
              <Col :span="12">
                <Statistic title="安装位置" :value="selectedMeter.installationLocation || '-'" />
              </Col>
            </Row>
          </div>

          <!-- 上次记录 -->
          <div v-if="lastRecord" class="last-record">
            <h4>上次记录</h4>
            <Row :gutter="16">
              <Col :span="12">
                <Statistic title="记录日期" :value="lastRecord.consumptionDate" />
              </Col>
              <Col :span="12">
                <Statistic title="上次读数" :value="lastRecord.currentReading" />
              </Col>
            </Row>
          </div>

          <!-- 录入表单 -->
          <div class="record-form">
            <Form layout="vertical">
              <Form.Item label="当前读数">
                <InputNumber
                  v-model:value="formState.currentReading"
                  placeholder="请输入当前读数"
                  style="width: 100%"
                  :min="0"
                  :precision="2"
                />
              </Form.Item>
              <Form.Item label="记录人">
                <Select
                  v-model:value="formState.recordedBy"
                  placeholder="请输入记录人"
                  style="width: 100%"
                  allow-clear
                />
              </Form.Item>
            </Form>

            <!-- 计算结果预览 -->
            <div v-if="formState.currentReading !== undefined" class="calculation-preview">
              <Row :gutter="16">
                <Col :span="12">
                  <Statistic title="消耗量" :value="calculatedConsumption.consumption" :precision="2" />
                </Col>
                <Col :span="12">
                  <Statistic title="费用" :value="calculatedConsumption.amount" suffix="元" :precision="2" />
                </Col>
              </Row>
            </div>

            <Space style="width: 100%; justify-content: flex-end; margin-top: 16px">
              <Button @click="handleReset">
                <ReloadOutlined /> 重置
              </Button>
              <Button type="primary" :loading="recordLoading" @click="handleSubmit">
                提交记录
              </Button>
            </Space>
          </div>
        </Card>
      </Col>

      <!-- 右侧：历史记录 -->
      <Col :span="14">
        <Card title="历史记录" class="history-card">
          <a-table
            :columns="columns"
            :data-source="consumptionList"
            :loading="loading"
            :row-key="(record: EnergyConsumption) => record.id || record.consumptionDate"
            :pagination="{
              pageSize: 10,
              showSizeChanger: true,
              showTotal: (total: number) => `共 ${total} 条`
            }"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'consumption'">
                {{ record.consumption }} kWh
              </template>
              <template v-else-if="column.key === 'amount'">
                {{ record.amount ? `¥${record.amount.toFixed(2)}` : '-' }}
              </template>
              <template v-else-if="column.key === 'recordMethod'">
                {{ record.recordMethod === 'MANUAL' ? '手动录入' : '自动抄表' }}
              </template>
            </template>
          </a-table>
          <a-empty v-if="!queryParams.meterId" 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;
}

.record-card,
.history-card {
  height: calc(100vh - 200px);
  overflow-y: auto;
}

.filter-section {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e8e8e8;
}

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

.last-record {
  margin-bottom: 24px;
  padding: 16px;
  background: #f6ffed;
  border: 1px solid #b7eb8f;
  border-radius: 8px;
}

.last-record h4 {
  margin: 0 0 16px 0;
  color: #52c41a;
}

.record-form {
  margin-top: 24px;
}

.calculation-preview {
  margin-top: 16px;
  padding: 16px;
  background: #e6f7ff;
  border: 1px solid #91d5ff;
  border-radius: 8px;
}
</style>