<template>
    <div class="eibs-tab">
        <div v-if="showTable">
            <el-table :data="model.recgrp.tgc" @selection-change="handleSelectionChange" style="width: 100%">
                <!--                <el-table-column type="selection" width="50"></el-table-column>-->
                <el-table-column label="序号" type="index" width="50"></el-table-column>
                <el-table-column :formatter="formatOpertype" label="明细操作类型" prop="listopertype"
                                 width="150"></el-table-column>
                <el-table-column label="交易日" prop="tradedate" width="150"></el-table-column>
                <el-table-column label="远端买入(名义本金)币种" prop="disbuycurrency" width="150"></el-table-column>
                <el-table-column label="远端买入(名义本金)金额" prop="disbyamt" width="150"></el-table-column>
                <el-table-column label="远端卖出(名义本金)币种" prop="dissellcurrency" width="150"></el-table-column>
                <el-table-column label="远端卖出(名义本金)金额" prop="dissellamt" width="150"></el-table-column>
                <el-table-column label="近端交割日" prop="neardate" width="150"></el-table-column>
                <el-table-column label="近端交易价格" prop="nearprice" width="150"></el-table-column>
                <el-table-column label="远端交割日" prop="distaldate" width="150"></el-table-column>
                <el-table-column label="远端交易价格" prop="disprice" width="150"></el-table-column>
                <el-table-column label="操作" width="150">
                    <template slot-scope="scope">
                        <el-button @click="handleEdit(scope.$index,scope.row)" size="mini">编辑</el-button>
                        <el-button @click="handleDelete(scope.$index)" size="mini">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="margin-top: 20px">
                <el-button @click="addRow" type="primary">添 加</el-button>
                <!--                <el-button @click="deleteSelectedRows" type="primary">删 除</el-button>-->
            </div>
        </div>
        <div v-else>
            <el-form :model="formData" :rules="rules" :validate-on-rule-change="false" label-width="150px" ref="formRef"
                     style="width: 100%">
        <!-- 第1行 -->
        <!-- <c-row>
            <c-col :span="8">
                <el-form-item label="申报号码">
                    <c-input maxlength="24" placeholder="请输入申报号码"></c-input>
                </el-form-item>
            </c-col>
            <c-col :span="8">
                <el-form-item label="明细操作类型" prop="recp.tgcpp.listopertype">
                    <c-input maxlength="24" placeholder="请输入明细操作类型" v-model="model.recp.tgcpp.listopertype"></c-input>
                </el-form-item>
            </c-col>
            <c-col :span="8">
                <el-form-item label="序号">
                    <c-input placeholder="请输入序号"></c-input>
                </el-form-item>
            </c-col>
        </c-row> -->

        <!-- 第2行 -->
        <c-row>
            <c-col :span="8">
                <el-form-item label="交易日" prop="tradedate">
                    <c-date-picker placeholder="请输入交易日" type="date"
                                   v-model="formData.tradedate"></c-date-picker>
                </el-form-item>
            </c-col>
            <c-col :span="8">
                <el-form-item label="远端买入(名义本金)币种" prop="disbuycurrency">
                    <c-select dbCode="curtxt" placeholder="请输入远端买入(名义本金)币种"
                              v-model="formData.disbuycurrency"></c-select>
                </el-form-item>
            </c-col>
            <c-col :span="8">
                <el-form-item label="远端买入(名义本金)金额" prop="disbyamt">
                    <c-input-currency placeholder="请输入远端买入(名义本金)金额"
                                      v-model="formData.disbyamt"></c-input-currency>
                </el-form-item>
            </c-col>
        </c-row>

        <!-- 第3行 -->
        <c-row>
            <c-col :span="8">
                <el-form-item label="远端卖出(名义本金)币种" prop="dissellcurrency">
                    <c-select dbCode="curtxt" placeholder="请输入远端卖出(名义本金)币种"
                              v-model="formData.dissellcurrency"></c-select>
                </el-form-item>
            </c-col>
            <c-col :span="8">
                <el-form-item label="远端卖出(名义本金)金额" prop="dissellamt">
                    <c-input-currency placeholder="请输入远端卖出(名义本金)金额"
                                      v-model="formData.dissellamt"></c-input-currency>
                </el-form-item>
            </c-col>
            <c-col :span="8">
                <el-form-item label="近端交割日" prop="neardate">
                    <c-date-picker placeholder="请输入近端交割日" type="date"
                                   v-model="formData.neardate"></c-date-picker>
                </el-form-item>
            </c-col>
        </c-row>

        <!-- 第4行 -->
        <c-row>
            <c-col :span="8">
                <el-form-item label="近端交易价格" prop="nearprice">
                    <c-input placeholder="请输入近端交易价格" v-model="formData.nearprice"></c-input>
                </el-form-item>
            </c-col>
            <c-col :span="8">
                <el-form-item label="远端交割日" prop="distaldate">
                    <c-date-picker placeholder="请输入远端交割日" type="date"
                                   v-model="formData.distaldate"></c-date-picker>
                </el-form-item>
            </c-col>
            <c-col :span="8">
                <el-form-item label="远端交易价格" prop="disprice">
                    <c-input placeholder="请输入远端交易价格" v-model="formData.disprice"></c-input>
                </el-form-item>
            </c-col>
        </c-row>

        <!-- 第5行 -->
        <!-- <c-row>
            <c-col :span="8">
                <el-form-item label="预留字段11">
                    <c-input placeholder="请输入预留字段11"></c-input>
                </el-form-item>
            </c-col>
            <c-col :span="8">
                <el-form-item label="预留字段12">
                    <c-input placeholder="请输入预留字段12"></c-input>
                </el-form-item>
            </c-col>
            <c-col :span="8">
                <el-form-item label="预留字段13">
                    <c-input placeholder="请输入预留字段13"></c-input>
                </el-form-item>
            </c-col>
        </c-row> -->

        <!-- 第6行 -->
        <!-- <c-row>
            <c-col :span="8">
                <el-form-item label="预留字段14">
                    <c-input placeholder="请输入预留字段14"></c-input>
                </el-form-item>
            </c-col>
            <c-col :span="8">
                <el-form-item label="处理状态">
                    <c-select placeholder="请输入处理状态"></c-select>
                </el-form-item>
            </c-col>
        </c-row> -->
        </el-form>
        <div style="margin-top: 20px">
            <el-button @click="saveRow" type="primary">保 存</el-button>
            <el-button @click="cancel" type="primary">取 消</el-button>
        </div>
        </div>
    </div>
