<template>
  <div class="ele-body">
    <el-card shadow="never">
      <div class="upload" style="margin-bottom: 20px">
        <el-button
          type="primary"
          size="small"
          style="margin-right: 20px"
          @click="uploadFile"
          >上传文件</el-button
        >
        <input type="file" style="display: none" ref="file" />
        <div
          style="display: inline-block; margin-left: 20px; cursor: pointer"
          v-show="Object.keys(file).length > 0"
          :data-path="file.path"
          @click="downloadFile"
        >
          {{ file.fileName }}
        </div>
        <span style="padding: 0 20px"></span>
        <span style="color: red">(备注：支持Word，execl，ppt，pdf)</span>
      </div>
      <el-table
        :data="dataList"
        :loading="loading"
        height="calc(100vh - 220px)"
      >
        <el-table-column
          label="部门名称"
          min-width="150"
          align="center"
          prop="deptName"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="参与次数"
          min-width="100"
          align="center"
          prop="partyNum"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="得分"
          min-width="100"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="{ row }">
            {{ row.score == 0 ? 0 : row.score }}
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import summaryApi from "@/api/chain/summary";
export default {
  data() {
    return {
      uploading: false,
      file: {},
      loading: false,
      dataList: [],
    };
  },
  created() {
    this.getDataList();
    this.getFile();
  },
  methods: {
    getDataList() {
      this.loading = true;
      summaryApi
        .getChainIndustryDeptAnalysisInfo()
        .then((res) => {
          let data = res.data;
          if (data.code == 0) {
            this.dataList = data.data;
          } else {
            this.dataList = [];
          }
        })
        .catch((e) => {
          this.dataList = [];
        })
        .finally(() => {
          this.loading = false;
        });
    },
    getFile() {
      summaryApi
        .getChainIndustryDeptAnalysisAttach()
        .then((res) => {
          let data = res.data;
          if (data.code == 0) {
            this.file = {
              fileName: data.data.fileName,
              path: data.data.filePath,
            };
          } else {
            this.file = {};
          }
        })
        .catch((e) => {
          this.file = {};
        });
    },
    downloadFile($event) {
      let element = $event.target;
      let path = element.getAttribute("data-path");
      window.location.href = path;
    },
    uploadFile() {
      let input = this.$refs.file;
      input.click();
      let upload;
      input.addEventListener(
        "change",
        (upload = (e) => {
          input.removeEventListener("change", upload);
          if (this.uploading) {
            this.$message({
              type: "warning",
              message: "正在上传",
            });
            return;
          }
          this.uploading = true;
          let file = e.target.files[0];
          if (!file) {
            this.uploading = false;
            return;
          }
          let MAXSIZE = 5 * 1024 * 1024;
          if (file.size > MAXSIZE) {
            this.$message.error("上传文件不得超过5M");
          }
          let formData = new FormData();
          formData.append("file", file);
          summaryApi
            .uploadChainIndustryDeptAnalysisAttach(formData)
            .then((res) => {
              let data = res.data;
              if (data.code == 0) {
                this.$message({
                  type: "success",
                  message: "上传文件成功",
                });
              } else {
                this.$message.error(data.msg);
              }
            })
            .catch((e) => {
              this.$message.error(e);
            })
            .finally((e) => {
              this.uploading = false;
              this.getFile();
            });
        })
      );
    },
  },
};
</script>

<style>
</style>