<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 type="primary"
                        :disabled="this.model.bodgrp.drr.pts.extkey !== '' && model.bodgrp.rec.ownref === ''? false:true"
                        @click="getBodgrpOwnRef">
                获取
              </c-button>
            </template>
          </c-fullbox>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <c-col :span="14">
          <c-row>
            <c-col :span="24">
              <el-form-item label="客户经理" prop="botp.usr.extkey" style="width: 100%">
                <c-fullbox>
                  <c-input style="width: 100%" v-model="model.botp.usr.extkey" maxlength="8"
                           placeholder="请输入客户经理"
                           disabled></c-input>
                  <template slot="footer">
                    <c-button style="margin:0 10px 0 10px;padding: 0 12px;" size="small" icon="el-icon-search"
                              type="primary">
                    </c-button>
                  </template>
                </c-fullbox>
              </el-form-item>
            </c-col>
          </c-row>
        </c-col>
        <c-col :span="10">
          <el-form-item label="" prop="bodgrp.rec.dircolflg">
            <c-checkbox v-model="model.bodgrp.rec.dircolflg">是否直接托收</c-checkbox>
          </el-form-item>
        </c-col>
      </c-col>
      <c-col :span="12">
        <el-form-item label="托收金额" prop="bodgrp.cbs.max.cur">
          <c-select v-model="model.bodgrp.cbs.max.cur" style="width: 100%" placeholder="请选择币种">
            <el-option v-for="item in codes.infled_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 v-model="model.bodgrp.cbs.max.amt" style="text-align: left; width: 100%"
                            placeholder="请输入托收金额"></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 v-model="model.bodgrp.cbs.opn1.amt" style="text-align: left; width: 100%"
                            placeholder="请输入" :disabled="true"></c-input-currency>
        </el-form-item>
      </c-col>
      <c-col :span="12">
        <el-form-item label="收单日期" prop="bodgrp.rec.rcvdat">
          <c-date-picker type="date" 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.shpdat">
          <c-date-picker type="date" v-model="model.bodgrp.rec.shpdat" 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" v-model="model.bodgrp.rec.predat" style="width:100%"
                         placeholder="请选择寄单日期"></c-date-picker>
        </el-form-item>
      </c-col>

      <c-col :span="12">
        <el-form-item label="发货日期" prop="bodgrp.rec.advdat">
          <c-date-picker type="date" v-model="model.bodgrp.rec.advdat" style="width:100%" :disabled="true"
                         placeholder="请选择发货日期"></c-date-picker>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="交单条件" prop="bodgrp.rec.doctypcod">
          <c-select v-model="model.bodgrp.rec.doctypcod" style="width:100%" placeholder="请选择交单条件"
                    :code="codes.doctypcod">
          </c-select>
        </el-form-item>
      </c-col>

      <c-col :span="12">
        <el-form-item label="单据到期日" prop="bodgrp.rec.matdat">
          <c-date-picker type="date" v-model="model.bodgrp.rec.matdat" style="width:100%"
                         :disabled="model.bodgrp.rec.doctypcod === 'P'" placeholder="请选择单据到期日"></c-date-picker>
        </el-form-item>
      </c-col>

      <c-col :span="12">
        <el-form-item label="发票类型" prop="bodgrp.rec.invtyp">
          <c-select v-model="model.bodgrp.rec.invtyp" style="width:100%" :code="codes.invtyp">
          </c-select>
        </el-form-item>
      </c-col>

      <c-col :span="12">
        <el-form-item label="单据期限" prop="bodgrp.rec.matpercnt">
          <c-input v-model="model.bodgrp.rec.matpercnt" placeholder="请输入单据期限"
                   onkeyup="value=value.replace(/[^\d]/g,' ')" :disabled="model.bodgrp.rec.doctypcod === 'P'"></c-input>
        </el-form-item>
      </c-col>
      <c-col :span="1" style="margin-left:-10px">
        <el-form-item label="天"></el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="起始日期" prop="bodgrp.rec.matperbeg">
          <c-select v-model="model.bodgrp.rec.matperbeg" style="width:100%" placeholder="请选择起始日期"
                    :code="codes.matperbeg" :disabled="model.bodgrp.rec.doctypcod === 'P'">
          </c-select>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="单据到期描述" prop="bodgrp.blk.bogdet">
          <c-input type="textarea" v-model="model.bodgrp.blk.bogdet" maxlength="43" show-word-limit
                   :disabled="model.bodgrp.rec.doctypcod === 'P'" placeholder="请输入单据到期描述"></c-input>
        </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 text-align="middle" v-model="totalnam" maxlength="40" disabled
                   placeholder="请输入"></c-input>
        </el-form-item>
      </c-col>
      <c-ptap :model="model" :argadr="{
        title: '收款人',
        grp: 'bodgrp',
        rol: 'drr',
      }" :isAdrblk="true" :disabled="this.flag1"
      @keyup.enter.native="queryGridEtyPromptDialogData('DRR', 'C')">
      </c-ptap>
      <c-ptap :model="model" :argadr="{
        title: '代收行',
        grp: 'bodgrp',
        rol: 'col',
      }" 
      :disabled="this.flag2"
      @keyup.enter.native="queryGridEtyPromptDialogData('COL', 'B')">
      </c-ptap>
      <c-ptap :model="model" :argadr="{
        title: '付款人',
        grp: 'bodgrp',
        rol: 'dre',
      }" 
      :disabled="this.flag3" 
      @keyup.enter.native="queryGridEtyPromptDialogData('DRE', 'C')"
      >
      </c-ptap>
      <!-- 付款人TD是F，但是为F新国结没数据 -->
      <c-col :span="24">
        <el-form-item label="国家或地区代码" prop="bodgrp.rec.stacty">
          <c-select v-model="model.bodgrp.rec.stacty" style="width:100%" placeholder="请选择国家或地区代码（风险国家）"
                    :code="codes.stacty">
          </c-select>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="货物类型" prop="bodgrp.rec.stagod">
          <c-select v-model="model.bodgrp.rec.stagod" style="width:100%" placeholder="请选择货物类型"
                    :code="codeTable2">
          </c-select>
        </el-form-item>
      </c-col>
    </c-col>
    <c-col :span="24">
      <c-docpre :model="model" :argadr="{
          path: 'SEMFLG',
          grp: 'botp',
          code: 'docpre'
        }"></c-docpre>
    </c-col>
  </div>
