<template>
  <div>
    <div v-if="uploading" class="progress-bar">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>上传列表</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="uploading = false">关闭</el-button>
        </div>
        <el-table :data="progressArr" max-height="400px">
          <el-table-column label="文档名称" prop="docName" :show-overflow-tooltip="true" />
          <el-table-column label="进度">
            <template slot-scope="scope">
              <el-progress :percentage="parseInt(scope.row.progress)"></el-progress>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
     <!-- <el-progress :percentage="progress"></el-progress>-->
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        uploading: false,
        progressArr: [],
        progress: 0
      }
    },
    created(){
      // this.initWebSocket();
    },
    methods: {
      /* initWebSocket() {
        this.websocket = new WebSocket(process.env.VUE_APP_WS_URL);
        this.websocket.onmessage = (event) => {
          this.uploading = true;
          const msgStr = event.data;
          let msgArr = msgStr.split('|');
          let item = {}
          item['docId'] = msgArr[0]
          item['docName'] = msgArr[1]
          item['progress'] = msgArr[2]
          if((this.progressArr.findIndex(t => t['docId'] == item['docId'])) == -1){
            this.progressArr.push(item)
          }
          this.progressArr.forEach(p => {
            if(p['docId'] == item['docId']){
              p['progress'] = item['progress']
            }
          })
          console.log('this.progressArr=' + this.progressArr);
         /!* let progress = msgStr.substring(msgStr.indexOf("/") + 1, msgStr.length);
          this.progress = parseInt(msgArr[2])*!/
          // if (progress === '100%') {
          //   this.websocket.close();
          // }
        };
        this.websocket.onclose = () => {
          console.log('WebSocket connection closed');
        };
      }, */
      checkDuplicate(docId) {
        return this.progressArr.findIndex(t => t['docId'] == docId) == -1
      }
    }
  };
</script>

<style scoped>
  .progress-bar {
    position: fixed;
    bottom: 10px;
    left: 85%;
    transform: translateX(-50%);
    width: 30%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
    text-align: center;
    user-select: none;
  }
</style>
