<template>
  <div class="filterTable-container">
    <el-table ref="filterTable" :data="tableData" style="width: 100%" height="100%" :header-cell-style="{background:'#d9d9d9',color:'#2b2b2b'}">
      <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" align="center" label="操作" width="240">
        <template slot-scope="scope">
          <div class="operate" v-show="!scope.row.isDown">
            <el-button type="primary" size="mini" class="iconfont icon-download" @click="downloadModel(scope.row)"></el-button>
            <el-button type="primary" size="mini" class="iconfont icon-replace" @click="repliaceModel(scope.row)"></el-button>
            <el-button type="primary" size="mini" class="iconfont icon-Log" @click="queryModelLog(scope.row)"></el-button>
          </div>
          <div
            :class="[scope.row.Status == 1 || scope.row.Status == 10 || scope.row.Status == 11 || (!scope.row.Status && scope.row.precent == 100)? 'upLoad-loading':'','upLoad']"
            v-show="scope.row.isDown">
            <div class="progress">
              <el-progress
                :text-inside="scope.row.Status == 1 || scope.row.Status == 10 || scope.row.Status == 11 || (!scope.row.Status && scope.row.precent == 100)?false:true"
                :stroke-width="20" :percentage="scope.row.precent"
                :color="scope.row.Status == 1 || scope.row.Status == 10 || scope.row.Status == 11?'#909399':'#67C23A'"></el-progress>
            </div>
            <div class="progress-right">
              <!-- <el-button
              v-show="!scope.row.Status"
              type="danger"
              class="iconfont icon-termination"
              @click="closeUpdate(scope.row)"
              circle
            ></el-button>-->
              <span v-show="!scope.row.Status && scope.row.precent == 100">上传中</span>
              <span v-show="scope.row.Status == 1">等待检查...</span>
              <span v-show="scope.row.Status == 10">模型检查中</span>
              <span v-show="scope.row.Status == 11">未通过检查</span>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  props: {
    tableData: Array,
    persentList: Array,
    modelFolderName: String
  },
  data() {
    return {
      maxHeight: 0
    };
  },
  computed: {
    ...mapGetters("layout", ["projectId", "userInfo", "userId", "secret"])
  },
  methods: {
    // 查看日志
    queryModelLog(item) {
      this.$emit("openModelLog", item);
    },
    // 替换日志
    repliaceModel(item) {
      if (item.Status != 4 && item.Status != 21) {
        this.$alert("正在识别模型对象，请稍后再替换。", "替换模型", {
          confirmButtonText: "确定",
          callback: action => {
          }
        });
      } else {
        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;
              this.$emit("percentFinish");
            }
            return;
          } else {
            item.precent = precent;
          }
        }
      });
    },
    // 下载模型文件
    downloadModel(item) {
      if (item.Url) {
        let a = document.createElement("a");
        a.href = item.Url;
        a.download = `${this.modelFolderName}${item.FloorName}模型文件v${item.Version}.rvt`;
        a.click();
      } else {
        this.$message({
          message: "该文件夹下没有资源",
          type: "error"
        });
      }
    },
    // 停止上传
    closeUpdate(item) {
      if (this.userInfo.userName == item.UserName) {
        this.$emit("closeUpdateFile", item);
      } else {
        this.$message({
          message: "您不是该文件的上传者，不能停止该文件上传！",
          type: "error"
        });
      }
    }
  },
  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);
            }
          });
        }
      }
    }
  }
};
</script>
<style scoped lang="less">
.box-card {
  height: 100%;
  .filterTable-container {
    height: calc(100% - 80px);
  }
  .operate {
    .iconfont {
      font-size: 12px;
      padding: 7px 12px;
    }
  }
  .icon-termination {
    color: #f56c6c;
    background: #fff;
    padding: 0;
    border: 0;
    font-size: 20px;
    margin-left: 5px;
  }
  .upLoad {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px 0;
    .progress {
      // width: 150px;
      width: 175px;
      height: 20px;
    }
    .progress-right {
      height: 20px;
      line-height: 20px;
    }
  }
  .upLoad-loading {
    position: relative;
    justify-content: center;
    .progress {
      width: 220px;
      height: 20px;
    }
    .progress-right {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
    }
  }
}
/deep/ .el-icon-warning {
  display: none;
  // color: transparent;
}
/deep/ .el-progress__text {
  display: none;
}
/deep/ .upLoad-loading .el-progress-bar {
  padding-right: 44px;
  margin-right: -44px;
}
/deep/ .el-progress-bar__inner {
  text-align: center;
}
</style>