<template>
  <div>
    <xy-dialog :is-show.sync="isShow" title="付款登记编辑" type="form" v-if="form && id" :form="form" :rules="rules"
      @submit="editor">
      <template v-slot:extraFormTop>
        <div class="payment-registration-row">
          <div class="payment-registration-row-title">受款单位</div>
          <div class="payment-registration-row-content">{{form.contract.supply}}</div>
        </div>
        <div class="payment-registration-row">
          <div class="payment-registration-row-title">合同名称</div>
          <div class="payment-registration-row-content">{{form.contract.name}}</div>
        </div>
        <div class="payment-registration-row">
          <div class="payment-registration-row-title">合同金额</div>
          <div class="payment-registration-row-content">{{moneyFormat(form.contract.money)}} （元）</div>
        </div>
      </template>

      <template v-slot:apply_money>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>申请付款金额
          </div>
          <div class="xy-table-item-content xy-table-item-price">
            <el-input clearable placeholder="请填写付款金额" v-model="form.apply_money" style="width: 150px;" />
          </div>
        </div>
      </template>
      <template v-slot:audit_money>
        <div class="xy-table-item">
          <div class="xy-table-item-label">审计金额
          </div>
          <div class="xy-table-item-content xy-table-item-price">
            <el-input clearable placeholder="请填写审计金额" v-model="contract_form.audit_money" style="width: 150px;" />
          </div>
        </div>
      </template>
      <template v-slot:act_money>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>实际支付金额
          </div>
          <div class="xy-table-item-content xy-table-item-price">
            <el-input disabled clearable placeholder="请填写实际支付金额" v-model="form.act_money" style="width: 150px;" />
          </div>
        </div>
      </template>
      <template v-slot:discount_money>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>本期扣款金额
          </div>
          <div class="xy-table-item-content xy-table-item-price">
            <el-input clearable placeholder="请填写本期扣款金额" v-model="form.discount_money" style="width: 150px;" />
          </div>
        </div>
      </template>
      <template v-slot:type>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>款项类型
          </div>
          <div class="xy-table-item-content">
            <el-select placeholder="选择款项类型或直接填写其他类型" v-model="form.type" style="width: 150px;" filterable allow-create
              clearable>
              <el-option v-for="item in paymentType" :key="item" :label="item" :value="item">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:is_end>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="width: 200px;">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>是否为最后一笔
          </div>
          <div class="xy-table-item-content">
            <el-switch :value="form.is_end === 1" @change="e => e ? form.is_end = 1 : form.is_end = 0" />
            <!--                       @change="toggleSelection"-->

          </div>
        </div>
      </template>
      <template v-slot:remark>
        <div class="xy-table-item">
          <div class="xy-table-item-label">备注
          </div>
          <div class="xy-table-item-content">
            <el-input type="textarea" clearable placeholder="进度款日期：2022.6.8-2022.7.7" v-model="form.remark"
              style="width: 300px;" />
          </div>
        </div>
      </template>
      <template v-slot:extraFormBottom v-if="false">
        <Input search enter-button="搜 索" placeholder="搜索预算计划.." v-model="searchContent" @on-search="getBudgets" />
        <xy-table :list="plans" :show-index="false" :table-item="planTable" :height="310" style="margin-top: 10px;"
          ref="planTable" @select="selectPlan">
          <template v-slot:btns>
            <el-table-column label="使用金额" header-align="center">
              <template slot-scope="scope">
                <Input :value="scope.row.use_money" @input="planInput($event,scope.row)" />
              </template>
            </el-table-column>
          </template>
        </xy-table>

        <!--        <div style="display: flex;justify-content: flex-end;">-->
        <!--          <Page :total="planTotal" show-elevator @on-change="pageChange"/>-->
        <!--        </div>-->
      </template>
    </xy-dialog>
  </div>
</template>

