<!--
 * @Author: ysh
 * @Date: 2025-05-16 10:34:57
 * @LastEditors: wrh
 * @LastEditTime: 2026-02-02 14:54:12
-->
<template>
  <div class="other-cost">
    <table border="1" style="width:100%;">
      <tr style="background-color:#f8f8f9">
        <td></td>
        <td style="width: 50px;">序号</td>
        <td>名称</td>
        <td class="adjust">核算金额</td>
        <td>备注</td>
      </tr>
      <tr v-for="other, index in otherList" :key="other.id">
        <td>
          <div class="delete-btn" v-if="taskName == '核算编制'" @click="removeOther(other, index)"><i
              class="el-icon-remove-outline" style="color:#F56C6C"></i>
          </div>
        </td>
        <td>{{ index + 1 }}</td>
        <td>
          <el-input v-if="taskName === '核算编制'" v-model="other.name" placeholder="请输入名称" />
          <span v-else>{{ other.name }}</span>
        </td>
        <td style="text-align: right;">
          <el-input-number v-if="taskName === '核算编制'" :controls="false" v-model="other.amountAdjust"
            placeholder="请输入核算金额" @change="handleOtherChange(other)" />
          <span v-else>{{ other.amountAdjust }}</span>
        </td>
        <td style="text-align: left;">
          <el-input v-if="taskName === '核算编制'" type="textarea" :rows="2" v-model="other.remark" placeholder="请输入备注" />
          <span v-else>{{ other.remark }}</span>
        </td>
      </tr>
      <tr>
        <td colspan="3" class="amount">现场外开支合计</td>
        <td class="amount" style="text-align: right;">{{otherList.reduce((sum, other) => sum +
          (Number(other.amountAdjust) || 0), 0).toFixed(2)}}</td>
      </tr>
    </table>
    <div class="add-staff mt10" v-if="taskName === '核算编制'">
      <el-button type="success" plain icon="el-icon-plus" @click="addOther" size="mini">新增项</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    otherList: {
      type: Array,
      default: () => [{
        id: Date.now(),
        name: '',
        amountAdjust: null,
        remark: ''
      }]
    },
    taskName: {
      type: String,
      default: ''
    }
  },
  watch: {
    otherList: {
      handler(newVal) {
        if (!newVal || newVal.length === 0) {
          this.$emit('update:otherList', [{
            id: Date.now(),
            name: '',
            amountAdjust: null,
            remark: ''
          }]);
        }
      },
      immediate: true
    }
  },
  methods: {
    handleOtherChange(other) {
      this.$emit('update:otherList', this.otherList);
    },
    addOther() {
      this.otherList.push({
        id: Date.now(),
        name: '',
        amountAdjust: null,
        remark: ''
      });
    },
    removeOther(other, index) {
      this.$confirm('确定移除【' + other.name + '】吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let arr = this.otherList;
        if (arr.length == 1) {
          return;
        }
        if (index >= 0 && index < arr.length) {
          arr.splice(index, 1);
        }
        this.$emit('update:otherList', arr);
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.other-cost {
  .add-staff {
    margin-bottom: 10px;
  }

  table {
    text-align: center;
    border-collapse: collapse;
    margin: 0 auto;

    td {
      padding: 5px;
    }
  }

  .adjust {
    color: #F56C6C;
    width: 120px;
  }
}

.delete-btn {
  cursor: pointer;
  font-size: 18px;
}

.amount {
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
}
</style>