<template>
  <div class="material-cost-container">
    <el-card class="table-card">
      <template #header>
        <div class="card-header">
          <span>材料费明细</span>
          <div class="header-buttons">
            <el-input-number v-model="addRowCount" :min="1" :max="100" :step="1" size="small" style="width: 100px; margin-right: 10px" />
            <el-button type="primary" size="small" @click="addSpecifiedRows">
              <el-icon>
                <Plus />
              </el-icon>
              添加
            </el-button>
            <el-button type="danger" size="small" @click="handleBatchDelete" :disabled="!selectedRows.length">
              <el-icon>
                <Delete />
              </el-icon>
              删除
            </el-button>
          </div>
        </div>
      </template>

      <el-table :data="allMaterialData" border style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" :selectable="checkSelectable" />
        <el-table-column prop="sortOrder" label="序号" width="80" align="center" />
        <el-table-column prop="materialName" label="材料名称" min-width="200">
          <template #default="scope">
            <el-input v-model="scope.row.materialName" placeholder="请输入材料名称" :disabled="scope.row.materialName === '其他材料费'" />
          </template>
        </el-table-column>

        <el-table-column prop="unitId" label="单位" width="160">
          <template #default="scope">
            <el-select v-model="scope.row.unitId" placeholder="单位" filterable allow-create default-first-option style="width: 100%" clearable>
              <el-option v-for="option in unitOptions" :key="option.unitId" :label="option.unitName" :value="option.unitId" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="unitPrice" label="单价（元/单位数量）" width="180">
          <template #default="scope">
            <el-input-number v-model.number="scope.row.unitPrice" placeholder="单价" :min="0" :precision="2" size="small" @change="calculateAmount" />
          </template>
        </el-table-column>
        <el-table-column prop="amount" label="购置数量" width="180">
          <template #default="scope">
            <el-input-number
              v-model.number="scope.row.amount"
              placeholder="购置数量"
              :min="0"
              :precision="2"
              size="small"
              @change="calculateAmount"
            />
          </template>
        </el-table-column>

        <el-table-column prop="price" label="金额(万元)" width="120">
          <template #default="scope">
            {{ format2TenThousandNumber(scope.row.price) }}
          </template>
        </el-table-column>

        <el-table-column label="操作" width="100" fixed="right">
          <template #default="scope">
            <el-button
              v-if="scope.row.materialType === MATERIAL_TYPE.MAIN"
              type="danger"
              size="small"
              @click="handleDelete(scope.$index, scope.row)"
              icon="Delete"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 底部合计行 -->
      <!--
      <div class="table-totals">
        <table class="total-table">
          <tr class="total-row">
            <td rowspan="2" class="checkbox-col"></td>
            <td rowspan="2" class="index-col"></td>
            <td class="merged-cell">主要材料费小计</td>
            <td class="empty-cell"></td>
            <td class="empty-cell"></td>
            <td class="total-value">{{ mainMaterialTotalQuantity }}</td>
            <td class="empty-cell"></td>
            <td class="total-value">{{ mainMaterialTotalAmount }}</td>
            <td class="empty-cell"></td>
            <td class="empty-cell"></td>
            <td class="empty-cell"></td>
          </tr>

          <tr class="total-row total-final">
            <td class="merged-cell">合计</td>
            <td class="empty-cell"></td>
            <td class="empty-cell"></td>
            <td class="total-value total-bold">{{ totalQuantity }}</td>
            <td class="empty-cell"></td>
            <td class="total-value total-bold">{{ totalAmount }}</td>
            <td class="empty-cell"></td>
            <td class="empty-cell"></td>
            <td class="empty-cell"></td>
          </tr>
        </table>
      </div>
-->
      <div class="mt-4 bg-gray-50 p-3 rounded">
        <div class="flex justify-end gap-8">
          <span>主要材料费小计: {{ format2TenThousandNumber(mainMaterialTotalAmount) }} 万元</span>
          <span class="font-semibold">合计: {{ formatNumber(totalAmount) }} 万元</span>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, computed, nextTick } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { rdBudgetMaterialCostVO } from '@/api/oa/erp/budgetInfo/rd/rdBudgetMaterialCost/types';
