<template>
    <c-row class="eibs-tab">
        <!-- ====================顶部==================== -->
        <c-col :span="6">
            <el-form-item label="参考号" label-width="100px">
                <c-input
                        v-model="model.setmod.ref"
                        maxlength="16"
                        :readonly="true"
                        placeholder="请输入our reference"
                ></c-input>
            </el-form-item>
        </c-col>
        <c-col :span="4">
            <el-form-item label="结算金额" label-width="100px">
                <c-input
                        v-model="model.setmod.doccur"
                        style="width: 100%"
                        placeholder="CNY"
                        :readonly="true"

                ></c-input>
            </el-form-item>
        </c-col>

        <c-col :span="4">
            <el-form-item label="" label-width="20px">
                <c-input
                        v-model="model.setmod.docamt"
                        :readonly="true"
                        placeholder="请输入document amount"
                ></c-input>
            </el-form-item>
        </c-col>

        <c-col :span="6">
            <el-form-item label="类型" label-width="100px">
                <c-select
                        v-model="model.setmod.dspflg"
                        disabled
                        style="width: 100%"
                        placeholder="请选择Type of settlement"
                >
                    <el-option
                            v-for="item in codes.dspflg"
                            :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="自贸区账号">
            <c-input  v-model="model.setmod.zmqacc" maxlength="20"  placeholder="请输入自贸区账号"></c-input>
        </el-form-item>
       </c-col>
       <c-col :span="6" style="text-align:center">
	    <c-checkbox v-model="model.setmod.xreflg">Recalculate Rates</c-checkbox>
       </c-col>
       -->
        <c-col :span="3" :offset="21">
            <el-form-item label="" label-width="20px">
                <c-button size="small" type="primary" @click="onSetmodDet">
                    细节
                </c-button>
            </el-form-item>
        </c-col>
        <!-- ==============中部表格===================== -->

        <c-col :span="24">
            <el-form-item
                    label="Foreign Commission/Charges:"
                    label-width="210px"
            >
            </el-form-item>
        </c-col>
        <c-col :span="22" style="margin-bottom: 18px" :offset="1">
            <c-table
                    style="text-align: center"
                    :list="model.setmod.setfog.setfol"
                    :paginationShow="false"
                    :border="true"
            >
                <el-table-column label="Payer" prop="ptydbt" width="auto">
                    <template slot-scope="scope">
                        <el-select v-model="scope.ptydbt">
                            <el-option
                                    v-for="item in codes.ptydbt"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="Payee" width="auto">
                    <template slot-scope="scope">
                        <el-select v-model="scope.Payee">
                            <el-option
                                    v-for="item in codes.Payee"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="Source" prop="src" width="auto">
                </el-table-column>
                <el-table-column label="Disp" prop="dsp" width="auto">
                </el-table-column>
                <el-table-column
                        label="Text for Payer"
                        prop="txtdbt"
                        width="auto"
                >
                </el-table-column>
                <el-table-column
                        label="Text for Payee"
                        prop="txtpay"
                        width="auto"
                >
                </el-table-column>
                <el-table-column label="Currency" prop="cur" width="auto">
                    <template slot-scope="scope">
                        <el-select v-model="scope.cur">
                            <el-option
                                    v-for="item in codes.cur"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="Amount" prop="amt" width="auto">
                </el-table-column>
                <el-table-column label="" prop="det" width="auto">
                    <template slot-scope="scope" slot="header">
                        <el-button
                                class="el-icon-circle-plus-outline"
                                size="mini"
                                @click="addRow(scope)"
                        >
                        </el-button>
                        <el-button
                                class="el-icon-remove-outline"
                                size="mini"
                                @click="removeRow(scope)"
                        >
                        </el-button>
                    </template>
                    <template slot-scope="scoped">
                        <el-button
                                size="mini"
                                @click="detail1(scoped.$index, scoped.row)"
                        >details</el-button
                        >
                    </template>
                </el-table-column>
            </c-table>
        </c-col>
        <c-col>
            <el-dialog :visible.sync="dialogVisible" center>
                <el-form :model="dialog">
                    <el-form-item label="收款人">
                        <el-select v-model="dialog.ptypay">
                            <el-option
                                    v-for="item in codes.ptypay"
                                    :key="item.value"
                                    :labelF="item.label"
                                    :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="收款人摘要"
                    ><c-input v-model="dialog.txtpay" />
                    </el-form-item>
                    <el-form-item label="付款人">
                        <el-select v-model="dialog.ptydbt">
                            <el-option
                                    v-for="item in codes.ptydbt"
                                    :key="item.value"
                                    :labelF="item.label"
                                    :value="item.value"
                            /> </el-select
                        ></el-form-item>
                    <el-form-item label="付款人摘要"
                    ><c-input v-model="dialog.txtdbp" />
                    </el-form-item>
                    <el-form-item label="费用"
                    ><c-select v-model="dialog.cur">
                        <el-option
                                v-for="item in codes.cur"
                                :key="item.value"
                                :labelF="item.label"
                                :value="item.value"
                        />
                    </c-select>
                        <c-input v-model="dialog.amt" style="width: 200px"
                        /></el-form-item>

                    <el-form-item label-width="10em">
                        <c-checkbox v-model="dialog.forflg"
                        >CG00005</c-checkbox
                        >
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="saveDialog"
                    >确 定</el-button
                    >
                    <el-button @click="dialogVisible = false">取 消</el-button>

                </span>
            </el-dialog>
        </c-col>
        <!--=================== Own Commission/Charges:================== -->
        <c-col :span="24" style="text-align: left">
            <el-form-item label="Own Commission/Charges:"> </el-form-item>
        </c-col>
        <c-col :span="22" style="margin-bottom: 18px" :offset="1">
            <c-table
                    style="text-align: center"
                    :list="model.setmod.setfeg.setfel"
                    :paginationShow="false"
                    :border="true"
            >
                <el-table-column label="Role" width="auto">
                    <template #default="scope">
                        <el-select v-model="scope.row.rol">
                            <el-option
                                    v-for="item in codes.setfelRol"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="Code" prop="feecod" width="auto">
                </el-table-column>
                <el-table-column label="Source" prop="src" width="auto">
                </el-table-column>
                <el-table-column label="Disp" width="auto">
                    <template #default="scope">
                        <el-select v-model="scope.row.dsp" @change="dispDefault">
                            <el-option
                                    v-for="item in codes.setfeldsp"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="Units" prop="unt" width="auto">
                </el-table-column>
                <el-table-column
                        label="Long Fee Text"
                        prop="feetxtinf"
                        width="auto"
                >
                </el-table-column>
                <el-table-column label="Currency" prop="cur" width="auto">
                </el-table-column>
                <el-table-column
                        label="Original Amount"
                        prop="ogiamt"
                        width="auto"
                >
                </el-table-column>
                <el-table-column label="Fee Amount" prop="amt" width="auto">
                </el-table-column>
                <el-table-column label="Details" prop="det" width="auto">
                    <template slot-scope="scoped">
                        <el-button
                                size="mini"
                                @click="detail2(scoped.$index, scoped.row)"
                        >details</el-button
                        >
                    </template>
                </el-table-column>
            </c-table>
        </c-col>
        <setpan-dialog v-if="dialogVisible2" :visible="dialogVisible2" :model="model" :idx="index" :codes="codes"/>
        <c-col :span="24" style="text-align: left">
            <el-form-item label="Settlement:" label-width="100px">
            </el-form-item>
        </c-col>
        <c-col :span="22" style="margin-bottom: 18px" :offset="1">
            <c-table
                    style="text-align: center"
                    :list="model.setmod.setglg.setgll"
                    :paginationShow="false"
                    :border="true"
            >
                <el-table-column label="Mod" prop="modflg" width="auto">
                </el-table-column>
                <el-table-column label="Role" prop="rol" width="auto">
                </el-table-column>
                <el-table-column label="in" prop="acccur" width="auto">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.acccur">
                            <el-option
                                    v-for="item in codes.acccur"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column
                        label="Amount Paid"
                        prop="fmtaccamt"
                        width="auto"
                >
                </el-table-column>
                <el-table-column label="Disp." width="auto">
                    <template #default="scope">
                        <el-select v-model="scope.row.dsp">
                            <el-option
                                    v-for="item in codes.setglldsp"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="Account" prop="act" width="auto">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.act">
                            <el-option
                                    v-for="item in scope.act"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="C" prop="debcdtflg" width="auto">
                </el-table-column>
                <el-table-column label="Curr." prop="cur" width="auto">
                </el-table-column>
                <el-table-column
                        label="Original Amount"
                        prop="fmtamt"
                        width="auto"
                >
                </el-table-column>
                <el-table-column label="Rate" prop="rat" width="auto">
                </el-table-column>
                <el-table-column label="" width="auto"> </el-table-column>
            </c-table>
        </c-col>

        <c-col :span="12" style="margin-bottom: 10px;">
            <span v-text="model.setmod.retmsg" data-path=".setmod.retmsg">
            </span>
        </c-col>

        <c-col :span="12" style="margin-bottom: 10px;">
            <span v-text="model.setmod.zmqacclab" data-path=".setmod.zmqacclab">
            </span>
        </c-col>

        <c-col :span="12" style="margin-bottom: 10px;">
            <span
                    v-text="model.setmod.setglg.labdspflg"
                    data-path=".setmod.setglg.labdspflg"
            >
            </span>
        </c-col>
    </c-row>
