<template>
  <el-form ref="tableFormRef" :model="table.form" :rules="table.rules" status-icon>
    <el-table :data="table.data" border stripe>
      <el-table-column type="index" width="50" label="序號" />
      <el-table-column prop="min" label="下限值(kwh)">
        <template #default="scope">
          <el-form-item v-if="scope.$index === table.idx" prop="min">
            <el-input v-model.number="table.form.min" placeholder="請輸入下限值" />
          </el-form-item>
          <span v-else>{{ scope.row.min }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="max" label="上限值(kwh)">
        <template #default="scope">
          <el-form-item v-if="scope.$index === table.idx" prop="max">
            <el-input v-model.number="table.form.max" placeholder="請輸入上限值" />
          </el-form-item>
          <span v-else>{{ scope.row.max }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="單價(元)">
        <template #default="scope">
          <el-form-item v-if="scope.$index === table.idx" prop="price">
            <el-input v-model.number="table.form.price" placeholder="請輸入單價" />
          </el-form-item>
          <span v-else>{{ scope.row.price }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <template v-if="scope.$index === table.idx">
            <el-button @click="saveItem(scope.$index)">保存</el-button>
            <el-button @click="cancelItem(scope.$index)">取消</el-button>
          </template>
          <template v-else>
            <el-button @click="editItem(scope.$index, scope.row)">編輯</el-button>
            <el-button @click="deleteItem(scope.$index)">刪除</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <div class="add-table-item" @click="addItem">新增</div>
  </el-form>
</template>
<script setup>
// 校驗規(guī)則最小數(shù)
const rangeNumberMin = (rule, value, callback) => {
  console.log(value >= table.form.max, value, table.form.max)
  if (value < 0) {
    callback(new Error('數(shù)字不能為負(fù)數(shù)'))
  } else if (value >= table.form.max) {
    callback(new Error('下限值不能大于或等于上限值'))
  } else {
    callback()
  }
}
// 校驗規(guī)則最大數(shù)
const rangeNumberMax = (rule, value, callback) => {
  if (value < 0) {
    callback(new Error('數(shù)字不能為負(fù)數(shù)'))
  } else if (value <= table.form.min) {
    callback(new Error('上限值不能小于或等于下限值'))
  } else {
    callback()
  }
}
// 表格表單數(shù)據(jù)
const table = reactive({
  data: [ // 表格數(shù)據(jù)
    { price: 100, max: 100, min: 0 },
    { price: 100, max: 200, min: 0 },
    { price: 100, max: 100, min: 10 },
    { price: 100, max: 200, min: 30 },
    { price: 100, max: 100, min: 50 }
  ],
  idx: -1, // 編輯第幾條數(shù)據(jù)（-1則為不編輯）
  isAdd: false, // 是否為新增數(shù)據(jù)，如果為新增，取消時則需要做刪除操作
  form: { // 表單數(shù)據(jù)，單獨處理是為了方便取消操作和規(guī)則校驗
    price: '',
    max: '',
    min: ''
  },
  rules: { // 規(guī)則校驗
    min: [
      { required: true, message: '請輸入下限值', trigger: 'blur' },
      { validator: rangeNumberMin, trigger: 'blur' }
    ],
    max: [
      { required: true, message: '請輸入上限值', trigger: 'blur' },
      { validator: rangeNumberMax, trigger: 'blur' }
    ],
    price: [{ required: true, message: '請輸入價格限值', trigger: 'blur' }]
  }
})
// 新增
const addItem = () => {
  if (table.idx > -1) {
    return
  }
  table.isAdd = true // 標(biāo)記，取消后會刪除編輯數(shù)據(jù)
  table.idx = table.data.length // 編輯最新條數(shù)
  table.data.push(table.form)
}
// 編輯
const editItem = (idx, val) => {
  if (table.idx > -1) {
    return
  }
  table.isAdd = false // 防止取消后刪除編輯數(shù)據(jù)
  table.idx = idx // 編輯當(dāng)前
  table.form = { ...val } // 將需要編輯的數(shù)據(jù)解構(gòu)賦值給表單，此處是做了深拷貝，如果數(shù)據(jù)復(fù)雜，需要另外做深拷貝處理
}
// 取消
const cancelItem = idx => {
  // 如果是新增狀態(tài)下，則刪除編輯數(shù)據(jù)
  if (table.isAdd) {
    table.data.splice(idx, 1)
  }
  // 初始化數(shù)據(jù)
  table.form = {
    price: '',
    max: '',
    min: ''
  }
  table.idx = -1
  table.isAdd = false
}
// 刪除
const deleteItem = idx => {
  if (table.idx > -1) {
    return
  }
  table.data.splice(idx, 1)
}
const tableFormRef = ref()
const saveItem = idx => {
  tableFormRef.value.validate(valid => {
    if (valid) {
      // 替換插入數(shù)據(jù)，如數(shù)據(jù)解構(gòu)復(fù)雜，請自行做深拷貝操作
      table.data.splice(idx, 1, { ...table.form })
      // 初始化數(shù)據(jù)
      table.form = {
        price: '',
        max: '',
        min: ''
      }
      table.idx = -1
      table.isAdd = false
    } else {
      console.log('error submit!')
      return false
    }
  })
}
</script>
<style lang="scss" scoped>
.add-table-item {
  width: 100%;
  height: 49px;
  border-width: 0px 1px 1px 1px;
  border-style: solid;
  border-color: var(--el-border-color-lighter);
  text-align: center;
  line-height: 49px;
  background-color: var(--el-fill-color-lighter);
  cursor: pointer;
}
</style>