<template>
    <c-row>
        <!-- =================顶部====================== -->
        <c-col :span="24">
            <c-col :span="8">
                <el-form-item label="参考号" prop="didgrp.rec.ownref">
                    <c-input
                        v-model="model.didgrp.rec.ownref"
                        maxlength="16"
                        placeholder="请输入Reference"
                        disabled
                    ></c-input>
                </el-form-item>
            </c-col>
            <c-col :span="4">
                <el-form-item label="" label-width="15px">
                    <c-button
                        size="small"
                        type="primary"
                        @click="onSeainf"
                        icon="el-icon-search"
                        ></c-button
                    >
                    <c-button
                        size="small"
                        type="primary"
                        :disabled="this.flag"
                        @click="onDitpButgetref"
                    >
                        获取
                    </c-button>
                </el-form-item>
            </c-col>
            <c-col :span="11">
                <el-form-item label="摘要" prop="didgrp.rec.nam">
                    <c-input
                        align="middle"
                        v-model="model.didgrp.rec.nam"
                        maxlength="40"
                        disabled
                        placeholder="请输入Externally Displayed Name to Identify the Contract"
                    ></c-input>
                </el-form-item>
            </c-col>
        </c-col>
        <!-- ====================左边======================= -->
        <c-col :span="11">
            <c-col :span="16">
                <el-form-item label="所属客户经理" prop="ditp.usr.extkey">
                    <c-input
                        v-model="model.ditp.usr.extkey"
                        maxlength="8"
                        placeholder="请输入User ID"
                        disabled
                    ></c-input>
                </el-form-item>
            </c-col>
            
            <c-col :span="8">
                <el-form-item label="" label-width="15px">
                    <c-button
                        size="small"
                        type="primary"
                        @click="onExtkey"
                        icon="el-icon-search"
                        ></c-button
                    >
                </el-form-item>
            </c-col>
            
            <c-col>
                &nbsp;
            </c-col>

            <c-col :span="12">
                <el-form-item label="信用证金额" prop="didgrp.cbs.nom1.cur">
                    <c-select
                        disabled
                        v-model="model.didgrp.cbs.nom1.cur"
                        style="width: 100%"
                        placeholder="请选择Currency"
                        @keyup.enter.native="nom1CurEvent"
                    >
                        <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="20px"
                    prop="didgrp.cbs.nom1.amt"
                >
                    <c-input
                        v-model="model.didgrp.cbs.nom1.amt"
                        style="text-align: left; width: 100%"
                        placeholder="请输入信用证金额"
                        disabled
                    ></c-input>
                </el-form-item>
            </c-col>
            <c-col :span="24">
                <el-form-item label="大写金额" prop="ditp.amt">
                    <c-input
                        v-model="model.ditp.amt"
                        maxlength="76"
                        placeholder="请输入大写金额"
                        disabled
                    ></c-input>
                </el-form-item>
            </c-col>
            <c-col :span="12">
                <el-form-item label="上下浮动限额" prop="didgrp.rec.nomtop">
                    <c-input
                        v-model="model.didgrp.rec.nomtop"
                        maxlength="9"
                        placeholder="请输入Amount Tolerance - Positive"
                        disabled
                    ></c-input>
                </el-form-item>
            </c-col>
            <c-col :span="12" style="text-align: left">
                <el-form-item
                    label="-"
                    style="text-align: left; margin-left: 12px"
                    label-width="20px"
                    prop="didgrp.rec.nomton"
                >
                    <c-input
                        v-model="model.didgrp.rec.nomton"
                        maxlength="9"
                        placeholder="请输入Amount Tolerance - Negative"
                        disabled
                    ></c-input>
                </el-form-item>
            </c-col>

            <c-col>
                &nbsp;
            </c-col>
            

            <c-col :span="14">
                <el-form-item label="信用证最大金额" prop="didgrp.cbs.max.cur">
                    <c-select
                        v-model="model.didgrp.cbs.max.cur"
                        style="width: 100%"
                        placeholder="请选择Currency"
                        disabled
                    >
                        <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="10">
                <el-form-item
                    label=""
                    label-width="20px"
                    prop="didgrp.cbs.max.amt"
                >
                    <c-input
                        v-model="model.didgrp.cbs.max.amt"
                        placeholder="请输入信用证最大金额"
                        disabled
                    ></c-input>
                </el-form-item>
            </c-col>
            <c-col :span="24">
                <el-form-item label="贸易类型" prop="didgrp.rec.mytype">
                    <c-select
                        v-if="model.didgrp.rec.elcflg == 'N'"
                        v-model="model.didgrp.rec.mytype"
                        style="width: 100%"
                        placeholder="请选择贸易类型"
                        @change="mytypeChange"
                    >
                        <el-option
                            v-for="item in codes.mylx"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </c-select>
                    <c-select
                        v-else
                        v-model="model.didgrp.rec.mytype"
                        style="width: 100%"
                        placeholder="请选择贸易类型"
                        @change="mytypeChange"
                    >
                        <el-option
                            v-for="item in codes.mytype"
                            :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="didgrp.rec.opndat">
                    <c-date-picker
                        type="date"
                        v-model="model.didgrp.rec.opndat"
                        style="width: 45%"
                        placeholder="请选择Date L/C Opened/Issued"
                        disabled
                    ></c-date-picker>
                </el-form-item>
            </c-col>
            <c-col :span="24">
                <el-form-item v-if="model.didgrp.rec.mytype == 'H'" label="最迟货物装运日"  prop="didgrp.rec.shpdat">
                    <c-date-picker
                        type="date"
                        v-model="model.didgrp.rec.shpdat"
                        value-format="yyyy-MM-dd"
                        style="width: 100%"
                        placeholder="请选择Shipment Date"
                        disabled
                    ></c-date-picker>
                </el-form-item>
                <el-form-item v-if="model.didgrp.rec.mytype == 'F'"  label="最迟服务提供日" prop="didgrp.rec.shpdat">
                    <c-date-picker
                        type="date"
                        v-model="model.didgrp.rec.shpdat"
                        value-format="yyyy-MM-dd"
                        style="width: 100%"
                        placeholder="请选择Shipment Date"
                    ></c-date-picker>
                </el-form-item>
                <el-form-item label="最迟货物装运日/服务提供日" v-if="model.didgrp.rec.mytype == '3'" prop="didgrp.rec.shpdat">
                    <c-date-picker
                        type="date"
                        v-model="model.didgrp.rec.shpdat"
                        value-format="yyyy-MM-dd"
                        style="width: 100%"
                        placeholder="请选择Shipment Date"
                    ></c-date-picker>
                </el-form-item>
            </c-col>
            <c-col :span="24">
                <el-form-item label="有效日期" prop="didgrp.rec.expdat">
                    <c-date-picker
                        type="date"
                        v-model="model.didgrp.rec.expdat"
                        value-format="yyyy-MM-dd"
                        style="width: 100%"
                        placeholder="请选择Date of Expiry"
                        disabled
                    ></c-date-picker>
                </el-form-item>
            </c-col>
            <c-col :span="24">
                <el-form-item label="有效地点" prop="didgrp.rec.expplc">
                    <c-input
                        type="textarea"
                        :rows="3"
                        v-model="model.didgrp.rec.expplc"
                        maxlength="35"
                        show-word-limit
                        placeholder="请输入Place of Expiry"
                    ></c-input>
                </el-form-item>
            </c-col>
            <c-col :span="24">
                <el-form-item label="是否通过电证系统" prop="didgrp.rec.elcflg">
                    <c-select
                        v-model="model.didgrp.rec.elcflg"
                        style="width: 100%"
                        placeholder="请选择是否通过电证系统"
                        disabled
                    >
                        <el-option
                            v-for="item in codes.elcflg"
                            :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="didgrp.rec.dkflg">
                    <c-select
                        v-model="model.didgrp.rec.dkflg"
                        style="width: 100%"
                        disabled
                        placeholder="请选择开证类型"
                        
                    >
                        <el-option
                            v-for="item in codes.dkflg"
                            :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="didgrp.rec.idcode"
                >
                    <c-input
                        v-model="model.didgrp.rec.idcode"
                        maxlength="18"
                        
                        placeholder="请输入申请人统一社会信用代码"
                    ></c-input>
                </el-form-item>
            </c-col>
            <c-col :span="24">
                <el-form-item label="货押标识" prop="didgrp.rec.guaflg">
                    <c-select
                        v-model="model.didgrp.rec.guaflg"
                        style="width: 100%"
                        placeholder="请选择货押标识"
                    >
                        <el-option
                            v-for="item in codes.guaflg"
                            :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="didgrp.rec.jyqflg">
                    <c-select
                        v-model="model.didgrp.rec.jyqflg"
                        style="width: 100%"
                        placeholder="请选择假远期信用证"
                    >
                        <el-option
                            v-for="item in codes.jyqflg"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </c-select>
                </el-form-item>
            </c-col>
        </c-col>
        <!-- ========================右边======================= -->
        <c-col :span="11" :offset="1">
            <c-col :span="24">
                <el-form-item
                    label="申请人           参考号"
                    prop="didgrp.apl.pts.ref"
                >
                    <c-input
                        v-model="model.didgrp.apl.pts.ref"
                        maxlength="16"
                        placeholder="请输入申请人           参考号"
                    ></c-input>
                </el-form-item>
            </c-col>

            <!--
       <c-col :span="12">
        <el-form-item label=" ">
            <c-input  v-model="model.ditp.usrget.sdamod.seainf"  placeholder="请输入"></c-input>
        </el-form-item>
       </c-col>

       <c-col :span="12">
        <el-form-item label="Drag  Drop Sender">
            <c-input  v-model="model.ditp.aplp.ptsget.sdamod.dadsnd"  placeholder="请输入Drag  Drop Sender"></c-input>
        </el-form-item>
       </c-col>
       -->

            <c-col :span="16">
                <el-form-item label="Extkey" prop="didgrp.apl.pts.extkey">
                    <c-input
                        id = "extkey"
                        v-model="model.didgrp.apl.pts.extkey"
                        maxlength="16"
                        placeholder="请输入External Key of Address"
                        @keyup.enter.native="showGridPromptDialog('didgrp.apl.pts.extkey')"
                        disabled
                    ></c-input>
                </el-form-item>
            </c-col>
            <c-col :span="8">
                <el-form-item label="" label-width="15px">
                    <c-button
                        size="small"
                        type="primary"
                        @click="onSeainf"
                        icon="el-icon-search"
                        ></c-button
                    >
                    <c-button size="small" type="primary" @click="onAplpDet">
                        详情
                    </c-button>
                </el-form-item>
            </c-col>

            <!--
       <c-col :span="10">
        <el-form-item label="">
            <c-input  v-model="model.ditp.aplp.ptsget.sdamod.seainf"  placeholder="请输入"></c-input>
        </el-form-item>
       </c-col>          -->

            <c-col :span="24">
                <el-form-item label="名称" prop="didgrp.apl.namelc">
                    <c-input
                        type="textarea"
                        v-model="model.didgrp.apl.namelc"
                        maxlength="35"
                        show-word-limit
                        placeholder="请输入名称"
                    ></c-input>
                </el-form-item>
            </c-col>
            <!--
       <c-col :span="12">
        <el-form-item label="Address Block">
            <c-input type="textarea" v-model="model.didgrp.apl.pts.adrblk" maxlength="35" show-word-limit placeholder="请输入Address Block" ></c-input>
        </el-form-item>
        </c-col>

       <c-col :span="12">
        <el-form-item label="Chinese address">Extkey</el-form-item>>
            <c-input type="textarea" v-model="model.didgrp.apl.dbfadrblkcn" maxlength="35" show-word-limit placeholder="请输入Chinese address" ></c-input>
        </el-form-item>
        </c-col>
        -->

            <c-col :span="24">
                <el-form-item label="地址" prop="didgrp.apl.adrelc">
                    <c-input
                        type="textarea"
                        v-model="model.didgrp.apl.adrelc"
                        maxlength="35"
                        show-word-limit
                        placeholder="请输入地址"
                    ></c-input>
                </el-form-item>
            </c-col>

            <c-col :span="14">
                <el-form-item label="邮编" prop="didgrp.apl.pts.youzbm">
                    <c-input
                        v-model="model.didgrp.apl.pts.youzbm"
                        maxlength="6"
                        placeholder="请输入邮编"
                    ></c-input>
                </el-form-item>
            </c-col>
            <c-col :span="10">
                <el-form-item
                    label="电话"
                    label-width="40px"
                    style="margin-left: 12px"
                    prop="didgrp.apl.pts.dihdig"
                >
                    <c-input
                        v-model="model.didgrp.apl.pts.dihdig"
                        maxlength="16"
                        placeholder="请输入电话"
                    ></c-input>
                </el-form-item>
            </c-col>

            <c-col :span="24">
                <el-form-item label="申请人账号" prop="didgrp.apl.pts.extact">
                    <c-select
                        v-model="model.didgrp.apl.pts.extact"
                        style="width: 100%"
                        placeholder="请选择External Account"
                    >
                    </c-select>
                </el-form-item>
            </c-col>
            <c-col :span="24">
                <el-form-item
                    label="申请人开户行    联行行号"
                    prop="didgrp.apb.pts.bankno"
                >
                    <c-input
                        v-model="model.didgrp.apb.pts.bankno"
                        maxlength="20"
                        placeholder="请输入Number of bank"
                        @keyup.enter.native="showGridPromptDialog('didgrp.apb.pts.bankno')"
                    ></c-input>
                </el-form-item>
            </c-col>

            <c-col :span="24">
                <el-form-item label="联行名称 " prop="didgrp.apb.pts.jigomc">
                    <c-input
                        type="textarea"
                        v-model="model.didgrp.apb.pts.jigomc"
                        maxlength="35"
                        show-word-limit
                        placeholder="请输入联行名称  电证用"
                    ></c-input>
                </el-form-item>
            </c-col>

            <c-col :span="24">
                <el-form-item
                    label="受益人           参考号"
                    prop="didgrp.ben.pts.ref"
                >
                    <c-input
                        v-model="model.didgrp.ben.pts.ref"
                        maxlength="16"
                        placeholder="请输入受益人           参考号"
                    ></c-input>
                </el-form-item>
            </c-col>

            <!--
	<c-col :span="6">
	    <span  v-text="model.ditp.zchday"   data-path=".ditp.zchday" > </span>
	</c-col> -->

            <c-col :span="16">
                <el-form-item label="Extkey" prop="didgrp.ben.pts.extkey">
                    <c-input
                        v-model="model.didgrp.ben.pts.extkey"
                        maxlength="16"
                        placeholder="请输入External Key of Address"
                        @keyup.enter.native="showGridPromptDialog('didgrp.ben.pts.extkey')"
                    ></c-input>
                </el-form-item>
            </c-col>
            <c-col :span="8">
                <el-form-item label="" label-width="12px">
                    <c-button
                        size="small"
                        type="primary"
                        @click="onSeainf"
                        icon="el-icon-search"
                        ></c-button
                    >
                    <c-button size="small" type="primary" @click="onBenpDet">
                        详情
                    </c-button>
                </el-form-item>
            </c-col>

            <!--
       <c-col :span="12">
        <el-form-item label="Drag  Drop Sender">
            <c-input  v-model="model.ditp.benp.ptsget.sdamod.dadsnd"  placeholder="请输入Drag  Drop Sender"></c-input>
        </el-form-item>
       </c-col>   -->

            <!--
       <c-col :span="10">
        <el-form-item label="">
            <c-input  v-model="model.ditp.benp.ptsget.sdamod.seainf" placeholder="请输入"></c-input>
        </el-form-item>
       </c-col>

       <c-col :span="2">
        <c-button size="small" type="primary"  @click="onBenpDet">
            Detials
        </c-button>
       </c-col> -->
            <c-col :span="24">
                <el-form-item label="名称" prop="didgrp.ben.namelc">
                    <c-input
                        type="textarea"
                        v-model="model.didgrp.ben.namelc"
                        maxlength="35"
                        show-word-limit
                        placeholder="请输入名称"
                        disabled
                    ></c-input>
                </el-form-item>
            </c-col>

            <!-- <c-col :span="24">
                <el-form-item label="有效地点" prop="didgrp.rec.expplc">
                    <c-input
                        type="textarea"
                        v-model="model.didgrp.rec.expplc"
                        maxlength="35"
                        show-word-limit
                        placeholder="请输入Place of Expiry"
                    ></c-input>
                </el-form-item>
            </c-col> -->

            <!--
       <c-col :span="12">
        <el-form-item label="Address Block">
            <c-input type="textarea" v-model="model.didgrp.ben.pts.adrblk" maxlength="35" show-word-limit placeholder="请输入Address Block" ></c-input>
        </el-form-item>
        </c-col>

       <c-col :span="12">
        <el-form-item label="Chinese address">
            <c-input type="textarea" v-model="model.didgrp.ben.dbfadrblkcn" maxlength="35" show-word-limit placeholder="请输入Chinese address" ></c-input>
        </el-form-item>
        </c-col> -->

            <c-col :span="24">
                <el-form-item label="地址" prop="didgrp.ben.adrelc">
                    <c-input
                        type="textarea"
                        v-model="model.didgrp.ben.adrelc"
                        maxlength="35"
                        show-word-limit
                        placeholder="请输入地址"
                        disabled
                    ></c-input>
                </el-form-item>
            </c-col>

            <c-col :span="14">
                <el-form-item label="邮编" prop="didgrp.ben.pts.youzbm">
                    <c-input
                        v-model="model.didgrp.ben.pts.youzbm"
                        maxlength="6"
                        placeholder="请输入邮编  电证用"
                    ></c-input>
                </el-form-item>
            </c-col>
            <c-col :span="10">
                <el-form-item
                    label="电话"
                    label-width="40px"
                    style="margin-left: 12px"
                    prop="didgrp.ben.pts.dihdig"
                >
                    <c-input
                        v-model="model.didgrp.ben.pts.dihdig"
                        maxlength="16"
                        placeholder="请输入电话"
                    ></c-input>
                </el-form-item>
            </c-col>

            <c-col :span="24">
                <el-form-item label="受益人帐号" prop="didgrp.ben.pts.extact">
                    <c-input
                        v-model="model.didgrp.ben.pts.extact"
                        maxlength="34"
                        placeholder="请输入受益人帐号"
                    ></c-input>
                </el-form-item>
            </c-col>

            <c-col :span="24">
                <el-form-item
                    label="受益人开户行   联行行号"
                    prop="didgrp.beb.pts.bankno"
                >
                    <c-input
                        v-model="model.didgrp.beb.pts.bankno"
                        maxlength="20"
                        placeholder="请输入Number of bank"
                        @keyup.enter.native="showGridPromptDialog('didgrp.beb.pts.bankno')"
                    ></c-input>
                </el-form-item>
            </c-col>

            <c-col :span="24">
                <el-form-item label="联行名称 " prop="didgrp.beb.pts.jigomc">
                    <c-input
                        type="textarea"
                        v-model="model.didgrp.beb.pts.jigomc"
                        maxlength="35"
                        show-word-limit
                        placeholder="请输入联行名称  电证用"
                        disabled
                    ></c-input>
                </el-form-item>
            </c-col>
        </c-col>
    </c-row>
