<!--
 * @Author: ysh
 * @Date: 2024-08-29 15:21:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-09-25 16:50:13
-->
<template>
  <div style="width:100%">
    <table border="1" style="width:100%">
      <tr>
        <td :colspan="8" style="background-color: #f8f8f9;line-height:40px"><strong>表2：合同{{titles}}计划</strong></td>
      </tr>
      <tr>
        <td style="width: 50px;">序号</td>
        <td style="min-width:350px">{{titles}}条件</td>
        <td>{{titles}}比例（%）</td>
        <td>{{titles}}金额（元）</td>
        <td>预计时间</td>
        <td>备注</td>
      </tr>
      <tr v-for="(payment, index) in paymentList" :key="index">
        <td>
          {{ index + 1 }}
        </td>
        <td>
          <el-input v-model="payment.paymentCondition" type="textarea" clearable :autosize="{ minRows: 4 }"
            :disabled="taskName != '合同拟稿'"></el-input>
        </td>
        <td>
          <el-input-number style="width:100px" :controls="false" v-model="payment.paymentPercentage" clearable
            :disabled="taskName != '合同拟稿'" @blur="calculatePaymentAmount(payment)"></el-input-number>
        </td>
        <td>
          <el-input-number style="width:150px" :controls="false" :precision="2" v-model="payment.paymentAmount"
            clearable :disabled="taskName != '合同拟稿'"></el-input-number>
        </td>
        <td>
          <el-date-picker style="width: 140px" v-model="payment.paymentTime" value-format="yyyy-MM-dd" type="date"
            placeholder="选择日期" :disabled="taskName != '合同拟稿'">
          </el-date-picker>
        </td>
        <td>
          <el-input v-model="payment.remark" type="textarea" clearable :autosize="{ minRows: 4 }"
            :disabled="taskName != '合同拟稿'"></el-input>
        </td>
        <td v-show="taskName == '合同拟稿'">
          <div class="delete-btn" @click="deletPaymentItem(index)">
            <i class="el-icon-circle-close"></i>
          </div>
        </td>
      </tr>
    </table>
    <el-button icon="el-icon-plus" size="mini" @click="addPaymentList()" type="primary" plain
      :disabled="taskName != '合同拟稿'"></el-button>
  </div>
</template>

<script>
import { listContractPayment, addContractPayment, delContractPayment } from "@/api/oa/contract/contractPayment";
export default {
  dicts: ['cmc_scale_grade', 'cmc_unit'],
  props: {
    contractId: {
      type: String,
      default: ''
    },
    taskName: {
      type: String,
      default: ''
    },
    amount: {
      type: Number,
      default: 0
    },
    titles:{
      type: String,
      default: '回款'
    }
  },
  data() {
    return {
      paymentList: [{
        paymentCondition: "",
        paymentPercentage: "",
        paymentAmount: "",
        paymentTime: undefined,
        remark: "",
      }],
    }
  },
  watch: {
    contractId() {
      this.initTable()
    },
    amount() {
      this.paymentList.forEach(payment => {
        this.calculatePaymentAmount(payment)
      })
    },
    paymentList: {
      handler(newVal) {
        this.$emit('update:paymentList', newVal)
      },
      deep: true
    }
  },
  created() {
    this.initTable()
  },
  methods: {
    initTable() {
      if (!this.contractId) return
      listContractPayment({ pageNum: 1, pageSize: 100, contractId: this.contractId }).then(res => {
        if (res.rows.length > 0)
          this.paymentList = res.rows;
        else {
          this.paymentList = [{
            paymentCondition: "",
            paymentPercentage: "",
            paymentAmount: "",
            paymentTime: undefined,
            remark: "",
          }]
        }
      });
    },
    deletPaymentItem(index) {
      let arr = this.paymentList;
      if (arr.length == 1) {
        return;
      }
      if (index >= 0 && index < arr.length) {
        arr.splice(index, 1);
      }
    },
    addPaymentList() {
      this.paymentList.push({
        paymentCondition: "",
        paymentPercentage: "",
        paymentAmount: "",
        paymentTime: undefined,
        remark: "",
      });
    },
    calculatePaymentAmount(payment) {
      let amount = (payment.paymentPercentage / 100) * this.amount
      this.$set(payment, 'paymentAmount', Number(amount))
    },
  },
}
</script>

<style lang="scss" scoped>
.delete-btn {
  color: #F56C6C;
  cursor: pointer;

  i {
    font-size: 25px;
  }
}

table {
  /*边框*/
  /* border: 1px solid black; */
  text-align: center;
  border-collapse: collapse;
  border: 1px solid #a5abb0;

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