<template>
  <div class="eibs">
    <!-- ==================左边================ -->
    <c-col :span="12" style="padding-right: 20px;">
      <c-col :span="24">
        <el-form-item
            label="托收业务编号"
            prop="bodgrp.rec.ownref"
            style="width: 100%"
        >
          <c-fullbox>
            <c-input
                v-model="model.bodgrp.rec.ownref"
                maxlength="16"
                placeholder="请输入托收业务编号"
                style="width: 100%"
                disabled
            ></c-input>
            <template slot="footer">
              <c-button
                  style="float:right"
                  size="small"
                  type="primary"
                  icon="el-icon-search"
              ></c-button>
            </template>
          </c-fullbox>
        </el-form-item>
      </c-col>

      <c-col :span="12">
        <el-form-item label="托收金额" prop="bodgrp.cbs.max.cur">
          <c-select
              disabled
              v-model="model.bodgrp.cbs.max.cur"
              style="width: 100%"
              placeholder="请选择币种"
          >
            <el-option
                v-for="item in codes.cur"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            >
            </el-option>
          </c-select>
        </el-form-item>
      </c-col>
      <c-col :span="12">
        <el-form-item
            style="text-align: left"
            label-width="5px"
            prop="bodgrp.cbs.max.amt"
        >
          <c-input-currency
              disabled
              v-model="model.bodgrp.cbs.max.amt"
              style="text-align: left; width: 100%"
              placeholder="请输入托收金额"
              @keyup.enter.native="
                defaultFunction('bodgrp.cbs.max.amt', model.bodgrp.cbs.max.amt)
              "
          ></c-input-currency>
        </el-form-item>
      </c-col>
      <c-col :span="12">
        <el-form-item label="托收余额" prop="bodgrp.cbs.opn1.cur">
          <c-select
              disabled
              v-model="model.bodgrp.cbs.opn1.cur"
              style="width: 100%"
              placeholder="请选择币种"
          >
            <el-option
                v-for="item in codes.cur"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            >
            </el-option>
          </c-select>
        </el-form-item>
      </c-col>
      <c-col :span="12">
        <el-form-item
            style="text-align: left"
            label-width="5px"
            prop="bodgrp.cbs.opn1.amt"
        >
          <c-input-currency
              disabled
              v-model="model.bodgrp.cbs.opn1.amt"
              style="text-align: left; width: 100%"
              placeholder="请输入仓储/保险"
              @keyup.enter.native="
                defaultFunction(
                  'bodgrp.cbs.opn1.amt',
                  model.bodgrp.cbs.opn1.amt
                )
              "
          ></c-input-currency>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item
            label="交单条件"
            prop="bodgrp.rec.doctypcod"
        >
          <c-select
              disabled
              v-model="model.bodgrp.rec.doctypcod"
              style="width: 100%"
              placeholder="请选择交单条件"
          >
            <el-option
                v-for="item in codes.doctypcod"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            >
            </el-option>
          </c-select>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="单据状态" prop="bodgrp.rec.docsta">
          <c-select
              disabled
              v-model="model.bodgrp.rec.docsta"
              style="width: 100%"
              placeholder="请输入单据状态"
              :code="codes.docstabot"
          ></c-select>
        </el-form-item>
      </c-col>
      <c-col :span="18">
        <el-form-item label="单据期限" prop="bodgrp.rec.matdat">
          <c-date-picker
              type="date"
              disabled
              v-model="model.bodgrp.rec.matdat"
              style="width: 100%"
              placeholder="请选择单据到期日"
          ></c-date-picker>
        </el-form-item>
      </c-col>
      <c-col :span="6">
        <el-form-item label="" label-width="5px">
          <c-input
              disabled
              v-model="model.bodgrp.rec.matpercnt"
              placeholder="请输入单据期限"
          ></c-input>
        </el-form-item>
      </c-col>
      <c-col :span="1">
        <el-form-item label="天" label-width="5px"></el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="  " prop="bodgrp.rec.matperbeg">
          <c-select
              disabled
              v-model="model.bodgrp.rec.matperbeg"
              style="width: 100%"
              placeholder="请选择"
          >
            <el-option
                v-for="item in codes.matperbeg"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            >
            </el-option>
          </c-select>
        </el-form-item>
      </c-col>
      <c-col :span="12">
        <el-form-item label="收单日期" prop="bodgrp.rec.rcvdat">
          <c-date-picker
              type="date"
              disabled
              v-model="model.bodgrp.rec.rcvdat"
              style="width: 100%"
              placeholder="请选择收单日期"
          ></c-date-picker>
        </el-form-item>
      </c-col>
      <c-col :span="12">
        <el-form-item label="寄单日期" prop="bodgrp.rec.predat">
          <c-date-picker
              type="date"
              disabled
              v-model="model.bodgrp.rec.predat"
              style="width: 100%"
              placeholder="请选择寄单日期"
          ></c-date-picker>
        </el-form-item>
      </c-col>
    </c-col>
    <!-- ============右边================= -->
    <c-col :span="12" style="padding-left: 20px;">
      <c-col :span="24">
        <el-form-item label="简略信息" prop="bodgrp.rec.nam">
          <c-input
              align="middle"
              v-model="model.bodgrp.rec.nam"
              maxlength="40"
              disabled
              placeholder="请输入"
          ></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="收款人参考号" prop="bodgrp.drr.pts.ref">
          <c-input
              disabled
              v-model="model.bodgrp.drr.pts.ref"
              maxlength="16"
              placeholder="请输入收款人参考号"
          ></c-input>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="" prop="bodgrp.drr.pts.nam">
          <c-input
              disabled
              v-model="model.bodgrp.drr.pts.nam"
              maxlength="40"
              placeholder="请输入收款人名称"
          ></c-input>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="代收行参考号" prop="bodgrp.col.pts.ref">
          <c-input
              disabled
              v-model="model.bodgrp.col.pts.ref"
              maxlength="16"
              placeholder="请输入代收行参考号"
          ></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="" prop="bodgrp.col.pts.nam">
          <c-input
              disabled
              v-model="model.bodgrp.col.pts.nam"
              maxlength="40"
              placeholder="请输入代收行名称"
          ></c-input>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="付款人参考号" prop="bodgrp.dre.pts.ref">
          <c-input
              disabled
              v-model="model.bodgrp.dre.pts.ref"
              maxlength="16"
              placeholder="请输入付款人参考号"
          ></c-input>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="" prop="bodgrp.dre.pts.nam">
          <c-input
              disabled
              v-model="model.bodgrp.dre.pts.nam"
              maxlength="40"
              placeholder="请输入付款人名称"
          ></c-input>
        </el-form-item>
      </c-col>
    </c-col>

    <!-- next part -->
    <c-col :span="24" style="margin-bottom: 35px">
      <c-istream-table
          ref="table"
          :list="model.liaall.tenstm.rows || []"
          :columns="stmData.columns"
          :showSelection="true"
          prop="liaall.tenstm"
      >
      </c-istream-table>
    </c-col>

    <!-- ==================左边================ -->
    <c-col :span="12" style="padding-right: 20px;">
      <c-col :span="24">
        <el-form-item label="" prop="bodgrp.rec.focflg">
          <c-checkbox v-model="model.bodgrp.rec.focflg"
          >无偿放单选项
          </c-checkbox>
        </el-form-item>
      </c-col>
      <c-col :span="12">
        <el-form-item label="扣减金额" prop="setmod.doccur">
          <c-select
              disabled
              v-model="modelsetmoddoccur"
              style="width: 100%"
              placeholder="请选择币种"
          >
            <el-option
                v-for="item in codes.cur"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            >
            </el-option>
          </c-select>
        </el-form-item>
      </c-col>
      <c-col :span="12">
        <el-form-item
            style="text-align: left"
            label-width="5px"
            prop="setmod.redamt"
        >
          <c-input-currency
              :disabled="model.bodgrp.rec.focflg == 'X'"
              v-model="model.setmod.redamt"
              style="text-align: left; width: 100%"
              placeholder="请输入扣减金额"
              @keyup.enter.native="defaultFunction('setmod.redamt', model.setmod.redamt)"
          ></c-input-currency>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="" prop="mtabut.clsflg">
          <c-checkbox
              :disabled="this.flag1"
              v-model="model.mtabut.clsflg"
          >闭卷
          </c-checkbox>
        </el-form-item>
      </c-col>

      <c-col :span="12">
        <el-form-item label="收汇金额" prop="setmod.doccur">
          <c-select
              disabled
              v-model="model.setmod.doccur"
              style="width: 100%"
              placeholder="请选择币种"
          >
            <el-option
                v-for="item in codes.cur"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            >
            </el-option>
          </c-select>
        </el-form-item>
      </c-col>
      <c-col :span="12">
        <el-form-item
            style="text-align: left"
            label-width="5px"
            prop="setmod.docamt"
        >
          <c-input-currency
              v-model="modelsetmoddocamt"
              style="text-align: left; width: 100%"
              placeholder="请输入"
              @change="change1"
              @keyup.enter.native="defaultFunction('setmod.docamt', model.setmod.docamt)"
          ></c-input-currency>
        </el-form-item>
      </c-col>
    </c-col>

    <c-col :span="24" style="height: 24px; margin-top: 20px">
      <el-form-item label="归还押汇款" class="messageLabel">
      </el-form-item>
    </c-col>

    <c-col :span="24">
      <c-table :data="model.bptbck.bptbckg" style="width: 100%">
        <c-col :span="6">
          <el-table-column prop="ownref" label="托收业务编号">
          </el-table-column>
        </c-col>
        <el-table-column prop="opncur" label="币种">
        </el-table-column>
        <el-table-column prop="opnamt" label="托收余额">
        </el-table-column>
        <el-table-column prop="bckamt" label="已付数额">
        </el-table-column>
      </c-table>
    </c-col>
  </div>
