<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">
                    <c-row>
                        <c-col :span="24">
                            <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" style="width:100%"
                                            placeholder="请选择"></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" style="width:100%"
                                            placeholder="请选择"></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>
                        </c-col>
                    </c-row>
                    <c-row v-show="searchSlot.searchToggle">
                        <c-col :span="24">
                            <c-col :span="8">
                                <el-form-item label="简略信息" prop="infcon.nam" style="width: 100%">
                                    <c-input v-model="model.infcon.nam" maxlength="40" 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="请输入当事人名称" disabled>
                                    </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>
                        <c-col :span="24">
                            <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.usr.extkey" style="width: 100%">
                                    <c-input v-model="model.infcon.usr.extkey" maxlength="8" placeholder="请输入客户经理" disabled>
                                    </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="请选择角色">
                                        <el-option v-for="item in codes.searol2" :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="状态" 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.seaamtfr" style="width: 100%">
                                    <c-col :span="11">
                                        <c-input v-model="model.infcon.seaamtfr" placeholder="请输入金额区间">
                                        </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="请输入Amount to"></c-input>
                                    </c-col>
                                </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="请选择币种">
                                        <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>
                        <c-col :span="24">
                            <c-col :span="8">
                                <el-form-item label="付款条件" prop="seadoctypcod" style="width:100%">
                                    <c-select v-model="model.seadoctypcod" style="width:100%"
                                        placeholder="请选择付款条件">
                                        <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>
                    </c-row>
                </el-form>
            </template>
        </c-list-search>
        <c-col :span="24" style="margin-top: 10px">
            <c-button class="medium_bcs" size="medium" style="margin-left: 0px" type="primary" @click="toCltdav">开立
            </c-button>
        </c-col>

        <c-col :span="24">
            <c-istream-table :list="stmData.data" :columns="stmData.columns" :showButtonFlg="true">
                <el-table-column fixed="right" prop="op" 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" @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: 5px" size="small" type="primary"
                            @click="getButtons(scope.row['打包托收编号'],scope.row['打包托收余额'], scope.row['编号'],scope.row['开立日期'])">处理
                        </c-button>
                    </template>
                </el-table-column>
            </c-istream-table>
        </c-col>

        <m-busbtn ref="childs" :ownref="ownref" :amt="amt" :model="CltselModel" ownrefPath="cldgrp" trnCode="cltsel" :inr="inr" :opndat="opndat"
            @onChoose="onChoose">11</m-busbtn>
    </div>
</template>
<script>
import Api from "~/service/Api"
import commonProcess from "~/mixin/commonProcess";
import CodeTable from "~/config/CodeTable"
import Event from "~/model/Infcld/Event"

import CltselModel from "~/model/Cltsel"
import BusNavbar from "./BusNavbar";

export default {
    inject: ['root'],
    props: ["model", "codes"],
    mixins: [commonProcess],
    components: { "m-busbtn": BusNavbar },
    data() {
        return {
            amt: '',
            inr: '',
            opndat: '',
            CltselModel: new CltselModel().data,
            ownref: "",
            initdialog: false,
            transactionStatus: {
                busiNo: "",
                modTimes: 0,
                postCount: 0,
                accCount: 0,
                earnCount: 0,
                earnAmt: 0
            },
            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 \"打包托收编号\" 150",
                    "2 2 \"客户经理\" 150",
                    "3 5 \"开立日期\" 200 4 7",
                    "4 6 \"关闭日期\" 200 4 7",
                    "5 3 \"当事人编号\" 150",
                    "6 4 \"代收行\" 180",
                    "7 7 \"打包托收币种\" 150",
                    "8 8 \"打包托收金额\" 150 8 1 7",
                    "9 9 \"打包托收币种\" 150",
                    "10 10 \"打包托收余额\" 150 2 8 1 9",
                ],
                data: [
                ]
            }
        }
    },
    methods: {
        ...Event,
        async getButtons(ownref,amt,inr,opndat) {
            this.$refs.childs.initdialog = true
            this.ownref = ownref
            this.amt = amt;
            this.inr = inr;
            this.opndat = opndat;
            console.log("ownref:" + ownref);
        },
        async onChoose(code) {
            //跳转交易
            this.$router.history.push("/business/" + code)
            this.$refs.childs.initdialog = false
        },
        closeTrn(refId) {
            this.$refs[refId].doClose();
        },
        async getTrnInfo(idx, row) {

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

            let rtnmsg = await this.executeDefault("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)

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

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