<template>
<el-row>
	<el-col :span="24" class="blocker contenter">
	  <div class="d-flex" style="margin-bottom: 10px;">
		<div style="font-weight: bold;">列表</div>
		<div style="margin-left: auto;">
		  <el-button class="tool-btn" type="primary" icon="Edit" @click="submitForm">保存</el-button>
		</div>
	  </div>
	  <el-form ref="tableDataFromRef" :model="formData" :rules="rulesTab" class="tableDataFrom">
		<el-table
			:data="formData.itemList"
			:span-method="mergeCells"
			:summary-method="getSummaries"
			border
			height="66vh"
			style="width: 100%; margin-top: 20px"
			:row-style="{'height':'40px','font-size':'14px'}"
			:cell-style="{'padding':'0 5px'}"
		>
		  <el-table-column type="index" label="序號(hào)" width="70" align="center"/>
		  <el-table-column prop="feeLv2Name" label="費(fèi)用項(xiàng)目" width="170" align="center"/>
		  <el-table-column :label="`${queryParamFormData.planMonth?.substring(5,8)}月`" align="center">
			<el-table-column prop="planAmount" label="計(jì)劃金額" width="130" align="right">
			  <template #default="scope">
				<el-form-item :prop="`itemList.${scope.$index}.planAmount`" :rules="rulesTab.planAmount">
				  <el-input-number v-model="scope.row.planAmount" precision="2" :controls="false"
								   :disabled="!isEditing"
								   style="width: 115px"/>
				</el-form-item>
			  </template>
			</el-table-column>
		  </el-table-column>
		</el-table>
	  </el-form>
	</el-col>
</el-row>
</template>
<script setup>
import {ref, onMounted, watch} from 'vue'
import {ElMessage, ElMessageBox} from "element-plus";
......
const tableDataFromRef = ref()
const loading = ref(false)
// 是否正在編輯
const isEditing = ref(false)
// 表單信息
const formData = ref({id: null, itemList: [], status: null})
// 表單的驗(yàn)證規(guī)則
const rulesTab = ref({
  planAmount: [
    {required: true, message: "計(jì)劃金額不能為空", trigger: "blur"}
  ]
})
// 合并單元格
const mergeCells = ({row, column, rowIndex}) => {
  const mergeKeys = ['feeLv1Name', 'feeLv2Name', 'feeLv3Name']
  const prop = column.property
  const data = formData.value.itemList
  if (!mergeKeys.includes(prop)) {
    return {rowspan: 1, colspan: 1}
  }
  // 不是第0行且和上一行值一樣，則隱藏
  if (rowIndex > 0 && data[rowIndex][prop] === data[rowIndex - 1][prop]) {
    return {rowspan: 0, colspan: 0}
  }
  // 統(tǒng)計(jì)與當(dāng)前行值相同的后續(xù)行數(shù)（僅限相鄰）
  let rowspan = 1
  for (let i = rowIndex + 1; i < data.length; i++) {
    if (data[i][prop] === row[prop]) {
      rowspan++
    } else {
      break
    }
  }
  return {rowspan, colspan: 1}
}
// 添加合計(jì)行
const getSummaries = ({columns, data}) => {
  const sums = []
  const sumKeys = ['planAmount']  // 指定需要求和的字段
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = h('div', {}, ['合計(jì)'])
      return
    }
    const property = column.property
    if (!sumKeys.includes(property)) {
      sums[index] = ''  // 非指定列不顯示或?qū)?'N/A'
      return
    }
    const values = data.map(item => Number(item[property]))
    if (!values.every(value => Number.isNaN(value))) {
      const total = values.reduce((sum, val) => {
        return Number.isNaN(val) ? sum : sum + val
      }, 0)
      sums[index] = `${total.toFixed(2)}`
    } else {
      sums[index] = 'N/A'
    }
  })
  return sums
}
// 保存行信息
const submitForm = async () => {
  await tableDataFromRef.value.validate().then(() => {
    ...保存方法
  }).catch(error => {
    ElMessage.warning("請(qǐng)不要填寫空值！");
  })
}
</script>
<style lang="scss" scoped>
// 調(diào)整表格中的樣式，讓提示美觀
.tableDataFrom {
  .el-form-item {
    margin-bottom: 0;
    :deep(.el-input__wrapper) {
      background: transparent;
      padding: 0 5px;
    }
    :deep(.el-form-item__error) {
      z-index: -1;
      top: 0;
    }
  }
}
</style>