<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>数据管理</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Element UI -->
  <link rel="stylesheet" href="/webjars/element-ui/lib/theme-chalk/index.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="/webjars/font-awesome/css/font-awesome.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="/webjars/ionicons/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="/css/adminlte.min.css">
</head>
<body class="hold-transition sidebar-mini">

<!-- Site wrapper -->
<div class="wrapper">

  <!-- Navbar -->
  <div th:replace="fragments/navbar :: navbar"></div>
  <!-- /.navbar -->

  <!-- Main Sidebar Container -->
  <div th:replace="fragments/sidebar :: sidebar"></div>

  <!-- Content Wrapper. Contains page content -->
  <div id="content" th:fragment="content" class="content-wrapper">
  
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>数据管理</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="/">主页</a></li>
              <li class="breadcrumb-item active">数据管理</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">

      <!-- Default box -->
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">数据列表</h3>

          <div class="card-tools">
            <button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="最小化">
              <i class="fa fa-minus"></i></button>
            <button type="button" class="btn btn-tool" data-widget="remove" data-toggle="tooltip" title="关闭">
              <i class="fa fa-times"></i></button>
          </div>
        </div>
        <div class="card-body">
        	<el-input @keyup.enter.native="getFileList" style="width: 200px;" class="filter-item" placeholder="文件名称" v-model="query_files.name"></el-input>
        	<el-button class="filter-item" type="primary" icon="el-icon-search" @click="getFileList">查询</el-button>
        	<el-button class="filter-item" style="margin-left: 10px;" @click="handleCreateFile" type="primary" icon="el-icon-edit">上传</el-button>
        	<el-button class="filter-item" style="margin-left: 10px;" @click="handleCreateBlockFile" type="primary" icon="el-icon-edit">分块上传</el-button>
        	<el-alert :title="title" :type="type" v-if="showMessage"></el-alert>
          	<el-table :data="files" style="width: 100%">
      			<el-table-column prop="uuid" label="文件编号" width="240"></el-table-column>
      			<el-table-column prop="name" label="文件名称" width="240"></el-table-column>
      			<el-table-column prop="length" label="文件大小" width="180" :formatter="formatSize"></el-table-column>
      			<el-table-column prop="tag" label="文件版本" width="180"></el-table-column>
      			<el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
      			<el-table-column prop="modifiedTime" label="修改时间" width="180"></el-table-column>
      			<el-table-column fixed="right" label="操作" width="240">
			      <template slot-scope="scope">
			        <el-button @click="handleQueryFile(scope.row)" type="text" size="small">查看</el-button>
			        <el-button @click="handleUpdateFile(scope.row)" type="text" size="small">编辑</el-button>
			        <el-button @click="handleDeleteFile(scope.row)" type="text" size="small">删除</el-button>
			        <el-button @click="handleDownloadFile(scope.row)" type="text" size="small">下载</el-button>
			      </template>
			    </el-table-column>
    		</el-table>
        </div>
        <!-- /.card-body -->
        <div class="card-footer">
          <el-pagination layout="prev, pager, next" :total="total_files" :size="query_files.size" @current-change="handleCurrentChangeFile"></el-pagination>
        </div>
        <!-- /.card-footer-->
      </div>
      <!-- /.card -->
      <el-dialog :title="fileTextMap[fileDialogStatus]" :visible.sync="fileDialogFormVisible">
  		<el-form :model="file" :disabled="fileDialogDisabled">
  			<el-form-item label="文件编号" label-width="120px">
      			<el-input v-model="file.uuid" auto-complete="off"></el-input>
    		</el-form-item>
  			<el-form-item label="文件名称" label-width="120px">
      			<el-input v-model="file.name" auto-complete="off"></el-input>
    		</el-form-item>
    		<el-form-item label="文件版本" label-width="120px">
    			<el-input v-model="file.tag" auto-complete="off"></el-input>
    		</el-form-item>
  		</el-form>
  		<div slot="footer" class="dialog-footer">
    		<el-button @click="fileDialogFormVisible = false">取 消</el-button>
    		<el-button type="primary" @click="handleFileDialog">确 定</el-button>
  		</div>
	 </el-dialog>
    </section>
    
    <!-- /.content -->
</div>
  
  <!-- /.content-wrapper -->

  <div th:replace="fragments/footer :: footer"></div>

  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-dark">
    <!-- Control sidebar content goes here -->
  </aside>
  <!-- /.control-sidebar -->
  
  
</div>
<!-- ./wrapper -->
</body>
<!-- jQuery -->
<script type="text/javascript" src="/webjars/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script type="text/javascript" src="/webjars/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- VUE 2 -->
<script type="text/javascript" src="/webjars/vue/vue.js"></script>
<script type="text/javascript" src="/webjars/vue-resource/dist/vue-resource.js"></script>
<!-- Element UI -->
<script type="text/javascript" src="/webjars/element-ui/lib/index.js"></script>
<!-- FastClick -->
<script type="text/javascript" src="/webjars/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/js/demo.js"></script>
<script src="/js/files/index.js"></script>

</html>