<template>
  <div class="eibs">
    <c-list-search @form-reset="handleReset" @form-search="handleSearch">
      <!-- 持续展示区 -->
      <template v-slot="searchSlot">
        <el-form class="m-table-search-form" ref="paramsForm" label-position="right" label-width="110px"
          size="small">
            <c-row>
             <div v-if="activeTab == 'bo'">
              <c-col :span="24">
                <c-col :span="8">
                  <el-form-item label="业务编号" prop="infcon.seaownref" style="width: 100%">
                    <c-input v-model="model.infcon.seaownref" @change="changeOwnref" maxlength="16" 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" 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.infcon.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="infcon.searef" style="width: 100%">
                    <c-input v-model="model.infcon.searef"  placeholder="请输入客户名称"></c-input>
                  </el-form-item>
                </c-col>
              </c-col>
             </div>
              <div v-if="activeTab == 'bp'">
              <c-col :span="24">
                <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>
              </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>
            </c-row>
           
          <c-row v-show="searchSlot.searchToggle">
            <div  v-if="activeTab == 'bo'">
              <c-col :span="24">
                <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>
              </c-col>
            </div>
            <div v-if="activeTab == 'bp'">
              <c-col :span="24">
                <c-col :span="8">
                  <el-form-item label="父业务编号" prop="bpcon.pntref" style="width: 100%">
                    <c-input v-model="model.bpcon.pntref" 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>
              </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>
          </c-row>
        </el-form>
      </template>
    </c-list-search>
    <c-col :span="24" style="margin-top: 0px">
      <c-button class="medium_bcs" size="medium" style="margin-left: 0px" type="primary" @click="toBotdav">出口托收寄单</c-button>
    </c-col>

    <div style="height: 100%">
      <c-col :span="24">
        <c-tabs v-model="activeTab"  @tab-click="handleClickTab" type="card" ref="elment">
        <el-tab-pane label="出口托收" name="bo">
        <el-table
            v-loading="load"
            :data="stmData.data"
            :columns="stmData.columns"
            :showButtonFlg="true"
            :highlight-current-row="true"
            height="calc(100vh - 480px)"
            border
            @row-dblclick="TableDblRow"
            @row-click="TableRowClick"
        >
          <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,'BOD','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"
              :data="stmDataBp.data"
              :columns="stmDataBp.columns"
              :showButtonFlg="true"
              height="calc(100vh - 480px)"
              border
              :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>
      <!-- 点击处理ba弹框 -->
      <el-dialog
          v-if="initdialog"
					v-dialogDrag
          :visible.sync="initdialog"
          title="交易列表"
          append-to-body
          width="70%"
      >
       <m-busbtn ref="childs" :trnUrl="trnUrl" :inifrm="inifrm" :activeTab="activeTab" :model="handleModel" @onChoose="handleClick">
        </m-busbtn>
      </el-dialog>
     <!--业务锁及待处理数据弹窗-->
    <m-chklap ref="lockAndPending"  @changeBtn="changeBtn"></m-chklap>
    </div>

  </div>

</template>
<script>
import commonProcess from "~/mixin/commonProcess"
import event from "../event";
import BusNavbar from "~/components/business/BusNavbar1";
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:[],
      activeTab:'bo',
      selectedModelBc:{},
      selectedModelTr:{},
      handleModel:{},
      queryCon:{},
      oldRefId:"",
      trnUrl:"",
      inifrm:"",
      ownref: "",
      initdialog: false,
      load:false,
      dialogTableVisible: 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:"150px",
          },
          {
            label: "客户号",
            prop: "drrExtkey",
            width:"150px",
          },
          {
            label: "客户名称",
            prop: "drrName",
            width:"250px",
          }, {
            label: "付款人",
            prop: "dreExtkey",
            width:"150px",
          },
          {
            label: "付款人名称 ",
            prop: "dreName",
            width:"250px",
          },
           {
            label: "币种",
            prop: "cur",
            width:"80px",
          },
          {
            label: "金额",
            prop: "amt",
            width:"180px",
          },
          {
            label: "代收行名称",
            prop: "colName",
            width:"250px",
          },
          {
            label: "日期",
            prop: "credat",
            width:"150px",
          },
          {
            label: "结清日期",
            prop: "clsdat",
            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: "iniusr",
            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,
      },
      handlerDataList: [],
    };
  },
  methods: {
  
  },
  created: function () { },
};
</script>
<style>
.medium_bcs {
  border-radius: 5px;
}

</style>