<template>
  <div class="eibs-tab">
    <c-list-search @form-reset="handleReset" @form-search="formSubmit">
      <!-- 持续展示区 -->
      <template v-slot="searchSlot">
        <el-form class="m-table-search-form" ref="paramsForm" label-position="right" label-width="110px" size="small" :model="model">
          <el-row>
             <c-col :span="8">
              <el-form-item v-if="activeTab === 'sp'" label="索赔编号" style="width: 100%">
                <c-input v-model.trim="model.claimownref"  maxlength="18" placeholder="请输入保函编号"></c-input>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="保函编号" style="width: 100%">
                <c-input v-model.trim="model.seaownref" maxlength="16" placeholder="请输入保函编号"></c-input>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item v-if="activeTab !== 'sp'" label="开立日期" style="width: 100%">
                <c-col :span="11">
                  <c-date-picker type="date" v-model="model.opndatfrom" style="width: 100%" placeholder="请选择起始日期" value-format="yyyy-MM-dd"></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.opndatto" style="width: 100%" placeholder="请选择截止日期" value-format="yyyy-MM-dd"></c-date-picker>
                </c-col>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="开立类别" style="width: 100%">
                <c-select collapse-tags multiple v-model="model.gidopentyps" style="width: 100%" placeholder="请选择开立类别" :clearable="true" dbCode="trntyp">
                </c-select>
              </el-form-item>
            </c-col>
          </el-row>

          <!-- 可控展示区 -->
          <el-row v-show="searchSlot.searchToggle">
            <c-col :span="24">
              <c-col :span="8">
                <el-form-item v-if="false" label="开立方式" style="width: 100%">
                  <c-select v-model="model.hndtyps" collapse-tags multiple style="width: 100%" placeholder="请选择开立方式" :clearable="true" uil="CN" dbCode="hndtyp">
                  </c-select>
                </el-form-item>
              </c-col>
              
              <c-col :span="8">
                <el-form-item label="客户号/名称" style="width: 100%">
                  <c-input v-model.trim="model.ptyExtkey" maxlength="16" placeholder="请输入客户号/名称"></c-input>
                </el-form-item>
              </c-col>
              
               <c-col :span="8">
                <el-form-item v-if="activeTab !== 'sp'" label="是否结清" style="width: 100%">
                  <c-select v-model="model.isclear" style="width: 100%"  placeholder="请选择是否结清" :clearable="true" dbCode='cxmflg'>
                  </c-select>
                </el-form-item>
              </c-col>
              <c-col :span="8">
                  <el-form-item v-if="activeTab === 'sp'" label="结清状态" style="width: 100%">
                    <c-select v-model="model.clssta" collapse-tags style="width: 100%" placeholder="请选择结清状态" dbCode="cxmflg">
                    </c-select>
                  </el-form-item>
                </c-col>
              	<c-col :span="8">
                  <el-form-item v-if="activeTab === 'sp'" label="索赔状态" style="width: 100%">
                    <c-select v-model="model.claimsta" style="width: 100%" clearable placeholder="请选择索赔状态"
                          dbCode="clmsta">
                    </c-select>
                  </el-form-item>
                </c-col>
              <!-- <c-col :span="8">
                <el-form-item label="开立方式" style="width: 100%">
                  <c-select v-model="model.seapurpos" :filterKey="['ISSU','TRANSFER','ISCO','ICCO']" style="width: 100%" placeholder="请选择开立方式"  :clearable="true" uil="CN" dbCode="purpos">
                  </c-select>
                </el-form-item>
              </c-col>

              <c-col :span="8">
                <el-form-item label="电子渠道类型" style="width: 100%">
                  <c-select v-model="model.fromflg" style="width: 100%" :filterKey="['E','Y']" placeholder="请选择电子渠道类型" :clearable="true" dbCode="frmflg">
                  </c-select>
                </el-form-item>
              </c-col> -->
             
             <!-- <c-col :span="8">
                <el-form-item v-if="activeTab === 'sp'" label="索赔日期" style="width: 100%">
                    <c-col :span="11">
                      <c-date-picker type="date" v-model="model.claimdatfrom" style="width: 100%" placeholder="请选择起始日期" value-format="yyyy-MM-dd"></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.claimdatto" style="width: 100%" placeholder="请选择截止日期" value-format="yyyy-MM-dd"></c-date-picker>
                    </c-col>
                  </el-form-item>
            </c-col> -->
          
              <!-- <c-col :span="8">
                <el-form-item style="text-align: left;" class="checkbox-left" >
                  <c-checkbox true-label="X" false-label="" v-model="model.fenlishi">分离式保函
                  </c-checkbox>
                </el-form-item>
              </c-col>
              <c-col :span="8">
                <el-form-item style="text-align: right;"  class="checkbox-left">
                  <c-checkbox true-label="X" false-label="" v-model="model.fingua">融资类保函
                  </c-checkbox>
                </el-form-item>
              </c-col>

              <c-col :span="8">
                <el-form-item style="text-align: right;"  class="checkbox-left">
                  <c-checkbox true-label="X" false-label="" v-model="model.cmtflg">跨境人民币保函
                  </c-checkbox>
                </el-form-item>
              </c-col> -->
            </c-col>
          </el-row>
        </el-form>
      </template>
    </c-list-search>

    <!-- 保函开立入口 -->
    <el-col :span="24" style="margin-top: 10px;margin-bottom: 10px;">
      <c-button class="medium_bcs" size="medium" type="primary"  @click="toOpn(gopnCode)" style="margin-left: 0px">
        国际保函开立
        <!-- {{gopnCode == 'gitpop' ? "国际保函开立登记" :"国际保函开立"}} -->
      </c-button>
      <c-button class="medium_bcs" size="medium" type="primary" @click="toOpn(nopnCode)" style="margin-left: 30px">
        国内保函开立
        <!-- {{nopnCode == 'nitpop' ? "国内保函开立登记" :"国内保函开立"}} -->
        </c-button>
      <c-button style="margin-left: 30px" class="medium_bcs" size="medium" type="primary"  @click="toOpn(hopnCode)"  >
        海关税款担保保函开立
        <!-- {{hopnCode == 'hitpop' ? "海关税款担保保函开立登记" :"海关税款担保保函开立"}} -->
      </c-button>
    </el-col>

    <el-col :span="24" style="margin-top: 10px">
      <el-tabs v-model="activeTab" @tab-click="handleClick" class="y-tabs">
        <!-- 保函信息 -->
        <el-tab-pane label="保函信息" name="bs">
          <div style="height: 90%">
            <c-col :span="24">
              <el-table id='infgidBSTableRef' v-loading="load" :data="tableData" style="width:100%" size="small" :border="true" height="calc(100vh - 480px)" :highlight-current-row="true" @row-click="TableRowClick" @row-dblclick="TableDblRow">

                <el-table-column label="保函编号" prop="ownref" align="left" fixed="left" min-width="150">
                </el-table-column>
                <el-table-column label="开立类别" prop="opentyp" align="left" min-width="150" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <span> {{getCodelabel(scope.row.opentyp,'trntyp') }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="币种" prop="cur" align="left" min-width="150" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column label="金额" prop="amt" align="left" min-width="120">
                  <template slot-scope="scope">
                    <span> {{moneyFormat(scope.row.amt, scope.row.cur) }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="余额" prop="amt1" align="left" min-width="150" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <span> {{moneyFormat(scope.row.amt1, scope.row.cur) }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="开立日期" prop="opndat" align="left" min-width="150" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column label="申请人名称" prop="aplnam" align="left" min-width="370" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column label="受益人名称" prop="bennam" align="left" min-width="400" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column label="有效期" prop="expdat" align="left" min-width="150" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column label="结清日期" prop="staDate" align="left" min-width="150" :show-overflow-tooltip="true">
                </el-table-column>
                <!-- <el-table-column label="保函状态" prop="clssta" align="left" min-width="150" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <span> {{getCodelabel(scope.row.clssta,"clssta") }}
                    </span>
                  </template>
                </el-table-column> -->
                <el-table-column label="开立方式"  prop="purpos" align="left" min-width="150" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <span> {{scope.row.opentyp === 'GJBH' ? getCodelabel(scope.row.purpos,"purpos") : getCodelabel(scope.row.hndtyp,"hndtyp") }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="保函类型" prop="gartyp" align="left" min-width="150" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <span> {{getCodelabel(scope.row.gartyp,"typgar") }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="是否对外担保" prop="fingua" align="left" min-width="150" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <span> {{getCodelabel(scope.row.fingua,"fingua") }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="修改次数" prop="amenbr" align="left" min-width="150" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column label="索赔次数" prop="gcdcnt" align="left" min-width="150" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column label="电子渠道类型" prop="fromflg" align="left" min-width="150" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <span> {{getCodelabel(scope.row.fromflg,"frmflg") }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="反担保行" prop="garbnk" align="left" min-width="150" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column label="转开行" prop="issnam" align="left" min-width="150" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column label="反担保有效期" prop="liadat" align="left" min-width="150" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="240px">
                  <template slot-scope="scope">
										<c-button style="margin-left: 0" type='text' size="small" @click="getButtons(scope.row,'getGitselTrnCode')">处理</c-button>
										<el-popover v-clickOutside="closeDisplayDialog" :ref="`popover-${scope.row.inr}`" trigger="manual" placement="top-end">
											<div class="header-wrap">
												<div class="title">关联交易</div>
												<div class="close-btn" @click="handleCloseInfo(scope.row)"><i class="el-icon-close"></i></div>
											</div>
											<div style="max-height:400px;overflow: auto;">
												<el-table :data="infoTableData" style="width:100%" size="small" :border="true">
													<el-table-column label="编号" prop="ownref" align="left" width="150">
													</el-table-column>
													<el-table-column label="交易名称" prop="inifrmname" align="left" width="100">
													</el-table-column>
													<el-table-column label="交易码" prop="inifrm" align="left" width="100">
													</el-table-column>
													<el-table-column label="交易时间" prop="inidattim" align="left" width="200">
													</el-table-column>
													<el-table-column label="状态" prop="relflgName" align="left" width="100">
													</el-table-column>
													<el-table-column label="币种" prop="reloricur" align="left" width="100">
													</el-table-column>
													<el-table-column label="金额" prop="reloriamt" align="left" width="150">
														<template slot-scope="scope">
															<span> {{ moneyFormat(scope.row.reloriamt, scope.row.reloricur) }}</span>
														</template>
													</el-table-column>
													<el-table-column fixed="right" label="操作" width="100">
														<template slot-scope="scope">
															<c-button style="margin-left: 5px" type='text' size="small" @click="goDisplay(scope.row)">快照</c-button>
														</template>
													</el-table-column>
												</el-table>
											</div>
                    	<c-button slot="reference" style="margin-left: 5px" type='text' size="small" @click="showDisplayDialog(scope.row)">详情</c-button>
										</el-popover>
										<c-button style="margin-left: 0" type='text' size="small" @click="clickInfo(scope.row)">Info</c-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" :page-size="pagination.pageSize" :current-page.sync="pagination.pageNum" 
          @size-change="handleSizeChange" @current-change="currentChange">
              </el-pagination>
            </c-col>
          </div>
        </el-tab-pane>
        <!-- 索赔信息 -->
        <el-tab-pane label="索赔信息" name="sp">
          <div style="height: 90%">
            <c-col :span="24">
              <el-table id='infgidSpTableRef' v-loading="spload" :data="spTableData" height="calc(100vh - 480px)" :highlight-current-row="true" :border="true" style="width:100%" size="medium" @row-dblclick="TableSpDblRow">
                <!--<el-table-column label="保函编号" prop="gidownref" width="150" align="left">
                </el-table-column>-->
                <el-table-column label="索赔编号" prop="ownref" min-width="155" align="left">
                </el-table-column>
                <el-table-column label="保函编号" prop="gidownref" min-width="155" align="left">
                </el-table-column>
                <el-table-column label="开立类别" prop="gidopentyp" align="left" min-width="100" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <span> {{getCodelabel(scope.row.gidopentyp,'trntyp') }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="索赔登记日期" prop="credat" min-width="120" align="left">
                </el-table-column>
                <el-table-column label="币种" prop="cur" min-width="100" align="left">
                </el-table-column>
                <el-table-column label="索赔金额" prop="gcdamt" min-width="100" align="left">
                  <template slot-scope="scope">
                    <span> {{moneyFormat(scope.row.gcdamt,2) }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="索赔余额" prop="gcdopnamt" min-width="100" align="left">
                  <template slot-scope="scope">
                    <span> {{moneyFormat(scope.row.gcdopnamt,2) }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="索赔状态" prop="claimsta" min-width="100" align="left">
                  <template slot-scope="scope">
                    <span> {{getCodelabel(scope.row.claimsta,"clmsta") }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="结清状态" prop="clearsta" min-width="100" align="left">
                  <template slot-scope="scope">
                    <span> {{getCodelabel(scope.row.clearsta,"clssta") }}
                    </span>
                  </template>
                </el-table-column>

                <el-table-column fixed="right" label="操作" min-width="250px">
                  <template slot-scope="scope">
                    <c-button style="margin-left: 5px" size="small" type="text" @click="getButtons(scope.row,'getGcdTrnCode')">处理</c-button>
                    <el-popover v-clickOutside="closeDisplayDialog" :ref="`popover-${scope.row.inr}`" trigger="manual" placement="top-end">
											<div class="header-wrap">
												<div class="title">关联交易</div>
												<div class="close-btn" @click="handleCloseInfo(scope.row)"><i class="el-icon-close"></i></div>
											</div>
											<div style="max-height:400px;overflow: auto;">
												<el-table :data="infoTableData" style="width:100%" size="small" :border="true">
													<el-table-column label="编号" prop="ownref" align="left" width="150">
													</el-table-column>
													<el-table-column label="交易名称" prop="inifrmname" align="left" width="100">
													</el-table-column>
													<el-table-column label="交易码" prop="inifrm" align="left" width="100">
													</el-table-column>
													<el-table-column label="交易时间" prop="inidattim" align="left" width="200">
													</el-table-column>
													<el-table-column label="状态" prop="relflgName" align="left" width="100">
													</el-table-column>
													<el-table-column label="币种" prop="reloricur" align="left" width="100">
													</el-table-column>
													<el-table-column label="金额" prop="reloriamt" align="left" width="150">
														<template slot-scope="scope">
															<span> {{ moneyFormat(scope.row.reloriamt, scope.row.reloricur) }}</span>
														</template>
													</el-table-column>
													<el-table-column fixed="right" label="操作" width="100">
														<template slot-scope="scope">
															<c-button style="margin-left: 5px" type='text' size="small" @click="goDisplay(scope.row)">快照</c-button>
														</template>
													</el-table-column>
												</el-table>
											</div>
                    	<c-button slot="reference" style="margin-left: 5px" type='text' size="small" @click="showDisplayDialog(scope.row)">详情</c-button>
										</el-popover>
                    <c-button style="margin-left: 0" size="small" type="text" @click="toDetailOth(scope.row)" slot="reference">Info</c-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="spPagination.total" :page-size="spPagination.pageSize" :current-page="spPagination.pageNum" @size-change="sphandleSizeChange" @current-change="spcurrentChange">
              </el-pagination>
            </c-col>
          </div>
        </el-tab-pane>
      </el-tabs>
      <!-- 自定义列属性弹框 -->
      <el-dialog v-dialogDrag class="showColumnDialog" v-if="showDig" :visible.sync="showDig" :title="'自定义列属性'" appenD-to-body style="padding:20px">
        <el-form-item label-width="0" style="display: flex;align-items: center">
          <el-checkbox-group v-model="columnGroup" @change="handleColumnChange">
            <el-checkbox class="selectColumnClass checkbox-left" style="margin-right:45px;" v-for="item in digColumns" :key="item.label" :label="item.label">{{ item.label }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <span slot="footer" style="text-align:center">
          <el-checkbox
						class="selectAllClass checkbox-left"
						:indeterminate="columnGroup.length > 0 && columnGroup.length < digColumns.length"
						v-model="selectAll"
						@change="setAll"
					>全选</el-checkbox>
          <el-button type="primary" @click="saveColumnEvent(spDefaultColumns)" style="margin-left:10px;">保存</el-button>
        </span>
      </el-dialog>
    </el-col>
    <!-- 处理弹框 -->
    <el-dialog v-dialogDrag v-if="handleVisible" :visible.sync="handleVisible" :title="'交易列表'">
      <div class="m-list-btns">
        <m-busbtn ref="childs" :ownref="ownref" trnCode="gitsel" ownrefPath="gidgrp" :codes="dbCodes" :model="handleModel" tabIndex="3" :queryCode="queryCode" :branch="branch" @onChoose="onChoose">11
        </m-busbtn>
      </div>
    </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>
  </div>
</template>
<script>
import event from "../event";
import BusNavbar from "~/components/business/BusNavbar";
import GitselModel from "~/page/Business/Gitsel/model";
import Api from "~/service/Api";
import { getSelectList } from "~/service/business/codeTable";
export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [event],
  components: { "m-busbtn": BusNavbar },

  data() {
    return {
      sptVisible:false,
      dealSptData:[],
      gitselModel: new GitselModel().data,
      activeTab: "bs", // tabs当前展示的tab
      spload: false,
      spTableData: [],
      spPagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      ownref: "",
      isGuarantee: "",
      hopnCode: "",
      selectAll: [], // 是否全选
      digColumns: [], // 弹框的所有列
      columnGroup: [], // 弹框选中的列
      showDig: false, // 弹框的展示/隐藏
      load: false,
      tableData: [],
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      handleVisible: false,
      handleModel: {},
      buttonsList: [],
      queryCode: "",
      branch: "",
      gopnCode: "",
      nopnCode: "",
      hopnCode: "",
      opentypLst: [],
			selectedModel: {},
      // 历史信息弹框
      oldinr :'',
			infoTableData: [],
			// =====
      isClaim:'',
       dbCodes:{
        buttonlabels:[],
        trntyp:[],
        purpos:[],
        hndtyp:[],
        typgar:[],
        fingua:[],
        frmflg:[],
        clmsta:[],
        clssta:[],
      },
    };
  },
  watch: {
    "$store.state.UserContext.currentOrg": {
      handler(newVal) {
        this.model.branch = newVal.departmentNumber;
        this.formSubmit();
        this.clearOpnCode();
        this.getInitButtons();
      },
      deep: true
    }
  },
  computed: {},

  mounted() {
    this.model.branch = JSON.parse(
      sessionStorage.getItem("currentOrg")
    ).departmentNumber;
    this.getInitButtons();
    this.getdbCode('atptxt','CN','buttonlabels');
    this.getdbCode('trntyp','CN','trntyp');
    this.getdbCode('purpos','CN','purpos');
    this.getdbCode('hndtyp','CN','hndtyp');
    this.getdbCode('clssta','CN','clssta');
    this.getdbCode('typgar','CN','typgar');
    this.getdbCode('fingua','CN','fingua');
    this.getdbCode('frmflg','CN','frmflg');
    this.getdbCode('clmsta','CN','clmsta');
    this.getdbCode('clssta','CN','clssta');
    // this.formSubmit();
  },
  methods: {
    ...event,
    // 保函/索赔信息点击处理
    getCodelabel(value,codenam) {
      const codeobj = this.dbCodes[codenam].find(obj => obj.value === value)
			return codeobj ? codeobj.label : value;
		}
  }
};
</script>
<style scoped lang="less">
.eibs-tabs
	/deep/ {
	.m-table-search {
		padding: 20px 0px 10px 0px;
	}
}
.header-wrap {
	height: 36px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.title {
		font-size: 16px;
		color: #000;
	}
	.close-btn {
		padding: 3px;
		cursor: pointer;
	}
}
.m-list-btns {
  height: 300px;
  overflow: auto;
}
.medium_bcs{
		border-radius: 5px;
}
</style>