<template>
  <div class="d-flex flex-column w-100 h-100 px-4 py-3">
    <div class="d-flex align-items-center justify-content-between">
      <title-text>附件</title-text>
      <icon-button v-if="false" :width="120" font-icon="#icon14px-shenpiye-daochu">
        <a href="javascript:;" class="am-active">批量下载</a>
      </icon-button>
    </div>
    <div class="flex-1-dhcc mt-3" ref="tableView">
      <el-table :data="tableData" :header-cell-style="rowStyle" @selection-change="handleSelectionChange" ref="table" aria-checked="true" header-align="center" :height="tableHeight">
        <el-table-column type="selection" width="40"> </el-table-column>
        <el-table-column align="center" prop="fileName" label="文件名称"> </el-table-column>
        <el-table-column align="center" prop="upUser" label="上传人"> </el-table-column>
        <!--        <el-table-column align="center" prop="d" label="上传部门"> </el-table-column>-->
        <el-table-column align="center" prop="upTime" label="上传时间"> </el-table-column>
        <el-table-column align="center" width="100" label="操作">
          <template slot-scope="scope">
            <a href="javascript:;" class="am-active" @click="downloadFile(scope)">下载</a>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import IconButton from "@/views/IconButton.vue";
import TitleText from "@/views/TitleText.vue";
import { Button, Table, TableColumn } from "element-ui";
import sizeUtilsService from "@/services/size-utils.service";
import { approvalStore } from "@/store/approval.store";
import { DataInput, DataOutput } from "@/model";
import { FileDetailInfo } from "@/model/FileDetailInfo";
import apiService from "@/services/api.service";
import fileDetailInfoApi from "@/constants/api/ebtrust-project/file-detail-info";
import { Code } from "@/constants/enum/code.enum";
import fileApi from "@/constants/api/ebtrust-file/file.api";
/**
 * @Description: 审批附件库页面
 * @author LiuBo
 * @date 2021/1/27
 * @time 14:35
 */
@Component({
  name: "ApprovalEnclosure",
  components: {
    IconButton,
    TitleText,
    "el-table": Table,
    "el-table-column": TableColumn,
    "el-button": Button
  }
})
export default class ApprovalEnclosure extends Vue {
  private instId: string | undefined; // 流程实例编号
  // 列表数据
  tableData: any[] = [];
  tableHeight = 0; // 列表高度
  multipleSelection: string[] = [];
  /**
   * @Description: 设置表头样式
   * @author LiuBo
   * @date 2021/2/1
   * @time 21:43
   */
  rowStyle() {
    return {
      "background-color": "#f6f6f6",
      color: "#333333",
      fontSize: 14,
      fontWeight: 500
    };
  }
  /**
   * @Description: 计算列表高度
   * @author LiuBo
   * @date 2021/2/1
   * @time 22:43
   */
  private calcTableHeight() {
    const tableView = this.$refs.tableView;
    const tH = sizeUtilsService.getViewHeight(tableView);
    setTimeout(() => {
      this.tableHeight = tH - sizeUtilsService.getAllPaddingSize(tableView);
    });
  }
  /**初始化*/
  mounted(): void {
    this.calcTableHeight();
    this.initData();
  }
  /**
   * @Description: 获取缓存数据
   * @author guoxuhui
   * @date 2021-03-12
   * @time 11:17
   */
  initData() {
    const instId: any = this.$route.query.instId;
    const flowParameters: any = approvalStore.getFlowParameters(instId);
    const taskInfo: any = approvalStore.getTaskInfoByInstId(instId);
    if (flowParameters) {
      this.instId = flowParameters.instId;
      this.searchFileList();
    }
  }
  /**
   * @description: 列表选中
   * @author ChenRui
   * @date 2021/4/6 22:48
   */
  handleSelectionChange(val: any) {
    this.multipleSelection = val;
  }
  /**
   * @Description: 重新查询文件
   * @author guoxuhui
   * @date 2021-04-07
   * @time 19:44
   */
  searchFileList(): void {
    const dataInput: DataInput<any> = new DataInput<any>({
      param: new FileDetailInfo({ flowId: this.instId })
    });
    this.$amLoading.open();
    apiService.general(fileDetailInfoApi.selectByObject, undefined, dataInput).then((res: DataOutput<FileDetailInfo[]>) => {
      this.$amLoading.close(this);
      if (res.code === Code.SUCCESS.code) {
        this.tableData = res.data || [];
      } else {
        this.$message(res.msg);
      }
    });
  }
  /**
   * @description: 下载文件
   * @author guoxuhui
   * @date 2021/3/19 18:00
   */
  downloadFile(event: any): void {
    if (event && event.row && event.row.trdId) {
      const query: any = {
        fileId: event.row.trdId
      };
      apiService.general(fileApi.download, query).then((res: any) => {
        if (res && res.size > 0) {
          const link = document.createElement("a");
          const blob = new Blob([res], { type: "text/plain;charset=UTF-8" });
          link.setAttribute("href", window.URL.createObjectURL(blob));
          link.setAttribute("download", event.row.fileName);
          link.style.visibility = "hidden";
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        } else {
          this.$message(res.msg);
        }
      });
    }
  }
  /**
   * @description: 批量下载
   * @author ChenRui
   * @date 2021/4/6 22:48
   */
  handleBatchDownload(): void {
    if (this.multipleSelection && this.multipleSelection.length > 0) {
      const dataInput: DataInput = new DataInput({
        data: this.multipleSelection.map((item: any) => item.trdId)
      });
      apiService.general(fileApi.downloadBatch, undefined, dataInput).then((res: any) => {
        if (res && res.size > 0) {
          const link = document.createElement("a");
          const blob = new Blob([res], { type: "text/plain;charset=UTF-8" });
          link.setAttribute("href", window.URL.createObjectURL(blob));
          link.setAttribute("download", "enclosure.zip");
          link.style.visibility = "hidden";
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        } else {
          this.$message(res.msg);
        }
      });
    } else {
      this.$message("至少选择一项");
    }
  }
}
</script>

<style scoped lang="scss">
/**列表条目样式*/
.am-header {
  background-color: red;
}
/**字体按钮*/
.am-text-btn {
  font-size: 14px;
  color: #2858d6;
  cursor: pointer;
  user-select: none;
  &:active {
    opacity: 0.7;
  }
}
</style>
