<template>
  <div class="data_set">
    <!-- 头 -->
    <div class="header">
      <el-row>
        <el-col :span="6">
          <div>
            <el-button @click="getList('train')">训练集</el-button>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-button @click="getList('val')">验证集</el-button>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-button @click="getList('test')">测试集</el-button>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-button @click="gotoHome">返回检测页面</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 内容 -->
    <div class="content">
      <!-- 列表 -->
      <div class="table">
        <div class="table_view">
          <el-table :data="tableData" border  style="width: 100%;height:100%"
            :header-cell-style="{ 'text-align': 'center' }"  highlight-current-row
            @row-click="tableChange">
            <el-table-column prop="img_name" label="名称">
            </el-table-column>
            <el-table-column label="操作" align="center" width="120">
              <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-download" @click.stop="uploadFile(scope.row)">下载</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="text-align: right;margin: 5px;">
          <el-button :disabled="isUploadAllFiles" type="primary" icon="el-icon-download" @click="uploadAllFiles" >全部下载</el-button>
        </div>
        <div  class="pagination">
          <el-pagination  background layout="prev, pager, next" 
          :total="total" 
          :page-size="queryData.page_size"
          :current-page	="queryData.page_num"
          @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </div>

      <!-- 图片展示 -->
      <div class="image">
        <el-image style="width: 100%; height: 100%" :src="imageUrl" fit="fit">
        </el-image>
      </div>
    </div>
  </div>
</template>

<script>
import { PostData,FTPData } from '@/api';
import qs from "qs";
import Tiff from 'tiff.js'
import axios from 'axios'
export default {
  name: "DataSet",
  data() {
    return {
      queryData:{
        page_num:1,
        page_size:10,
        dataset_type:null,
      },
      tableData: [],
      imageUrl: "",
      total:0,
      backAPi:null,
      isUploadAllFiles:true
    }
  },
  created() {

  },
  mounted(){
    let backAPi = localStorage.getItem("backapi")
    console.log(backAPi)
    if(backAPi){  
      this.backAPi = backAPi
    }else{
      this.backAPi = "http://127.0.0.1:8080"
      localStorage.setItem("backapi",this.backAPi);
    }
  },
  methods: {
    handleCurrentChange(val){
      this.queryData.page_num = val
      this.getList(this.queryData.dataset_type)
    },
    gotoHome(){
      this.$router.push("/home")
    },
    getList(datasetType){
      this.queryData.dataset_type = datasetType
      PostData("/dataset/get_info",qs.stringify(this.queryData) ).then(res=>{
        console.log(res)
        this.tableData = res.dataset_info;
        this.total = res.count
        this.isUploadAllFiles = false;
      }).catch(error=>{
        console.log(error)
        this.$message.error("系统错误")
      })
    },
    uploadFile(row){
      try{
        const a = document.createElement('a')
        a.download = row.img_name
        a.href = this.baseUrl+"/"+row.img_url
        a.click()
        a.href = this.baseUrl+"/"+row.label_url
        a.click()
        a.remove()
      }catch(error){
        this.$message.error("系统错误")
        console.log(error)
      }
      
    },
    async tableChange(row,column,event){
      if(row.img_name.slice(-3) == "TIF"){
        await axios.get(this.baseUrl+row.img_url, { responseType: 'blob' }).then((res) => {
          res.data.arrayBuffer().then((arrayBuffer) => {
            const tiff = new Tiff({
              buffer: arrayBuffer,
            });
            this.imageUrl = tiff.toDataURL("image/jpg")
          })
        })
      }else{
        this.imageUrl = this.baseUrl +"/"+ row.img_url
      }
    },
    uploadAllFiles(){
      PostData("/dataset/download_dataset",qs.stringify({dataset_type:this.queryData.dataset_type})).then(res=>{
        console.log(res)
        // //创建a标签
        let a = document.createElement('a')
        a.href = this.baseUrl+"/"+res.dataset_download_url
        a.click()
        a.remove()
        
        // let url = this.backAPi+"/"+res.dataset_download_url
        // window.open(url)
      }).catch(error=>{
        console.log(error)
        this.$message.error("系统错误")
      })
    }
  },
}
</script>

<style scoped lang="scss">
.data_set {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 5px;
  display: flex;
  flex-direction: column;

  .header {
    width: 100%;
    margin: 20px 0px;
    text-align: center;
  }

  .content {
    width: 100%;
    flex: 1;

    .table {
      width: 500px;
      float: left;
      height: 100%;

      .table_view{
        width: 100%;
        height: calc(100% - 85px);
      }
      .pagination{
        text-align: right;
      }
    }

    .image {
      margin-left: 510px;
      height: 100%;
    }
  }

  .content:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }

}
</style>