<template>
  <el-dialog
    :visible="dialogVisible"
    width="60%"
    style="height: 98%"
    :before-close="handleClose"
    top="5vh"
    lock-scroll
  >
    <div class="title" slot="title">
      <div class="divider"></div>
      <span class="label">上传列表</span>
      <span class="tips">
        <i class="el-icon-info"></i
        >提示：上传过程中请勿关闭此弹窗或刷新页面等操作
      </span>
    </div>
    <div class="upload-progress">
      <el-table :data="filesList" fit>
        <el-table-column prop="name" label="文件名"> </el-table-column>
        <el-table-column prop="size" label="文件大小">
          <template slot-scope="scope">
            {{ getSize(scope.row.size) }}
          </template>
        </el-table-column>
        <el-table-column prop="progress" label="进度" width="300">
          <template slot-scope="scope">
            <el-progress
              :percentage="scope.row.percent"
              v-if="!isNaN(parseInt(scope.row.percent))"
              :status="scope.row.status"
            ></el-progress>
          </template>
        </el-table-column>
        <el-table-column prop="operation" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="48"
              icon="el-icon-circle-close"
              @click.native="handleCancel(scope.$index)"
              v-if="scope.row.status == null"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="dialog-footer">
      <el-button type="primary" @click.native="handleClose">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import TablePage from "@/components/Table/TablePage";

export default {
  name: "UploadListDialog",
  components: {
    TablePage,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    filesList: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    visible: {
      handler: function (value) {
        this.dialogVisible = value;
      },
      deep: true,
      immediate: true,
    },
    filesList(value) {
      // console.log("value", value);
    },
  },
  data() {
    return {
      dialogVisible: false,
      isUpLoading: false,
      percentState: 0,
      list: {
        records: [],
        current: 1,
        size: 10,
      },
      progressStatus: null,
    };
  },
  computed: {
    getSize(size) {
      return (size) => {
        return (size / 1024 / 1024).toFixed(2) + "M"; //1M=1024Kb=1024*1024byte
      };
    },
  },
  mounted() {
    // this.loadData();
  },
  methods: {
    // 取消编辑
    cancelForm() {
      this.handleClose();
    },
    handleCancel(index) {
      this.$emit("handleCancel", index);
    },
    handleClose() {
      this.$emit("handleClose");
    },
  },
};
</script>

<style lang='scss' scoped>
.title {
  display: flex;
  align-items: center;
  .divider {
    width: 8px;
    height: 16px;
    border-left: 4px solid #409eff;
    margin-right: 8px;
  }
  .label {
    font-weight: bold;
  }
  .tips{
    font-size: 14px;
    color: #666;
    margin-left: 10px;
  }
}
.dialog-content {
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  .upload-area {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 30px;
  }
  .upload-progress {
    margin-bottom: 30px;
  }
  .upload-records {
    margin-bottom: 30px;
  }
}

.dialog-footer {
  margin-top: 30px;
  display: flex;
  justify-content: flex-end;
}
.el-dialog__body {
  padding: 0 20px 30px 20px;
}
</style>