<template>
  <div class="eibs-tab">
    <c-list-search
      @form-reset="handleReset('paramsForm')"
      @form-search="handleSearch"
    >
      <template v-slot="searchSlot">
        <el-form
          class="m-table-search-form"
          ref="paramsForm"
          label-position="right"
          label-width="110px"
          size="small"
        >
          <el-row>
            <div v-if="activeTab == 'le'">
            <c-col :span="8">
              <el-form-item
                label="业务编号"
                prop="infcon.seaownref"
                style="width: 100%"
              >
                <c-input
                  v-model="model.infcon.seaownref"
                  maxlength="16"
                  @change="changeOwnref"
                  placeholder="请输入业务编号"
                ></c-input>
              </el-form-item>
            </c-col>

            <c-col :span="8">
              <el-form-item
                label="日期"
                prop="infcon.opndatfrom"
                style="width: 100%"
              >
                <c-col :span="11">
                  <c-date-picker
                    type="date"
                    v-model="model.infcon.opndatfrom"
                    placeholder="请选择起始日期"
                    value-format="yyyy-MM-dd"
                    style="width: 100%"
                  ></c-date-picker>
                </c-col>
                <c-col :span="2" style="text-align: center">
                  <label style="display: inline-block; width: 100%">-</label>
                </c-col>
                <c-col :span="11">
                  <c-date-picker
                    type="date"
                    v-model="model.infcon.opndatto"
                    placeholder="请选择截止日期"
                    style="width: 100%"
                    value-format="yyyy-MM-dd"
                  ></c-date-picker>
                </c-col>
              </el-form-item>
            </c-col>
              <c-col :span="8">
              <el-form-item label="客户名称" prop="infcon.searef" style="width: 100%">
                <c-input v-model="model.infcon.searef"  placeholder="请输入客户名称"></c-input>
              </el-form-item>
            </c-col>
            </div>
            <div v-if="activeTab == 'be'">
             <c-col :span="8">
              <el-form-item label="业务编号" prop="becon.beownref" style="width: 100%">
                <c-input v-model="model.becon.beownref" 
                  @change="changeOwnref" maxlength="16" placeholder="请输入业务编号"></c-input>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="日期" prop="becon.opndatfrom" style="width: 100%">
                <c-col :span="11">
                  <c-date-picker type="date" v-model="model.becon.opndatfrom" placeholder="请选择起始日期" value-format="yyyy-MM-dd" style="width: 100%"></c-date-picker>
                </c-col>
                <c-col :span="2" style="text-align: center">
                  <label style="display: inline-block; width: 100%">-</label>
                </c-col>
                <c-col :span="11">
                  <c-date-picker type="date" v-model="model.becon.opndatto" placeholder="请选择截至日期" style="width: 100%" value-format="yyyy-MM-dd"></c-date-picker>
                </c-col>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="客户名称" prop="becon.searef" style="width: 100%">
                <c-input v-model="model.becon.searef"  placeholder="请输入客户名称"></c-input>
              </el-form-item>
            </c-col>
            </div>
            <div v-if="activeTab == 'lt'">
             <c-col :span="8">
              <el-form-item label="业务编号" prop="ltcon.ltownref" style="width: 100%">
                <c-input v-model="model.ltcon.ltownref" 
                  @change="changeOwnref" maxlength="16" placeholder="请输入业务编号"></c-input>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="日期" prop="ltcon.opndatfrom" style="width: 100%">
                <c-col :span="11">
                  <c-date-picker type="date" v-model="model.ltcon.opndatfrom" placeholder="请选择起始日期" value-format="yyyy-MM-dd" style="width: 100%"></c-date-picker>
                </c-col>
                <c-col :span="2" style="text-align: center">
                  <label style="display: inline-block; width: 100%">-</label>
                </c-col>
                <c-col :span="11">
                  <c-date-picker type="date" v-model="model.ltcon.opndatto" placeholder="请选择截至日期" style="width: 100%" value-format="yyyy-MM-dd"></c-date-picker>
                </c-col>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="客户名称" prop="ltcon.searef" style="width: 100%">
                <c-input v-model="model.ltcon.searef"  placeholder="请输入客户名称"></c-input>
              </el-form-item>
            </c-col>
            </div>
             <div v-if="activeTab == 'bt'">
                <c-col :span="8">
              <el-form-item label="业务编号" prop="btcon.btownref" style="width: 100%">
                <c-input v-model="model.btcon.btownref" 
                  @change="changeOwnref"  maxlength="16" placeholder="请输入业务编号"></c-input>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="日期" prop="btcon.opndatfrom" style="width: 100%">
                <c-col :span="11">
                  <c-date-picker type="date" v-model="model.btcon.opndatfrom" placeholder="请选择起始日期" value-format="yyyy-MM-dd" style="width: 100%"></c-date-picker>
                </c-col>
                <c-col :span="2" style="text-align: center">
                  <label style="display: inline-block; width: 100%">-</label>
                </c-col>
                <c-col :span="11">
                  <c-date-picker type="date" v-model="model.btcon.opndatto" placeholder="请选择截至日期" style="width: 100%" value-format="yyyy-MM-dd"></c-date-picker>
                </c-col>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="客户名称" prop="btcon.searef" style="width: 100%">
                <c-input v-model="model.btcon.searef"  placeholder="请输入客户名称"></c-input>
              </el-form-item>
            </c-col>
            </div>
             <div v-if="activeTab == 'bp'">
               <c-col :span="8">
                  <el-form-item label="业务编号" prop="bpcon.bpownref" style="width: 100%">
                    <c-input v-model="model.bpcon.bpownref" 
                  @change="changeOwnref"  maxlength="16" placeholder="请输入业务编号"></c-input>
                  </el-form-item>
                </c-col>
                <c-col :span="8">
                  <el-form-item label="日期" prop="bpcon.opndatfrom" style="width: 100%">
                    <c-col :span="11">
                      <c-date-picker type="date" v-model="model.bpcon.opndatfrom" value-format="yyyy-MM-dd"
                        style="width:100%" placeholder="请选择起息日"></c-date-picker>
                    </c-col>
                    <c-col :span="2" style="text-align: center">
                      <label style="display: inline-block; width: 100%">-</label>
                    </c-col>
                    <c-col :span="11">
                      <c-date-picker type="date" v-model="model.bpcon.opndatto" value-format="yyyy-MM-dd"
                        style="width:100%" placeholder="请选择Open Date to"></c-date-picker>
                    </c-col>
                  </el-form-item>
                </c-col>
                <c-col :span="8">
                  <el-form-item label="客户名称" prop="bpcon.searef" style="width: 100%">
                    <c-input v-model="model.bpcon.searef"  placeholder="请输入客户名称"></c-input>
                  </el-form-item>
                </c-col>
            </div>
            <div v-if="activeTab == 'df'">
               <c-col :span="8">
              <el-form-item label="业务编号" prop="dfcon.dfownref" style="width: 100%">
                <c-input v-model="model.dfcon.dfownref" 
                  @change="changeOwnref"  maxlength="16" placeholder="请输入业务编号"></c-input>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="日期" prop="dfcon.opndatfrom" style="width: 100%">
                <c-col :span="11">
                  <c-date-picker type="date" v-model="model.dfcon.opndatfrom" placeholder="请选择起始日期" value-format="yyyy-MM-dd" style="width: 100%"></c-date-picker>
                </c-col>
                <c-col :span="2" style="text-align: center">
                  <label style="display: inline-block; width: 100%">-</label>
                </c-col>
                <c-col :span="11">
                  <c-date-picker type="date" v-model="model.dfcon.opndatto" placeholder="请选择截至日期" style="width: 100%" value-format="yyyy-MM-dd"></c-date-picker>
                </c-col>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="客户名称" prop="dfcon.searef" style="width: 100%">
                <c-input v-model="model.dfcon.searef"  placeholder="请输入客户名称"></c-input>
              </el-form-item>
            </c-col>
            </div>
          </el-row>
          <el-row v-show="searchSlot.searchToggle">
            <div v-if="activeTab == 'le'">
              <c-col :span="8">
                <el-form-item label="是否闭卷" prop="infcon.isClosed" style="width: 100%">
                  <c-select v-model="model.infcon.isClosed" dbCode='cxmflg'  placeholder="请选择是否闭卷">
                  </c-select>
                </el-form-item>
              </c-col> 
            </div>
            <div v-if="activeTab == 'be'">
                <c-col :span="8">
                  <el-form-item label="信用证编号" prop="becon.seaownref" style="width: 100%">
                    <c-input v-model="model.becon.seaownref" maxlength="16" placeholder="请输入信用证编号"></c-input>
                  </el-form-item>
                </c-col>
               <c-col :span="8">
                  <el-form-item label="是否闭卷" prop="becon.isClosed" style="width: 100%">
                    <c-select v-model="model.becon.isClosed" dbCode='cxmflg'  placeholder="请选择是否闭卷">
                    </c-select>
                  </el-form-item>
              </c-col> 
            </div>
            <div v-if="activeTab == 'lt'">
               <c-col :span="8">
                  <el-form-item label="信用证编号" prop="ltcon.seaownref" style="width: 100%">
                    <c-input v-model="model.ltcon.seaownref" maxlength="16" placeholder="请输入信用证编号"></c-input>
                  </el-form-item>
                </c-col>
               <c-col :span="8">
                  <el-form-item label="是否闭卷" prop="ltcon.isClosed" style="width: 100%">
                    <c-select v-model="model.ltcon.isClosed" dbCode='cxmflg'  placeholder="请选择是否闭卷">
                    </c-select>
                  </el-form-item>
              </c-col> 
            </div>
             <div v-if="activeTab == 'bt'">
                <c-col :span="8">
                  <el-form-item label="转让证编号" prop="btcon.ltownref" style="width: 100%">
                    <c-input v-model="model.btcon.ltownref" maxlength="16" placeholder="请输入转让证编号"></c-input>
                  </el-form-item>
                </c-col>
               <c-col :span="8">
                  <el-form-item label="是否闭卷" prop="btcon.isClosed" style="width: 100%">
                    <c-select v-model="model.btcon.isClosed" dbCode='cxmflg'  placeholder="请选择是否闭卷">
                    </c-select>
                  </el-form-item>
              </c-col> 
            </div>
             <div v-if="activeTab == 'bp'">
                 <c-col :span="8">
                  <el-form-item label="单据编号" prop="bpcon.seaownref" style="width: 100%">
                    <c-input v-model="model.bpcon.seaownref" maxlength="16" placeholder="请输入单据编号"></c-input>
                  </el-form-item>
                </c-col>
                <c-col :span="8">
                  <el-form-item label="到期日" prop="bpcon.matdatfrom" style="width: 100%">
                    <c-col :span="11">
                      <c-date-picker type="date" v-model="model.bpcon.matdatfrom" value-format="yyyy-MM-dd"
                        style="width:100%" placeholder="请选择起息日"></c-date-picker>
                    </c-col>
                    <c-col :span="2" style="text-align: center">
                      <label style="display: inline-block; width: 100%">-</label>
                    </c-col>
                    <c-col :span="11">
                      <c-date-picker type="date" v-model="model.bpcon.matdatto" value-format="yyyy-MM-dd"
                        style="width:100%" placeholder="请选择Open Date to"></c-date-picker>
                    </c-col>
                  </el-form-item>
                </c-col>
                <c-col :span="8">
                  <el-form-item label="是否闭卷" prop="bpcon.isClosed" style="width: 100%">
                    <c-select v-model="model.bpcon.isClosed" dbCode='cxmflg'  placeholder="请选择是否闭卷">
                    </c-select>
                  </el-form-item>
                </c-col>
            </div>
            <div v-if="activeTab == 'df'">
                <c-col :span="8">
                  <el-form-item label="父业务编号" prop="dfcon.pntref" style="width: 100%">
                    <c-input v-model="model.dfcon.pntref" maxlength="16" placeholder="请输入父业务编号"></c-input>
                  </el-form-item>
                </c-col>
                <c-col :span="8">
                  <el-form-item label="到期日" prop="dfcon.matdatfrom" style="width: 100%">
                    <c-col :span="11">
                      <c-date-picker type="date" v-model="model.dfcon.matdatfrom" value-format="yyyy-MM-dd"
                        style="width:100%" placeholder="请选择开始日期"></c-date-picker>
                    </c-col>
                    <c-col :span="2" style="text-align: center">
                      <label style="display: inline-block; width: 100%">-</label>
                    </c-col>
                    <c-col :span="11">
                      <c-date-picker type="date" v-model="model.dfcon.matdatto" value-format="yyyy-MM-dd"
                        style="width:100%" placeholder="请选择截止日期"></c-date-picker>
                    </c-col>
                  </el-form-item>
                </c-col>
                  <c-col :span="8">
                  <el-form-item label="代付行/名称" prop="dfcon.dfbkref" style="width: 100%">
                    <c-input v-model="model.dfcon.dfbkref" placeholder="请输入代付行/名称"></c-input>
                  </el-form-item>
                </c-col>
                <c-col :span="8">
                  <el-form-item label="是否闭卷" prop="dfcon.isClosed" style="width: 100%">
                    <c-select v-model="model.dfcon.isClosed" dbCode='cxmflg'  placeholder="请选择是否闭卷">
                    </c-select>
                  </el-form-item>
                </c-col>
            </div>
          </el-row>
        </el-form>
      </template>
    </c-list-search>

    <c-col :span="24">
      <c-button class="medium_bcs" size="medium" type="primary" style="margin-left: 0px" title="LETNOT"
                @click="toLetnot">
        出口信用证预通知
      </c-button>

      <c-button class="medium_bcs" size="medium" type="primary" style="margin-left: 10px;" title="LETOPN"
                @click="toLetopn">
        出口信用证通知
      </c-button>
      <c-button class="medium_bcs" size="medium" type="primary" style="margin-left: 10px;" title="LETRSV"
                @click="toLetrsv">
        出口信用证补通知
      </c-button>
      <c-button class="medium_bcs" size="medium" type="primary" style="margin-left: 10px;" title="LETDRW"
                @click="toLetdrw">
        出口信用证收单加补录
      </c-button>

    </c-col>