</template>
<script>
import Api from "~/service/Api";
import CommonProcess from "~/mixin/CommonProcess";
import Event from "~/model/Ditopn/Event";
import Utils from "~/utils";

export default {
    inject: ['root'],
    props: ["model", "codes"],
    mixins: [CommonProcess],
    data() {
        return {
            // declareParams: {
            //     fileName: "ditopn.json",
            //     basePath: "{{basePath}}",
            //     method: "post",
            //     scheme: "{{schemes}}",
            //     host: "{{host}}",
            //     consume: "0",
            //     produce: "0",
            //     uri: "/ditopn/getElcsRef",
            // },
            jigomcFlag:false,
            trade: ""
        };
    },
    methods: {
        ...Event,
        mytypeChange(){
            if (this.model.didgrp.rec.mytype == "F"){
                this.model.didgrp.rec.tratyp = "";
                this.model.didgrp.rec.sdsrfs = "";
                this.model.didgrp.rec.shptrs = "";
                this.model.didgrp.rec.shpfro = "";
                this.model.didgrp.rec.shpto = "";
                this.model.didgrp.rec.shppro = "";
            }
        },
        nom1CurEvent(){
            this.executeDefault("didgrp.cbs.nom1.cur").then(
                (res) => {
                    if (res.respCode = SUCCESS){
                        Utils.copyValueFromVO(this.model, res.data);
                    }
                }
            );
        }
    },
    created: function () {},
    computed:{
    flag(){
        return this.model.didgrp.apl.pts.extkey=="";
    } ,
    },
    watch: {
        declareParams() {},
    },
};
</script>