<!--
 * @Author: ysh
 * @Date: 2024-12-11 17:21:00
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-06-11 11:05:41
-->
<template>
  <div>
    <el-form :model="form" style="padding: 20px 100px 0">
      <el-form-item label="经营相关:">
        <table border="1">
          <tr class="head">
            <td>内容</td>
            <td>费用金额</td>
            <td>备注</td>
          </tr>
          <tr>
            <td>外协费用</td>
            <td>
              <el-input-number :controls="false" style="width:100%;" v-model="form.outExpense"
                @blur="computedDirectExpense()" :disabled="taskName != '预算编制' && taskName != '经营审核'"></el-input-number>
            </td>
            <td>
              <el-input type="textarea" v-model="form.outRemark"></el-input>
            </td>
          </tr>
          <tr>
            <td>保函费用</td>
            <td>
              <el-input-number :controls="false" style="width:100%;" v-model="form.letterExpense"
                @blur="computedDirectExpense()" :disabled="taskName != '经营审核'"></el-input-number>
            </td>
            <td>
              <el-input type="textarea" v-model="form.letterRemark"></el-input>
            </td>
          </tr>
          <tr>
            <td>中标服务费</td>
            <td>
              <el-input-number :controls="false" style="width:100%;" v-model="form.winExpense"
                @blur="computedDirectExpense()" :disabled="taskName != '经营审核'"></el-input-number>
            </td>
            <td>
              <el-input type="textarea" v-model="form.winRemark"></el-input>
            </td>
          </tr>
          <tr>
            <td>税费</td>
            <td>
              <el-input-number :controls="false" style="width:100%;" v-model="form.taxExpense"
                @blur="computedDirectExpense()" :disabled="taskName != '经营审核'"></el-input-number>
            </td>
            <td>
              <el-input type="textarea" v-model="form.taxRemark"></el-input>
            </td>
          </tr>
          <tr>
            <td>管理出差</td>
            <td>
              <el-input-number :controls="false" style="width:100%;" v-model="form.travelExpense"
                @blur="computedDirectExpense()" :disabled="taskName != '经营审核'"></el-input-number>
            </td>
            <td>
              <el-input type="textarea" v-model="form.travelRemark"></el-input>
            </td>
          </tr>
          <tr>
            <td><b>经营相关总计</b></td>
            <td><b>{{ totalAmount }}</b></td>
            <td></td>
          </tr>
        </table>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { listBudget, addBudget, updateBudget, delBudget } from "@/api/oa/budget/budget.js";
export default {
  props: {
    budgetForm: {
      type: Object,
      default: ''
    },
    taskName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      form: {
        outExpense: 0,
        letterExpense: 0,
        winExpense: 0,
        taxExpense: 0,
        travelExpense: 0,
      }
    }
  },
  computed: {
    totalAmount() {
      return this.safeNumber(this.form.outExpense) +
        this.safeNumber(this.form.letterExpense) +
        this.safeNumber(this.form.winExpense) +
        this.safeNumber(this.form.taxExpense) +
        this.safeNumber(this.form.travelExpense);
    }
  },
  watch: {
    budgetForm: {
      handler(newVal) {
        if (newVal) {
          this.initTable(newVal);
        }
      },
      immediate: true, // 立即生效
      deep: true  //监听对象或数组的时候，要用到深度监听
    }
  },
  created() {

  },
  methods: {
    initTable(val) {
      this.form = val;
      this.form.outExpense == undefined ? this.form.outExpense = 0 : this.form.outExpense
      this.form.letterExpense == undefined ? this.form.letterExpense = 0 : this.form.letterExpense
      this.form.winExpense == undefined ? this.form.winExpense = 0 : this.form.winExpense
      this.form.taxExpense == undefined ? this.form.taxExpense = 0 : this.form.taxExpense
      this.form.travelExpense == undefined ? this.form.travelExpense = 0 : this.form.travelExpense
    },
    safeNumber(value) {
      const num = Number(value);
      return isNaN(num) ? 0 : num;
    },
    computedDirectExpense() {
      this.$emit('otherCost', this.form)
    }
  },
}
</script>

<style lang="scss" scoped>
table {
  width: 100%;
  /*居中*/
  // margin: 0 auto;
  /*边框*/
  /* border: 1px solid black; */
  text-align: center;
  border-collapse: collapse;
  border: 1px solid #DCDFE6;

  /*设置背景颜色*/
  /* background-color: #bfa; */
  td {
    padding: 1px;
  }

  .head {
    background-color: #e7f6f3;
    font-family: '微软雅黑';
    font-size: 18;
  }
}
</style>