<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" :inline="true" label-position="left" label-width="110px"
          size="small">
          <el-row>
            <c-col :span="24">
              <c-col :span="8">
                <el-form-item label="Own Reference" prop="infcon.seaownref" style="width: 100%">
                  <c-input v-model="model.infcon.seaownref" maxlength="16" placeholder="请输入Own Reference"></c-input>
                </el-form-item>
              </c-col>
              <c-col :span="8">
                <el-form-item label="Opening between" 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="请选择Opening between"></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="Party Reference" prop="infcon.searef" style="width: 100%">
                  <c-input v-model="model.infcon.searef" maxlength="16" placeholder="请输入Party Reference"></c-input>
                </el-form-item>
              </c-col>
            </c-col>
          </el-row>


          <c-row v-show="searchSlot.searchToggle">
            <c-col :span="24">
              <c-col :span="8">
                <el-form-item label="Release Status" prop="infcon.relflg" style="width: 100%">
                  <!-- <c-select v-model="model.infcon.relflg" style="width: 100%" placeholder="请选择Release Status">
                  </c-select> -->
                  <c-select v-model="model.infcon.relflg" style="width: 100%" placeholder="请选择Release Status">
                    <el-option v-for="item in codes.relflg" :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="Handling Type" prop="infcon.hndtyp" style="width: 100%">
                  <!-- <c-select v-model="model.infcon.hndtyp" style="width: 100%" placeholder="请选择Handling Type">
                  </c-select> -->
                  <c-select v-model="model.infcon.hndtyp" style="width: 100%" placeholder="请选择Handling Type">
                    <el-option v-for="item in codes.hndtyp" :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="Select Single Party" prop="infcon.pty.extkey" style="width: 100%">
                  <c-input v-model="model.infcon.pty.extkey" maxlength="24" placeholder="请输入Select Single Party">
                  </c-input>
                </el-form-item>
              </c-col>
            </c-col>

            <c-col :span="24">
              <c-col :span="8">
                <el-form-item label="External Visible Name" prop="infcon.pty.nam" style="width: 100%">
                  <c-input v-model="model.infcon.pty.nam" maxlength="40" placeholder="请输入External Visible Name">
                  </c-input>
                </el-form-item>
              </c-col>
              <c-col :span="8">
                <el-form-item label="Party Name/BIC" prop="infcon.seapty" style="width: 100%">
                  <c-input v-model="model.infcon.seapty" maxlength="24" placeholder="请输入Party Name/BIC"></c-input>
                </el-form-item>
              </c-col>
              <c-col :span="8">
                <el-form-item label="Role" prop="infcon.searol" style="width: 100%">
                  <!-- <c-select v-model="model.infcon.searol" style="width: 100%" placeholder="请选择Role">
                  </c-select> -->
                  <c-select v-model="model.infcon.payrol" style="width: 100%" placeholder="请选择Role">
                    <el-option v-for="item in codes.payrol" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </c-select>
                </el-form-item>
              </c-col>
            </c-col>

            <c-col :sapn="24">
              <c-col :span="8">
                <el-form-item label="Name" prop="infcon.nam" style="width: 100%">
                  <c-input v-model="model.infcon.nam" maxlength="40" placeholder="请输入Name"></c-input>
                </el-form-item>
              </c-col>
              <c-col :span="8">
                <el-form-item label="User ID" prop="infcon.usr.extkey" style="width: 100%">
                  <c-input v-model="model.infcon.usr.extkey" maxlength="8" placeholder="请输入User ID"></c-input>
                </el-form-item>
              </c-col>
              <c-col :span="8">
                <el-form-item label="Status" prop="infcon.seasta" style="width: 100%">
                  <!-- <c-select v-model="model.infcon.seasta" style="width: 100%" placeholder="请选择Status">
                  </c-select> -->
                  <c-select v-model="model.infcon.seasta" style="width: 100%" placeholder="请选择Status">
                    <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>


            <c-col :span="24">
              <c-col :span="8">
                <el-form-item label="Currency" prop="infcon.curtxt1" style="width: 100%">
                  <c-select v-model="model.infcon.curtxt1" style="width: 100%" placeholder="请选择Currency">
                    <el-option v-for="item in codes.curtxt1" :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.cxmflg" style="width: 100%">
                  <!-- <c-select v-model="model.infcon.cxmflg" style="width: 100%" placeholder="请选择是否显示查询码">
                  </c-select> -->
                  <c-select v-model="model.infcon.cxmflg" style="width: 100%" placeholder="请选择是否显示查询码">
                    <el-option v-for="item in codes.cxmflg" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </c-select>
                </el-form-item>
              </c-col>
              <c-col :span="8">
                <c-col :span="12">
                  <el-form-item label="Amount between" prop="infcon.seaamtfr" style="width: 100%">
                    <c-input v-model="model.infcon.seaamtfr" placeholder="请输入Amount between"></c-input>
                  </el-form-item>
                </c-col>
                <c-col :span="12">
                  <el-form-item label="Amount to" prop="infcon.seaamtto" style="width: 100%">
                    <c-input v-model="model.infcon.seaamtto" placeholder="请输入Amount to"></c-input>
                  </el-form-item>
                </c-col>
              </c-col>

            </c-col>
            <!-- <c-col :span="12">
              <el-form-item label="display stream" prop="infbut.dspstm">
                <c-input v-model="model.infbut.dspstm" placeholder="请输入display stream"></c-input>
              </el-form-item>
            </c-col> -->
          </c-row>
        </el-form>
      </template>
    </c-list-search>


    <c-col :span="24" style="margin-top:15px">
      <c-col :span="12">
        <el-form-item label="Payment Condition" prop="seadoctypcod" style="width: 100%">
          <!-- <c-select v-model="model.seadoctypcod" style="width: 100%" placeholder="请选择Payment Condition">
        </c-select> -->
          <c-select v-model="model.infcon.seadoctypcod" style="width: 100%" placeholder="请选择Payment Condition">
            <el-option v-for="item in codes.seadoctypcod" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </c-select>
        </el-form-item>
      </c-col>

      <c-col :span="12">
        <el-form-item label="Goods Code" prop="godcod" style="width: 100%">
          <c-select v-model="model.infcon.godcod" style="width:100%" placeholder="请选择Goods Code">
            <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>
    </c-col>

    <c-col :span="24" style="margin-top: 10px">
      <c-button class="medium_bcs" size="medium" style="margin-left: 0px" type="primary" @click="toBctdav">寄单</c-button>
    </c-col>


    <!-- <div style="margin-top:20px;">
      <c-button size="small" type="primary" @click="onInfbutSearow">&Search</c-button>
      <c-button size="small" type="primary" @click="onInfbutDsp">D&isplay</c-button>
      <c-button size="small" type="primary" @click="onInfbutUserow">&Use</c-button>
      <c-button size="small" type="primary" @click="onInfbutClr">&Clear</c-button>
      <c-button size="small" type="primary" @click="onInfbutButprt">导Excel</c-button>
      <c-button size="small" type="primary" @click="onInfbutExi">E&xit</c-button></c-col>
    </div> -->


    <c-col :span="24">
      <c-istream-table :list="stmData.data" :columns="stmData.columns">
        <el-table-column fixed="right" prop="op" label="操作" width="150px">
          <template slot="header">
            <c-col :span="11" style="text-align: left"><span>操作</span></c-col>
            <c-col :span="12" style="text-align: right">
              <c-button icon="el-icon-s-tools"></c-button>
            </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" @click="closeTrn('popover_' + scope.row.IDX)" />
              </div>
              <c-istream-table :list="trnData.data" :columns="trnData.columns">
                <el-table-column prop="op" label="操作" width="0">
                  <template slot-scope="scope">
                    <c-button style="margin-left: 0" size="small" @click="display(scope.row['INR'])">详情</c-button>
                  </template>
                </el-table-column>
              </c-istream-table>
              <c-button style="margin-left: 0" size="small" @click="getTrnInfo(scope.$index, scope.row)"
                slot="reference">详情</c-button>
            </el-popover>
            <c-button style="margin-left: 0" size="small" type="primary" @click="getButtons(scope.row['Reference'])">处理
            </c-button>
          </template>
        </el-table-column>
      </c-istream-table>
    </c-col>

    <el-dialog :visible.sync="initdialog" :title="'交易列表'" append-to-body>
      <div class="m-list-btns">
        <m-busbtn ref="childs" :ownref="ownref" :model="BctselModel" ownrefPath="bcdgrp" trnCode="bctsel"
          @onChoose="onChoose">11</m-busbtn>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Api from "~/service/Api"
