<template>
  <div class="eibs-tab">
      <c-list-search  @form-reset="handleReset" @form-search="handleSearch">
            <template v-slot="searchSlot">
                <el-form
                    class="m-table-search-form"
                    ref="paramsForm"
                    :inline="true"
                    label-position="left"
                    label-width="110px"
                    size="small"
                >
                <el-row>

                  <c-col :span="12">
                    <el-form-item label="Branch" prop="bchcon">
                      <c-select
                        v-model="model.bchcon"
                        style="width: 100%"
                        placeholder="请选择Branch"
                      >
                      <el-option
                      v-for="item in codes.bchtyp"
                      :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="   " prop="searchAllUsers" >
                            <c-checkbox  v-model="model.searchAllUsers">查询所有柜员</c-checkbox>
                    </el-form-item>
                  </c-col> 
                </el-row>
                <el-row>
                  <c-col :span="12">
                    <el-form-item label="Reference" prop="trncorco.ownref">
                      <c-input
                        v-model="model.trncorco.ownref"
                        maxlength="16"
                        placeholder="请输入Reference"
                      ></c-input>
                    </el-form-item>
                  </c-col>

                  <c-col :span="12">
                    <el-form-item label="Status" prop="trncorco.relflg">
                      <c-select
                        v-model="model.trncorco.relflg"
                        style="width: 100%"
                        placeholder="请选择Status"
                      >
                        <el-option
                          v-for="item in codes.relflg"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </c-select>
                    </el-form-item>
                  </c-col>

                  

                 
                </el-row>
                  <!--            
                    <c-col :span="12">
                      <el-form-item label="Drag  Drop Sender">
                          <c-input  v-model="model.atpget.sdamod.dadsnd"  placeholder="请输入Drag  Drop Sender"></c-input>
                      </el-form-item>
                    </c-col>
                    -->
                <el-row v-show="searchSlot.searchToggle">
                  <c-col :span="24">
                    <c-col :span="12">
                      <el-form-item label="User" prop="usrcon">
                        <c-select
                          v-model="model.usrcon"
                          style="width: 100%"
                          placeholder="请选择User"
                        >
                        <el-option
                        v-for="item in codes.usrsort"
                        :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="Between">
                        <el-date-picker
                          type="date"
                          v-model="model.trncorco.inidatfro"
                          style="width: 45%"
                          placeholder="请选择Date of entry of Transaction"
                        ></el-date-picker>
                        -
                        <el-date-picker
                          type="date"
                          v-model="model.trncorco.inidattil"
                          style="width: 45%"
                          placeholder="请选择Date of entry of Transaction until"
                        ></el-date-picker>
                      </el-form-item>
                    </c-col>
                  </c-col>
                  <!--                           
                    <c-col :span="12">
                      <el-form-item label="and">
                          
                      </el-form-item>
                    </c-col> -->
                  <c-col :span="24">
                  <c-col :span="12">
                    <el-form-item label="Transaction Type " prop="atp.cod">
                      <c-input
                        v-model="model.atp.cod"
                        maxlength="6"
                        style="width: 50%"
                        placeholder="请输入Transaction Type "
                      ></c-input>
                      <!-- <c-input  v-model="model.atpget.sdamod.seainf"  style="width:10%" placeholder="i"></c-input> -->
                      <c-button size="small" type="primary" @click="onSeainf" icon="el-icon-search"
                        ></c-button
                      >
                    </el-form-item>
                  </c-col>

                  <c-col :span="12">
                    <el-form-item label="信用证标志" prop="trncorco.dflg">
                      <c-select
                        v-model="model.trncorco.dflg"
                        style="width: 100%"
                        placeholder="请选择信用证标志"
                      >
                        <el-option
                          v-for="item in codes.dflg"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </c-select>
                    </el-form-item>
                  </c-col>
                  </c-col>
                  <c-col :span="12">
                    <el-form-item label="Transaction Text" prop="atptxt">
                      <c-input
                        v-model="model.atptxt"
                        maxlength="37"
                        placeholder="请输入Transaction Text"
                      ></c-input>
                    </el-form-item>
                  </c-col>

                

                  </el-row>

                </el-form>
            </template>
      </c-list-search>

    <!--                            
       <c-col :span="12">
        <el-form-item label="List of transaction sfor display">
            <c-input  v-model="model.trncorco.trnstm"  placeholder="请输入List of transaction sfor display"></c-input>
        </el-form-item>
       </c-col>             
                  
       <c-col :span="12">
        <el-form-item label="# of transactions">
            <c-input  v-model="model.numtrn"  placeholder="请输入# of transactions"></c-input>
        </el-form-item>
       </c-col>
       -->

    <div style="margin-top:20px;">
      
      <!-- <c-button size="small" type="primary" @click="onSeaown">
        Search Own
      </c-button>

      <c-button size="small" type="primary" @click="onSeajbh">
        Search All
      </c-button>  -->
     

      <c-button
        size="small"
        type="primary"
        disabled="disabled"
        @click="onImgmodNewimg"
      >
        Img
      </c-button>
      <c-button
        size="small"
        type="primary"
        disabled="disabled"
        @click="onImgmodNewhisimg"
      >
        His.img
      </c-button>
      <c-button
        size="small"
        type="primary"
        disabled="disabled"
        @click="onDiaconButdia"
      >
        Diaries
      </c-button>
      <c-button
        size="small"
        type="primary"
        disabled="disabled"
        @click="onImgmodHisimg"
      >
        Old.img
      </c-button>
      <c-button
        size="small"
        type="primary"
        :disabled="relrowDisabled"
        @click="onRelrow"
      >
        Release
      </c-button>
      <c-button
        size="small"
        type="primary"
        disabled="disabled"
        @click="onReprow"
      >
        Repair
      </c-button>
      <c-button
        size="small"
        type="primary"
        :disabled="relrowDisabled"
        @click="onRejrow"
      >
        Reject
      </c-button>
      <c-button size="small" type="primary" @click="onExi"> Exit </c-button>
    </div>

    <!--   
       <c-col :span="12">
        <c-button size="small" type="primary"  @click="onSeajbh">
            Search All
        </c-button>
       </c-col>

       <c-col :span="12">
        <c-button size="small" type="primary"  @click="onSeactr">
            Search
        </c-button>
       </c-col>

        <c-col :span="12">
        <c-button size="small" type="primary"  @click="onSearow">
            Search All
        </c-button>
       </c-col>

        <c-col :span="12">
        <c-button size="small" type="primary"  @click="onDsp">
            Display
        </c-button>
       </c-col>

       <c-col :span="12">
        <c-button size="small" type="primary"  @click="onImgmodNewimg">
            Img
        </c-button>
       </c-col>
                  
       <c-col :span="12">
        <c-button size="small" type="primary"  @click="onImgmodNewhisimg">
            His.img
        </c-button>
       </c-col>
                  
       <c-col :span="12">
        <c-button size="small" type="primary"  @click="onDiaconButdia">
            Diaries
        </c-button>
       </c-col>
                                                    
       <c-col :span="12">
        <c-button size="small" type="primary"  @click="onImgmodHisimg">
            Old.img
        </c-button>
       </c-col>
                  
       <c-col :span="12">
        <c-button size="small" type="primary"  @click="onRelrow">
            Release
        </c-button>
       </c-col>
                  
       <c-col :span="12">
        <c-button size="small" type="primary"  @click="onPrinte">
            导出Excel
        </c-button>
       </c-col>
                  
       <c-col :span="12">
        <c-button size="small" type="primary"  @click="onReprow">
            Repair
        </c-button>
       </c-col>
                  
       <c-col :span="12">
        <c-button size="small" type="primary"  @click="onRejrow">
            Reject
        </c-button>
       </c-col>
                  
       <c-col :span="12">
        <c-button size="small" type="primary"  @click="onRelcor">
            Rel Control
        </c-button>
       </c-col>
       -->

    <!--          
       <c-col :span="12">
        <el-form-item label=">>">
            <c-input  v-model="model.orddsp"  placeholder="请输入>>"></c-input>
        </el-form-item>
       </c-col>          
                  
       <c-col :span="12">
        <c-button size="small" type="primary"  @click="onExi">
            Exit
        </c-button>
       </c-col> -->
    <!--<p>{{model.trncorco.trnstm}}</p>-->
    <el-row>
      <c-istream-table
        :list="stmData.data"
        :columns="stmData.columns"
        :showSelection="true"
        v-on:multipleSelect="multipleSelect"
      >
        <el-table-column prop="display" label="Display" width="100">
          <template slot-scope="scope">
            <!--              <a :href="`/#/display/${scope.row['10'].toLowerCase()}?trn=${scope.row['1']}`" target="_blank" >显示快照</a>-->
            <a href="javascript:void(0)" @click="display(scope.$index, scope.row)"
              >显示快照</a
            >
          </template>
        </el-table-column>
      </c-istream-table>
    </el-row>
    <el-row style="margin-top:2rem;">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>交易状态信息 —— {{transactionStatus.busiNo}}</span>
                </div>
                <div class="text item">
                    <form class="el-form--label-left el-form--inline">
                        <div class="el-form-item">
                            <label class="el-form-item__label">修改次数:</label>
                            <div class="el-form-item__content">
                            <span>{{transactionStatus.modTimes}}</span>
                            </div>
                        </div>
                        <div class="el-form-item">
                            <label class="el-form-item__label transstatus">交单次数:</label>
                            <div class="el-form-item__content">
                            <span>{{transactionStatus.postCount}}</span>
                            </div>
                        </div>
                        <div class="el-form-item">
                            <label class="el-form-item__label transstatus">付款次数:</label>
                            <div class="el-form-item__content">
                            <span>{{transactionStatus.earnCount}}</span>
                            </div>
                        </div>
                        <div class="el-form-item">
                            <label class="el-form-item__label transstatus">付款金额:</label>
                            <div class="el-form-item__content">
                            <span>{{transactionStatus.earnAmt}} CNY</span>
                            </div>
                        </div>
                        </form>
                    </div>
                </el-card>
    </el-row>
    <el-dialog :visible.sync="initdialog" :title="'交易列表'" append-to-body>
          <div class="m-list-btns">
          </div>
    </el-dialog>
  </div>
