<template>
  <div class="root_container">
    <span style="color: #999999; display: block; padding-top: 20px; padding-left: 20px;">查看应用详情</span>
    <div class="upload_container">
      <el-upload class="upload-area" drag :on-change="handleFileChange" :multiple="false" :show-file-list="false"
        :auto-upload="false" action="https://jsonplaceholder.typicode.com/posts/">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将APK文件拖到此处，或<em>点击上传</em>，自动解析
        </div>
      </el-upload>
    </div>
    <div>
      <el-table border style="width: 96%;margin: 0 auto;margin-top: 260px;" :data="tableData">
        <el-table-column prop="appIcon" label="应用图标" width="80">
          <template slot-scope="scope">
            <el-image style="width: 40px; height: 40px" :src="scope.row.appIcon"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="fileName" label="文件名称">
        </el-table-column>
        <el-table-column prop="appName" label="应用名称">
        </el-table-column>
        <el-table-column prop="appPackage" label="应用包名">
        </el-table-column>
        <el-table-column prop="appSize" label="应用大小">
        </el-table-column>
        <el-table-column prop="appVerName" label="应用版本号">
        </el-table-column>
        <el-table-column prop="appVerCode" label="应用版本标识">
        </el-table-column>
        <el-table-column prop="analyseTime" label="解析时间">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import {

} from "../../api/log/apk";
import { Message } from "element-ui";
export default {
  data() {
    return {
      //记录高度
      tableHeight: -1,

      tableData: [],
    };
  },
  watch: {
    "$store.state.screenHeight": function (val) {
      this.tableHeight = val - 98 - 50;
    },
    $route() {

    },
  },
  mounted: function () {
    this.tableHeight = this.$store.state.screenHeight - 98 - 50;
    this.queryPackage = this.$route.query.pack;
  },
  methods: {
    //转换size
    getfilesize(size) {
      //把字节转换成正常文件大小
      if (!size) return "";
      var num = 1024.0; //byte
      if (size < num) return size + "B";
      if (size < Math.pow(num, 2)) return (size / num).toFixed(2) + "KB"; //kb
      if (size < Math.pow(num, 3))
        return (size / Math.pow(num, 2)).toFixed(2) + "MB"; //M
      if (size < Math.pow(num, 4))
        return (size / Math.pow(num, 3)).toFixed(2) + "G"; //G
      return (size / Math.pow(num, 4)).toFixed(2) + "T"; //T
    },
    //文件内容发生变化，需要解析apk文件
    handleFileChange(item) {
      this.currentFile = item.raw;
      if (!this.currentFile.name.endsWith(".apk")) {
        Message.warning("请上传APK文件");
        return;
      }
      var that = this;
      const AppInfoParser = require("app-info-parser");
      const parser = new AppInfoParser(item.raw); // or xxx.ipa
      parser
        .parse()
        .then((result) => {
          console.log("app info ----> ", result);
          console.log("item ----> ", item);
          this.tableData.push({
            fileName: item.name,
            appIcon: result.icon,
            appName: result.application.label[0],
            appPackage: result.package,
            appSize: this.getfilesize(item.size)+"/"+item.size+"B",
            appVerName: result.versionName,
            appVerCode: result.versionCode,
            analyseTime: this.timeToString(new Date())
          })
        })
        .catch((err) => { 
          console.log(err);
        });
    },

    //处理下拉选项参数
    beforeItemHandleCommand(row, command) {
      return {
        row: row,
        command: command,
      };
    },
    
    //获取数据
    onObtainData() {

    },

    timeToString(timeObj) {
      var str = "";
      var year = timeObj.getFullYear();
      var month = timeObj.getMonth();
      var date = timeObj.getDate();
      var time = timeObj.toTimeString().split(" ")[0];
      var rex = new RegExp(/:/g);
      str = year + "-" + (month<10?'0'+month:month) + "-" + (date<10?'0'+date:date) + " " + time.replace(rex, ":");
      console.log("------当前日期：" + str);
      return str;
    },
  },
};
</script>
<style lang="scss" scoped>
.root_container {
  position: relative;
}

//下面这几行代码就是设置上传框的长宽，可以按百分比来设置也可以用px去设置
/deep/ .el-upload .el-upload-dragger {
  width: 700px;
  height: 200px;
  display: block;
}

.upload-area {
  width: 700px;
  height: 200px;
  left: 50%;
  top: 60px;
  position: absolute;
  transform: translateX(-50%);
}

.table_container {
  padding-left: 18px;
  padding-right: 18px;
}

.pager {
  position: absolute;
  top: 26px;
  right: 18px;
  display: flex;
}

.header {
  padding-top: 18px;
  padding-left: 18px;
}

.codeEditBox {
  width: 100%;
  height: 300px;
  border: 1px solid #dcdee2;
}

.apk-info {}

.apk_info_item {
  font-size: 14px;
  color: #333333;
  line-height: 34px;
}

.apk_tips {
  width: 70px;
  display: inline-block;
  color: #999999;
}

.pogress_container {
  padding-top: 20px;
  padding-right: 200px;
}

.el-button+.el-button {
  margin-left: 0;
}

.upload_container {
  width: 100%;
}

.line_tips {
  cursor: pointer;
  color: #409eff;
}
</style>