</template>
<script>
    import Event from "~/model/Ditopn/Event";
    import CommonProcess from "~/mixin/CommonProcess";
    import SetpanDialog from "./SetpanDialog.vue";
    import Api from "~/service/Api"
    import Utils from "~/utils/index"

    export default {
        inject: ['root'],
        components: { SetpanDialog },
        props: ["model", "codes"],
        mixins: [CommonProcess],
        data() {
            return {
                dialogVisible: false,
                dialogVisible2: false,
                dialog: {
                    payee: "",
                    ptydbt: "",
                    txtpay: "",
                    txtdbt: "",
                    CG00005: "",
                },
                dialog2: {
                    feetxtinf:"",
                    feetxt:"",
                },
                index: 0,
            };
        },
        methods: {
            ...Event,
            //第一个表格
            addRow() {
                let newRow = { ...dialog };
                this.model.setmod.setfog.setfol.push(newRow);
            },
            removeRow() {
                this.model.setmod.setfog.setfol.pop();
            },
            saveDialog() {
                this.visiable = false;
                this.model.setmod.setfog.setfol[this.index] = this.dialog;
            },
            // 第二个表格
            detail1(index, row) {
                this.executeDefault("det").then(res=>{
                    this.dialogVisible = true;
                    this.dialog = row;
                    this.index = index;
                })

            },
            dispDefault(){
                this.executeDefault("mac").then(res=>{
                    Utils.copyValueFromVO(this.model, res.data)
                })

            },
            // 第三个表格
            detail2(index, row) {
                this.executeRule("det").then(res=>{
                    this.dialogVisible2 = true;
                    this.index = index;
                    this.dialog2 = row
                })
            },
        },
        created: function () {},
    };
</script>
<style>
</style>