<template>
  <div class="eibs">
    <!-- ====================左边======================= -->
    <c-col :span="12" style="padding-right: 20px">
      <c-col :span="24">
        <el-form-item label="代收付款编号" prop="bcdgrp.rec.ownref">
          <c-input
            disabled
            v-model="model.bcdgrp.rec.ownref"
            maxlength="16"
            placeholder="请输入代收付款编号"
          ></c-input>
        </el-form-item>
      </c-col>
      <c-col :span="12">
        <el-form-item label="代收币种及金额" prop="bcdgrp.cbs.max.cur">
          <c-select
            disabled
            v-model="model.bcdgrp.cbs.max.cur"
            style="width: 100%"
            placeholder="请选择代收币种及金额"
          >
          </c-select>
        </el-form-item>
      </c-col>

      <c-col :span="12">
        <el-form-item label-width="0" style="margin-left: 5px" prop="bcdgrp.cbs.max.amt">
          <c-input
            disabled
            v-model="model.bcdgrp.cbs.max.amt"
            placeholder="请输入代收币种及金额"
          ></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="12">
        <el-form-item label="代收币种及余额" prop="bcdgrp.cbs.opn1.cur">
          <c-select
            disabled
            v-model="model.bcdgrp.cbs.opn1.cur"
            style="width: 100%"
            placeholder="请选择代收币种及余额"
          >
          </c-select>
        </el-form-item>
      </c-col>
      <c-col :span="12">
        <el-form-item label-width="0" style="margin-left: 5px" prop="bcdgrp.cbs.opn1.amt">
          <c-input
            disabled
            v-model="model.bcdgrp.cbs.opn1.amt"
            placeholder="请输入代收币种及余额"
          ></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="12">
        <el-form-item label="收单日期" prop="bcdgrp.rec.rcvdat">
          <c-date-picker
            disabled
            type="date"
            v-model="model.bcdgrp.rec.rcvdat"
            style="width: 100%"
            placeholder="请选择收单日期"
          ></c-date-picker>
        </el-form-item>
      </c-col>

      <c-col :span="12">
        <el-form-item label="通知日期" prop="bcdgrp.rec.advdat">
          <c-date-picker
            disabled
            type="date"
            v-model="model.bcdgrp.rec.advdat"
            style="width: 100%"
            placeholder="请选择通知日期"
          ></c-date-picker>
        </el-form-item>
      </c-col>
      <c-col :span="12">
        <el-form-item label="单据到期日" prop="bcdgrp.rec.matdat">
          <c-date-picker
            type="date"
            disabled
            v-model="model.bcdgrp.rec.matdat"
            style="width: 100%"
            placeholder="请选择单据到期日"
          ></c-date-picker>
        </el-form-item>
      </c-col>
      <c-col :span="12">
        <el-form-item label="通知日期 " prop="bcdgrp.rec.predat">
          <c-date-picker
            type="date"
            disabled
            v-model="model.bcdgrp.rec.predat"
            style="width: 100%"
            placeholder="请选择通知日期"
          ></c-date-picker>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="支付条件" prop="bcdgrp.rec.doctypcod">
          <c-select
            :code="codes.doctypcod"
            disabled
           
            v-model="model.bcdgrp.rec.doctypcod"
            style="width: 100%"
            placeholder="请选择支付条件"
          >
          </c-select>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="单据状态" prop="bcdgrp.rec.docsta">
          <c-select
            style="width: 100%"
            :code="codes.docstabot"
            disabled
           
            v-model="model.bcdgrp.rec.docsta"
            maxlength="1"
            placeholder="请输入单据状态"
          ></c-select>
        </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="请选择币种"
              @change="1"
          >
          </c-select>
        </el-form-item>
      </c-col>
      <c-col :span="12">
        <el-form-item label-width="0" prop="setmod.docamt" style="margin-left: 5px" >
          <c-input
              v-model="model.setmod.docamt"
              placeholder="请输入代收币种及金额"
          ></c-input>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="合同号" prop="bcdgrp.rec.rptref">
          <c-input
              v-model="model.bcdgrp.rec.rptref"
              style="width: 100%"
              placeholder="请输入合同号"
          >
          </c-input>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="发票号" prop="bcdgrp.rec.invref">
          <c-input
              v-model="model.bcdgrp.rec.invref"
              style="width: 100%"
              placeholder="请输入发票号"
          >
          </c-input>
        </el-form-item>
      </c-col>
      <c-col :span="12">
        <el-form-item label="是否需要检核" prop="bctp.ischktyp">
          <c-select
              v-model="model.bctp.ischktyp"
              style="width: 100%"
              placeholder="请选择是否需要检核"
              :code="codes.ischktyp"
          >
          </c-select>
        </el-form-item>
      </c-col>
      <c-col :span="12">
        <el-form-item label="预计核验日期" prop="bctp.prechkdat">
          <c-date-picker
              :disabled="this.typ1"
              type="date"
              v-model="model.bctp.prechkdat"
              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="bcdgrp.rec.nam">
          <c-input
            disabled
            v-model="model.bcdgrp.rec.nam"
            maxlength="40"
            placeholder="请输入简略信息"
          ></c-input>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="付款人参考号" prop="bcdgrp.dre.pts.ref">
          <c-input
            disabled
            v-model="model.bcdgrp.dre.pts.ref"
            maxlength="16"
            placeholder="请输入"
          ></c-input>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="付款人名称" prop="bcdgrp.dre.pts.nam">
          <c-input
            disabled
            v-model="model.bcdgrp.dre.pts.nam"
            maxlength="40"
            placeholder="请输入"
          ></c-input>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="托收行参考号" prop="bcdgrp.rmi.pts.ref">
          <c-input
            disabled
            v-model="model.bcdgrp.rmi.pts.ref"
            maxlength="16"
            placeholder="请输入托收行参考号"
          ></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="托收行名称" prop="bcdgrp.rmi.pts.nam">
          <c-input
            disabled
            v-model="model.bcdgrp.rmi.pts.nam"
            maxlength="40"
            placeholder="请输入"
          ></c-input>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="收款人参考号 " prop="bcdgrp.drr.pts.ref">
          <c-input
            disabled
            v-model="model.bcdgrp.drr.pts.ref"
            maxlength="16"
            placeholder="请输入收款人参考号"
          ></c-input>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="收款人名称" prop="bcdgrp.drr.pts.nam">
          <c-input
            disabled
            v-model="model.bcdgrp.drr.pts.nam"
            maxlength="40"
            placeholder="请输入收款人名称"
          ></c-input>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label=" " prop="bcdgrp.rec.focflg" label-width="120px" style=" float:left;">
        <c-checkbox v-model="model.bcdgrp.rec.focflg" @change="focflgDefault"
          >无偿放单选项</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="请选择币种"
          >
          </c-select>
        </el-form-item>
      </c-col>
      <c-col :span="12">
        <el-form-item label-width="0" style="margin-left: 5px" >
          <c-input
            :disabled="model.bcdgrp.rec.focflg=='X'"
            v-model="model.setmod.redamt"
            placeholder="请输入减少的金额."
          ></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="12">
        <el-form-item label=" " prop="bcdgrp.rec.focflg" label-width="120px" style=" float:left;">
        <c-checkbox :disabled="model.bcdgrp.rec.focflg=='X'" v-model="crefinflg" style="float: left"
        @change="crefinflgChange"
          >融资</c-checkbox>
          </el-form-item>
      </c-col>

      <c-col :span="12">
        <el-form-item label=" " prop="dftcre.dfflag" label-width="120px" style=" float:left;">
        <c-checkbox v-model="model.dftcre.dfflag" style="float: left">同业代付</c-checkbox>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label=" " prop="mtabut.clsflg" label-width="120px" style=" float:left;">
        <c-checkbox true-label="C" v-model="model.mtabut.clsflg" @change="clsflgOtherDefault"
          >闭卷</c-checkbox
        >
        </el-form-item>
      </c-col>
      
      <c-col :span="24">
        <el-form-item
          label="跨境人民币清算模式"
          prop="trnmod.cmtflg"
          v-if="model.setmod.doccur == 'CNY'"
          style="margin-top: 15px"  
        >
          <c-select
            v-model="model.trnmod.cmtflg"
            style="width: 100%"
            :disabled="model.bcdgrp.rec.focflg=='X'"
            placeholder=""     
          >
          <el-option
              v-for="item in codes.cmtflg"
              :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="trnmod.swftyp"
          v-if="model.trnmod.cmtflg =='P'||model.trnmod.cmtflg =='X'"
        >
          <c-select v-model="model.trnmod.swftyp" disabled  placeholder="" 
          :code="codes.swftyp1"
          style="width: 100%"
          >
          </c-select>
        </el-form-item>
      </c-col>

    </c-col>

    <c-col :span="24">
      <c-istream-table
          ref="table"
          :list="model.liaall.tenstm.rows || []"
          :columns="trnData.columns"
          :showSelection="true"
          v-on:multipleSelect="multipleSelect"
          prop="liaall.tenstm"
      >
      </c-istream-table>
    </c-col>
    <c-col :span="24">
      <c-docpre
          :model="model"
          :argadr="{
            path: 'bcdgrp.blk.docpre',
            grp: 'bctp',
            code: 'docpre',
          }"></c-docpre>
    </c-col>
  </div>
