<template>
  <div class="eibs-tab">
    <c-list-search @form-reset="handleReset" @form-search="handleSearch">
      <template>
        <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="from">
                <el-date-picker
                  type="date"
                  v-model="model.diafro"
                  style="width: 45%"
                  placeholder="请选择Diary From date"
                ></el-date-picker>
                to
                <el-date-picker
                  type="date"
                  v-model="model.diatil"
                  style="width: 45%"
                  placeholder="请选择Diary Till date"
                ></el-date-picker>
              </el-form-item>
            </c-col>

            <c-col :span="12">
              <el-form-item label="Reasons" prop="reasen">
                <c-select
                  v-model="model.reasen"
                  style="width: 100%"
                  placeholder="请选择Reasons"
                >
                  <el-option
                    v-for="item in codes.diatxt"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </c-select>
              </el-form-item>
            </c-col>
          </el-row>
          <el-row>
            <c-col :span="12">
              <el-form-item label="Reference" prop="searef">
                <c-input
                  v-model="model.searef"
                  maxlength="16"
                  style="width: 100%"
                  placeholder="请输入Selection Reference"
                ></c-input>
              </el-form-item>
            </c-col>

            <c-col :span="12">
              <el-form-item label="Bus.Sector" prop="seasec">
                <c-select
                  v-model="model.seasec"
                  style="width: 100%"
                  placeholder="请选择Business Sector"
                >
                  <el-option
                    v-for="item in codes.bustxt"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </c-select>
              </el-form-item>
            </c-col>
          </el-row>
          <el-row>
            <c-col :span="12">
              <el-form-item label="Selection of Users" prop="usfmod.flt">
                <c-select
                  v-model="model.usfmod.flt"
                  style="width: 60%"
                  placeholder="请选择Filter"
                >
                  <el-option
                    v-for="item in codes.flt"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </c-select>
                <c-button size="small" type="primary" style="width: 30%">
                  show set
                </c-button>
              </el-form-item>
            </c-col>

            <c-col :span="12">
              <el-form-item
                v-if="model.usfmod.flt == '<SELU>'"
                label="Selected User"
                prop="usfmod.usr.extkey"
              >
                <c-input
                  v-model="model.usfmod.usr.extkey"
                  maxlength="8"
                  placeholder="请输入User ID"
                  style="width: 70%"
                ></c-input>
                <c-button size="small" type="primary" icon="el-icon-search"></c-button>
              </el-form-item>
              <el-form-item
                v-if="model.usfmod.flt == '<SELB>'"
                label="Select Branch"
                prop="usfmod.selusb"
              >
                <c-select
                  v-model="model.usfmod.selusb"
                  style="width: 100%"
                  placeholder="请选择Select user branch"
                >
                </c-select>
              </el-form-item>
            </c-col>
          </el-row>

          <c-col :span="24"> </c-col>
        </el-form>
      </template>
    </c-list-search>

    <div style="margin-top: 20px">
      <c-button
        size="small"
        type="primary"
        @click="onButdet"
        disabled="disabled"
      >
        Display
      </c-button>
      <c-button
        size="small"
        type="primary"
        @click="onButdia"
        disabled="disabled"
      >
        Modify
      </c-button>
      <c-button
        size="small"
        type="primary"
        @click="onButdel"
        disabled="disabled"
      >
        Delete
      </c-button>
      <c-button
        size="small"
        type="primary"
        @click="onButprt"
        disabled="disabled"
      >
        Print
      </c-button>
      <c-button
        size="small"
        type="primary"
        disabled="disabled"
        @click="onButconsel"
      >
        Selection
      </c-button>
      <c-button
        size="small"
        type="primary"
        @click="onButconcal"
        disabled="disabled"
      >
        Process
      </c-button>
      <c-button size="small" type="primary" disabled="disabled">
        导Excel
      </c-button>
    </div>

    <el-row>
      <c-istream-table
        :list="stmData.data"
        :columns="stmData.columns"
        :showSelection="true"
        v-on:multipleSelect="multipleSelect"
      >
      </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>

    <!--
	<c-col :span="12">
	    <span  v-text="model.usfmod.usftxt"   data-path=".usfmod.usftxt" > </span>
	</c-col>
                  
       <c-col :span="12">
        <el-form-item label="Filter" prop="usfmod.flt">
            <c-select v-model="model.usfmod.flt" style="width:100%" placeholder="请选择Filter">
              </c-select>
        </el-form-item>
       </c-col>
                  
       <c-col :span="12">
        <c-button size="small" type="primary"  @click="onUsfmodShwflt">
            Sho&w Set
        </c-button>
       </c-col>
                  
       <c-col :span="12">
        <c-button size="small" type="primary"  @click="onButdet">
            &Display
        </c-button>
       </c-col>
                                   
       <c-col :span="12">
        <el-form-item label="Selection Reference" prop="searef">
            <c-input  v-model="model.searef" maxlength="16"  placeholder="请输入Selection Reference"></c-input>
        </el-form-item>
       </c-col>
                                   
       <c-col :span="12">
        <el-form-item label="Business Sector" prop="seasec">
            <c-select v-model="model.seasec" style="width:100%" placeholder="请选择Business Sector">
              </c-select>
        </el-form-item>
       </c-col>
                  
	<c-col :span="12">
	    <span  v-text="model.usfmod.labtxt"   data-path=".usfmod.labtxt" > </span>
	</c-col>
                  
       <c-col :span="12">
        <el-form-item label="Selected User Group Set" prop="usfmod.selusgset">
            <c-select v-model="model.usfmod.selusgset" style="width:100%" placeholder="请选择Selected User Group Set">
              </c-select>
        </el-form-item>
       </c-col>
                  
       <c-col :span="12">
        <el-form-item label="User ID" prop="usfmod.usr.extkey">
            <c-input  v-model="model.usfmod.usr.extkey" maxlength="8"  placeholder="请输入User ID"></c-input>
        </el-form-item>
       </c-col>
                  
       <c-col :span="12">
        <el-form-item label="Selected User Group" prop="usfmod.selusg">
            <c-select v-model="model.usfmod.selusg" style="width:100%" placeholder="请选择Selected User Group">
              </c-select>
        </el-form-item>
       </c-col>
                  
       <c-col :span="12">
        <el-form-item label="Select user branch" prop="usfmod.selusb">
            <c-select v-model="model.usfmod.selusb" style="width:100%" placeholder="请选择Select user branch">
              </c-select>
        </el-form-item>
       </c-col>
                  
       <c-col :span="12">
        <el-form-item label="" prop="usfmod.usrget.sdamod.seainf">
            <c-input  v-model="model.usfmod.usrget.sdamod.seainf"  placeholder="请输入"></c-input>
        </el-form-item>
       </c-col>
                  
       <c-col :span="12">
        <c-button size="small" type="primary"  @click="onButdia">
            &Modify
        </c-button>
       </c-col>
                  
       <c-col :span="12">
        <el-form-item label="Display Stream" prop="dspstm">
            <c-input  v-model="model.dspstm"  placeholder="请输入Display Stream"></c-input>
        </el-form-item>
       </c-col>
                  
       <c-col :span="12">
        <c-button size="small"  icon="el-icon-delete" @click="onButdel">
            &Delete
        </c-button>
       </c-col>
                  
       <c-col :span="12">
        <c-button size="small" type="primary"  @click="onButprt">
            P&rint
        </c-button>
       </c-col>
                                   
       <c-col :span="12">
        <c-button size="small" type="primary" icon="el-icon-search" @click="onButconsel">
            &Selection
        </c-button>
       </c-col>
                  
       <c-col :span="12">
        <c-button size="small" type="primary"  @click="onButconcal">
            &Process
        </c-button>
       </c-col>
                  
       <c-col :span="12">
        <c-button size="small" type="primary"  @click="onButexi">
            E&xit
        </c-button>
       </c-col>
       -->
  </div>
</template>
<script>
import Api from "~/service/Api";
import CommonProcess from "~/mixin/CommonProcess";
import CodeTable from "~/config/CodeTable";
import Event from "~/model/Diasel/Event";

export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [CommonProcess],
  data() {
    return {
      initdialog: false,
      transactionStatus: {
        busiNo: "",
        modTimes: 0,
        postCount: 0,
        accCount: 0,
        earnCount: 0,
        earnAmt: 0,
      },
      stmData: {
        columns: [
          '1 1 "Date" 1',
          '2 2 "Reason" 1',
          '3 3 "Reference" 1',
          '4 4 "Description" 1',
          '5 5 "Transaction" 1',
          '6 6 "User" 1',
          '7 7 "Group" 1',
          '8 8 "客户号" 1',
          '9 9 "客户名称" 1',
          '10 10 "币种" 1',
          '11 11 "金额" 1',
          '12 12 "预计核验" 1',
        ],
        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 () {},
};
</script>
<style>
</style>
