<template>
  <c-row class="eibs-tab">
    <!-- ===================顶部===================== -->
    <c-col :span="6">
            <el-form-item label="Reference" label-width="100px" prop="setmod.ref">
                <c-input
                    v-model="model.setmod.ref"
                    maxlength="16"
                    :readonly="true"
                    placeholder=""
                ></c-input>
            </el-form-item>
        </c-col>
        <c-col :span="6">
            <el-form-item label="Amount Settled" label-width="150px">
                <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=""
                ></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">
      <span v-text="model.setmod.docamttyplab" data-path=".setmod.docamttyplab">
      </span>
    </c-col> -->

    <!-- <c-col :span="10" :offset="1">
      <el-form-item label="document currency">
        <c-select
          v-model="model.setmod.doccur"
          style="width: 100%"
          placeholder="请选择document currency"
        >
        </c-select>
      </el-form-item>
    </c-col> -->

    <!-- <c-col :span="4" :offset="3">
      <c-checkbox v-model="model.setmod.xreflg">Recalculate Rates</c-checkbox>
    </c-col> -->

    <c-col :span="3" :offset="21">
      <c-button size="small" type="primary" @click="onSetmodDet">
        细节
      </c-button>
    </c-col>

    <!-- <c-col :span="12">
      <span v-text="model.setmod.retmsg" data-path=".setmod.retmsg"> </span>
    </c-col>

    <c-col :span="11" style="margin-top: 20px">
      <el-form-item label="自�'�区主�'�号">
        <c-input
          v-model="model.setmod.zmqacc"
          maxlength="20"
          placeholder="请输入自�'�区主�'�号"
        ></c-input>
      </el-form-item>
    </c-col>

    <c-col :span="12">
      <span v-text="model.setmod.zmqacclab" data-path=".setmod.zmqacclab">
      </span>
    </c-col>

    <c-col :span="12">
      <span
        v-text="model.setmod.setglg.labdspflg"
        data-path=".setmod.setglg.labdspflg"
      >
      </span>
    </c-col> -->
    <!-- ======================中部表格======================= -->
    <!--=================== Foreign Commission/Charges:================== -->
    <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>
    <!--=================== 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)"
                            >详情</el-button
                        >
                    </template>
                </el-table-column>
            </c-table>
        </c-col>
        <setpan-dialog v-if="dialogVisible2" :visible="dialogVisible2" :model="model" :idx="index" :codes="codes"/>
        <!--=================== Settlement:================== -->
        <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-row>
</template>
<script>
import Api from "~/service/Api";
import CommonProcess from "~/mixin/CommonProcess";
import CodeTable from "~/config/CodeTable";
import Event from "~/model/Cptopn/Event";
import SetpanDialog from "./SetpanDialog.vue";
import Utils from "~/utils/index"

export default {
    inject: ['root'],
    props: ["model", "codes"],
    mixins: [CommonProcess],
    components: { SetpanDialog },
    data() {
        return {
                dialogVisible2: false,
                dialog2: {
                    feetxtinf:"",
                    feetxt:"",
                },
                index: 0,
            data:[]
        };
    },
    methods: { 
        ...Event,
        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>
