<template>
  <el-table
    ref="filterTable"
    :data="tableData"
    style="width: 100%"
    :header-cell-style="{background:'#ccc',color:'#000'}"
     height="600"
  >
    <el-table-column prop="FloorName" label="模型文件" width="180">
      <template slot-scope="scope">
        <i class="el-icon-document-checked icon_font"></i>
        <span style="margin-left: 10px">{{ scope.row.FloorName }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="Note" label="备注" width="180"></el-table-column>
    <el-table-column prop="Version" label="版本号"></el-table-column>
    <el-table-column prop="AcceptTime" label="上传时间"></el-table-column>
    <el-table-column prop="UserName" label="上传人"></el-table-column>
    <el-table-column prop="address" label="操作">
      <template slot-scope="scope">
        <div class="operate" v-show="!scope.row.isDown">
          <el-button
            type="primary"
            class="iconfont icon-download"
            @click="downloadModel(scope.row)"
          ></el-button>
          <el-button type="primary" class="iconfont icon-replace" @click="repliaceModel(scope.row)"></el-button>
          <el-button type="primary" class="iconfont icon-Log" @click="queryModelLog(scope.row)"></el-button>
        </div>
        <div :class="[scope.row.Status == 1 ||scope.row.Status == 2 ? 'upLoad-loading':'','upLoad']" v-show="scope.row.isDown">
          <div class="progress">
          <el-progress
            :text-inside="scope.row.Status == 1 || scope.row.Status == 2 ?false:true"
            :stroke-width="20"
            :percentage="scope.row.precent"
            :status="scope.row.Status == 1 || scope.row.Status == 2 ?'warning':'success'"
          ></el-progress>
          </div>
          <div class="progress-right">
          <el-button v-show="!scope.row.Status" type="danger" icon="el-icon-delete" @click="closeUpdate(scope.row)" circle></el-button>
          <span v-show="scope.row.Status == 1">等待检查...</span>
          <span v-show="scope.row.Status == 2">模型检查中</span>
          </div>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  props: {
    tableData: Array,
    persentList: Array
  },
  data() {
    return {};
  },
  methods: {
    // 查看日志
    queryModelLog(item) {
      this.$emit("openModelLog", item);
    },
    // 替换日志
    repliaceModel(item) {
      this.$emit("replaceModel", item);
    },
    filterTag(Id, precent) {
      this.$refs.filterTable.data.map(item => {
        if (item.Id == Id) {
          if (precent >= 100) {
            // 如过precent == 100 不能关闭进度条，
            if(precent == 100){
              item.precent = 99;
            }else if(precent == 101){
               // 如过precent == 101 则返回结果为suceess 不能关闭进度条，
                   item.precent = 100;
                   item.isDown = false;
            }
            return;
          } else {
            item.precent = precent;
          }
        }
      });
    },
    // 下载模型文件
    downloadModel(item) {
      if (item.Url) {
        window.open(item.Url);
      } else {
        this.$message({
          message: "该文件夹下没有资源",
          type: "error"
        });
      }
    },
    // 停止上传
    closeUpdate(item) {
      this.$emit("closeUpdateFile", item);
    }
  },
  watch: {
    persentList: {
      immediate: true,
      deep: true,
      handler: function(val, oldVal) {
        if (val.length != 0) {
          val.map(item => {
            if (item.precent != 0) {
              this.filterTag(item.Id, item.precent);
            }
          });
        }
      }
    }
  },
  mounted() {}
};
</script>
<style scoped lang="less">
.box-card {
  min-height: 800px;
  .upLoad{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .progress{
      width: 160px;
      height: 20px;
    }
  }
  .upLoad-loading{
    position: relative;
     justify-content: center;
     .progress{
       width: 200px
     }
    .progress-right{
      position: absolute;
      left: 40%;
      top: 50%;
      transform: translate(-50%,-50%);
      color: #909399;
    }
  }
}
</style>