<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 v-if="scope.row.Status == 4" class="iconfont icon-yun--tianchong" style="color:#67C23A;cursor:pointer;fontSize:18px;" title="模型校验完成..."></i>
          <i v-else-if="scope.row.Status == 31" class="iconfont icon-yun--tianchong1" style="color:#F56C6C;cursor:pointer;fontSize:18px;" title="同步到数据中心出问题..."></i>
          <i v-else-if="scope.row.Status == 21" class="iconfont icon-yun--tianchong1" style="color:#F56C6C;cursor:pointer;fontSize:18px;" title="模型数据导出出问题..."></i>
          <i v-else class="iconfont icon-yun--tianchong2" style="color:#E6A23C;cursor:pointer;fontSize:18px;" title="模型校验进行中..."></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 label="版本号">
        <template slot-scope="scope">
          <span style="margin-right: 5px">{{ scope.row.Version }}</span>
          <i v-show="scope.row.Version && scope.row.Status == 4" class="iconfont icon-warn" style="cursor:pointer;" title="查看版本更新信息" @click="handleClickVersion(scope.row)"></i>
        </template>
      </el-table-column>
      <el-table-column prop="AcceptTime" label="上传时间" width="140"></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="['upLoad-loading']"
            v-show="scope.row.isDown">
            <div class="progress">
              <el-progress
                :text-inside="false"
                :stroke-width="20" :percentage="100"
                :color="scope.row.Status == 1 || scope.row.Status == 10 || scope.row.Status == 11?'#909399':'#67C23A'"></el-progress>
            </div>
            <div class="progress-right">
              <span v-show="!scope.row.Status">上传中</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>
    <version-dialog :dialogVisible.sync="dialogVisible" :modelFile="modelFile" ref="addSpaceDialog"></version-dialog>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import versionDialog from "@/components/model/file/versionDialog";
export default {
  components: {
    versionDialog
  },
  props: {
    tableData: Array,
    persentList: Array,
    modelFolderName: String
  },
  data() {
    return {
      maxHeight: 0,
      dialogVisible: false,
      modelFile: null
    };
  },
  computed: {
    ...mapGetters("layout", ["projectId", "userInfo", "userId", "secret"])
  },
  methods: {
    // 查看日志
    queryModelLog(item) {
      this.$emit("openModelLog", item);
    },
    // 查看版本信息
    handleClickVersion(item) {
      this.modelFile = item;
      this.dialogVisible = true;
    },
    // 替换日志
    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) {
      let url = item.Url.match(/(\/image-service\S*)$/g)?item.Url.match(/(\/image-service\S*)$/g)[0]:''
      if (url) {
        let a = document.createElement("a");
        a.href = 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>