<template>
  <div class="eibs-tab">
    <el-row>
      <c-col :span="24">
        <c-col :span="8">
          <el-form-item label="业务编号" prop="ownref" style="width: 100%">
            <c-input maxlength="16" placeholder="请输入业务编号" clearable v-model="model.ownref"></c-input>
          </el-form-item>
        </c-col>

        <!-- <c-col :span="8">
          <el-form-item label="汇款种类" prop="paytyp" style="width: 100%">
            <c-select placeholder="请选择汇款种类" style="width:100%" v-model="model.paytyp" dbCode="PAYTYP" uil="CN"
              sort="SRT" :filterKey="['I','O']" clearable></c-select>
          </el-form-item>
        </c-col> -->

        <c-col :span="8">
          <el-form-item label="起止日期" prop="inidatfro" style="width: 100%">
            <c-col :span="11">
              <c-date-picker placeholder="请选择起始时间" style="width: 100%" type="date" v-model="model.inidatfro">
              </c-date-picker>
            </c-col>
            <c-col :span="2" style="text-align: center">
              <label style="display: inline-block; width: 100%">-</label>
            </c-col>
            <c-col :span="11">
              <c-date-picker placeholder="请选择截止时间" style="width: 100%" type="date" v-model="model.inidattil">
              </c-date-picker>
            </c-col>
          </el-form-item>
        </c-col>
        <c-col :span="8">
          <el-form-item label="业务状态" prop="staLs" style="width: 100%">
            <c-select multiple clearable placeholder="请选择业务状态" style="width: 100%" v-model="model.staLs">
              <el-option :key="item.code" :label="item.desc" :value="item.code" v-for="item in staList">
              </el-option>
            </c-select>
          </el-form-item>
        </c-col>
      </c-col>
    </el-row>

    <el-row>
      <c-col :span="24">
        <!-- <c-col :span="8">
          <el-form-item label="邮路类型" prop="cptrou" style="width: 100%">
            <c-select placeholder="请选择邮路类型" style="width:100%" v-model="model.cptrou" dbCode="CPTROU" uil="CN"
              sort="SRT" :filterKey="['SWIFT','CIPS','JNWB']" clearable></c-select>
          </el-form-item>
        </c-col> -->
        <c-col :span="8">
          <el-form-item label="业务机构" prop="bchcon" style="width: 100%">
            <c-select clearable placeholder="请选择业务机构" style="width: 100%" v-model="model.bchcon">
              <el-option :key="item.branch" :label="item.branch+' - '+item.bchname" :value="item.branch"
                v-for="item in bchtypList">
              </el-option>
            </c-select>
          </el-form-item>
        </c-col>
        <!-- <c-col :span="8">
          <el-form-item label="经办柜员" prop="usrcon" style="width: 100%">
            <c-select clearable placeholder="请选择经办柜员" style="width: 100%" v-model="model.usrcon">
              <el-option :key="item.extkey+index" :label="item.extkey+'-'+item.nam" :value="item.extkey"
                v-for="(item,index) in userList">
              </el-option>
            </c-select>
          </el-form-item>
        </c-col> -->
      </c-col>
    </el-row>

    <c-col :span="24">
      <c-col :span="24" style="text-align: right">
        <el-button size="small" @click="resetFormFields">重置</el-button>
        <el-button type="primary" icon="el-icon-search" size="small" :loading="searchLoading" @click="handleSearch()">查询
        </el-button>
        <el-button :disabled="tableData.length === 0" size="small" @click="exportExcel" type="primary">导出Excel</el-button>
      </c-col>
    </c-col>

    <c-col :span="24">
      <c-paging-table :data="tableData" ref="autselTableRef" :pageSize="pagination.pageSize"
        :pageNumber="pagination.pageNum" :total="model.total" @queryFunc="queryFunc" :border="true">
        <el-table-column label="交易代码" prop="inifrm" min-width="110px" show-overflow-tooltip>
          <template slot-scope="scope">{{scope.row.inifrm}}</template>
        </el-table-column>
        <el-table-column label="交易名称" prop="inifrmName" min-width="110px" show-overflow-tooltip>
          <template slot-scope="scope">{{scope.row.inifrmName}}</template>
        </el-table-column>
        <el-table-column label="业务编号" prop="ownref" min-width="160px" show-overflow-tooltip>
          <template slot-scope="scope">{{scope.row.ownref}}</template>
        </el-table-column>
        <el-table-column label="业务状态" prop="statusName" min-width="160px" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.statusName }}</template>
        </el-table-column>
        <el-table-column label="渠道类型" prop="channelName" min-width="120px" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.channelName }}</template>
        </el-table-column>
        <el-table-column label="客户名称" prop="objnam" min-width="210px" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.objnam }}</template>
        </el-table-column>
        <el-table-column label="币种" prop="reloricur" min-width="80px" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.reloricur }}</template>
        </el-table-column>
        <el-table-column label="金额" prop="reloriamt" min-width="130px" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.reloriamt}}</template>
        </el-table-column>
        <el-table-column label="创建时间" prop="inidattim" min-width="160px" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.inidattim }}</template>
        </el-table-column>
        <el-table-column label="经办柜员" prop="iniusr" min-width="160px" show-overflow-tooltip>
          <template slot-scope="scope">{{ tranName(scope.row.iniusr,scope.row.iniusrName) }}</template>
        </el-table-column>
        <el-table-column label="业务机构" prop="bchname" min-width="160px" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.bchname }}</template>
        </el-table-column>
        <el-table-column label="异常原因" prop="lastErr" min-width="160px" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.lastErr }}</template>
        </el-table-column>
        <el-table-column label="操作" width="100px">
          <template slot-scope="scope">
            <!-- <el-button @click="trnManHandle(scope.row)" type="primary" size="mini"
              :disabled="!(scope.row.auto == 'Y')||scope.row.status=='3'">转人工
            </el-button> -->
            <el-button @click="trnManHandle(scope.row)" type="primary" size="mini"
              :disabled="disabledButton(scope.row)">转人工
            </el-button>
          </template>
        </el-table-column>
      </c-paging-table>
    </c-col>

  </div>