import { getBaseUnitInfoList } from '@/api/oa/base/unitInfo';
import { UnitInfoVO } from '@/api/oa/base/unitInfo/types';

// 接收项目ID作为props
const props = defineProps<{
  projectId: string;
}>();

const MATERIAL_TYPE = {
  MAIN: '1', //主要材料费
  OTHER: '2' //其他材料费
};

// 材料费数据
const materialData = ref<rdBudgetMaterialCostVO[]>([]);
const toDeletedMaterialCostIdList = ref([]);

// 其他材料费
const otherMaterialData = ref<rdBudgetMaterialCostVO>();

const defaultOtherMaterial = ref({
  sortOrder: 1,
  materialName: '其他材料费',
  materialType: MATERIAL_TYPE.OTHER,
  unitId: undefined,
  unitPrice: undefined,
  amount: undefined,
  price: 0
});
// 响应式数据
const otherMaterial = ref(defaultOtherMaterial);

// 合并所有材料数据（主要材料 + 其他材料）
const allMaterialData = computed(() => {
  return [...materialData.value, otherMaterial.value];
});

const unitOptions = ref<UnitInfoVO[]>([]);

// 单位下拉列表选项
// const unitOptions = ref(['kg', 'g', 't', 'm', 'cm', 'mm', 'm²', 'm³', '个', '件', '套', '批', '箱', '袋', '瓶', '小时', '天', '月', '年', '次']);

// 总金额和总数量
const totalAmount = ref(0);
const totalQuantity = ref(0);

// 主要材料费合计（排除其他材料费）
const mainMaterialTotalAmount = computed(() => {
  return materialData.value.reduce((sum, item) => sum + (Number(item.price) || 0), 0);
});

// 选中的行
const selectedRows = ref<any[]>([]);

// 添加行数
const addRowCount = ref(1);

// 格式化数字,元转换为万元
const formatNumber = (value: number) => {
  if (!value) return '0.00';
  return parseFloat(value).toFixed(2);
};

// 格式化数字,元转换为万元
const format2TenThousandNumber = (value: number) => {
  if (!value) return '0.00';
  return (parseFloat(value) / 10000).toFixed(2);
};

const checkSelectable = (row: rdBudgetMaterialCostVO, index: number) => {
  return row.materialType === MATERIAL_TYPE.MAIN;
};

// 监听 otherMaterialData 的变化
watch(
  otherMaterialData,
  (newVal) => {
    if (newVal) {
      otherMaterial.value = newVal;
    } else {
      otherMaterial.value = defaultOtherMaterial.value;
    }
  },
  { immediate: true }
); // immediate: true 立即执行一次

// 监听材料数据变化，更新总合计
watch(
  () => [materialData, otherMaterial],
  () => {
    calculateTotal();
  },
  { deep: true }
);

// 添加指定行数
const addSpecifiedRows = async () => {
  if (!addRowCount.value || addRowCount.value <= 0) {
    ElMessage.warning('请输入有效的行数');
    return;
  }
  const currentSortOrder = materialData.value && materialData.value.length > 0 ? Math.max(...materialData.value.map((item) => item.sortOrder)) : 0;

  // 添加指定行数
  for (let i = 0; i < addRowCount.value; i++) {
    materialData.value.push({
      sortOrder: currentSortOrder + i + 1,
      materialName: '',
      materialType: MATERIAL_TYPE.MAIN,
      unitId: undefined,
      unitPrice: undefined,
      amount: undefined,
      price: 0
    });
  }
  otherMaterial.value.sortOrder = currentSortOrder + 1 + addRowCount.value;
  // 等待DOM更新后滚动到底部
  await nextTick();
  scrollToBottom();
};

// 滚动到底部
const scrollToBottom = () => {
  const tableContainer = document.querySelector('.el-table__body-wrapper');
  if (tableContainer) {
    tableContainer.scrollTop = tableContainer.scrollHeight;
  }
};

// 处理选择变化
const handleSelectionChange = (val: any[]) => {
  // 过滤掉其他材料费行
  selectedRows.value = val.filter((row) => !row.isOtherMaterial);
};