</template>
<script>
import event from "../event"
import Utils from "~/utils";
import Ptap from "~/views/Public/Ptap";
import Docpre from "~/views/Public/Docpre";

export default {
  components: {
    "c-ptap": Ptap,
    "c-docpre": Docpre,
  },
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [event],
  data() {
    return {
      flag1: false,
      flag2: false,
      flag3: false,
      codeTable2: [
        {label: "金(含金饰品)", value: "001"},
        {label: "银(含银饰品)", value: "002"},
        {label: "铜(含电解铜、铜制品及铜精矿)", value: "003"},
        {label: "铝(含电解铝、铝矾土及铝制品)", value: "004"},
        {label: "锌(含电解锌、锌精矿)", value: "005"},
        {label: "铁砂矿(含精矿)", value: "006"},
        {label: "其他金属", value: "007"},
        {label: "大豆", value: "008"},
        {label: "玉米", value: "009"},
        {label: "原油", value: "010"},
        {label: "食用油(含棕榈油)", value: "011"},
        {label: "煤", value: "013"},
        {label: "其他", value: "099"},
      ],
      columns: ['0 0 "lst1" 100 ', '1 1 "lst2" 100', '2 2 "单据" 200'],
      newValue: {
        id: 0,
        cmail1: "",
        cmail2: "",
        docnam: "",
        description: "",
        serialNum: "",
        tableName: "",
        tcddoc: "",
      },
      invtyp: [
        {label: "类型一", value: "1"}
      ],
    };
  },

  watch: {
    "model.bodgrp.drr.pts.extkey": {
      immediate: true,
      handler(val, oldVal) {
        if (this.model.bodgrp.drr.pts.extkey != '') {
          this.flag1 = true;
        } else {
          this.flag1 = false;
        }
      }
    },
    "model.bodgrp.col.pts.extkey": {
      immediate: true,
      handler(val, oldVal) {
        if (this.model.bodgrp.col.pts.extkey != '') {
          this.flag2 = true;
        } else {
          this.flag2 = false;
        }
      }
    },
    "model.bodgrp.dre.pts.extkey": {
      immediate: true,
      handler(val, oldVal) {
        if (this.model.bodgrp.dre.pts.extkey != '') {
          this.flag3 = true;
        } else {
          this.flag3 = false;
        }
      }
    },
  },
  methods: {
    addTableValue(index) {
      var newTableValue = Object.assign({}, this.newValue);
      const serial = Utils.generateUUID();
      newTableValue.serialNum = serial;
      this.model.botp.docgrdm.docgrd.splice(index - 1, 0, newTableValue);
    },
    deleteTable(index) {
      this.model.botp.docgrdm.docgrd.splice(index, 1);
    },
  },
  computed: {
    flag() {
      return this.model.bodgrp.drr.pts.adrelc == "";
    },
    totalnam(){
      const cur = this.model.bodgrp.cbs.max.cur + ' '
      const amt = this.model.bodgrp.cbs.max.amt + ' '
      const preNam = this.model.bodgrp.drr.pts.nam + ''
      this.model.bodgrp.rec.nam =(cur + amt + preNam).substring(0,40)
      return this.model.bodgrp.rec.nam
    }

  },
  created: function () {},
}
</script>
<style>
.messageLabel >>> .el-form-item__label {
  text-align: left;
  font-weight: bold;
  font-size: 12px;
}
</style>