<template>
  <div class="eibs-tab">
    <div v-if="showTable">
      <el-table :data="model.recgrp.tfe" @selection-change="handleSelectionChange" style="width: 100%">
        <!--                <el-table-column type="selection" width="50"></el-table-column>-->
        <el-table-column :formatter="formatOpertype" label="明细操作类型" prop="listopertype"
                          width="150"></el-table-column>
        <el-table-column label="明细主键" type="index" width="50"></el-table-column>

        <el-table-column label="远端买入(名义本金)币种" prop="disbuycurrency" width="150"></el-table-column>
        <el-table-column label="远端买入(名义本金)金额" prop="disbuyamt" width="150"></el-table-column>
        <el-table-column label="远端卖出(名义本金)币种" prop="dissellcurrency" width="150"></el-table-column>
        <el-table-column label="远端卖出(名义本金)金额" prop="dissellamt" width="150"></el-table-column>
        <el-table-column label="近端交割日" prop="neardate" width="150"></el-table-column>
        <el-table-column label="近端交易价格" prop="nearprice" width="150"></el-table-column>
        <el-table-column label="远端交割日" prop="distaldate" width="150"></el-table-column>
        <el-table-column label="远端交易价格" prop="disprice" 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>                          
    <!-- <c-col :span="12">
      <c-col :span="24">
        <el-form-item label="明细主键" prop="recp.tfepp.seqno">
            <c-input  v-model="model.recp.tfepp.seqno" placeholder="请输入明细主键"></c-input>
        </el-form-item>
      </c-col> 
      <c-col :span="24">
        <el-form-item label="明细操作类型" prop="recp.tfepp.listopertype">
            <c-select v-model="model.recp.tfepp.listopertype" style="width:100%" placeholder="请选择明细操作类型">
              </c-select>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="交易日" prop="recp.tfepp.tradedate">
            <c-date-picker type="date"  v-model="model.recp.tfepp.tradedate" style="width:100%"></c-date-picker>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <c-col :span="12">
          <el-form-item label="远端买入(名义本金)金额" prop="recp.tfepp.disbuycurrency">
              <c-select v-model="model.recp.tfepp.disbuycurrency" style="width:100%" dbCode="CURTXT" placeholder="请选择远端买入(名义本金)币种">
                </c-select>
          </el-form-item>
        </c-col>
        <c-col :span="12">
          <el-form-item label="" prop="recp.tfepp.disbuyamt" label-width="0px">
              <c-input-currency v-model="model.recp.tfepp.disbuyamt" placeholder="请输入远端买入(名义本金)金额"></c-input-currency>
          </el-form-item>
        </c-col>
      </c-col>
      <c-col :span="24">  
        <c-col :span="12">
          <el-form-item label="远端卖出(名义本金)金额" prop="recp.tfepp.dissellcurrency">
              <c-select v-model="model.recp.tfepp.dissellcurrency" style="width:100%" dbCode="CURTXT" placeholder="请选择远端卖出(名义本金)币种">
                </c-select>
          </el-form-item>
        </c-col>        
        <c-col :span="12">
          <el-form-item label="" prop="recp.tfepp.dissellamt" label-width="0px">
              <c-input-currency  v-model="model.recp.tfepp.dissellamt" placeholder="请输入远端卖出(名义本金)金额"></c-input-currency>
          </el-form-item>
        </c-col>
      </c-col>
    </c-col>
    <c-col :span="12">
      <c-col :span="24">
        <el-form-item label="" style="text-align: left;">
	        <c-checkbox disabled style="text-align: left"  false-label="" true-label="X" v-model="model.recp.tfepp.acp">确认</c-checkbox>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="近端交割日" prop="recp.tfepp.neardate">
            <c-date-picker type="date"  v-model="model.recp.tfepp.neardate" style="width:100%"></c-date-picker>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="近端交易价格" prop="recp.tfepp.nearprice">
            <c-input-currency v-model="model.recp.tfepp.nearprice"  placeholder="请输入近端交易价格"></c-input-currency>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="远端交割日" prop="recp.tfepp.distaldate">
            <c-date-picker type="date"  v-model="model.recp.tfepp.distaldate" style="width:100%"></c-date-picker>
        </el-form-item>
      </c-col>     
      <c-col :span="24">
        <el-form-item label="远端交易价格" prop="recp.tfepp.disprice">
            <c-input-currency v-model="model.recp.tfepp.disprice" placeholder="请输入远端交易价格"></c-input-currency>
        </el-form-item>
      </c-col>
    </c-col> -->

    <div v-else>
      <el-form :model="formData" :rules="rules" :validate-on-rule-change="false" label-width="150px" ref="formRef"
                style="width: 100%">

      <c-row>
        <c-col :span="8">
            <el-form-item label="远端买入(名义本金)币种" prop="disbuycurrency">                            
                <c-select-cur v-model="formData.disbuycurrency" style="width:100%" dbCode="CURTXT" placeholder="请选择远端买入(名义本金)币种"></c-select-cur>
            </el-form-item>
        </c-col>
        <c-col :span="8">
            <el-form-item label="远端买入(名义本金)金额" prop="disbuyamt">
                <c-input-currency v-model="formData.disbuyamt" placeholder="请输入远端买入(名义本金)金额"></c-input-currency>
            </el-form-item>
        </c-col>
        <c-col :span="8">
          <el-form-item label="远端交易价格" prop="disprice">
            <c-input-currency v-model="formData.disprice" placeholder="请输入远端交易价格"></c-input-currency>
          </el-form-item>
        </c-col>
        
    </c-row>

    <c-row>
        <c-col :span="8">
          <el-form-item label="远端卖出(名义本金)币种" prop="dissellcurrency">
            <c-select-cur v-model="formData.dissellcurrency" style="width:100%" dbCode="CURTXT" placeholder="请选择卖出币种"></c-select-cur>
          </el-form-item>
        </c-col>
        <c-col :span="8">
          <el-form-item label="远端卖出(名义本金)金额" prop="dissellamt">                            
            <c-input-currency v-model="formData.dissellamt" placeholder="请输入卖出金额"></c-input-currency>                                              
          </el-form-item>
        </c-col>
        <c-col :span="8">
          <el-form-item label="近端交易价格" prop="nearprice">
            <c-input-currency v-model="formData.nearprice"  placeholder="请输入近端交易价格"></c-input-currency>
          </el-form-item>
        </c-col>

    </c-row>

    <c-row>
      
        
        <c-col :span="8">
            <el-form-item label="近端交割日" prop="neardate">
              <c-date-picker type="date" v-model="formData.neardate" style="width:100%"  ></c-date-picker>
            </el-form-item>
            
        </c-col>
        <c-col :span="8">
            <el-form-item label="远端交割日" prop="distaldate">
                <c-date-picker type="date"  v-model="formData.distaldate" style="width:100%" ></c-date-picker>
            </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 {
    mixins: [event],
    props:["model","codes"],
    data(){
        return {
          showTable: true,
          formData: {
            disbuycurrency: '',
            disbuyamt: '',
            dissellcurrency: '',
            dissellamt: '',
            neardate: '',
            nearprice: '',
            distaldate: '',
            disprice: '',
          },

          selectedRows: [],
          isEdit: false,
          index: -1,
        };
    },
    created() {
      let request = {
        dir: "O",
        cod: this.formData.seqno,
        branch: this.model.rmbbut.ownextkey,
      };
    },
    computed: {
     rules(){

     }
    },
    methods:{
      handleSelectionChange(selection) {
        this.selectedRows = selection;
      },
      toggleShow() {
        this.showTable = !this.showTable;
      },
    //   addRow(){
    //     this.isEdit = false;
    //     let tfe = {
    //       disbuycurrency: '',
    //       disbuyamt: '',
    //       dissellcurrency: '',
    //       dissellamt: '',
    //       neardate: '',
    //       nearprice: '',
    //       distaldate: '',
    //       disprice: '',
    //   };
    //   this.index = this.model.recgrp.tfe.push(tfe) - 1;
    //   this.formData = this.model.recgrp.tfe[this.index];
    //   this.toggleShow();
    //   },
    //   saveRow() {
    //     this.$refs.formRef.validate((valid) => {
    //       if (valid) {
    //         this.$set(this.model.recgrp.tfe, 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.tfe.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.tfe.splice(index, 1);
    // },
    // deleteSelectedRows() {
    //   if (this.selectedRows.length === 0) {
    //     this.$message.warning('请先选择要删除的数据行');
    //     return;
    //   }
    //   this.selectedRows.forEach(row => {
    //     const index = this.model.recgrp.tfe.indexOf(row);
    //     if (index !== -1) {
    //         this.model.recgrp.tfe.splice(index, 1);
    //     }
    //   });
    //   this.$message.success('成功删除选中行');
    //   this.selectedRows = [];
    // },
    formatOpertype(row, column, cellValue) {
      if (cellValue === "1") return "新增";
      if (cellValue === "2") return "变更";
    },
  }
}
</script>
<style>

</style>