<template>
  <div>
    <el-form ref="form" :model="dialogForm">
      <div>
        <el-divider direction="vertical"></el-divider>
        <span>应付金额：</span>
        <span>{{ form.payableTotalPrice }}</span>
        <el-divider direction="vertical"></el-divider>
        <span>已付金额：</span>
        <span>{{ paidTotalPrice }}</span>
        <el-divider direction="vertical"></el-divider>
        <span>未付金额：</span>
        <span>{{ unpaidTotalPrice < 0 ? 0 : unpaidTotalPrice }}</span>


      </div>
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="dialogForm.detailList"
        :needPage="false"
        :toolkit="[]"
        :minHeight="100"
        tool-class="ele-toolbar-form"
        cache-key="collectionDialogTable"
      >
        <!-- 表头工具栏 -->
        <template v-slot:toolbar>
          <el-button
            v-if="dialogType!=='view'"
            :disabled="unpaidTotalPrice<=0"
            size="small"
            type="primary"
            icon="el-icon-plus"
            class="ele-btn-icon"
            @click="handleAddInfo">
            新增付款信息
          </el-button>
        </template>

        <template v-slot:action="{row,$index}">
          <el-popconfirm
            class="ele-action"
            title="确定要删除此信息吗？"
            @confirm="handleDelInfo($index)"
          >
            <template v-slot:reference>
              <el-link
                :disabled="dialogType==='view'"
                type="danger"
                :underline="false"
                icon="el-icon-delete"
              >
                删除
              </el-link>
            </template>
          </el-popconfirm>
        </template>
        <template v-slot:paidDate="{row,$index}"  v-if="dialogType!=='view'">
          <el-form-item :prop="'detailList.'+$index+'.paidDate'"
                        :rules="{required:true,message:'请选择',trigger:['blur','change']}">
            <el-date-picker
              style="width: 95%"
              v-model="row.paidDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>

        </template>
        <template v-slot:paidTotalPrice="{row,$index}" v-if="dialogType!=='view'">
          <el-form-item :prop="'detailList.'+$index+'.paidTotalPrice'"
                        :rules="{required:true,message:'请输入',trigger:['blur','change']}">
            <el-input-number @change="(val,oldVal)=>handlePrice(val,oldVal,row,$index)" v-model="row.paidTotalPrice"
                             :controls="false"
                             :precision="2" :min="0.00"
                             ></el-input-number>
<!--  :max="getMAXPrice"          -->
          </el-form-item>

        </template>
        <template v-slot:remark="{row,$index}" v-if="dialogType!=='view'">
          <el-form-item>
            <el-input v-model="row.remark" type="textarea"></el-input>
          </el-form-item>
        </template>
        <template v-slot:columnRequired="{column}">
          <span class="is-required">{{ column.label }}</span>
        </template>
      </ele-pro-table>
    </el-form>


  </div>
</template>


<script>


import {deepClone} from "@/utils";

export default {
  name: "relatedInfoTable",
  components: {},
  props: {
    form: {
      type: Object,
      default: () => {
      }
    },
    dialogType: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      editIndex: undefined,//当前修改数据的下标
      dialogForm: {
        detailList: []
      },
      paidTotalPrice: 0,
      unpaidTotalPrice: 0,
      oldVal: 0,
      MAXPrice: 0,
    }
  },
  computed: {
    columns() {
      let list = [
        {
          columnKey: 'index',
          label: '序号',
          type: 'index',
          width: 55,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left'
        },
        {
          prop: 'paidDate',
          label: '付款时间',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 120,
          slot: 'paidDate',
          headerSlot: 'columnRequired',
        },
        {
          prop: 'paidTotalPrice',
          label: '已付金额',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 130,
          slot: 'paidTotalPrice',
          headerSlot: 'columnRequired'
        },
        // {
        //   prop: 'unpaidTotalPrice',
        //   label: '未付金额',
        //   align: 'center',
        //   showOverflowTooltip: true,
        //   minWidth: 130,
        //
        // },
        {
          prop: 'remark',
          label: '备注',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 130,
          slot: 'remark',

        },
      ]
      let action = [{
        columnKey: 'action',
        slot: 'action',
        label: '操作',
        resizable: false,
        width: 80,
        align: 'center',
        showOverflowTooltip: true,
        fixed: 'right'
      },]
      this.dialogType === 'view' ? list = [...list] : list = [...list, ...action]
      return list
    },
    getMAXPrice() {
      return this.MAXPrice
    },
  },
  mounted() {
    this.dialogForm = deepClone(this.form)
   this.unpaidTotalPrice = Number(this.dialogForm.unpaidTotalPrice)
    this.dialogForm.detailList.forEach((item) => {
      this.MAXPrice = this.unpaidTotalPrice + (Number(item.paidTotalPrice) || 0)
    })
    this.paidTotalPrice = Number(this.dialogForm.paidTotalPrice)
  },
  methods: {
    //新增关联信息数据
    handleAddInfo() {
      this.dialogForm.detailList.push(
        {
          id:'',
          payableCode: this.dialogForm.code,
          payableId: this.dialogForm.id,
          paidDate: "",
          paidTotalPrice: undefined,
          remark: "",
          //unpaidTotalPrice: this.dialogForm.unpaidTotalPrice
        }
      )
    },

    handlePrice(val, oldVal, row, index) {
      // this.$set(this.dialogForm.detailList[index], 'unpaidTotalPrice', this.MAXPrice)
      // this.dialogForm.unpaidTotalPrice = this.form.payableTotalPrice - this.dialogForm.detailList.reduce((num, row) => {
      //   num += (Number(row.paidTotalPrice) || 0)
      //   return num
      // }, 0)
      this.MAXPrice = this.unpaidTotalPrice + (Number(oldVal) || 0)
      this.setPrice()
    },
    setPrice() {
      this.$nextTick(() => {
        this.paidTotalPrice = this.dialogForm.detailList.reduce((num, row) => {
          num += (Number(row.paidTotalPrice) || 0)
          return num
        }, 0)
        this.unpaidTotalPrice = this.form.payableTotalPrice - this.paidTotalPrice
      })
    },
    handleDelInfo(index) {
      let price = this.dialogForm.detailList[index].paidTotalPrice
      this.dialogForm.detailList.splice(index, 1)
      this.dialogForm.detailList.forEach((item) => {
        this.MAXPrice = this.unpaidTotalPrice + (Number(price) || 0) + item.paidTotalPrice
      })
      this.setPrice()
    },
    //
    getTableValidate() {
      return new Promise((resolve, reject) => {
        if (this.dialogForm.detailList.length == 0) return this.$message.warning('请至少新增一条收款信息')
        this.$refs.form.validate((valid) => {
          if (!valid) return this.$message.warning('请填写完整信息')
          console.log(this.dialogForm.detailList);
          resolve(this.dialogForm.detailList)
        })
      })
    },
  }
}
</script>


<style scoped lang="scss">
:deep(.el-form-item) {
  margin-bottom: 0;
}

::v-deep.el-divider {
  margin: 10px;
  font-weight: bold;
}
</style>