</template>

<script>
  import Utils from "~/utils";
  import codes from "~/config/CodeTable";
  import Api from '~/service/Api';
  import moment from 'moment';
  import event from "../event";
  import commonFunctions from "~/mixin/commonFunctions.js";

  export default {
    props: ["model"],
    inject: ["root"],
    mixins: [event],
    data() {
      return {
        searchLoading: false,
        staList: [],
        bchtypList: [],
        userList: [],
        tableData: [],
        pagination: {
          pageIndex: 1,
          pageSize: 10,
          total: 0
        },
      };
    },
    mounted() {
      this.getBranchList();
      this.getUserList();
      this.getAutoflowStaList();
      this.model.inidatfro = moment(new Date()).format("YYYY-MM-DD");
      this.model.inidattil = moment(new Date()).format("yyyy-MM-DD");
      this.handleSearch();
    },
    methods: {
      // 重置表单数据
      resetFormFields() {
        this.model.ownref = '';
        //this.model.paytyp = '';
        this.model.inidatfro = null;
        this.model.inidattil = null;
        //this.model.cptrou = '';
        this.model.bchcon = '';
        //this.model.usrcon = '';
      },

      // 获取分页组件数据，为请求数据赋值
      queryFunc(pageNumber, pageSize) {
        this.pagination.pageNum = pageNumber;
        this.pagination.pageSize = pageSize;
        this.handleSearch();
      },

      // 获取经办柜员列表
      bchChange() {
        this.model.usrcon = "";
        this.getUserList();
      },

      tranName(usr, usrName) {
        if (usr === '-')
          return '-';
        if (usr && usrName) {
          return usr + "-" + usrName;
        }
        return "";
      },
      disabledButton(row){
        if(row.createtime){
          const autoflowCreTim = new Date(row.createtime).getTime();
          const now = Date.now();
          //定时任务创建超过5分钟
          if(now - autoflowCreTim > 300000 && (row.status=='0' || row.status=='1' || row.status=='5')){
            return false;
          }
          return true;
        }
        return true;
      },
    },
  };
</script>

<style scoped>
  .table-button-item-list {
    padding: 0;
    margin: 0;
  }

  .table-button-item-list li {
    list-style: none;
    padding: 5px 0;
    text-align: center;
    color: #606266;
    cursor: pointer;
  }
</style>