<template>
  <div class="eibs-tab">
    <div v-if="showTable">
      <el-table :data="model.recgrp.tfc" @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="buycurrencycode" width="150"></el-table-column>
        <el-table-column label="买入金额" prop="buyamt" width="150"></el-table-column>
      
        <el-table-column label="价格" prop="price" width="150"></el-table-column>
        <el-table-column label="卖出币种" prop="sellcurrencycode" width="150"></el-table-column>
        <el-table-column label="卖出金额" prop="sellamt" width="150"></el-table-column>
        <el-table-column label="交易日" prop="tradedate" width="150"></el-table-column>
        <el-table-column label="结算日" prop="settledate" 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.tfcpp.seqno">
          <c-input  v-model="model.recp.tfcpp.seqno" placeholder="请输入明细主键"></c-input>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="明细操作类型" prop="recp.tfcpp.listopertype">
          <c-select v-model="model.recp.tfcpp.listopertype" style="width:100%" placeholder="请选择明细操作类型">
            </c-select>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <c-col :span="12">
          <el-form-item label="买入金额" prop="recp.tfcpp.buycurrencycode">
              <c-select v-model="model.recp.tfcpp.buycurrencycode" dbCode="CURTXT" placeholder="请选择买入币种" style="width:100%">
                </c-select>
          </el-form-item>
        </c-col>    
        <c-col :span="12">
          <el-form-item prop="recp.tfcpp.buyamt" label-width="0px">
              <c-input-currency v-model="model.recp.tfcpp.buyamt" placeholder="请输入买入金额"></c-input-currency>
          </el-form-item>
        </c-col>
      </c-col>
       <c-col :span="24">
        <el-form-item label="价格" prop="recp.tfcpp.price">
            <c-input-currency  v-model="model.recp.tfcpp.price" placeholder="请输入价格"></c-input-currency>
        </el-form-item>
       </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.tfcpp.acp">确认</c-checkbox>
        </el-form-item>
      </c-col>
      <c-col :span="24">            
        <c-col :span="12">
          <el-form-item label="卖出金额" prop="recp.tfcpp.sellcurrencycode">
              <c-select v-model="model.recp.tfcpp.sellcurrencycode" style="width:100%" dbCode="CURTXT" placeholder="请选择卖出币种">
                </c-select>
          </el-form-item>
        </c-col>
        <c-col :span="12">
          <el-form-item prop="recp.tfcpp.sellamt" label-width="0px">
              <c-input-currency v-model="model.recp.tfcpp.sellamt" placeholder="请输入卖出金额"></c-input-currency>
          </el-form-item>
        </c-col>
      </c-col>
      <c-col :span="24">
        <el-form-item label="交易日" prop="recp.tfcpp.tradedate">
            <c-date-picker type="date" v-model="model.recp.tfcpp.tradedate" style="width:100%"  placeholder="请选择交易日"></c-date-picker>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="结算日" prop="recp.tfcpp.settledate">
            <c-date-picker type="date"  v-model="model.recp.tfcpp.settledate" style="width:100%" placeholder="请选择结算日"></c-date-picker>
        </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="seqno">
                            <c-input  v-model="formData.seqno" placeholder="请输入明细主键"></c-input>
                        </el-form-item>
                    </c-col>
                </c-row> -->

                <c-row>
                    <c-col :span="8">
                        <el-form-item label="买入币种" prop="buycurrencycode">                            
                            <c-select-cur v-model="formData.buycurrencycode" style="width:100%" dbCode="CURTXT" placeholder="请选择买入币种"></c-select-cur>
                        </el-form-item>
                    </c-col>
                    <c-col :span="8">
                        <el-form-item label="买入金额" prop="buyamt">
                            <c-input-currency v-model="formData.buyamt" placeholder="请输入买入金额"></c-input-currency>
                        </el-form-item>
                    </c-col>
                    <c-col :span="8">
                        <el-form-item label="价格" prop="price">                    
                            <c-input-currency  v-model="formData.price" placeholder="请输入价格"></c-input-currency>
                        </el-form-item>
                    </c-col>
                </c-row>

                <c-row>
                  <c-col :span="8">
                        <el-form-item label="卖出币种" prop="sellcurrencycode">
                            <c-select-cur v-model="formData.sellcurrencycode" style="width:100%" dbCode="CURTXT" placeholder="请选择卖出币种"></c-select-cur>
                        </el-form-item>
                    </c-col>
                    <c-col :span="8">
                        <el-form-item label="卖出金额" prop="sellamt">                            
                            <c-input-currency v-model="formData.sellamt" placeholder="请输入卖出金额"></c-input-currency>                                              
                        </el-form-item>
                    </c-col>
                    <c-col :span="8">
                        <el-form-item label="交易日" prop="tradedate">
                            <c-date-picker  v-model="formData.tradedate" style="width:100%"  placeholder="请选择交易日"></c-date-picker>
                        </el-form-item>
                    </c-col>
                    <c-col :span="8">
                        <el-form-item label="结算日" prop="settledate">
                           <c-date-picker v-model="formData.settledate" style="width:100%" placeholder="请选择结算日"></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 {
    props:["model","codes"],
    mixins: [event],
    data(){
        return {
          showTable: true,
          formData: {
            sellcurrencycode: '',
            buyamt: '',
            bustypelist: '',
            buycurrencycode: '',
            price: '',
            sellamt: '',
            tradedate: '',
            settledate: '',
          },

          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 tfc = {
      //     sellcurrencycode: '',
      //     buyamt: '',
      //     bustypelist: '',
      //     buycurrencycode: '',
      //     actualpayercode: '',
      //     actualpayercode: '',
      //     tradedate: '',
      //     settledate: '',
      // };
      // this.index = this.model.recgrp.tfc.push(tfc) - 1;
      // this.formData = this.model.recgrp.tfc[this.index];
      // this.toggleShow();
      // },
    //   saveRow() {
    //     this.$refs.formRef.validate((valid) => {
    //       if (valid) {
    //         this.$set(this.model.recgrp.tfc, 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.tfc.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.tfc.splice(index, 1);
    // },
    // deleteSelectedRows() {
    //   if (this.selectedRows.length === 0) {
    //     this.$message.warning('请先选择要删除的数据行');
    //     return;
    //   }
    //   this.selectedRows.forEach(row => {
    //     const index = this.model.recgrp.tfc.indexOf(row);
    //     if (index !== -1) {
    //         this.model.recgrp.tfc.splice(index, 1);
    //     }
    //   });
    //   this.$message.success('成功删除选中行');
    //   this.selectedRows = [];
    // },
    formatOpertype(row, column, cellValue) {
      if (cellValue === "1") return "新增";
      if (cellValue === "2") return "变更";
    },
  }
}
</script>
<style>

</style>