// 删除单行
const handleDelete = (index: number, row: rdBudgetMaterialCostVO) => {
  materialData.value.splice(index, 1);
  // 重新编号
  materialData.value.forEach((item, index) => {
    item.sortOrder = index + 1;
  });
  if (row.materialCostId) {
    toDeletedMaterialCostIdList.value.push(row.materialCostId);
  }
  otherMaterial.value.sortOrder = otherMaterial.value.sortOrder - 1;
  calculateTotal();
};

// 批量删除
const handleBatchDelete = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请选择要删除的行');
    return;
  }
  selectedRows.value.forEach((selectedRow) => {
    if (selectedRow.materialCostId) {
      toDeletedMaterialCostIdList.value.push(selectedRow.materialCostId);
    }
  });

  materialData.value = materialData.value.filter((item) => !selectedRows.value.includes(item));
  // 重新编号
  materialData.value.forEach((item, index) => {
    item.sortOrder = index + 1;
  });
  otherMaterial.value.sortOrder = otherMaterial.value.sortOrder - selectedRows.value.length;
  calculateTotal();
  selectedRows.value = [];
};

// 计算单项金额
const calculateAmount = () => {
  // 计算主要材料金额
  materialData.value.forEach((item) => {
    item.price = (item.amount || 0) * (item.unitPrice || 0);
  });

  // 计算其他材料金额
  otherMaterial.value.price = (otherMaterial.value.amount || 0) * (otherMaterial.value.unitPrice || 0);

  // 计算总金额
  calculateTotal();
};

// 计算总金额和总数量
const calculateTotal = () => {
  const mainAmount = parseFloat(((Number(mainMaterialTotalAmount.value) || 0) / 10000).toFixed(2));
  const otherAmount = parseFloat(((Number(otherMaterial.value.price) || 0) / 10000).toFixed(2));
  totalAmount.value = (mainAmount + otherAmount).toFixed(2);
};

// 获取总金额（供父组件调用）
const getTotalAmount = () => {
  return (Number(totalAmount.value) || 0) * 10000;
};

// 获取单位列表
const getUnitInfoList = async () => {
  const res = await getBaseUnitInfoList({});
  unitOptions.value = res.data;
};

onMounted(() => {
  getUnitInfoList();
});

// 刷新数据
const refreshData = () => {
  if (props.projectId) {
  }
};

// 重置数据
const resetData = () => {
  materialData.value.splice(0, materialData.value.length);
  totalAmount.value = 0;
  totalQuantity.value = 0;

  // 重置其他材料费
  // otherMaterial.unit = '';
  // otherMaterial.quantity = 0;
  // otherMaterial.unitPrice = 0;
  // otherMaterial.amount = 0;
};

// 获取表单数据
const getFormData = () => {
  return {
    materialData: [...materialData.value],
    otherMaterial: { ...otherMaterial },
    totalAmount: totalAmount.value,
    totalQuantity: totalQuantity.value
  };
};

// 暴露方法给父组件
defineExpose({
  materialData,
  otherMaterial,
  otherMaterialData,
  allMaterialData,
  toDeletedMaterialCostIdList,
  getTotalAmount
});
</script>

<style scoped>
.material-cost-container {
  padding: 10px;
}

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

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-buttons {
  display: flex;
  gap: 10px;
}

/* 表格底部合计样式 */
.table-totals {
  margin-top: -1px; /* 与表格边框重叠，避免双线 */
}

.total-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ebeef5;
  border-top: none;
}

.total-row td {
  border: 1px solid #ebeef5;
  padding: 12px;
  text-align: center;
}

.total-row:first-child {
  background-color: #fafafa;
}

.total-final {
  background-color: #f5f7fa;
  font-weight: bold;
}

/* 列宽设置，与表格列对齐 */
.checkbox-col {
  width: 55px;
}

.index-col {
  width: 60px;
}

.merged-cell {
  width: 200px;
  text-align: left;
  font-weight: bold;
}

.empty-cell {
  width: 180px;
}

.total-value {
  width: 120px;
  font-weight: bold;
}

.total-bold {
  color: #f56c6c;
  font-size: 16px;
}
</style>
