<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>
            <c-col :span="8">
              <el-form-item label="Register Reference" style="width: 100%">
                <c-input
                  v-model="model.lmdgrp.rec.ownref"
                  maxlength="16"
                ></c-input>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item :label="$t('bus.开立日期')" style="width: 100%">
                <c-col :span="11">
                  <c-date-picker
                    type="date"
                    v-model="model.lrdgrp.rec.opndat"
                    style="width: 100%"
                    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.lrdgrp.rec.maturity"
                    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="Credit Reference" style="width: 100%">
                <c-input
                  v-model="model.lrdgrp.rec.ownref"
                  maxlength="16"
                ></c-input>
              </el-form-item>
            </c-col>
          </el-row>
          <el-row v-show="searchSlot.searchToggle">
            <c-col :span="8">
              <el-form-item label="Credit Amount">
                <c-col :span="17">
                  <c-select v-model="model.lrdgrp.cbs.nom1.cur" dbCode="curtxt"> </c-select>
                </c-col>
                <c-col :span="6" :offset="1">
                  <c-input-currency
                    :currency="model.lrdgrp.cbs.nom1.cur"
                    v-model="model.lrdgrp.cbs.nom1.amt"
                    style="width: 100%"
                  ></c-input-currency>
                </c-col>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="Own Risk Amount">
                <c-col :span="17">
                  <c-select v-model="model.lrdgrp.rec.rskcur" dbCode="curtxt"> </c-select>
                </c-col>
                <c-col :span="6" :offset="1">
                  <c-input-currency
                    :currency="model.lrdgrp.rec.rskcur"
                    v-model="model.lrdgrp.rec.rskamt"
                    style="width: 100%"
                  ></c-input-currency>
                </c-col>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="Valid From Date" style="width: 100%">
                <c-col :span="11">
                  <c-date-picker
                    type="date"
                    v-model="model.lrdgrp.rec.appeft"
                    style="width: 100%"
                    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.lrdgrp.rec.shpdat"
                    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="Buyer Ref.">
                <c-input
                  v-model="model.lrdgrp.buy.pts.ref"
                  maxlength="16"
                ></c-input>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="Im-Factoror">
                <c-input
                  v-model="model.lrdgrp.imf.pts.ref"
                  maxlength="16"
                ></c-input>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="Request Code">
                <c-select v-model="model.lrdgrp.rec.reqcod" dbCode="REQCOD"> </c-select>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="Contract Status">
                <c-input
                  v-model="model.lrdgrp.rec.conflg"
                  maxlength="16"
                ></c-input>
              </el-form-item>
            </c-col>
          </el-row>
        </el-form>
      </template>
    </c-list-search>

    <c-col :span="24" style="margin-top: 10px; margin-bottom: 10px">
      <c-button
        class="medium_bcs"
        size="medium"
        type="primary"
        style="margin-bottom: 5px"
        title="TRTOPN"
        @click="toTrtopn"
      >
        {{ $t("factoring.出口额度正式申请") }}
      </c-button>
    </c-col>

    <div style="height: 90%">
      <c-col :span="24">
        <el-tabs v-model="activeTab" class="y-tabs">
          <el-tab-pane :label="$t('factoring.保理信息')" name="le">
            <el-table
              :data="stmData.data"
              :columns="stmData.columns"
              v-loading="load"
              style="width: 100%"
              size="small"
              :border="true"
              height="calc(100vh - 480px)"
              :highlight-current-row="true"
            >
              <el-table-column
                v-for="(item, key) in stmData.columns"
                :key="key"
                :label="$t('factoring.' + item.label)"
                :prop="item.prop"
                :min-width="item.width"
              ></el-table-column>
              <el-table-column
                fixed="right"
                :label="$t('other.操作')"
                width="240px"
              >
                <template slot-scope="scope">
                  <c-button
                    style="margin-left: 5px"
                    size="small"
                    type="text"
                    @click="getButtons(scope.row)"
                  >
                    {{ $t("buttons.处理") }}
                  </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="handleCurrentChange"
            >
            </el-pagination>
          </el-tab-pane>
        </el-tabs>
      </c-col>
      <!-- 点击处理弹框 -->
      <el-dialog
        v-dialogDrag
        v-if="handleVisible"
        :visible.sync="handleVisible"
        :title="$t('factoring.交易列表')"
      >
        <c-bus-navbar
          trnName="lrtsel"
          :model="codes.rowList"
          :navcodeList="stmData.navcodeList"
          @onChoose="onChoose"
        ></c-bus-navbar>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import event from "../event";

export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [event],
  data() {
    return {
      curinr: "",
      ownref: "",
      activeTab: "le",
      load: false,
      stmData: {
        columns: [
          {
            label: "Credit Reference",
            prop: "ownref",
            width: "180px",
          },
          {
            label: "Credit Amount",
            prop: "amt",
            width: "180px",
          },
          {
            label: "Own Risk Amount",
            prop: "rskamt",
            width: "180px",
          },
          {
            label: "Valid From Date",
            prop: "appeft",
            width: "180px",
          },
          {
            label: "Buyer Ref",
            prop: "buyref",
            width: "180px",
          },
          {
            label: "Im-Factoror",
            prop: "imfref",
            width: "180px",
          },
          {
            label: "Request Code",
            prop: "reqcod",
            width: "180px",
          },
          {
            label: "Contract Status",
            prop: "conflg",
            width: "180px",
          },
        ],
        data:[
          {
            ownref: "LR3500242132AA",
            amt: "950",
            rskamt: "900",
            appeft: "2024-03-01",
            buyref: "2000377770-001",
            imfref: "2000466660-001",
            reqcod: "CITIUS33XXX",
            conflg: "open",
          },
          {
            ownref: "LR3500242131AA",
            amt: "950",
            rskamt: "900",
            appeft: "2024-02-29",
            buyref: "2000377770-002",
            imfref: "2000466660-002",
            reqcod: "CITIUS34XXX",
            conflg: "close",
          },
          {
            ownref: "LR3500242130AA",
            amt: "950",
            rskamt: "900",
            appeft: "2024-02-28",
            buyref: "2000377770-002",
            imfref: "2000466660-003",
            reqcod: "CITIUS35XXX",
            conflg: "waiting",
          },
        ],
        navcodeList:[
          {
            code: "lrteck",
            isDisplay: "Y",
            label: "出口额度正式回复",
            title: "",
          },
          {
            code: "fitepn",
            isDisplay: "Y",
            label: "出口发票转让",
            title: "",
          },
        ]
      },

      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      // 处理
      handleVisible: false,
    };
  },

  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>