<script>
  import {
    moneyFormatter
  } from '@/utils'
  import {
    editorContract
  } from "@/api/contract/contract";
  import {
    detailFundLog,
    editorFundLog
  } from "@/api/paymentRegistration/fundLog"
  import {
    getBudget
  } from "@/api/budget/budget";
  import {
    Message
  } from "element-ui";
  export default {
    data() {
      return {
        isShow: false,
        id: '',
        form: null,
        paymentType: ["进度款", "结算款", "质保金"],

        plansPageIndex: 1,
        planTotal: 0,
        plans: [],
        contract_form: {
          audit_money: 0
        },
        searchContent: "",
        planTable: [{
            sortable: false,
            width: 36,
            type: 'selection'
          },
          {
            label: "分类",
            prop: 'type',
            formatter: (cell, data, value) => {
              switch (value) {
                case 1:
                  return "部门预算"
                  break;
                case 2:
                  return "水务计划"
                  break;
                case 3:
                  return '补助经费'
                  break;
                case 4:
                  return '其他'
                  break;
                default:
                  return "未知"
              }
            }
          },
          {
            label: "名称",
            prop: 'name',
            align: 'left'
          },
          {
            label: "计划金额",
            prop: 'money',
            align: 'right'
          }
        ],
        rules: {
          apply_money: [{
              required: true,
              message: "必填"
            },
            {
              pattern: /^\d+(\.\d+)?$/,
              message: '必须为数字'
            }
          ],
          act_money: [{
              required: true,
              message: "必填"
            },
            {
              pattern: /^\d+(\.\d+)?$/,
              message: '必须为数字'
            }
          ],
          discount_money: [{
              required: true,
              message: "必填"
            },
            {
              pattern: /^\d+(\.\d+)?$/,
              message: '必须为数字'
            }
          ],
          type: [{
            required: true,
            message: "必选"
          }]
        },
      }
    },
    methods: {
      //预算计划金额输入
      planInput(e, row) {
        if (e <= (Number(row.money) - Number(row.use_money_total))) {
          row.useMoney = e
        } else {
          Message({
            type: 'warning',
            message: '使用金额大于剩余预算'
          })
          row.useMoney = 0
        }
      },
      async getFundLog(id) {
        this.id = id
        const res = await detailFundLog({
          id
        })
        this.form = res;
        this.contract_form.audit_money=res.contract.audit_money;
        console.log(this.form)
      },
      async getBudgets() {
        let res = await getBudget({
          name: this.searchContent,
          page_size: 10,
          page: this.plansPageIndex
        })
        this.plans = res.list.data
        this.planTotal = res.list.total

      },
      planPageChange(e) {
        this.plansPageIndex = e
        this.getBudgets()
      },

      editor() {
        editorFundLog(this.form).then(res => {
          this.$emit('success')
          this.isShow = false
          
          //付款申请后同时更新一下合同中审计金额
          editorContract({
            id: this.form.contract_id, 
            audit_money: this.contract_form.audit_money
          }).then(r => {
            Message({
              type: 'success',
              message: "操作成功"
            })
          });
        })
      },

      async toggleSelection(e) {
        if (!e) {
          return
        }
        await this.getBudgets()
        let plans = this.form.plan_link.map(item => {
          return item.plan_id
        })
        if (plans) {
          plans.map((plan, index) => {
            let list = this.plans.map(item => {
              return item.id
            })
            if (list.indexOf(plan) != -1) {
              this.plans[list.indexOf(plan)].use_money = this.form.plan_link[index].use_money
              console.log(this.plans[list.indexOf(plan)])
            }
          })
          this.plans.filter(plan => {
            return plans.includes(plan.id)
          }).map(row => {
            this.$nextTick(() => {
              this.$refs['planTable'].toggleRowSelection(row);
            })
          })
        } else {
          this.$refs['planTable'].clearSelection();
        }
      },
      selectPlan(sel, row) {
        if (sel) {
          this.form.plan_link = sel.map(item => {
            return {
              plan_id: item.id,
              use_money: item.useMoney,
              new_money: item.money
            }
          })
        } else {
          this.form.plan_link = []
        }
      },
    },
    computed: {
      moneyFormat() {
        return function(money) {
          return moneyFormatter(money)
        }
      }
    },
    mounted() {

    }
  }
</script>

<style scoped lang="scss">
  .payment-registration {

    &-row {
      display: flex;

      padding: 6px 0;

      &-title {

        padding: 0 10px;
      }

      &-content {}
    }
  }

  .xy-table-item-label {
    width: 140px;
  }

  .xy-table-item-price {
    position: relative;

    &::after {
      z-index: 1;
      position: absolute;
      right: 0;
      top: 0;
      content: '（元）'
    }

    ::v-deep .el-input__clear {
      position: relative;
      right: 30px;
      z-index: 2;
    }
  }

  .xy-table-item-price-wan {
    position: relative;

    &::after {
      position: absolute;
      right: 0;
      top: 0;
      content: '（万元）'
    }

    ::v-deep .el-input__clear {
      position: relative;
      right: 46px;
      z-index: 2;
    }
  }
</style>
