<!--  -->
<template>
  <div class="app-container">
    <el-card>
      <el-form :model="queryParams" ref="queryForm" action="#" :auto-upload="false" size="small" :inline="true">
        <div class="filter-box">
          <div class="filter-lf">
            <el-form-item label="" v-hasPermi="['subscription:bankImport:import']">
              <!-- <el-input v-model="queryParams.roleName" placeholder="请输入合同编号" clearable @keyup.enter.native="handleQuery" /> -->
              <el-upload ref="upload" :class=" uploadFileObj ? 'exist-file' : ''" v-model="uploadFileObj" :on-change="handleFileImport" :on-remove='onRemove' action :auto-upload="false" :limit='1' :on-exceed='onExceed'>
                <el-button type="text" v-if="!uploadFileObj">获取本地文件</el-button>
              </el-upload>
              <!-- <el-upload class="upload-demo" @change="handleFileImport" :file-list="fileList">
              <el-button size="small" type="primary">导入</el-button>
            </el-upload> -->
            </el-form-item>

            <el-form-item>
              <el-button size="mini" icon="el-icon-bottom" v-hasPermi="['subscription:bankImport:download']" @click="handleBeginImport" type="primary">下载导入模版</el-button>
            </el-form-item>
            <el-form-item>
              <el-button size="mini" icon="el-icon-upload2" v-hasPermi="['subscription:bankImport:import']" @click="handleBeginImport" type="primary">导入</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleClear">清空</el-button>
            </el-form-item>
          </div>
        </div>

      </el-form>
      <el-table v-loading="loading" stripe border v-hasPermi="['subscription:bankImport:list']" :data="tableList" @selection-change="handleSelectionChange">
        <el-table-column label="序号" type="index" />
        <el-table-column label="银行流水" prop="roleName" />
        <el-table-column label="收款银行" prop="roleName" />
        <el-table-column label="账号/商户编号" prop="roleName" />
        <el-table-column label="交易日期" prop="roleName" />
        <el-table-column label="交易金额" prop="roleName" />
        <el-table-column label="手续费" prop="roleName" />
        <el-table-column label="到账金额" prop="roleName" />
        <el-table-column label="对方账号" prop="roleName" />
        <el-table-column label="对方户名" prop="roleName" />
        <el-table-column label="摘要" prop="roleName" />
        <el-table-column label="备注" prop="roleName" />
      </el-table>
      <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getTableList" />
    </el-card>
  </div>
</template>

<script>
import { bankListApi, confirmExistApi, cancelExistApi } from '@/api/subscription/bankImport'
export default {
  name: 'supplierMsg',
  props: {},
  computed: {},
  data() {
    return {
      uploadFileObj: null,
      fileList: [],
      selectArr: [],
      disabled: false,
      id: null,
      isOpen: false,
      total: 0,
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        roleName: undefined,
      },
      tableList: [
        { roleName: 'roleName' }
      ]
    }
  },
  created() {
    this.getTableList()
  },
  methods: {
    handleClear() {
      this.$nextTick(() => {
        this.$refs.upload.clearFiles()
        this.uploadFileObj = null
      })
    },
    handleBeginImport() {
      if (!this.uploadFileObj) {
        this.$fm('请先获取本地文件！')
      } else {
        this.$nextTick(() => {
          this.$refs.upload.clearFiles()
          this.uploadFileObj = null
          this.$sm('导入成功啦！')
        })
      }
    },
    onRemove() { //删除待上传文件
      this.uploadFileObj = null
    },
    onExceed() {
      return this.$fm('对不起，只能导入1份文件')
    },
    handleFileImport(file, fileList) {
      this.uploadFileObj = file
      console.log('file..', file, fileList);
    },
    handleExport() {
      if (!this.selectArr.length) {
        this.$fm('请选择要导出的数据！')
      }
    },
    handleShow(row, type) {
      if (type === 1) {
        this.id = null
        this.disabled = true
      } else {
        this.id = 1
        this.disabled = false
      }
      this.isOpen = true
    },
    handleSave() {
      this.isOpen = false
    },
    handleCancel() {
      this.isOpen = false
    },
    handleAddMsg() {
      this.isOpen = true
    },
    handleUpdate() {

    },
    handleDelete(id) {
      this.$confirm('您确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$sm('删除成功！')
        this.getTableList()
      })
    },
    getTableList() {

    },
    handleSelectionChange(val) {
      this.selectArr = val
    },
  },



}

</script>
<style lang='scss' scoped>
@import '@/assets/styles/header/index.scss';
@import '@/assets/styles/common/index.scss';
</style>