<template>
  <modal v-model="modal" class-name="vertical-center-modal" width="500px">
    <div class="title" slot="header">{{ data.purchaseBillNo }}</div>
    <div class="sub-content">
      <div class="row">
        <div class="col">
          <div class="label">户名：</div>
          <div class="value">
            <Select
              v-model="data.bankAccoutName"
              clearable
              @on-select="accoutSelect"
              @on-clear="accoutClear"
            >
              <Option
                v-for="item in data.bankMesList"
                :value="item.bankAccoutName"
                :key="item.bankAccout"
                >{{ item.bankAccoutName || "未知" }}</Option
              >
            </Select>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="label">收款账号：</div>
          <div class="value">
            <Input v-model="data.bankAccout" disabled />
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="label">开户银行：</div>
          <div class="value">
            <Input v-model="data.openBank" disabled />
          </div>
        </div>
      </div>
      <div class="row border"></div>
      <div class="row">
        <div class="col">
          <div class="label">合同金额：</div>
          <div class="value">
            {{
              data.accountPeriod == 0
                ? data.contractAmount
                : data.totalAmount || 0
            }}元
          </div>
        </div>
        <div class="col">
          <div class="label">发票金额：</div>
          <div class="value">{{ data.invoiceAmount || 0 }}元</div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="label">质检金额：</div>
          <div class="value">{{ data.adjustAmount || 0 }}元</div>
        </div>
        <div class="col">
          <div class="label">未付金额：</div>
          <div class="value">
            {{ (data.adjustAmount - data.hisPayAmount).toFixed(2) || 0 }}元
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="label">已付金额：</div>
          <div class="value">{{ data.hisPayAmount || 0 }}元</div>
        </div>
        <div class="col">
          <Tooltip
            placement="bottom"
            @on-popper-show="getData(data)"
            max-width="600"
          >
            <div class="value">退货冲抵：{{ data.backAmount || 0 }}元</div>
            <div slot="content">
              <div v-for="(item, index) in paymentList" :key="index">
                <span style="text-align: left; white-space: normal">
                  物料编码: {{ item.materialcode }}
                </span>
                <span
                  style="
                    padding-left: 16px;
                    text-align: left;
                    white-space: normal;
                  "
                >
                  合同批次: {{ item.batchno }}
                </span>
                <span
                  style="
                    padding-left: 16px;
                    text-align: left;
                    white-space: normal;
                  "
                >
                  退货日期: {{ item.outDate }}
                </span>
                <span
                  style="
                    padding-left: 16px;
                    text-align: left;
                    white-space: normal;
                  "
                >
                  退货数量: {{ item.quantity }}
                </span>
                <span
                  style="
                    padding-left: 16px;
                    text-align: left;
                    white-space: normal;
                  "
                >
                  单价: {{ item.price }}
                </span>
                <span
                  style="
                    padding-left: 16px;
                    text-align: left;
                    white-space: normal;
                  "
                >
                  金额: {{ item.amount }}
                </span>
                <span
                  style="
                    padding-left: 16px;
                    text-align: left;
                    white-space: normal;
                  "
                >
                  原因: {{ item.applyreason }}
                </span>
              </div>
            </div>
          </Tooltip>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="label">运费冲抵：</div>
          <div class="value">{{ data.expressAmount || 0 }}元</div>
        </div>
        <div class="col"></div>
      </div>
      <div class="row" style="justify-content: center">
        <div class="col" style="flex: none">
          <div class="label">申请支付：</div>
          <div class="value">
            <Input
              v-model="data.payAmount"
              :disabled="data.accountPeriod > 0"
              style="width: 120px"
            />
          </div>
          <span style="padding: 0 10px">元</span>
        </div>
      </div>
      <div class="row" style="justify-content: center">
        <div class="col" style="flex: none">
          <div class="label">其他冲抵：</div>
          <div class="value">
            <Input v-model="data.totalBalance" style="width: 120px" />
          </div>
          <span style="padding: 0 10px">元</span>
        </div>
      </div>
      <div
        class="row"
        style="justify-content: center; height: 32px; line-height: 32px"
      >
        <div class="col" style="flex: none">
          <div class="">实际支付金额：</div>
          <div class="value">
            <div style="width: 95px; color: red">
              {{
                data.accountPeriod == 0
                  ? (data.payAmount - data.hisPayAmount).toFixed(2) -
                      data.backAmount -
                      data.expressAmount -
                      data.totalBalance || 0
                  : (data.adjustAmount - data.hisPayAmount).toFixed(2) -
                      data.backAmount -
                      data.expressAmount -
                      data.totalBalance || 0
              }}元
            </div>
          </div>
          <span style="padding: 0 10px">&nbsp;&nbsp;&nbsp;&nbsp;</span>
        </div>
      </div>
      <div class="row border"></div>
      <div class="row">
        <div class="col" style="align-items: flex-start">
          <div class="label">付款说明：</div>
          <div class="value">
            <Input v-model="data.payAccount" type="textarea" />
          </div>
        </div>
      </div>
    </div>
    <div class="footer" slot="footer">
      <Button @click="cfm" class="btn" type="primary">发起申请</Button>
    </div>
  </modal>
