<template>
  <div class="eibs-tab">
    <!-- ====================顶部==================== -->
    <c-col :span="5">
      <el-form-item label="参考号" label-width="100px" prop="setmod.ref">
        <c-input
          v-model="model.setmod.ref"
          maxlength="16"
          :readonly="true"
          placeholder="请输入our reference"
        ></c-input>
      </el-form-item>
    </c-col>
    <c-col :span="5">
      <el-form-item label="Ammount Settled" label-width="150px" prop="setmod.doccur">
        <c-select
          v-model="model.setmod.doccur"
          style="width: 100%"
          placeholder="请选择"
        >
          <el-option
            v-for="item in codes.doccur"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </c-select>
      </el-form-item>
    </c-col>

    <c-col :span="4">
      <el-form-item label="" label-width="20px" prop="setmod.docamt">
        <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" prop="setmod.dspflg">
        <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="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="境外佣金/费用:" label-width="180px"> </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="付款人" 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="收款人" width="auto">
          <template slot-scope="scope">
            <el-select v-model="scope.ptypay">
              <el-option
                v-for="item in codes.ptypay"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="资金来源" prop="src" width="auto">
        </el-table-column>
        <el-table-column label="到期处理方式" prop="dsp" width="auto">
        </el-table-column>
        <el-table-column label="付款人备注" prop="txtdbt" width="auto">
        </el-table-column>
        <el-table-column label="收款人备注" prop="txtpay" width="auto">
        </el-table-column>
        <el-table-column label="币种" 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="金额" 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> -->
    
    <!-- 第二个表格 -->
    <c-col :span="24" >
      <el-form-item label="我方佣金/费用:" label-width="180px"> </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="角色" 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="代码" prop="feecod" width="auto">
        </el-table-column>
        <el-table-column label="费用来源" prop="src" width="auto">
        </el-table-column>
        <el-table-column label="显示" 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="单位" prop="unt" width="auto">
        </el-table-column>
        <el-table-column label="费用长名" prop="feetxtinf" width="auto">
        </el-table-column>
        <el-table-column label="CF000009" prop="cur" width="auto">
        </el-table-column>
        <el-table-column label="CF000013" prop="ogiamt" width="auto">
        </el-table-column>
        <el-table-column label="CF000010" prop="amt" width="auto">
        </el-table-column>
        <el-table-column label="明细" 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>

    <!-- 第三个表格 -->
    <c-col :span="24" >
            <el-form-item label="结算:" label-width="180px">
            </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="模式" prop="modflg" width="auto">
                </el-table-column>
                <el-table-column label="角色" prop="rol" width="auto">
                </el-table-column>
                <el-table-column label="币种" 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="付款金额"
                    prop="fmtaccamt"
                    width="auto"
                >
                </el-table-column>
                <el-table-column label="显示" 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="账户" 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="CF000009" prop="debcdtflg" width="auto">
                </el-table-column>
                <el-table-column label="币种" prop="cur" width="auto">
                </el-table-column>
                <el-table-column
                    label="原金额"
                    prop="fmtamt"
                    width="auto"
                >
                </el-table-column>
                <el-table-column label="CF000020" prop="rat" width="auto">
                </el-table-column>
                <el-table-column label="" width="auto"> </el-table-column>
            </c-table>
        </c-col>

    <!-- <el-col :span="12">
        <el-form-item label="our reference" prop="setmod.ref">
            <c-input  v-model="model.setmod.ref" maxlength="16"  placeholder="请输入our reference"></c-input>
        </el-form-item>
       </el-col>             
                  
	<el-col :span="12">
	    <span  v-text="model.setmod.docamttyplab"   data-path=".setmod.docamttyplab" > </span>
	</el-col>
                  
       <el-col :span="12">
        <el-form-item label="document currency" prop="setmod.doccur">
            <c-select v-model="model.setmod.doccur" style="width:100%" placeholder="请选择document currency">
              </c-select>
        </el-form-item>
       </el-col>
                  
       <el-col :span="12">
        <el-form-item label="document amount" prop="setmod.docamt">
            <c-input  v-model="model.setmod.docamt"  placeholder="请输入document amount"></c-input>
        </el-form-item>
       </el-col>                 
                                   
       <el-col :span="12">
        <el-form-item label="Type of settlement" prop="setmod.dspflg">
            <c-select v-model="model.setmod.dspflg" style="width:100%" placeholder="请选择Type of settlement">
              </c-select>
        </el-form-item>
       </el-col>
                  
       <el-col :span="12">
	    <c-checkbox v-model="model.setmod.xreflg">Recalculate Rates</c-checkbox>
       </el-col> 
                  
       <el-col :span="12">
        <c-button size="small" type="primary"  @click="onSetmodDet">
            明细
        </c-button>
       </el-col>
                  
       <el-col :span="12">
	    <c-checkbox v-model="model.setmod.autclr">自动清算</c-checkbox>
       </el-col> 
                  
	<el-col :span="12">
	    <span  v-text="model.setmod.retmsg"   data-path=".setmod.retmsg" > </span>
	</el-col>
                                                                     
	<el-col :span="12">
	    <span  v-text="model.setmod.setglg.labdspflg"   data-path=".setmod.setglg.labdspflg" > </span>
	</el-col> -->
  </div>
</template>
<script>
import Api from "~/service/Api";
import CommonProcess from "~/mixin/CommonProcess";
import CodeTable from "~/config/CodeTable";
import Event from "~/model/Ditopn/Event";

export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [CommonProcess],
  data() {
    return {
      index: 0,
    };
  },
  methods: {
    ...Event,
    //第一个表格
    addRow() {
      let newRow = { ...dialog };
      this.model.setmod.setfog.setfop.push(newRow);
    },
    removeRow() {
      this.model.setmod.setfog.setfop.pop();
    },
    saveDialog() {
      // this.visiable = false;
      // this.model.setmod.setfog.setfop[this.index] = this.dialog;
    },
  },
  created: function () {},
};
</script>
<style>
</style>