</template>

<script>
    import event from "../event";

    export default {
        props: ["model", "codes"],
        mixins: [event],
        data() {
            return {
                showTable: true,
                formData: {
                    sta: "",			//  人行报送状态		.recp.tgcpp.sta
                    seqno: "",			//  明细主键		.recp.tgcpp.seqno
                    listopertype: "",			//  明细操作类型		.recp.tgcpp.listopertype
                    tradedate: "",			//  交易日 		.recp.tgcpp.tradedate
                    disbuycurrency: "",			//  远端买入(名义本金)币种		.recp.tgcpp.disbuycurrency
                    disbuyamt: "",			//  远端买入(名义本金)金额		.recp.tgcpp.disbuyamt
                    dissellcurrency: "",			//  远端卖出(名义本金)币种		.recp.tgcpp.dissellcurrency
                    dissellamt: "",			//  远端卖出(名义本金)金额		.recp.tgcpp.dissellamt
                    neardate: "",			//  近端交割日		.recp.tgcpp.neardate
                    distaldate: "",			//  远端交割日		.recp.tgcpp.distaldate
                    acp: "",			//  确认		.recp.tgcpp.acp
                    nearprice: "",			//  近端交易价格		.recp.tgcpp.nearprice
                    disprice: "",			//  远端交易价格		.recp.tgcpp.disprice
                },

                selectedRows: [],
                isEdit: false,
                index: -1,
            };
        },
        methods: {
            handleSelectionChange(selection) {
                this.selectedRows = selection;
            },
            toggleShow() {
                this.showTable = !this.showTable;
            },
            addRow() {
                this.isEdit = false;
                let tgc = {
                    sta: "",			//  人行报送状态		.recp.tgcpp.sta
                    seqno: "",			//  明细主键		.recp.tgcpp.seqno
                    listopertype: "",			//  明细操作类型		.recp.tgcpp.listopertype
                    tradedate: "",			//  交易日 		.recp.tgcpp.tradedate
                    disbuycurrency: "",			//  远端买入(名义本金)币种		.recp.tgcpp.disbuycurrency
                    disbuyamt: "",			//  远端买入(名义本金)金额		.recp.tgcpp.disbuyamt
                    dissellcurrency: "",			//  远端卖出(名义本金)币种		.recp.tgcpp.dissellcurrency
                    dissellamt: "",			//  远端卖出(名义本金)金额		.recp.tgcpp.dissellamt
                    neardate: "",			//  近端交割日		.recp.tgcpp.neardate
                    distaldate: "",			//  远端交割日		.recp.tgcpp.distaldate
                    acp: "",			//  确认		.recp.tgcpp.acp
                    nearprice: "",			//  近端交易价格		.recp.tgcpp.nearprice
                    disprice: "",			//  远端交易价格		.recp.tgcpp.disprice
                };
                this.index = this.model.recgrp.tgc.push(tgc) - 1;
                this.formData = this.model.recgrp.tgc[this.index];
                // this.calcRmbbop().then((rtnmsg) => {
                //     if (rtnmsg.respCode === SUCCESS) {
                //         this.formData = this.model.recgrp.tgc[this.index];
                //     }
                // });
                this.toggleShow();
            },
            saveRow() {
                this.$refs.formRef.validate((valid) => {
                    if (valid) {
                        this.$set(this.model.recgrp.tgc, this.index, {...this.formData});
                        this.$refs.formRef.resetFields();
                        this.toggleShow();
                    } else {
                        // 前端校验失败
                        this.$notify({
                            title: '失败',
                            message: '校验失败',
                            type: 'error',
                        });
                        return false;
                    }
                })

            },
            cancel() {
                if (!this.isEdit)
                    this.model.recgrp.tgc.splice(this.index, 1);
                this.toggleShow();
            },
            handleEdit(index, row) {
                this.isEdit = true;
                this.index = index;
                this.formData = {...row};
                this.toggleShow()
            },
            handleDelete(index) {
                this.model.recgrp.tgc.splice(index, 1);
            },
            deleteSelectedRows() {
                if (this.selectedRows.length === 0) {
                    this.$message.warning('请先选择要删除的数据行');
                    return;
                }
                this.selectedRows.forEach(row => {
                    const index = this.model.recgrp.tgc.indexOf(row);
                    if (index !== -1) {
                        this.model.recgrp.tgc.splice(index, 1);
                    }
                });
                this.$message.success('成功删除选中行');
                this.selectedRows = [];
            },
            formatOpertype(row, column, cellValue) {
                if (cellValue === "1") return "新增";
                if (cellValue === "2") return "变更";
            },
        }
    };
</script>
<style>
</style>