<template>
  <div class="energy-link-page">
    <!-- 查询条件 -->
    <el-card class="search-card">
      <el-form :model="queryParams" label-width="120px" size="small">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="6">
            <el-form-item label="能源类型:">
              <el-select v-model="queryParams.energyTypeId" placeholder="请选择能源类型" clearable @change="handleQuery">
                <el-option v-for="item in energyTypeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="6">
            <el-form-item label="库区:">
              <el-select v-model="queryParams.warehouseId" placeholder="请选择库区" clearable @change="handleQuery">
                <el-option v-for="item in warehouseList" :key="item.warehouseId" :label="item.warehouseName" :value="item.warehouseId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="6">
            <el-form-item label="状态:">
              <el-select v-model="queryParams.isEnabled" placeholder="请选择状态" clearable @change="handleQuery">
                <el-option label="启用" :value="1"></el-option>
                <el-option label="禁用" :value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="6">
            <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">查询</el-button>
            <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
            <el-button type="success" icon="el-icon-plus" size="small" @click="openAddDialog">新增</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 统计信息 -->
    <el-row :gutter="20" class="statistics-row">
      <el-col :xs="24" :sm="12" :md="6">
        <div class="stat-card">
          <div class="stat-label">总映射数</div>
          <div class="stat-value">{{ statistics.totalLinks }}</div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <div class="stat-card">
          <div class="stat-label">库区数</div>
          <div class="stat-value">{{ statistics.totalWarehouses }}</div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <div class="stat-card">
          <div class="stat-label">仪表数</div>
          <div class="stat-value">{{ statistics.totalMeters }}</div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <div class="stat-card">
          <div class="stat-label">能源类型数</div>
          <div class="stat-value">{{ statistics.totalEnergyTypes }}</div>
        </div>
      </el-col>
    </el-row>

    <!-- 映射列表 -->
    <el-card class="list-card" v-loading="loading">
      <div slot="header" class="clearfix">
        <span class="card-title">能源-库区映射列表</span>
      </div>

      <el-table :data="linkList" stripe border>
        <el-table-column prop="linkId" label="映射ID" width="100"></el-table-column>
        <el-table-column prop="energyTypeName" label="能源类型" width="100"></el-table-column>
        <el-table-column prop="meterCode" label="仪表编号" width="150"></el-table-column>
        <el-table-column prop="warehouseName" label="逻辑库区" width="150"></el-table-column>
        <el-table-column prop="allocationMode" label="分摊方式" width="120">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.allocationMode === 'count'" type="success">按数量</el-tag>
            <el-tag v-else-if="scope.row.allocationMode === 'weight'" type="warning">按重量</el-tag>
            <el-tag v-else type="info">按重量×时间</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="weightRatio" label="权重比例" width="100">
          <template slot-scope="scope">
            {{ formatNumber(scope.row.weightRatio, 4) }}
          </template>
        </el-table-column>
        <el-table-column prop="isEnabled" label="状态" width="80">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.isEnabled === 1" type="success">启用</el-tag>
            <el-tag v-else type="danger">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="openEditDialog(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="deleteLink(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        :current-page="queryParams.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handlePageSizeChange"
        @current-change="handlePageChange"
        style="margin-top: 20px; text-align: right;"
      ></el-pagination>
    </el-card>

    <!-- 编辑对话框 -->
    <el-dialog :title="editDialogTitle" :visible.sync="editDialogVisible" width="600px" @close="closeEditDialog">
      <el-form :model="editForm" label-width="120px" size="small" ref="editFormRef">
        <el-form-item label="能源类型:" prop="energyTypeId">
          <el-select v-model="editForm.energyTypeId" placeholder="请选择能源类型">
            <el-option v-for="item in energyTypeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="库区:" prop="warehouseId">
          <el-select v-model="editForm.warehouseId" placeholder="请选择库区">
            <el-option v-for="item in warehouseList" :key="item.warehouseId" :label="item.warehouseName" :value="item.warehouseId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="仪表:" prop="meterId">
          <el-select v-model="editForm.meterId" placeholder="请选择仪表">
            <el-option v-for="item in meterList" :key="item.id" :label="item.meterCode" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分摊方式:" prop="allocationMode">
          <el-select v-model="editForm.allocationMode" placeholder="请选择分摊方式">
            <el-option label="按数量" value="count"></el-option>
            <el-option label="按重量" value="weight"></el-option>
            <el-option label="按重量×时间" value="weight_time"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="权重比例:" prop="weightRatio">
          <el-input-number v-model="editForm.weightRatio" :min="0" :max="1" :step="0.01" :precision="4"></el-input-number>
        </el-form-item>
        <el-form-item label="状态:" prop="isEnabled">
          <el-radio-group v-model="editForm.isEnabled">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeEditDialog">取消</el-button>
        <el-button type="primary" @click="saveLink">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { listEnergyLink } from '@/api/ems/energyAllocation'

export default {
  name: 'EnergyLink',
  data() {
    return {
      loading: false,
      total: 0,
      queryParams: {
        energyTypeId: null,
        warehouseId: null,
        isEnabled: null,
        pageNum: 1,
        pageSize: 20
      },
      linkList: [],
      energyTypeList: [
        { id: 1, name: '电' },
        { id: 2, name: '水' },
        { id: 3, name: '气' }
      ],
      warehouseList: [],
      meterList: [],
      statistics: {
        totalLinks: 0,
        totalWarehouses: 0,
        totalMeters: 0,
        totalEnergyTypes: 0
      },
      editDialogVisible: false,
      editDialogTitle: '新增映射',
      editForm: {
        linkId: null,
        energyTypeId: null,
        warehouseId: null,
        meterId: null,
        allocationMode: 'weight_time',
        weightRatio: 1,
        isEnabled: 1
      }
    };
  },
  mounted() {
    this.loadWarehouseList();
    this.loadMeterList();
    this.handleQuery();
  },
  methods: {
    handleQuery() {
      this.loading = true;
      listEnergyLink(this.queryParams).then(response => {
        this.linkList = response.rows || [];
        this.total = response.total || 0;
      }).catch(() => {
        this.$message.error('加载映射列表失败');
      }).finally(() => {
        this.loading = false;
      });
    },
    resetQuery() {
      this.queryParams = {
        energyTypeId: null,
        warehouseId: null,
        isEnabled: null,
        pageNum: 1,
        pageSize: 20
      };
      this.handleQuery();
    },
    handlePageChange(page) {
      this.queryParams.pageNum = page;
      this.handleQuery();
    },
    handlePageSizeChange(size) {
      this.queryParams.pageSize = size;
      this.handleQuery();
    },
    loadWarehouseList() {
      // TODO: 从后端加载库区列表
      this.warehouseList = [
        { id: 1, name: '库区A' },
        { id: 2, name: '库区B' },
        { id: 3, name: '库区C' }
      ];
    },
    loadMeterList() {
      // TODO: 从后端加载仪表列表
      this.meterList = [
        { id: 1, meterCode: 'METER-001' },
        { id: 2, meterCode: 'METER-002' },
        { id: 3, meterCode: 'METER-003' }
      ];
    },
    openAddDialog() {
      this.editDialogTitle = '新增映射';
      this.editForm = {
        linkId: null,
        energyTypeId: null,
        warehouseId: null,
        meterId: null,
        allocationMode: 'weight_time',
        weightRatio: 1,
        isEnabled: 1
      };
      this.editDialogVisible = true;
    },
    openEditDialog(row) {
      this.editDialogTitle = '编辑映射';
      this.editForm = { ...row };
      this.editDialogVisible = true;
    },
    closeEditDialog() {
      this.editDialogVisible = false;
      this.$refs.editFormRef && this.$refs.editFormRef.clearValidate();
    },
    saveLink() {
      // TODO: 调用后端API保存映射
      this.$message.success('保存成功');
      this.closeEditDialog();
      this.handleQuery();
    },
    deleteLink(row) {
      this.$confirm('确定删除该映射吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // TODO: 调用后端API删除映射
        this.$message.success('删除成功');
        this.handleQuery();
      }).catch(() => {});
    },
    formatNumber(value, decimals = 2) {
      if (value === null || value === undefined) return '0.00';
      return parseFloat(value).toFixed(decimals);
    }
  }
};
</script>

<style scoped>
.energy-link-page {
  padding: 20px;
}

.search-card {
  margin-bottom: 20px;
}

.statistics-row {
  margin-bottom: 20px;
}

.stat-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px;
  border-radius: 4px;
  text-align: center;
}

.stat-card .stat-label {
  font-size: 12px;
  opacity: 0.8;
  margin-bottom: 10px;
}

.stat-card .stat-value {
  font-size: 28px;
  font-weight: bold;
}

.list-card {
  margin-bottom: 20px;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
}

.dialog-footer {
  text-align: right;
}
</style>
