<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="业务编号" 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="请输入客户号/名称" style="width: 100%">
                </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.route" style="width: 100%">
                <c-select v-model="model.infcon.route" dbCode="cptrou" placeholder="请选择汇款邮路"></c-select>
              </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" :code="cptmod" placeholder="请选择汇款状态"></c-select>
              </el-form-item>
            </c-col>
            <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 :span="8">
              <el-form-item label="币种" prop="infcon.seacur" style="width: 100%">
                <c-select v-model="model.infcon.seacur" :isShowKeyAndLabel="true" style="width: 100%" placeholder="请选择币种"
                  dbCode="curtxt">
                </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" type="number" :precision="2" 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" type="number" :precision="2" placeholder="请输入金额上限"
                    style="width: 100%"></c-input>
                </c-col>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="业务机构" prop="bchcon" style="width: 100%">
                <c-select clearable placeholder="请选择业务机构" style="width: 100%" v-model="model.infcon.branchinr">
                  <el-option :key="item.branch" :label="item.bchname" :value="item.inr" v-for="item in bchtypList">
                  </el-option>
                </c-select>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="经办柜员" prop="usrcon" style="width: 100%">
                <c-select clearable placeholder="请选择经办柜员" style="width: 100%" v-model="model.infcon.ownusr">
                  <el-option :key="item.extkey + index" :label="item.extkey + '-' + item.nam" :value="item.extkey"
                    v-for="(item, index) in userList">
                  </el-option>
                </c-select>
              </el-form-item>
            </c-col>
          </el-row>
        </el-form>
      </template>
    </c-list-search>


    <c-col :span="24" style="margin-top: 0px">
      <c-button class="medium_bcs" size="medium" type="primary" style="margin-right: 15px" @click="toZptadv">
        转汇汇入
      </c-button>
      <c-button class="medium_bcs" size="medium" type="primary" style="margin-right: 15px" @click="toZptopn">
        转汇汇出
      </c-button>
      <c-button class="medium_bcs" size="medium" type="primary" style="margin-right: 15px" @click="toZpticr">
        转汇汇入退汇
      </c-button>
      <c-button class="medium_bcs" size="medium" type="primary" style="margin-right: 15px" @click="toZptocr">
        转汇汇出退汇
      </c-button>
    </c-col>

    <div>
      <c-col :span="24">
        <c-tabs v-model="activeTab" type="card" ref="elment">
          <el-table v-loading="load" :data="stmData.data" height="calc(100vh - 310px)" border :columns="stmData.columns"
            :showButtonFlg="true" :highlight-current-row="true" @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 style="text-align: center" v-else-if="item.prop.indexOf('accmod') >= 0">{{ cptmod.find(obj =>
                  obj.value === scope.row[item.prop]) ? cptmod.find(obj => obj.value === scope.row[item.prop]).label :
                  scope.row[item.prop] }}</div>
                <div style="text-align: center" v-else-if="item.prop.indexOf('cptrou') >= 0">
                  {{ getCodelabel(scope.row[item.prop], 'cptrou') }}</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, 'CPD', '', 'I')">
                    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-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 BusNavbar from "~/components/business/BusNavbar1";
import CheckLockAndPending from "~/components/business/CheckLockAndPending";

import event from "../event";

export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [event],
  components: {
    "m-busbtn": BusNavbar,
    "m-chklap": CheckLockAndPending,
  },
  data() {
    return {
      bchtypList: [],
      userList: [],
      curinr: "",
      ownref: "",
      activeTab: "cd",
      handleModel: {},
      trnUrl: "",
      inifrm: "",
      load: false,
      oldRefId: "",
      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: "pyeExtkey",
            width: "180px"
          },
          {
            label: "客户名称",
            prop: "pyeName",
            width: "250px"
          },
          {
            label: "转汇类型",
            prop: "zhtyp",
            width: "250px"
          },
          {
            label: "日期",
            prop: "credat",
            width: "150px"
          },
          {
            label: "汇款邮路",
            prop: "cptrou",
            width: "150px"
          },
          {
            label: "币种",
            prop: "cur",
            width: "120px"
          },
          {
            label: "金额",
            prop: "amt",
            width: "120px"
          },
          {
            label: "汇款状态",
            prop: "accmod",
            width: "120px"
          },
          {
            label: "经办柜员",
            prop: "ownusr",
            width: "120px"
          }
        ],
        data: [
        ]
      },
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0
      },

      initdialog: false,
      handlerDataList: [],
      currentHandleRow: {},
      cptmod: [
        { label: "正常解付", value: "0" },
        { label: "挂账待处理", value: "2" },
        { label: "挂账后解付", value: "G" },
        { label: "退汇", value: "3" }
      ],
    };
  },

  methods: {},
  mounted() {
    this.getdbCode('cptrou', '', 'cptrou');
    this.getUserList();
    this.getBranchList();
  }
};
</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>