</template>
<script>
import event from "../event"

export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [event],
  data() {
    return {
      flag1: true,
      stmData: {
        columns: [
          '1 1 "类型" 250',
          '2 2 "Dbt" 250',
          '3 3 "Cdt" 250',
          '4 4 "币种" 250',
          '5 5 "金额" auto 2 8 1 4',
          // '6 6 "Mat.Dat." 500 4 7 1',
          {
            index: 6,
            position: 6,
            width: 500,
            render: (item, scope) => {
              return scope.row[item.prop] === "null"
                  ? ""
                  : scope.row[item.prop];
            },
            label: "Mat.Dat.",
          },
        ],
        data: [],
      },
    };
  },
  computed: {
    clsflg: {
      get() {
        return this.model.mtabut.clsflg === "O";
      },
      set(val) {
        this.model.mtabut.clsflg = val ? "C" : "O";
      },
    },

    flag() {
      return this.model.mtabut.coninf.usr.extkey == "";
    },

    modelsetmoddoccur() {
      this.model.setmod.doccur = this.model.bodgrp.cbs.max.cur;
      return this.model.setmod.doccur
    },

    modelsetmoddocamt() {
      this.model.setmod.docamt = this.model.bodgrp.cbs.max.amt;
      return this.model.setmod.docamt
    }

  },
  mounted() {
  },

  methods: {
    async change1() {
      if (this.model.bodgrp.cbs.opn1.amt <= this.model.setmod.docamt) {
        this.flag1 = false;
      } else if (this.model.bodgrp.cbs.opn1.amt > this.model.setmod.docamt) {
        this.flag1 = true;
      }
    },
  },

  created: function () {
  },
};
</script>
<style>
</style>