<template>
  <div class="eibs">
    <el-col :span="12" style="padding-right: 20px">
      <c-col :span="24">
        <el-form-item label="单据类型" prop="brdgrp.srm.djutyp">
          <c-select
            v-model="model.brdgrp.srm.djutyp"
            style="width: 100%"
            placeholder="请选择单据类型"
            dbCode="djutyp"
            @change="onDjutypChange">
          </c-select>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item
          label="单据出具人"
          prop="brdgrp.srm.djuusr"
          :rules="[{ type: 'string', required: this.model.brdgrp.srm.djutyp != 'D', message: '必输项' }]">
          <c-input
            :disabled="this.model.brdgrp.srm.djutyp == 'D'"
            v-model="model.brdgrp.srm.djuusr"
            maxlength="80"
            placeholder="请输入单据出具人"></c-input>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item
          label="单据出具日期"
          prop="brdgrp.srm.djudat"
          :rules="[{ type: 'string', required: this.model.brdgrp.srm.djutyp != 'D', message: '必输项' }]">
          <c-date-picker
            :disabled="this.model.brdgrp.srm.djutyp == 'D'"
            type="date"
            v-model="model.brdgrp.srm.djudat"
            style="width: 100%"
            placeholder="请选择单据出具日期"></c-date-picker>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item
          label="货权单据编号"
          prop="brdgrp.srm.djuref"
          :rules="[{ type: 'string', required: this.model.brdgrp.srm.djutyp != 'D', message: '必输项' }]">
          <c-input
            :disabled="this.model.brdgrp.srm.djutyp == 'D'"
            v-model="model.brdgrp.srm.djuref"
            maxlength="40"
            placeholder="请输入货权单据编号"></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="24" v-if="model.shpflg == 'X'">
        <c-col :span="24">
          <el-form-item
            label="Release of Goods"
            prop="brdgrp.rec.relgodflg"
            :rules="[{ type: 'string', required: true, message: '必输项' }]">
            <c-select
              v-model="model.brdgrp.rec.relgodflg"
              style="width: 100%"
              placeholder="请选择提货担保申请人"
              dbCode="RELGOD"
              :filterKey="['A', 'C']"
              @change="onRelgodflgChange">
            </c-select>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="Release Type" prop="brdgrp.rec.reltyp">
            <c-select
              disabled
              v-model="model.brdgrp.rec.reltyp"
              dbCode="typrel"
              style="width: 100%"
              placeholder="请选择放货类型"
              :code="codes.reltyp1"
              @change="onReltypChange">
            </c-select>
          </el-form-item>
        </c-col>

        <c-col :span="12">
          <el-form-item label="issue date" prop="brdgrp.rec.relgoddat">
            <c-date-picker
              type="date"
              v-model="model.brdgrp.rec.relgoddat"
              style="width: 100%"
              placeholder="请选择日期"
              value-format="yyyy-MM-dd"></c-date-picker>
          </el-form-item>
        </c-col>
        <c-col :span="12">
          <el-form-item label="Expiry Date" prop="brdgrp.rec.expdat">
            <c-date-picker
              type="date"
              v-model="model.brdgrp.rec.expdat"
              style="width: 100%"
              placeholder="请选择日期"
              value-format="yyyy-MM-dd"
              :disabled="this.model.brdgrp.rec.reltyp !== 'SG'"></c-date-picker>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="Transport Doc. Type" prop="brdgrp.rec.trpdoctyp">
            <c-select
              v-model="model.brdgrp.rec.trpdoctyp"
              dbCode="trptyp"
              style="width: 100%"
              placeholder="请选择货物单据类型">
            </c-select>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="Transport Doc. No." prop="brdgrp.rec.trpdocnum">
            <c-input v-model="model.brdgrp.rec.trpdocnum" maxlength="40" placeholder="请输入运输单据编号"></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="shipment date" prop="brdgrp.rec.tradat">
            <c-date-picker
              type="date"
              v-model="model.brdgrp.rec.tradat"
              style="width: 100%"
              placeholder="请选择日期"
              value-format="yyyy-MM-dd"></c-date-picker>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="Mode of Transport" prop="brdgrp.rec.tramod">
            <c-select
              v-model="model.brdgrp.rec.tramod"
              dbCode="TRAMOD"
              style="width: 100%"
              placeholder="请选择运输模式">
            </c-select>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="Vessel Name" prop="brdgrp.blk.vesnam">
            <c-input v-model="model.brdgrp.blk.vesnam" maxlength="40" placeholder="请输入运输工具"></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="Port of Discharge" prop="brdgrp.blk.pordis">
            <c-input v-model="model.brdgrp.blk.pordis" maxlength="40" placeholder="请输入卸货口岸"></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="Place of Delivery" prop="brdgrp.blk.delplc">
            <c-input v-model="model.brdgrp.blk.delplc" maxlength="40" placeholder="请输入移交地点"></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="Covered Goods" prop="brdgrp.blk.roggod">
            <c-input
              type="textarea"
              v-model="model.brdgrp.blk.roggod"
              maxlength="1600"
              show-word-limit
              placeholder="请输入货物描述"></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="Port of loading" prop="brdgrp.blk.porlod">
            <c-input v-model="model.brdgrp.blk.porlod" maxlength="40" placeholder="请输入起运口岸"></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="Voyage numer" prop="brdgrp.blk.voynum">
            <c-input v-model="model.brdgrp.blk.voynum" maxlength="30" placeholder="请输入航号"></c-input>
          </el-form-item>
        </c-col>
      </c-col>
    </el-col>
    <el-col :span="12" style="padding-left: 20px">
      <c-col :span="24">
        <el-form-item label="合同号" prop="brdgrp.rec.rptref">
          <c-input
            v-model="model.brdgrp.rec.rptref"
            maxlength="35"
            style="width: 100%"
            placeholder="请输入合同号"></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="发票类型" prop="brdgrp.rec.invtyp">
          <c-select v-model="model.brdgrp.rec.invtyp" style="width: 100%" dbCode="invtyp"> </c-select>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="发票号" prop="brdgrp.rec.invref">
          <c-input v-model="model.brdgrp.rec.invref" maxlength="16"></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="12">
        <el-form-item>
          <c-checkbox v-model="model.brdgrp.rec.sgdinr" true-label="X" false-label=""
            >该笔信用证项下已出具提货担保</c-checkbox
          >
        </el-form-item>
      </c-col>
      <c-col :span="12">
        <el-form-item>
          <c-checkbox v-model="model.shpflg" true-label="X" false-label="" @change="onShpflgChange"
            >Show Shipping Details</c-checkbox
          >
        </el-form-item>
      </c-col>
      <c-col :span="24" v-if="model.shpflg == 'X'">
        <c-col :span="24">
          <el-form-item label="Contract Number" prop="brtp.connum">
            <c-input v-model="model.brtp.connum" maxlength="35" placeholder="请输入合同编号"></c-input>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item label="Carrier" prop="brdgrp.blk.carnam">
            <c-input v-model="model.brdgrp.blk.carnam" maxlength="35" placeholder="请输入承运人"></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="B/L Number" prop="brdgrp.rec.blnum">
            <c-input v-model="model.brdgrp.rec.blnum" maxlength="20" placeholder="请输入海运/远洋提单编号"></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item>
            <c-checkbox
              v-model="model.brdgrp.rec.rtoaplflg"
              true-label="X"
              false-label=""
              class="checkbox-left"
              :disabled="isRtoaplflgDisabled"
              @change="onAppChange"
              >To Applicant</c-checkbox
            >
            <!-- <el-input v-model="model.brdgrp.rec.rtoaplflg"></el-input> -->
          </el-form-item>

          <!-- <c-checkbox v-model="model.brdgrp.rec.rtoaplflg">to Applicant</c-checkbox> 简化model前，，原始-->
          <!-- Release Goods to Applicant? -->
        </c-col>

        <c-col :span="24">
          <el-form-item label="Release to Address" prop="brdgrp.blk.relstoadr">
            <c-input
              type="textarea"
              v-model="model.brdgrp.blk.relstoadr"
              maxlength="140"
              show-word-limit
              placeholder="请输入收货人名称及地址"
              rows="4"
              @change="onRelstoadrChange"></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="24" class="fieldName">
          <el-form-item label="Shipping company" style="margin-bottom: 0">
            <el-form-item label-width="0" style="margin-bottom: 10px">
              <c-ptap
                :argadr="{ title: '', grp: 'brdgrp', rol: 'shp' }"
                :haveAdrLabel="true"
                :isAdrblk="true"
                :isFieldLabelVisible="false"
                :model="model"
                bchinr="00000036"
                ptytyp="C" :isLabel120="false"></c-ptap>
            </el-form-item>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item label="Notify Party" prop="brdgrp.blk.notpty">
            <c-input
              type="textarea"
              v-model="model.brdgrp.blk.notpty"
              maxlength="350"
              show-word-limit
              placeholder="请输入被通知人"></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="Goods code" prop="brdgrp.rec.ngrcod">
            <c-select
              v-model="model.brdgrp.rec.ngrcod"
              style="width: 100%"
              placeholder="请选择货物类型"
              dbCode="bnrsec">
            </c-select>
          </el-form-item>
        </c-col>
      </c-col>
    </el-col>
  </div>
