<template>
  <div class="eibs-tab">
    <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">
          <el-row>
            <c-col :span="8">
              <el-form-item label="信用证编号" prop="infcon.seaownref" style="width: 100%">
                <c-input v-model="model.infcon.seaownref" 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" 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" maxlength="16" placeholder="请输入当事人参考号"></c-input>
              </el-form-item>
            </c-col>
          </el-row>

          <el-row v-show="searchSlot.searchToggle">
            <c-col :span="8">
              <el-form-item label="当事人编号" prop="infcon.pty.extkey" style="width: 100%">
                <c-input v-model="model.infcon.pty.extkey" maxlength="24" placeholder="请输入当事人编号"></c-input>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="当事人名称" prop="infcon.pty.nam" style="width: 100%">
                <c-input v-model="model.infcon.pty.nam" maxlength="40" placeholder="请输入当事人名称"></c-input>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="当事人BIC编码" prop="infcon.seapty" style="width: 100%">
                <c-input v-model="model.infcon.seapty" maxlength="24" placeholder="当事人BIC编码"></c-input>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="业务简略信息" prop="infcon.nam" style="width: 100%">
                <c-input v-model="model.infcon.nam" maxlength="40" placeholder="请输入业务简略信息"
                  style="width: 100%"></c-input>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="当事人角色" prop="infcon.searol" style="width: 100%">
                <c-select v-model="model.infcon.searol" style="width: 100%" placeholder="请选择当事人角色" :code="codes.payrol">
                </c-select>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="客户经理" prop="infcon.usr.extkey" style="width: 100%">
                <c-input v-model="model.infcon.usr.extkey" maxlength="8" placeholder="请输入客户经理"></c-input>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="业务状态" prop="infcon.seasta" style="width: 100%">
                <c-select v-model="model.infcon.seasta" style="width: 100%" placeholder="请选择业务状态">
                  <el-option v-for="item in codes.seasta" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </c-select>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="币种" prop="infcon.seacur" style="width: 100%">
                <c-select v-model="model.infcon.seacur" style="width: 100%" placeholder="请选择币种" :code="codes.cur">
                  <el-option v-for="item in codes.seacur" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </c-select>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="金额区间" prop="infcon.seaamtfr" style="width: 100%">
                <c-col :span="11">
                  <c-input v-model="model.infcon.seaamtfr" placeholder="请输入金额下限" style="width: 100%"></c-input>
                </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-input v-model="model.infcon.seaamtto" placeholder="请输入金额上限" style="width: 100%"></c-input>
                </c-col>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="保兑指示" prop="seacnfdet" style="width: 100%">
                <c-select v-model="model.seacnfdet" style="width: 100%" placeholder="请选择保兑指示">
                  <el-option v-for="item in codes.cnfins" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </c-select>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="信用证类型" prop="sealcrtyp" style="width: 100%">
                <c-select v-model="model.sealcrtyp" :code="codes.lcrtyp" style="width: 100%" placeholder="请选择信用证类型">
                </c-select>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="货物类型" prop="seagodcod" style="width: 100%">
                <c-select v-model="model.seagodcod" style="width: 100%" placeholder="请选择货物类型">
                  <el-option v-for="item in codes.godcod" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </c-select>
              </el-form-item>
            </c-col>
          </el-row>
        </el-form>
      </template>
    </c-list-search>

    <c-col :span="24" style="margin-top: 10px">
      <c-button class="medium_bcs" size="medium" type="primary" style="margin-left: 0px" title="LITOPN"
        @click="toLitopn">
        进口信用证开立
      </c-button>
    </c-col>
 
        <div style="height: 90%">
      <c-col :span="24">
        <el-table
          :data="stmData.data"
          :columns="stmData.columns"
          :showButtonFlg="true"
        >
          <el-table-column
            v-for="(item, key) in stmData.columns"
            :key="key"
            :label="item.label"
            :prop="item.prop"
          ></el-table-column>
          <el-table-column fixed="right" prop="op" label="操作" width="140px">
            <template slot="header">
              <c-col :span="11" style="text-align: center">
                <span>操作</span>
              </c-col>
            </template>
            <template slot-scope="scope">
              <el-popover
                placement="top-start"
                title="历史信息"
                width="800"
                trigger="click"
                :ref="'popover_' + scope.row.IDX"
              >
                <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.IDX)"
                  ></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"
                  >
                    <template slot-scope="scope">
                      <div>{{ scope.row[item.prop] }}</div>
                     </template>
                  </el-table-column>
                  <el-table-column fixed="right" prop="op" label="操作" width="250px" >
                    <template slot-scope="scope">
                      <c-button
                        style="margin-left: 0"
                        size="small"
                        @click="display(scope.row['inr'])"
                        >详情</c-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
                <c-button
                  style="margin-left: 0"
                  size="small"
                  slot="reference"
                  @click="details(scope.row)">
                  详情
                </c-button>
              </el-popover>
              <c-button
                style="margin-left: 5px"
                size="small"
                type="primary"
                @click="handler(scope.row)"
              >处理
              </c-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-box">
          <el-pagination
          style="margin-right: 30px;"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pagination.pageIndex"
          :page-sizes="[10, 20, 50, 100, 500]"
          :page-size="pagination.pageSize"
          layout="sizes, prev, pager, next"
          :total="pagination.total">
        </el-pagination>
        </div>
      </c-col>
    </div>
  <!-- 点击处理弹框 -->
  <el-dialog
      :visible.sync="initdialog"
      title="交易列表"
      append-to-body
      width="60%"
    >
      <div class="dialog-wrap">
        <div class="btn-group-wrap">
          <div class="btn-item" v-for="(item, index) in handlerDataList" :key="index">
            <el-button
              type="primary"
              :disabled="item.value === 'N'"
              @click="handleClick(item)"
            >{{ item.label }}</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="litdckdialog">
        <el-table :data="dckData" :columns="dckColumns" style="width:100%" @row-dblclick="checkData">
            <el-table-column
                v-for="(item, key) in dckColumns"
                :key="key"
                :label="item.label"
                :prop="item.prop"   
            >
            </el-table-column>
        </el-table>
      </el-dialog>

    <!-- <m-busbtn ref="childs" :ownref="ownref" trnCode="litsel" :model="litselModel" ownrefPath="lidget.lid.ownref">
    </m-busbtn> -->
  </div>
