<template>
  <div id="loan-record">
    <br>
    <div class="top">
      <el-form :inline="true" :model="queryModel" class="demo-form-inline">
        <el-input class="search-input" placeholder="请输入查询批次信息" icon="search" v-model="search"></el-input>
        <div class="btn">
          <el-button @click="queryBatch" type="primary">查询</el-button>
          <el-button  v-if="$permissionUtils.btnPermission('importOriginIndex')" @click="importClients" type="primary"><i class="el-icon-plus"></i>导入客户</el-button>
        </div>

      </el-form>
    </div>

    <div>
      <div class="system-list">
        <el-table :data="records" stripe style="width: 100%">
          <el-table-column type="index" width="60"></el-table-column>
          <el-table-column prop="originIndex" sortable label="批次号"></el-table-column>
          <el-table-column prop="fileName" sortable label="文件名称"></el-table-column>
          <el-table-column prop="countSum" sortable label="总数"></el-table-column>
          <el-table-column prop="countFail" sortable label="失败数"></el-table-column>
          <el-table-column prop="status" sortable label="状态" :formatter="statusFormat"></el-table-column>
          <el-table-column prop="originDesc" sortable label="特征"></el-table-column>
          <el-table-column prop="gmtCreated" sortable label="创建时间" :formatter="transDateFormat"></el-table-column>
        </el-table>
      </div>

      <div class="page">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="page.current"
          :page-size="page.size"
          layout="prev, pager, next"
          :total="page.total">
        </el-pagination>
      </div>
    </div>

    <!--窗口组件-->
    <template>
      <!--上传窗口-->
      <client-data-upload-dialog
        v-if="ui.clientDataUploadDialog.visible"
        :type="ui.clientDataUploadDialog.type"
        :clientBatch="ui.clientDataUploadDialog.clientBatch"
        :dialogVisible="ui.clientDataUploadDialog.visible"
        :dialogVisible.sync="ui.clientDataUploadDialog.visible">
      </client-data-upload-dialog>
    </template>
  </div>

</template>


<script type="text/ecmascript-6">

  import clientDataUploadDialog from "./ClientUploadDialog";
  import * as moment from "moment";


  export default {
    components: {
      clientDataUploadDialog,
    },
    name: "ClientDataUpload",
    data() {
      return {
        search: "",
        queryModel: {},
        records: [],
        page: {
          current: 1,
          size: 10,
          total: 0
        },
        ui: {
          clientDataUploadDialog: {
            visible: false,
            type: ''
          }
        }
      }
    },
    mounted: function () {
      this.loadSearchData();
    },
    methods: {
      queryBatch() {
        this.loadSearchData();
      },
      /** 加载搜索数据 */
      loadSearchData() {
        var url = '';
        if (this.search == '') {
          url = `/originIndex/getPageList/${this.page.current}`
        } else {
          url = `/originIndex/getPageList/${this.search}/${this.page.current}`
        }
        this.$$get(url)
          .then(res => {

            if (res.data.code < 1)
              throw res.data.msg;
            this.page = this.clonePage(res.data);
            this.records = res.data.data.data;
          })
          .catch(err => this.$$msg.err(err))
      },
      handleCurrentChange() {
        this.loadSearchData();
      },
      importClients() {
        this.ui.clientDataUploadDialog = {
          visible: true,
        };
      },

      statusFormat: function (row, column) {
        var status = row['status'];
        return this.$enumUtils.toMsg('OriginIndexStateEnum', status);
      },

    }
  }
</script>

