<template>
  <div class="app-container demo">
    <div class="page-top-title-box">
      <p class="page-top-title-name-p">测试页面</p>
      <p class="page-top-title-add-p" @click="openButton()">打开</p>
      <p class="page-top-title-add-p" @click="offButton()">关闭</p>
    </div>
    <div class="tree-max-big-box">
      <input type="text" v-model="url">
      <div v-if="openType">
        <H5PlayerVideo v-for="(item,index) in videoList" :key="index" :videoProps="item"></H5PlayerVideo>
      </div>
    </div>
    <p>apk解析</p>
    <el-upload
      style="align-self: center"
      :before-upload="beforeAvatarUpload"
      drag
      accept=".apk"
      action
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
    </el-upload>
  </div>
</template>
<script>
  //npm uninstall app-info-parser
  // const ApkParser = require('app-info-parser/src/apk');
  import { iotCameraFindByCondition } from '@/api/basicsModules/index'
  import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue'

  export default {
    label: 'demo',
    components: {
      H5PlayerVideo
    },
    data() {
      return {
        pageType: true,
        videoList:[],
        url:'',
        openType:false,
      }
    },
    created() {

    },
    mounted() {

    },
    methods: {
      openButton(){
        this.$set(this,'videoList',[{
          width: 600, //(宽度:非必传-默认600)
          height: 300, //(高度:非必传-默认338)
          url: this.url,
        }]);
        this.$set(this,'openType',true);
      },
      offButton(){
        this.$set(this,'openType',false);
      },
      /**
       * 获取当前文件
       */
      beforeAvatarUpload (file) {
        console.log(file);
        const parser = new ApkParser(file);
        parser
          .parse()
          .then((result) => {
            console.log('result',result)
            // this.appIcon = result.icon;
            // this.appVersionCode = result.versionCode;
            // this.appVersion = result.versionName;
            // this.appKey = result.package;
            // this.appName = result.application.label[0];
            // this.byteSize = file.size / 1024;
            // let size = file.size; //byte
            // size = size / 1024; //kb
            // size = (size / 1024).toFixed(2); //mb
            // this.appSize = size + 'm';
            // this.file = file;
            // this.getFileMD5(file);
          })
          .catch((err) => {

          });
      },
    }
  }
</script>
<style scoped lang="scss">
  .demo {
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .tree-max-big-box{
      width:610px;
      margin:40px;



      flex:1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .tree-title-box{
        height:40px;
        display: flex;
        flex-direction: row;
        border:1px solid #E0E0E0;
        background-color: #f5f5f5;
        .tree-title-check-box{
          width:190px;
          display: flex;
          border-right:1px solid #E0E0E0;
          .check-p{
            background-color: #0183FA;
            border-radius:2px;
            color:#fff;
            text-align: center;
            line-height:14px;
            width:14px;
            height:14px;
            font-size:12px;
            margin:13px 15px 13px 13px;
            cursor: pointer;
          }
          .no-check-p{
            border:1px solid #E0E0E0;
            border-radius:2px;
            background-color: #fff;
            color:#fff;
            text-align: center;
            line-height:14px;
            width:14px;
            height:14px;
            margin:13px 15px 13px 13px;
            cursor: pointer;
          }
          .no-check-p:hover{
            border:1px solid #0183FA;
          }
          .tree-title-p{
            font-size:16px;
            color: #333;
            line-height:40px;
          }
        }
        .tree-title-name-p{
          width:420px;
          text-align: center;
          font-size:16px;
          color: #333;
          line-height:40px;
        }
      }
      //表格滚动条样式
      .tree-check-box::-webkit-scrollbar{
        width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 6px;
      }
      .tree-check-box::-webkit-scrollbar-thumb{
        border-radius: 5px;
        background: #D3D7D4;
      }
      .tree-check-box::-webkit-scrollbar-track{
        -webkit-box-shadow: inset 0 0 5px #FFFFFF;
        border-radius: 0;
        background: #FFFFFF;
      }
      .tree-check-box{
        height:400px;
        overflow-y: scroll;
        border:1px solid #E0E0E0;
        border-top:none;
        ::v-deep .el-tree-node__content{
          border-bottom:1px solid #E0E0E0;
          height:40px;
          .el-tree-node__label{
            display: inline-block;
            height:40px;
            line-height:40px;
            border-left:1px solid #E0E0E0;
            padding-left:24px;
          }
          .el-tree-node__expand-icon{
            margin-left:18px;
          }
          .el-tree-node__label{
            margin-left:40px;
          }
          .custom-tree-node-code{
            display: inline-block;
            width:125px;
            height:40px;
            line-height:40px;
            border-right:1px solid #E0E0E0;
          }
          .custom-tree-node-name{
            padding-left:24px;
          }
        }
        ::v-deep .el-tree-node__children{
          .el-tree-node__content{
            .custom-tree-node-code{
              display: inline-block;
              width:107px;
              height:40px;
              line-height:40px;
              border-right:1px solid #E0E0E0;
            }
          }
          .el-tree-node__children{
            .el-tree-node__content{
              .custom-tree-node-code{
                display: inline-block;
                width:89px;
                height:40px;
                line-height:40px;
                border-right:1px solid #E0E0E0;
              }
            }
          }
        }
      }
    }
  }
</style>