</template>
<script>
import event from '../event'

export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [event],
  components: {},
  data() {
    return {
      ownref: "",
      isGuarantee: "",
      litdckdialog:false,
      dckData:[],
      dckColumns: [
        { label: 'inr', prop: 'inr', width: '120' },
        { label: '单据申请号', prop: 'ownref', width: '120' },
        { label:'Nam',prop:'nam',width:'120'}
      ],
      // 表格相关
      stmData: {
        columns: [
          {
            label: '信用证编号',
            prop: 'seaownref'
          },
          {
            label: '客户经理',
            prop: 'ownusr'
          },
          {
            label: '币种',
            prop: 'seacur'
          },
          
          {
            label: '金额',
            prop: 'maxamt',
            
          },
          {
            label: '余额',
            prop: 'opnamt'
          },
          {
            label: '开立日期',
            prop: 'opndat'
          },
          {
            label: '申请人编号',
            prop: 'aplextkey',
     
          },
          {
            label: '申请人名称',
            prop: 'aplnam'
          },
          {
            label: '通知银行BIC编码',
            prop: 'seapty'
          },
          {
            label: '受益人名称',
            prop: 'benefi'
          }, 
          {
            label: '远离期限',
            prop: 'tenmaxday'
          },
        ],
        data: [],
      },
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0
      },
      // 详情
      trnData: {
        columns: [
          {
            label: '交易id',
            prop: 'inr'
          },
          {
            label: '信用证编号',
            prop: 'seaownref'
          },
          {
            label: '交易名称',
            prop: 'ininam'
          },
          {
            label: '条目',
            prop: 'inidattim'
          },
          {
            label: '状态',
            prop: 'relflg'
          },
          {
            label: '币种',
            prop: 'reloricur'
          },
          {
            label: '相关金额',
            prop: 'reloriamt'
          },
          {
            label: '标识',
            prop: 'relres'
          },
        ],
        data: [],
      },
      // 处理
      initdialog: false,
      handlerDataList: [],
      btnRouteMap: [
        {
          label: '信用证注销',
          route: '/business-new/litcan'
        },
        {
          label: '信用证修改',
          route: '/business-new/litame'
        },
        {
          label: '保函索赔登记',
          route: '/business-new/litcrq'
        },
        {
          label:'保函收费',
          route:'/business-new/litfee'
        },
        {
          label:'绑定电子凭证',
          route:'/business-new/litatt'
        },
        {
          label:'保证金收取',
          route:'/business-new/lctopn'
        },
        {
          label:'到单',
          route:'/business-new/litdck'
        },
        {
          label:'通知到单',
          route:'/business-new/litdav'
        },
        {
          label:'减额修改接收',
          route:'/business-new/litdla'
        },
        {
          label:'通知到单',
          route:'/business-new/litdav'
        },
        {
          label:'提货担保',
          route:'/business-new/litrog'
        },
      ],
      currentHandleRow: {}
    };
  },
  methods: {
  },
  created: function () { },
};
</script>
<style scope>
.m-table-search {
  padding: 
  20px 0px 10px 0px;
}
.pagination-box {
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 10px;
  background: #fff;
  margin-top: 5px;
}
.el-dialog__body {
  padding: 10px 5px 50px;
}

.m-table-search {
  padding: 20px 0px 10px 0px;
}

.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;
}
</style>