</template>
<script>
import Api from "~/service/Api";
import CodeTable from "~/config/CodeTable";
import event from "../event";
import commonProcess from "~/mixin/commonProcess";
export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [event, commonProcess],
  data() {
    return {
      typ1: true,
      isRtoaplflgDisabled: false,
    };
  },
  methods: {
    onDjutypChange() {
      if (this.model.brdgrp.srm.djutyp === "D") {
        this.model.brdgrp.srm.djuusr = "";
        this.model.brdgrp.srm.djudat = "";
        this.model.brdgrp.srm.djuref = "";
      }
    },
    onShpflgChange() {
      if (this.model.shpflg === "X") {
        this.model.brdgrp.rec.relgodflg = "A";
      } else {
        this.model.brdgrp.rec.relgodflg = null;
        this.model.brdgrp.rec.reltyp = "";
      }
      this.onRelgodflgChange();
    },
    onAppChange() {
      if (this.model.brdgrp.rec.rtoaplflg !== "X") {
        this.model.brdgrp.blk.relstoadr = "";
      } else {
        this.model.brdgrp.blk.relstoadr = this.model.lidgrp.apl.pts.adrblk;
      }
    },
    onReltypChange() {
      if (this.model.brdgrp.rec.reltyp !== "SG") {
        this.model.brdgrp.rec.expdat = "";
      }
    },
    onRelstoadrChange() {
      this.model.brdgrp.rec.rtoaplflg = "";
      this.isRtoaplflgDisabled = true;
    },
    onRelgodflgChange() {
      if (this.model.brdgrp.rec.relgodflg != null && this.model.brdgrp.rec.relgodflg != "") {
        if (this.model.brdgrp.rec.rcvdat == null || this.model.brdgrp.rec.rcvdat == "") {
          this.model.brdgrp.rec.docsta = "J";
        } else {
          this.model.brdgrp.rec.docsta = "K";
        }
      }
    },
  },
};
</script>
<style></style>