<template>
    <div class="eibs-tab">
        <div v-if="showTable">
            <el-table :data="model.recgrp.tgf" @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="contractamt" width="150"></el-table-column>
                <el-table-column label="交易方向" prop="tradedirection" width="150"></el-table-column>
                <el-table-column label="交易日" prop="tradedate" width="150"></el-table-column>
                <el-table-column label="到期日" prop="enddate" 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="序号">
                    <c-input placeholder="请输入序号"></c-input>
                </el-form-item>
            </c-col> -->
            <c-col :span="8">
                <el-form-item label="合约金额" prop="contractamt">
                    <c-input-currency placeholder="请输入合约金额" v-model="formData.contractamt"></c-input-currency>
                </el-form-item>
            </c-col>
        </c-row>

        <!-- 第2行 -->
        <c-row>
            <c-col :span="8">
                <el-form-item label="交易方向" prop="tradedirection">
                    <c-select dbCode="tradir" placeholder="请输入交易方向" v-model="formData.tradedirection"></c-select>
                </el-form-item>
            </c-col>
            <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="enddate">
                    <c-date-picker placeholder="请输入到期日" type="date" v-model="formData.enddate"></c-date-picker>
                </el-form-item>
            </c-col>
        </c-row>

        <!-- 第3行 -->
        <c-row>
            <!-- <c-col :span="8">
                <el-form-item label="预留字段23">
                    <c-input placeholder="请输入预留字段23"></c-input>
                </el-form-item>
            </c-col>
            <c-col :span="8">
                <el-form-item label="预留字段24">
                    <c-input placeholder="请输入预留字段24"></c-input>
                </el-form-item>
            </c-col>
            <c-col :span="8">
                <el-form-item label="预留字段25">
                    <c-input placeholder="请输入预留字段25"></c-input>
                </el-form-item>
            </c-col> -->
        </c-row>

        <!-- 第4行 -->
        <c-row>
            <!-- <c-col :span="8">
                <el-form-item label="预留字段26">
                    <c-input placeholder="请输入预留字段26"></c-input>
                </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.tgfpp.sta
                    seqno: "",			//  明细主键		.recp.tgfpp.seqno
                    listopertype: "",			//  明细操作类型		.recp.tgfpp.listopertype
                    contractamt: "",			//  合约金额		.recp.tgfpp.contractamt
                    tradedate: "",			//  交易日		.recp.tgfpp.tradedate
                    enddate: "",			//  到期日		.recp.tgfpp.enddate
                    tradedirection: "",			//  交易方向		.recp.tgfpp.tradedirection
                    acp: "",			//  确认		.recp.tgfpp.acp
                },

                selectedRows: [],
                isEdit: false,
                index: -1,
            };
        },
        methods: {
            handleSelectionChange(selection) {
                this.selectedRows = selection;
            },
            toggleShow() {
                this.showTable = !this.showTable;
            },
            addRow() {
                this.isEdit = false;
                let tgf = {
                    balofpaycode: '',
                    payamt: 0,
                    bustypecode: '',
                    bustypelist: '',
                    actualpayercode: '',
                    actualpayername: '',
                    ifprepayment: '',
                    prepayerscale: 0,
                    accountperiod: 0,
                    custstate: '',
                    certificateno: '',
                    contractno: '',
                    addword: '',
                };
                this.index = this.model.recgrp.tgf.push(tgf) - 1;
                this.formData = this.model.recgrp.tgf[this.index];
                // this.calcRmbbop().then((rtnmsg) => {
                //     if (rtnmsg.respCode === SUCCESS) {
                //         this.formData = this.model.recgrp.tgf[this.index];
                //     }
                // });
                this.toggleShow();
            },
            saveRow() {
                this.$refs.formRef.validate((valid) => {
                    if (valid) {
                        this.$set(this.model.recgrp.tgf, 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.tgf.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.tgf.splice(index, 1);
            },
            deleteSelectedRows() {
                if (this.selectedRows.length === 0) {
                    this.$message.warning('请先选择要删除的数据行');
                    return;
                }
                this.selectedRows.forEach(row => {
                    const index = this.model.recgrp.tgf.indexOf(row);
                    if (index !== -1) {
                        this.model.recgrp.tgf.splice(index, 1);
                    }
                });
                this.$message.success('成功删除选中行');
                this.selectedRows = [];
            },
            formatOpertype(row, column, cellValue) {
                if (cellValue === "1") return "新增";
                if (cellValue === "2") return "变更";
            },
        }

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