import commonProcess from "~/mixin/commonProcess"
import CodeTable from "~/config/CodeTable"
import Event from "~/model/Infbcd/Event"

import BctselModel from "~/model/Bctsel"
import BusNavbar from "~/views/Public/BusNavbar";

export
  default {
    inject: ['root'],
    props: ["model", "codes"],
    mixins: [commonProcess],
    components: { "m-busbtn": BusNavbar },
    data() {
      return {
        BctselModel: new BctselModel().data,
        ownref: "",
        initdialog: false,
        dialogTableVisible: false,
        trnData: {
          columns: [
            '1 1 "编号" 200',
            '2 2 "交易名称" 120',
            // '3 3 "日期" 200',
            { index: 3, position: 3, width: 110, pattern: 'date', label: '日期' },
            // '4 4 "状态" 50',
            { index: 4, position: 4, width: 100, pattern: 'code', label: '状态', code: this.codes.relstaEN },
            '5 5 "币种" 80',
            '6 6 "金额" 110',
          ],
          data: [],
        },
        stmData: {
          columns: [
            "1 1 \"Reference\" 150",
            "2 2 \"Resp. User\" 100",
            "3 3 \"Opened\" 200 4 7",
            "4 4 \"Closed\" 200 4 7",
            "5 5 \"Goods Code\" 130 1 0 1 GODCOD",
            "6 6\"分行名称\" 136",
            "7 7 \"Pta.No\" 130",
            "8 8 \"Party Number\" 150",
            "9 9 \"Drawee\" 300",
            "10 10 \"Drawee CN\" 130",
            "11 11 \"Party Number\" 150",
            "12 12 \"Drawer\" 100",
            "13 13 \"Party Number\" 150",
            "14 14 \"Remitting Bank\" 200",
            "15 15 \"Cur\" 50",
            "16 16 \"Doc.Amount\" 100 2 8 1 15",
            "17 17 \"Cur\" 50",
            "18 18 \"Open Amount\" 100 2 8 1 17",
          ],
          data: []

        }
      }
    },
    methods: {
      ...Event,
      async getButtons(ownref) {
        this.initdialog = true;
        this.ownref = ownref
        console.log("ownref:" + ownref);
        setTimeout(() => {
          this.$refs.childs.$emit("childmethods")
        }, 10)
      },
      async onChoose(code) {
        //跳转交易
        this.$router.history.push("/business/" + code)
        this.initdialog = false;
      },
      closeTrn(refId) {
        this.$refs[refId].doClose();
      },
      async getTrnInfo(idx, row) {

        this.model.infcon.objinr = row["INR"];
        this.model.bcdgrp.rec.inr = row["INR"];
        this.model.infcon.chksubcon = "X";

        this.dialogTableVisible = true;

        let rtnmsg = await this.executeDefault("infcon.chksubcon");
        console.log(rtnmsg);
        console.log(this.model.infcon.chksubcon);

        if ((rtnmsg.respCode = SUCCESS)) {
          this.trnData.data = rtnmsg.data.infcon_trnstm.rows;
          console.log(this.trnData.data);
        }
      },
      async getDitSelInfo(idx, row) {
        //TD中选中行触发
        var params = { selDst: "infbut.dspstm", selIds: [idx + 1] }
        let rtnmsg = await this.executeRule("infbut.dspstm", params);
        if (rtnmsg.respCode = SUCCESS) {
          this.updateModel(rtnmsg.data);
          // Utils.copyValueFromVO(this.model, rtnmsg.data);
          //TD中点击display时触发
          params = { selDst: "infbut.dsp", selIds: [idx + 1] }
          let rtnmsgNew = await this.executeRule("infbut.dsp", params);

          if (rtnmsgNew.respCode = SUCCESS) {
            console.log(rtnmsgNew);
            this.updateModel(rtnmsgNew.data);

            let rtnmsgOitset = await this.executeDefault("mtabut.coninf.oitset.oit");

            if (rtnmsgOitset.respCode = SUCCESS) {
              Utils.copyValueFromVO(this.model, rtnmsgOitset.data);

            }

          }
        }
        //触发父组件中updateShowPanel 事件，修改index中showPanel ，控制 index中组件的显示和隐藏
        this.$emit('updateShowPanel', true)

      },
      toBctdav() {
        this.$router.history.push("/business/bctdav")
      }
    },
    created: function () {

    }
  }</script>
<style>
</style>