<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>
      <div @click="handleBatchDownload()"><icon-button :width="120" font-icon="#icon14px-shenpiye-daochu">批量下载</icon-button></div>
    </div>
    <div class="d-flex align-items-center justify-content-between mt-2">
      <div><el-input placeholder="请输入文件名称" v-model="searchFileName" size="small" class="am-width-300"></el-input></div>
      <div class="d-flex"></div>
      <div @click="searchFileList()"><icon-button :width="120" font-icon="#icon14px-tongbuxiangmu">搜索</icon-button></div>
    </div>
    <div class="flex-1-dhcc mt-3" ref="tableView">
      <el-table :data="tableData" border :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="文件名称" sortable :sort-method="sortFileName">
          <template slot-scope="scope">
            <a href="javascript:;">
              <span @click="rowClick(scope.row)" :title="scope.row.fileName">{{ scope.row.fileName }}</span>
            </a>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="processFileType" label="文档分类" width="150" sortable>
          <template slot-scope="scope">
            <span>{{ scope.row.processFileType | dictionary("documentType") }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="upUser" label="上传人" width="150" sortable> </el-table-column>
        <el-table-column align="center" prop="upTime" label="上传时间" width="200" sortable> </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, Input } from "element-ui";
import sizeUtilsService from "@/services/size-utils.service";
import { approvalStore } from "@/store/approval.store";
import { CoreConfig, 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,
    "el-input": Input
  }
})
export default class ApprovalEnclosure extends Vue {
  private instId: string | undefined; // 流程实例编号
  // 列表数据
  tableData: any[] = [];
  tableHeight = 0; // 列表高度
  multipleSelection: string[] = [];
  searchFileName = "";
  /**
   * @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();
  }
  sortFileName(a: any, b: any) {
    return this.sort(a.fileName, b.fileName);
  }
  sort(a: any, b: any) {
    const n = !isNaN(a - 0);
    const n2 = !isNaN(b - 0);
    // 数字优先
    if (n && n2) {
      return a - b;
    } else if (n) {
      return -1;
    } else if (n2) {
      return 1;
    }
    // 将含有汉字的使用localeCompare排序
    const e = escape(a).indexOf("%u") > -1;
    const e2 = escape(b).indexOf("%u") > -1;
    if (e && e2) {
      return a.localeCompare(b);
    } else if (e) {
      return 1;
    } else if (e2) {
      return -1;
    }
    return a.localeCompare(b);
  }
  /**
   * @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 {
    let fileName = "";
    if (this.searchFileName) {
      fileName = this.searchFileName;
    }
    const dataInput: DataInput<any> = new DataInput<any>({ param: new FileDetailInfo({ flowId: this.instId, fileName: fileName }) });
    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);
      }
    });
  }
  rowClick(row: any) {
    this.$amConfirm(
      "是否确认下载此文件？",
      "提示",
      () => {
        const event: any = {};
        event.row = row;
        this.downloadFile(event);
      },
      () => {}
    );
  }
  /**
   * @description: 获取全局配置
   * @author ChenRui
   * @date 2020/12/17 16:16
   */
  get coreConfig(): Partial<CoreConfig> {
    if (Vue.prototype.$apData != null) {
      return Vue.prototype.$apData;
    }
    return {};
  }
  /**
   * @description: 下载文件
   * @author guoxuhui
   * @date 2021/3/19 18:00
   */
  downloadFile(event: any): void {
    if (event && event.row && event.row.trdId) {
      const downloadApiUrl = (this.coreConfig.downloadApi || "") + "?fileId=" + event.row.trdId;
      location.href = downloadApiUrl;
    } else {
      this.$message("未查询到主键");
    }
  }
  /**
   * @description: 批量下载
   * @author ChenRui
   * @date 2021/4/6 22:48
   */
  handleBatchDownload(): void {
    if (this.multipleSelection && this.multipleSelection.length > 0) {
      let fileIds = "";
      this.multipleSelection.forEach((value: any) => {
        fileIds += value.trdId;
        fileIds += ",";
      });
      fileIds = fileIds.substring(0, fileIds.length - 1);
      const downloadApiUrl = (this.coreConfig.downloadBatchApi || "") + "?fileIds=" + fileIds;
      location.href = downloadApiUrl;
    } 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;
  }
}
.am-width-300 {
  width: 30vw;
}
</style>
