<template>
    <div class="eibs-tab">
        <el-table :data="model.recgrp.tek" @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"></el-table-column>
            <el-table-column label="资金融出银行代码" prop="outbankcode"></el-table-column>
            <el-table-column label="资金融出银行国家（地区）代码" prop="outcountrycode"></el-table-column>
            <el-table-column label="资金融入企业名称" prop="inorgname"></el-table-column>
            <el-table-column label="资金融入企业国家（地区）代码" prop="incountrycode"></el-table-column>
            <el-table-column fixed="right" label="操作" v-if="showButton" 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" v-show="showButton">
            <el-button @click="addRow" type="primary">添 加</el-button>
            <!--                <el-button @click="deleteSelectedRows" type="primary">删 除</el-button>-->
        </div>
        <el-dialog :before-close="cancel" :visible.sync="showDialog" center title="明细信息" v-dialogDrag v-if="showDialog">
            <el-form :model="formData" :rules="rules" :validate-on-rule-change="false" label-width="150px" ref="formRef"
                     style="width: 100%">
                <c-row>
                    <c-col :span="12">
                        <el-form-item label="资金融出银行代码" prop="outbankcode">
                            <c-input placeholder="请输入资金融出银行代码" v-model="formData.outbankcode"></c-input>
                        </el-form-item>
                    </c-col>
                    <c-col :span="12">
                        <el-form-item label="资金融出银行国家（地区）代码" prop="outcountrycode">
                            <c-select-cty placeholder="请输入资金融出银行国家（地区）代码"
                                          v-model="formData.outcountrycode"></c-select-cty>
                        </el-form-item>
                    </c-col>
                </c-row>
                <c-row>
                    <c-col :span="12">
                        <el-form-item label="资金融入企业名称" prop="inorgname">
                            <c-input placeholder="请输入资金融入企业名称" v-model="formData.inorgname"></c-input>
                        </el-form-item>
                    </c-col>
                    <c-col :span="12">
                        <el-form-item label="资金融入企业国家（地区）代码" prop="incountrycode">
                            <c-select-cty placeholder="请输入资金融入企业国家（地区）代码"
                                          v-model="formData.incountrycode"></c-select-cty>
                        </el-form-item>
                    </c-col>
                </c-row>
                <c-row>
                    <c-col :span="12">
                        <el-form-item label="单证金额" prop="contractamt">
                            <c-input-currency placeholder="请输入单证金额" v-model="formData.contractamt"></c-input-currency>
                        </el-form-item>
                    </c-col>
                </c-row>
            </el-form>
            <span class="dialog-footer" slot="footer">
                <el-button @click="saveRow" type="primary">保 存</el-button>
                <el-button @click="cancel" type="primary">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import event from "../event";
    import {checkRuleOfTEK} from "RcpmisRules";

    export default {
        inject: ["calcRmbbop"],
        props: ["model", "codes"],
        mixins: [event],
        data() {
            return {
                showDialog: false,
                formData: {
                    outbankcode: '',
                    outcountrycode: '',
                    inorgname: '',
                    incountrycode: '',
                    contractamt: 0,
                },
                rules: {
                    //高阶函数返回的数组
                    ...checkRuleOfTEK().call({module: "TEKCOM"}).call(this, this)
                    // outbankcode: [
                    //     {required: true, message: "必输项"},
                    //     {min: 11, max: 12, message: "长度必须是11位或12位"},
                    // ],
                    // outcountrycode: [
                    //     {required: true, message: "必输项"},
                    // ],
                    // inorgname: [
                    //     {required: true, message: "必输项"},
                    // ],
                    // incountrycode: [
                    //     {required: true, message: "必输项"},
                    // ],
                    // contractamt: [
                    //     {required: true, message: "必输项"},
                    // ],
                },
                selectedRows: [],
                isEdit: false,
                index: -1,
            };
        },
        computed: {
            showButton() {
                return this.$store.state.Status.mode !== "display"
            },
        },
        methods: {
            handleSelectionChange(selection) {
                this.selectedRows = selection;
            },
            toggleShow() {
                this.showDialog = !this.showDialog;
            },
            addRow() {
                this.isEdit = false;
                let tek = {
                    outbankcode: '',
                    outcountrycode: '',
                    inorgname: '',
                    incountrycode: '',
                    contractamt: 0,
                };
                this.index = this.model.recgrp.tek.push(tek) - 1;
                this.calcRmbbop().then((rtnmsg) => {
                    if (rtnmsg.respCode === SUCCESS) {
                        this.formData = this.model.recgrp.tek[this.index];
                    }
                });
                this.toggleShow();
            },
            saveRow() {
                this.$refs.formRef.validate((valid) => {
                    if (valid) {
                        this.$set(this.model.recgrp.tek, 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.tek.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.tek.splice(index, 1);
            },
            deleteSelectedRows() {
                if (this.selectedRows.length === 0) {
                    this.$message.warning('请先选择要删除的数据行');
                    return;
                }
                this.selectedRows.forEach(row => {
                    const index = this.model.recgrp.tek.indexOf(row);
                    if (index !== -1) {
                        this.model.recgrp.tek.splice(index, 1);
                    }
                });
                this.$message.success('成功删除选中行');
                this.selectedRows = [];
            },
            formatOpertype(row, column, cellValue) {
                if (cellValue === "1") return "新增";
                if (cellValue === "2") return "变更";
            },
        }
    };
</script>
<style>
</style>