</template>

<script>
import { SavePayContractBill } from "@/api/applyPurchase";
import axios from "axios";
export default {
  name: "pass_modal",
  data() {
    return {
      modal: false,
      paymentList: [],
    };
  },
  props: {
    value: {
      type: Boolean,
      default: false,
      require: true,
    },
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  computed: {
    payAmount() {
      return this.data.payAmount;
    },
    totalBalance() {
      return this.data.totalBalance;
    },
  },
  watch: {
    payAmount() {
      this.$set(
        this.data,
        "actAmount",
        (this.data.payAmount - this.data.totalBalance).toFixed(2)
      );
    },
    totalBalance() {
      this.$set(
        this.data,
        "actAmount",
        (this.data.payAmount - this.data.totalBalance).toFixed(2)
      );
    },
    value: {
      handler(n) {
        console.log(n);
        if (n) {
          this.getpaymentGetBackAmount(this.data.purchaseBillNo);
        }
        this.modal = n;
      },
      immediate: true,
    },
    modal(n) {
      this.$emit("input", n);
    },
  },
  created() {},
  methods: {
    getpaymentGetBackAmount(_id) {
      const v = this;

      axios
        .post("/cloudApi/supplier/paymentGetBackAmount", {
          purchaseBillNo: _id,
        })
        .then((res) => {
          console.log(res);
          this.data.totalBalance = 0;
          this.data.backAmount = res.data.data;
        });
    },
    accoutClear() {
      this.$set(this.data, "bankAccout", "");
      this.$set(this.data, "openBank", "");
    },
    accoutSelect(data) {
      console.log(data);
      let obj = this.data.bankMesList.find(
        (item) => item.bankAccoutName === data
      );
      obj && this.$set(this.data, "bankAccout", obj.bankAccout || "");
      obj && this.$set(this.data, "openBank", obj.openBank || "");
    },
    cfm() {
      if (!this.data.bankAccoutName)
        return this.$Message.error("请选择收款账号！");
      let obj = {
        purchaseBillNo: this.data.purchaseBillNo,
        payAmount: this.data.payAmount,
        hisPayAmount: this.data.hisPayAmount,
        backAmount: this.data.backAmount,
        balanceAmount: this.data.totalBalance,
        expressAmount: this.data.expressAmount,
        actAmount:
          this.data.accountPeriod == 0
            ? (this.data.payAmount - this.data.hisPayAmount).toFixed(2) -
              this.data.backAmount -
              this.data.expressAmount -
              this.data.totalBalance
            : (this.data.adjustAmount - this.data.hisPayAmount).toFixed(2) -
              this.data.backAmount -
              this.data.expressAmount -
              this.data.totalBalance,
        bankAccout: this.data.bankAccout,
        bankAccoutName: this.data.bankAccoutName,
        openBank: this.data.openBank,
        applyPayType:
          this.data.canApplyPay === 0
            ? 1
            : this.data.canApplyPay === 1
            ? 0
            : "",
        payAccount: this.data.payAccount,
      };
      SavePayContractBill({
        ...obj,
      }).then((res) => {
        if (res.code === 0) {
          this.$Message.info(res.msg || "提交成功！");
          this.cancel();
        }
      });
      // if (!this.remark) return this.$Message.error('请输入驳回原因！')
      // ApprovalBillFlow({
      //   linkCheckId: [this.data.payBillId],
      //   updateAction: 1,
      //   suggestions: this.remark
      // }).then(res => {
      //   if (res.code === 0) {
      //     this.$Message.info(res.msg || '操作成功！')
      //     if (!this.sourceRemarkList.find(item => item.key === this.remark)) {
      //       AddDataDictionary({
      //         key: this.remark,
      //         value: this.remark,
      //         remark: '合同付款驳回自动生成',
      //         groupCode: 3
      //       })
      //     }
      //     this.cancel()
      //     this.$emit('getlist')
      //   }
      // })
    },
    cancel() {
      this.modal = false;
    },
    getData(item) {
      this.paymentList = [];
      axios
        .post("/cloudApi/stockWater/contractPaymentList", {
          balancePurBillNo: item.purchaseBillNo,
        })
        .then((res) => {
          this.paymentList = res.data.data;
        });
    },
  },
};
</script>

<style lang="less" scoped>
.row {
  margin-bottom: 10px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  &.border {
    width: 100%;
    height: 1px;
    background-color: #555555;
  }
  &:last-child {
    margin-bottom: 0;
  }
  .col {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .label {
      width: 60px;
      text-align: right;
    }
    .value {
      flex: 1;
      overflow: hidden;
    }
  }
}
/deep/ .ivu-modal-mask {
  background-color: rgba(55, 55, 55, 0.2);
}
</style>