<div style="height: 90%">
  <c-col :span="24">
      <c-tabs v-model="activeTab" @tab-click="handleClickTab"  type="card" ref="elment">
        <el-tab-pane label="信用证信息" name="le">
          <el-table
              v-loading="load"
              height="calc(100vh - 480px)"
              border
              :data="stmData.data"
              :columns="stmData.columns"
              :showButtonFlg="true"
              :highlight-current-row="true"
              @row-click="TableRowClick"
              @row-dblclick="TableDblRow"
          >
            <el-table-column
                v-for="(item, key) in stmData.columns"
                :key="key"
                :label="item.label"
                :prop="item.prop"
                :min-width="item.width"
            >
              <template  slot-scope="scope">
                <div style="text-align: center" v-if="item.prop.indexOf('amt') >= 0">{{moneyFormat(scope.row[item.prop],scope.row.cur)}}</div>
                <div v-else>{{scope.row[item.prop]}}</div>
              </template>
            </el-table-column>
            <!-- 自定义组件里加了最右边的一列”操作“ -->
            <el-table-column fixed="right" prop="op" label="操作" width="180px">
              <template slot="header">
                <!-- 插槽里放了一个文字 一个按钮 -->
                <c-col :span="11" style="text-align: center"
                  ><span>操作</span>
                </c-col>
              </template>
              <template slot-scope="scope">
                <c-button
                  style="margin-right: 7px"
                  size="small"
                  type="text"
                  @click="handler(scope.row)"
                >处理
                </c-button>
                <!-- 申请一个弹出主键放在插槽，加工已渲染的数据 -->
                <el-popover
                  placement="top-start"
                  title="历史信息"
                  width="1200"
                  trigger="manual" 
                  v-clickOutside="closeDisplayDialog"
                  :ref="'popover_' + scope.row.inr"
                >
                  <div
                    style="
                      text-align: right;
                      margin-top: -30px;
                      margin-right: 5px;
                      font-size: 16px;
                    "
                  >
                    <span
                      class="el-icon-close"
                      style="cursor: pointer"
                      @click="closeDetailsDialog('popover_' + scope.row.inr)"
                    ></span>
                  </div>
                  <el-table
                      :data="trnData.data"
                      :columns="trnData.columns"
                      :showButtonFlg="true"
                  >
                    <el-table-column
                        v-for="(item, key) in trnData.columns"
                        :key="key"
                        :label="item.label"
                        :prop="item.prop"
                        :width="item.width"
                    >
                      <template slot-scope="scope">
                        <div>{{ scope.row[item.prop] }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column
                        fixed="right"
                        prop="op"
                        label="操作"
                        width="100px"
                    >
                      <template slot-scope="scope">
                        <c-button
                            style="margin-left: 0"
                            size="small"
                            @click="display(scope.row)"
                        >快照</c-button
                        >
                      </template>
                    </el-table-column>
                  </el-table>
                  <c-button
                    style="margin-left: 0px"
                    size="small"
                    type="text"
                    @click="details(scope.row)"
                    slot="reference"
                  >
                    快照
                  </c-button>
                <c-button style="margin-left: 0" type="text" size="small" slot="reference" @click="toInfo(scope.row,'LED','BED')">
                  Info
                </c-button>
                </el-popover>
              
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-box" style="display:block">
             <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="pagination.pageIndex"
              :page-sizes="[10, 20, 50, 100, 500]"
              :page-size="pagination.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pagination.total">
          </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="单据信息"  name="be">
            <el-table
              v-loading="load"
              height="calc(100vh - 480px)"
              border
              :data="stmDataBe.data"
              :columns="stmDataBe.columns"
              :showButtonFlg="true"
              :highlight-current-row="true"
              @row-click="TableRowClick"
              @row-dblclick="TableDblRow"
          >
            <el-table-column
                v-for="(item, key) in stmDataBe.columns"
                :key="key"
                :label="item.label"
                :prop="item.prop"
                :min-width="item.width"
            >
              <template  slot-scope="scope">
                <div style="text-align: center" v-if="item.prop.indexOf('amt') >= 0">{{moneyFormat(scope.row[item.prop],scope.row.cur)}}</div>
                <div v-else>{{scope.row[item.prop]}}</div>
              </template>
            </el-table-column>
            <!-- 自定义组件里加了最右边的一列”操作“ -->
            <el-table-column fixed="right" prop="op" label="操作" width="180px">
              <template slot="header">
                <!-- 插槽里放了一个文字 一个按钮 -->
                <c-col :span="11" style="text-align: center"
                  ><span>操作</span>
                </c-col>
              </template>
              <template slot-scope="scope">
                <c-button
                  style="margin-right: 7px"
                  size="small"
                  type="text"
                  @click="handler(scope.row)"
                >处理
                </c-button>
                <!-- 申请一个弹出主键放在插槽，加工已渲染的数据 -->
                <el-popover
                  placement="top-start"
                  title="历史信息"
                  width="1200"
                 trigger="manual" 
                 v-clickOutside="closeDisplayDialog"
                  :ref="'popover_' + scope.row.inr"
                >
                  <div
                    style="
                      text-align: right;
                      margin-top: -30px;
                      margin-right: 5px;
                      font-size: 16px;
                    "
                  >
                    <span
                      class="el-icon-close"
                      style="cursor: pointer"
                      @click="closeDetailsDialog('popover_' + scope.row.inr)"
                    ></span>
                  </div>
                  <el-table
                      :data="trnData.data"
                      :columns="trnData.columns"
                      :showButtonFlg="true"
                  >
                    <el-table-column
                        v-for="(item, key) in trnData.columns"
                        :key="key"
                        :label="item.label"
                        :prop="item.prop"
                        :width="item.width"
                    >
                      <template slot-scope="scope">
                        <div>{{ scope.row[item.prop] }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column
                        fixed="right"
                        prop="op"
                        label="操作"
                        width="100px"
                    >
                      <template slot-scope="scope">
                        <c-button
                            style="margin-left: 0"
                            size="small"
                            @click="display(scope.row)"
                        >快照</c-button
                        >
                      </template>
                    </el-table-column>
                  </el-table>
                  <c-button
                    style="margin-left: 0px"
                    size="small"
                    type="text"
                    @click="details(scope.row)"
                    slot="reference"
                  >
                    快照
                  </c-button>
                <c-button style="margin-left: 0" type="text" size="small" slot="reference" @click="toInfo(scope.row,'BED','BPD')">
                  Info
                </c-button>
                </el-popover>
              
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-box" style="display:block">
             <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="pagination.pageIndex"
              :page-sizes="[10, 20, 50, 100, 500]"
              :page-size="pagination.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pagination.total">
          </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="转让证信息"  name="lt">
           <el-table
              v-loading="load"
              height="calc(100vh - 480px)"
              border
              :data="stmDataLt.data"
              :columns="stmDataLt.columns"
              :showButtonFlg="true"
              :highlight-current-row="true"
              @row-click="TableRowClick"
              @row-dblclick="TableDblRow"
          >
            <el-table-column
                v-for="(item, key) in stmDataLt.columns"
                :key="key"
                :label="item.label"
                :prop="item.prop"
                :min-width="item.width"
            >
              <template  slot-scope="scope">
                <div style="text-align: center" v-if="item.prop.indexOf('amt') >= 0">{{moneyFormat(scope.row[item.prop],scope.row.cur)}}</div>
                <div v-else>{{scope.row[item.prop]}}</div>
              </template>
            </el-table-column>
            <!-- 自定义组件里加了最右边的一列”操作“ -->
            <el-table-column fixed="right" prop="op" label="操作" width="180px">
              <template slot="header">
                <!-- 插槽里放了一个文字 一个按钮 -->
                <c-col :span="11" style="text-align: center"
                  ><span>操作</span>
                </c-col>
              </template>
              <template slot-scope="scope">
                <c-button
                  style="margin-right: 7px"
                  size="small"
                  type="text"
                  @click="handler(scope.row)"
                >处理
                </c-button>
                <!-- 申请一个弹出主键放在插槽，加工已渲染的数据 -->
                <el-popover
                  placement="top-start"
                  title="历史信息"
                  width="1200"
                  trigger="manual"
                  v-clickOutside="closeDisplayDialog"
                  :ref="'popover_' + scope.row.inr"
                >
                  <div
                    style="
                      text-align: right;
                      margin-top: -30px;
                      margin-right: 5px;
                      font-size: 16px;
                    "
                  >
                    <span
                      class="el-icon-close"
                      style="cursor: pointer"
                      @click="closeDetailsDialog('popover_' + scope.row.inr)"
                    ></span>
                  </div>
                  <el-table
                      :data="trnData.data"
                      :columns="trnData.columns"
                      :showButtonFlg="true"
                  >
                    <el-table-column
                        v-for="(item, key) in trnData.columns"
                        :key="key"
                        :label="item.label"
                        :prop="item.prop"
                        :width="item.width"
                    >
                      <template slot-scope="scope">
                        <div>{{ scope.row[item.prop] }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column
                        fixed="right"
                        prop="op"
                        label="操作"
                        width="100px"
                    >
                      <template slot-scope="scope">
                        <c-button
                            style="margin-left: 0"
                            size="small"
                            @click="display(scope.row)"
                        >快照</c-button
                        >
                      </template>
                    </el-table-column>
                  </el-table>
                  <c-button
                    style="margin-left: 0px"
                    size="small"
                    type="text"
                    @click="details(scope.row)"
                    slot="reference"
                  >
                    快照
                  </c-button>
                <c-button style="margin-left: 0" type="text" size="small" slot="reference" @click="toInfo(scope.row,'LTD','BTD')">
                  Info
                </c-button>
                </el-popover>
              
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-box" style="display:block">
             <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="pagination.pageIndex"
              :page-sizes="[10, 20, 50, 100, 500]"
              :page-size="pagination.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pagination.total">
          </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="转让证单据"  name="bt">
             <el-table
              v-loading="load"
              height="calc(100vh - 480px)"
              border
              :data="stmDataBt.data"
              :columns="stmDataBt.columns"
              :showButtonFlg="true"
              :highlight-current-row="true"
              @row-click="TableRowClick"
              @row-dblclick="TableDblRow"
          >
            <el-table-column
                v-for="(item, key) in stmDataBt.columns"
                :key="key"
                :label="item.label"
                :prop="item.prop"
                :min-width="item.width"
            >
              <template  slot-scope="scope">
                <div style="text-align: center" v-if="item.prop.indexOf('amt') >= 0">{{moneyFormat(scope.row[item.prop],scope.row.cur)}}</div>
                <div v-else>{{scope.row[item.prop]}}</div>
              </template>
            </el-table-column>
            <!-- 自定义组件里加了最右边的一列”操作“ -->
            <el-table-column fixed="right" prop="op" label="操作" width="180px">
              <template slot="header">
                <!-- 插槽里放了一个文字 一个按钮 -->
                <c-col :span="11" style="text-align: center"
                  ><span>操作</span>
                </c-col>
              </template>
              <template slot-scope="scope">
                <c-button
                  style="margin-right: 7px"
                  size="small"
                  type="text"
                  @click="handler(scope.row)"
                >处理
                </c-button>
                <!-- 申请一个弹出主键放在插槽，加工已渲染的数据 -->
                <el-popover
                  placement="top-start"
                  title="历史信息"
                  width="1200"
                  trigger="manual" v-clickOutside="closeDisplayDialog"
                  :ref="'popover_' + scope.row.inr"
                >
                  <div
                    style="
                      text-align: right;
                      margin-top: -30px;
                      margin-right: 5px;
                      font-size: 16px;
                    "
                  >
                    <span
                      class="el-icon-close"
                      style="cursor: pointer"
                      @click="closeDetailsDialog('popover_' + scope.row.inr)"
                    ></span>
                  </div>
                  <el-table
                      :data="trnData.data"
                      :columns="trnData.columns"
                      :showButtonFlg="true"
                  >
                    <el-table-column
                        v-for="(item, key) in trnData.columns"
                        :key="key"
                        :label="item.label"
                        :prop="item.prop"
                        :width="item.width"
                    >
                      <template slot-scope="scope">
                        <div>{{ scope.row[item.prop] }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column
                        fixed="right"
                        prop="op"
                        label="操作"
                        width="100px"
                    >
                      <template slot-scope="scope">
                        <c-button
                            style="margin-left: 0"
                            size="small"
                            @click="display(scope.row)"
                        >快照</c-button
                        >
                      </template>
                    </el-table-column>
                  </el-table>
                  <c-button
                    style="margin-left: 0px"
                    size="small"
                    type="text"
                    @click="details(scope.row)"
                    slot="reference"
                  >
                    快照
                  </c-button>
                  <c-button style="margin-left: 0" type="text" size="small" slot="reference" @click="toInfo(scope.row,'BTD','BPD')">
                    Info
                  </c-button>
                </el-popover>
              
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-box" style="display:block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="pagination.pageIndex"
              :page-sizes="[10, 20, 50, 100, 500]"
              :page-size="pagination.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pagination.total">
          </el-pagination>
          </div>
        </el-tab-pane >
         <el-tab-pane label="融资信息"  name="bp">
             <el-table
              v-loading="load"
              height="calc(100vh - 480px)"
              border
              :data="stmDataBp.data"
              :columns="stmDataBp.columns"
              :showButtonFlg="true"
              :highlight-current-row="true"
              @row-dblclick="TableDblRow"
          >
            <el-table-column
                v-for="(item, key) in stmDataBp.columns"
                :key="key"
                :label="item.label"
                :prop="item.prop"
                :min-width="item.width"
            >
              <template  slot-scope="scope">
                <div style="text-align: center" v-if="item.prop.indexOf('amt') >= 0">{{moneyFormat(scope.row[item.prop],scope.row.cur)}}</div>
                <div v-else>{{scope.row[item.prop]}}</div>
              </template>
            </el-table-column>
            <!-- 自定义组件里加了最右边的一列”操作“ -->
            <el-table-column fixed="right" prop="op" label="操作" width="180px">
              <template slot="header">
                <!-- 插槽里放了一个文字 一个按钮 -->
                <c-col :span="11" style="text-align: center"
                  ><span>操作</span>
                </c-col>
              </template>
              <template slot-scope="scope">
                <c-button
                  style="margin-right: 7px"
                  size="small"
                  type="text"
                  @click="handler(scope.row)"
                >处理
                </c-button>
                <!-- 申请一个弹出主键放在插槽，加工已渲染的数据 -->
                <el-popover
                  placement="top-start"
                  title="历史信息"
                  width="1200"
                  trigger="manual" 
                  v-clickOutside="closeDisplayDialog"
                  :ref="'popover_' + scope.row.inr"
                >
                  <div
                    style="
                      text-align: right;
                      margin-top: -30px;
                      margin-right: 5px;
                      font-size: 16px;
                    "
                  >
                    <span
                      class="el-icon-close"
                      style="cursor: pointer"
                      @click="closeDetailsDialog('popover_' + scope.row.inr)"
                    ></span>
                  </div>
                  <el-table
                      :data="trnData.data"
                      :columns="trnData.columns"
                      :showButtonFlg="true"
                  >
                    <el-table-column
                        v-for="(item, key) in trnData.columns"
                        :key="key"
                        :label="item.label"
                        :prop="item.prop"
                        :width="item.width"
                    >
                      <template slot-scope="scope">
                        <div>{{ scope.row[item.prop] }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column
                        fixed="right"
                        prop="op"
                        label="操作"
                        width="100px"
                    >
                      <template slot-scope="scope">
                        <c-button
                            style="margin-left: 0"
                            size="small"
                            @click="display(scope.row)"
                        >快照</c-button
                        >
                      </template>
                    </el-table-column>
                  </el-table>
                  <c-button
                    style="margin-left: 0px"
                    size="small"
                    type="text"
                    @click="details(scope.row)"
                    slot="reference"
                  >
                    快照
                  </c-button>
                  <c-button style="margin-left: 0" type="text" size="small" slot="reference" @click="toInfo(scope.row,'BPD','')">
                          Info
                        </c-button>
                </el-popover>
              
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-box" style="display:block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="pagination.pageIndex"
              :page-sizes="[10, 20, 50, 100, 500]"
              :page-size="pagination.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pagination.total">
          </el-pagination>
          </div>
        </el-tab-pane >
         <el-tab-pane label="委托方代付" name="df">
              <div style="height: 90%">
              <c-col :span="24">
                <el-table v-loading="load"
                  height="calc(100vh - 480px)" border
                 :data="stmDataDf.data" :columns="stmDataDf.columns" :highlight-current-row="true"  @row-dblclick="TableDblRow" :showButtonFlg="true">
                  <el-table-column v-for="(item, key) in stmDataDf.columns" :key="key" :label="item.label" :prop="item.prop" :min-width="item.width">
                    <template  slot-scope="scope">
                      <div style="text-align: center" v-if="item.prop.indexOf('amt') >= 0">{{moneyFormat(scope.row[item.prop],scope.row.cur)}}</div>
                      <div v-else>{{scope.row[item.prop]}}</div>
                    </template>
                  </el-table-column>
                  <el-table-column fixed="right" prop="op" label="操作" width="180px">
                    <template slot="header">
                      <c-col :span="11" style="text-align: center">
                        <span>操作</span>
                      </c-col>
                    </template>
                    <template slot-scope="scope">
                      <c-button style="margin-right: 5px" size="small" type="text" @click="handler(scope.row)">处理
                      </c-button>
                      <el-popover placement="top-end" title="历史信息" width="1200" 
                  trigger="manual" 
                  v-clickOutside="closeDisplayDialog" :ref="'popover_' + scope.row.inr">
                        <div style="
                    text-align: right;
                    margin-top: -30px;
                    margin-right: 5px;
                    font-size: 16px;
                  ">
                          <span class="el-icon-close" style="cursor: pointer" @click="closeDetailsDialog('popover_' + scope.row.inr)"></span>
                        </div>
                        <el-table :data="trnData.data" :columns="trnData.columns" :showButtonFlg="true">
                          <el-table-column v-for="(item, key) in trnData.columns" :key="key" :label="item.label" :prop="item.prop" :width="item.width">
                            <template slot-scope="scope">
                              <div>{{ scope.row[item.prop] }}</div>
                            </template>
                          </el-table-column>
                          <el-table-column fixed="right" prop="op" label="操作" width="100px">
                            <template slot-scope="scope">
                              <c-button style="margin-left: 0" size="small" @click="display(scope.row)">快照</c-button>
                            </template>
                          </el-table-column>
                        </el-table>
                        <c-button style="margin-left: 0" type="text" size="small" slot="reference" @click="details(scope.row)">
                          快照
                        </c-button>
                        <c-button style="margin-left: 0" type="text" size="small" slot="reference" @click="toInfo(scope.row,'DFD','')">
                          Info
                        </c-button>
                      </el-popover>

                    </template>
                  </el-table-column>
                </el-table>
                <div class="pagination-box" style="display:block"> 
                   <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page.sync="pagination.pageIndex"
                      :page-sizes="[10, 20, 50, 100, 500]"
                      :page-size="pagination.pageSize"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="pagination.total">
                  </el-pagination>
                </div>
              </c-col>
            </div>
          </el-tab-pane>
      </c-tabs>
      </c-col>
      <!-- 点击处理弹框 -->
      <el-dialog
          v-if ="initdialog"
					v-dialogDrag
          :visible.sync="initdialog"
          title="交易列表"
          append-to-body
          width="75%"
      >
       <m-busbtn ref="childs" :trnUrl="trnUrl" :inifrm="inifrm" :activeTab="activeTab" :model="handleModel" @onChoose="handleClick"></m-busbtn>
      </el-dialog>
      <el-dialog v-dialogDrag v-if="sptVisible" :visible.sync="sptVisible" :title="'当前业务存在以下待处理数据'" :append-to-body="true">
        <el-table :data="dealSptData" style="width:100%" size="small" :border="true">
          <el-table-column label="数据状态" prop="sta" align="left" min-width="80px">
            <template slot-scope="scope">
              <c-select-value-to-label v-model="scope.row.sta" dbCode="SPTSTA" disabled>
              </c-select-value-to-label>
            </template>
          </el-table-column>
          <el-table-column label="操作时间" prop="dattim" align="left" min-width="100px">
          </el-table-column>
          <el-table-column label="描述" prop="objnam" align="left" min-width="200px">
          </el-table-column>
          <el-table-column label="操作人" prop="usr" align="left" min-width="80px">
          </el-table-column>
        </el-table>
        <div slot="footer">
          <el-button @click="sptVisible = false">取消</el-button>
          <el-button type="primary" @click="$goRoute && $goRoute()">继续</el-button>
        </div>
      </el-dialog>
    <!--业务锁及待处理数据弹窗-->
    <m-chklap ref="lockAndPending"  @changeBtn="changeBtn"></m-chklap>

    </div>

  </div>
</template>
<script>
import BusNavbar from "~/components/business/BusNavbar1";
import event from "../event";
import CheckLockAndPending from "~/components/business/CheckLockAndPending";

export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [event],
  components: { "m-busbtn": BusNavbar ,
    "m-chklap": CheckLockAndPending,},
  data() {
    return {
      sptVisible:false,
      dealSptData:[],
      initdialog: false,
      curinr: "",
      ownref: "",
      oldRefId:"",
      activeTab: "le",
      selectedModel:{},
      selectedModelLe:{},
      selectedModelLt:{},
      handleModel:{},
      queryCon:{},
      trnUrl:"",
      inifrm:"",
      load:false,
      trnData: {
        columns: [
          {
            label: "业务编号",
            prop: "ownref",
            width:"160"
          },
          {
            label: "交易名称",
            prop: "inifrmname",
            width:"220"
          },
          {
            label: "交易码",
            prop: "inifrm",
            width:"100"
          },
          {
            label: "交易时间",
            prop: "inidattim",
            width:"160"
          },
          {
            label: "状态",
            prop: "relflgName",
            width:"100"
          },
          {
            label: "币种",
            prop: "reloricur",
            width:"100"
          },
          {
            label: "金额",
            prop: "reloriamt",
            width:"150"
          },
        ],
        data: [],
      },
      stmData: {
        columns: [
          {
            label: "业务编号",
            prop: "ownref",
            width: "200px"
          },
          {
            label: "客户号",
            prop: "benExtkey",
            width: "180px"
          },
          {
            label: "客户名称",
            prop: "benName",
            width: "250px"
          },
          {
            label: "币种",
            prop: "cur",
            width: "120px"
          },
          {
            label: "金额",
            prop: "amt",
            width: "120px"
          },
          {
            label: "日期",
            prop: "credat",
            width: "150px"
          },
          {
            label: "到期日",
            prop: "expdat",
            width: "150px"
          },
          {
            label: "经办柜员",
            prop: "ownusr",
            width: "120px"
          },
        ],
        data: [
         ],
      },
       stmDataBe: {
        columns: [
          {
            label: "业务编号",
            prop: "ownref",
            width: "200px"
          },
           {
            label: "信用证编号",
            prop: "pntref",
            width: "200px"
          },
          {
            label: "客户号",
            prop: "benExtkey",
            width: "200px"
          },
          {
            label: "客户名称",
            prop: "benName",
            width: "250px"
          },
          {
            label: "币种",
            prop: "cur",
            width: "120px"
          },
          {
            label: "单据金额",
            prop: "amt",
            width: "120px"
          },
           {
            label: "日期",
            prop: "credat",
            width: "200px"
          },
           {
            label: "单据到期日",
            prop: "matdat",
            width: "200px"
          },
          {
            label: "经办柜员",
            prop: "ownusr",
            width: "120px"
          },
        ],
        data: [  ],
      },
       stmDataLt: {
        columns: [
          {
            label: "业务编号",
            prop: "ownref",
            width: "200px"
          },
           {
            label: "信用证编号",
            prop: "leownref",
            width: "200px"
          },
          {
            label: "客户号",
            prop: "be1Extkey",
            width: "200px"
          },
          {
            label: "客户名称",
            prop: "be1Name",
            width: "250px"
          },
           {
            label: "币种",
            prop: "cur",
            width: "120px"
          },

          {
            label: "金额",
            prop: "amt",
            width: "120px"
          },
          {
            label: "日期",
            prop: "credat",
            width: "150px"
          },   
          {
            label: "经办柜员",
            prop: "ownusr",
            width: "120px"
          },
        ],
        data: [  ],
      },
        stmDataBt: {
        columns: [
          {
            label: "业务编号",
            prop: "ownref",
            width: "200px"
          },
          {
            label: "转让证编号",
            prop: "pntref",
            width: "200px"
          },
          {
            label: "客户号",
            prop: "be1Extkey",
            width: "200px"
          },
          {
            label: "客户名称",
            prop: "be1Name",
            width: "250px"
          },
          {
            label: "币种",
            prop: "cur",
            width: "120px"
          },
          {
            label: "单据金额",
            prop: "amt",
            width: "120px"
          },
          {
            label: "日期",
            prop: "credat",
            width: "150px"
          },
          {
            label: "经办柜员",
            prop: "ownusr",
            width: "120px"
          },
        ],
        data: [
          ],
      },
       stmDataBp: {
      columns: [
          {
            label: "业务编号",
            prop: "ownref",
            width: "180px"
          },
          {
            label: "单据编号",
            prop: "pntref",
            width: "180px"
          },
          {
            label: "客户号",
            prop: "fiaExtkey",
            width: "120px"
          },
          {
            label: "客户名称",
            prop: "fiaName",
            width: "250px"
          },
          {
            label: "融资币种",
            prop: "cur",
            width: "120px"
          },
          {
            label: "融资金额",
            prop: "amt",
            width: "120px"
          },
          {
            label: "日期",
            prop: "credat",
            width: "120px"
          },
          {
            label: "到期日",
            prop: "matdat",
            width: "120px"
          },
           {
            label: "经办柜员",
            prop: "ownusr",
            width: "120px"
          },
         
        ],
        data: [
        ]
      },
       stmDataDf: {
        columns: [
          {
            label: "业务编号",
            prop: "ownref",
            width: "180px"
          },
          {
            label: "父业务编号",
            prop: "pntref",
            width: "180px"
          },
           {
            label: "日期",
            prop: "credat",
            width: "120px"
          },
          {
            label: "币种",
            prop: "cur",
            width: "120px"
          },
          {
            label: "代付金额",
            prop: "amt",
            width: "120px"
          },
          {
            label: "代付行行号",
            prop: "dffExtkey",
            width: "120px"
          },
          {
            label: "代付行名称",
            prop: "dffName",
            width: "250px"
          },
          {
            label: "到期日",
            prop: "matdat",
            width: "120px"
          },
          {
            label: "经办柜员",
            prop: "ownusr"
          },
         
        ],
        data: [
        ]
      },

      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      },

      initdialog: false,
      handlerDataList: [],
      currentHandleRow: {},
    };
  },

  methods: {},
  mounted: function () {},
};
</script>
<style>
.pagination-box {
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 10px;
  background: #fff;
  margin-top: 5px;
}
.btn-group-wrap {
  max-height: 200px;
  width: 100%;
  overflow-y: auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.btn-item {
  margin-bottom: 10px;
  margin-right: 10px;
}
.medium_bcs {
  border-radius: 5px;
}
</style>