</template>
<script>
import Api from "~/service/Api";
import CommonProcess from "~/mixin/CommonProcess";
import CodeTable from "~/config/CodeTable";
import Event from "~/model/Trnrel/Event";

export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [CommonProcess],
  components: {},
  data() {
    return {
      initdialog:false,
      transactionStatus: {
          busiNo: "",
          modTimes: 0,
          postCount: 0,
          accCount: 0,
          earnCount: 0,
          earnAmt: 0
      },      
      stmData: {
        columns: [
          '10 1 "TRN" 50 1 tdViewTypeEdit:0 3 ATPTXT',
          '11 2:1 "Own Reference" 112',
          '17 2:2 "Addtional Text" 112',
          '12 3 "Cur" 37',
          '13 4 "Relevant Amount" 101 2 8:1 2 5',
          '14 5 "Entry" 104 20 DateTime 1',
          '9 6:1 "Req" 39',
          '2 6:2 "Sig" 35',
          '6 8:1 "Rq0" 40',
          '3 8:2 "Rel0" 40',
          '7 9:1 "Rq1" 40',
          '4 9:2 "Rel1" 40',
          '8 10:1 "Rq2" 40',
          '5 10:2 "Rel2" 40',
          '15 13 "Branch" 142',
          '16 11:1 "User" 62',
          '18 11:2 "" 62',
          '0 12 "Status" 54 1 tdViewTypeEdit:0 1 RELSTA',
        ],
        data: [],
      },
      relrowDisabled: true,
      multipleSelection: [],
    };
  },
  methods: {
    multipleSelect(val) {
      // TODO 根据Status判断按钮是否禁用
      this.relrowDisabled = !(val.length > 0);
      this.multipleSelection = val;
    },
    getSelectedData() {
      return this.multipleSelection.map((idx) => this.stmData.data[idx]);
    },
    ...Event,
  },
  created: function () {},
  computed: {},
};
</script>
<style>
</style>