</template>
<script>
import Api from "~/service/Api";
import commonProcess from "~/mixin/commonProcess";
import CodeTable from "~/config/CodeTable";
import Event from "~/model/Bctset/Event";
import Utils from "~/utils";

import Docpre from "~/views/Public/Docpre";
export default {
  components: {
    "c-docpre": Docpre,
  },
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [commonProcess],
 
  data() {
    return {
      typ1: true,
     // flag1: false,
      trnData: {
        columns: [
          // '1 1 "类型" 60',
          // '2 2 "Dbt" 60',
          // '3 3 "Cdt" 80',
          // '4 4 "币种" 50',
          // '5 5 "金额" 120 2 8 1 4',
          // '6 6 "Mat.Dat." 120 4 7 1',
            //auto
          '1 1 "类型" 240',
          '2 2 "Dbt" 240',
          '3 3 "Cdt" 320',
          '4 4 "币种" 200',
          '5 5 "金额" 480 2 8 1 4',
          '6 6 "Mat.Dat." auto 4 7 1',

          // '1 1 "类型" 100%',
          // '2 2 "Dbt" 100%',
          // '3 3 "Cdt" 100%',
          // '4 4 "币种" 100%',
          // '5 5 "金额" 100% 2 8 1 4',
          // '6 6 "Mat.Dat." 120 4 7 1',
          {
            index: 6,
            position: 6,
            // width: 250,
            render: (item, scope) => {
              return scope.row[item.prop] === "null"
                ? ""
                : scope.row[item.prop];
            },
            label: "Mat.Dat.",
          },
        ],
        data: [],
      },
    };
  },
  mounted() {
    this.$nextTick(() => {});
  },
 computed: {
    crefinflg: {
      get() {
        
        if (this.model.bcdgrp.rec.focflg == 'X') {
          return false;
        }else{
          return this.model.trtcre.crefinflg != ''
        }
        
      },
      set(val) {
      
        this.model.trtcre.crefinflg = val ? "X" : ""
        
         
        
      }
    },
   clsflg: {
      get() {
        return this.model.mtabut.clsflg=='C'; 
      },
      set(val) {
        this.model.mtabut.clsflg = val ? "C" : "O"
      }
    },
    focflg: {
      get() {
        return this.model.bcdgrp.rec.focflg != ''
      },
      set(val) {
        if (this.model.bcdgrp.rec.focflg == 'X' ) {
          this.model.trtcre.crefinflg = ''
          this.model.trnmod.cmtflg='O'
        }else{
          this.model.trnmod.cmtflg=''
        }
        this.model.bcdgrp.rec.focflg = val ? "X" : ""
      }
    },
  },
  methods: {
    ...Event,
      focflgDefault(){
      this.executeDefault("bcdgrp.rec.docsta").then((res) => {
        if ((res.respCode == SUCCESS)) {
          Utils.copyValueFromVO(this.model, res.data);
        }
      });
    },
    

      crefinflgChange(){
      this.executeRule("trtcre.crefinflg").then((res) => {
        if ((res.respCode == SUCCESS)) {
          Utils.copyValueFromVO(this.model, res.data);
        }
      });
    },
     clsflgOtherDefault(){
      this.executeDefault("mtabut.clsflg").then((res) => {
        if ((res.respCode == SUCCESS)) {
          Utils.copyValueFromVO(this.model, res.data);
        }
      });
    },
    async multipleSelect(selection) {
      console.log(selection);
      if (selection.length > 1) {
        this.$notify({
          title: "错误",
          message: "您不能选择多个期限",
          type: "error",
        });
      } else {
        let chkIds;
        if (selection.length === 0) {
          chkIds = [];
        } else {
          chkIds = [selection[0] + 1];
        }
        //
        console.log(this.model.liaall.tensetstm);
        let params = { chkDst: "liaall.tenstm", chkIds };
        const rtnmsg = await this.executeRule("liaall.tenstm", params);
        if (rtnmsg.respCode == SUCCESS) {
          this.updateModel(rtnmsg.data);
        } else {
          this.$notify.error({ title: "错误", message: "服务请求失败！" });
        }
      }
    },
    
  },
   watch: {
        "model.trnmod.cmtflg":{
          immediate: true,
              handler(val, oldVal) {
        if(this.model.trnmod.cmtflg=="P"){
        this.model.trnmod.swftyp="CIV"
        }
       }
     },

       "model.bctp.ischktyp": {
      immediate: true,
      handler(val, oldVal) {
        if (this.model.bctp.ischktyp == "Y") {
          this.typ1 = false;
        } else {
          this.typ1 = true;
        }
      }
     },
   },
  created: function () {
    
  },
};
</script>
<style>
.bctdav_bctp_bctovw_cheak {
  margin: 0px 0 10px 150px;
}
</style>