<template>
  <el-dialog
    title="下載附件"
    :visible.sync="dialogVisible"
    width="50%"
    :show-close="true"
    class="detail-dialog"
  >
    <Table
      class="fedexDetialTable mt20"
      :data="tableData"
      :headerData="headerData"
      :selection="false"
      height="400px"
      :order="false"
      :border="false"
      :pagination="false"
      :selectFixed="false"
      :pageSizes="[20, 30, 50, 100]"
      @selectionChange="handleSelectionChange"
      :loading="tableLodaing"
    >
    <template v-slot:name="scope">
      <p> {{ scope.row.name }}{{ scope.row.type }}</p>
    </template>
      <template v-slot:down="scope">
        <el-button
          class="plain"
          size="mini"
          @click.native.stop="downLoadOneFile(scope.row)"
          :loading="scope.row.downloadLoading"
          >下載</el-button
        >
      </template>
    </Table>
    <div class="width-btn-box">
      <el-button
        class="entrySaveButton entrySaveButton-background"
        @click="batchDownloadBtn"
        style="margin-right: 30px;width: 110px;"
        :loading="allDownload"
        :disabled="this.tableData<=0"
      >
        下載全部
      </el-button>
      <el-button class="entrySaveButton" style="width: 110px;" @click="closeDialog">取消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getFindSysByDeclareId } from "@/api/fillForm.js";
import { downLoadZip,downLoadFile } from "@/utils/zipdownload";
export default {
  components: {},
  props: {},
  data() {
    return {
      tableLodaing:false,
      allDownload:false,
      dialogVisible: false,
      declareId: null,
      tableData: [],
      headerData: [
        {
          name: "附件名稱",
          value: "name",
          width: "",
          align: "left",
          slot: true,
        },
        {
          name: "操作",
          value: "down",
          width: "100",
          align: "center",
          slot: true,
        },
      ],
      selectCheckList: [],
      customsFileId: null,
    };
  },
  methods: {
    // 打开弹窗
    openDialog(row) {
      this.dialogVisible = true;
      this.declareId = row.id;
      this.customsFileId = row.customsFileId;
      this.getUploadFileList();
    },
    // 关闭弹窗
    closeDialog() {
      this.dialogVisible = false;
    },
    // 选择下载的附件
    handleSelectionChange(val) {
      this.selectCheckList = val;
    },
    // 下载
    downLoadOneFile(fileRow) {
      fileRow.downloadLoading=true;
      downLoadFile(
        "/icleartw/cusFile/downLoadFile",
        fileRow.id,
        fileRow.name+ fileRow.type
      ).then(() => {
          
          this.$message.success("下載成功");
          this.exportLoading = false;
        })
        .catch(() => {
          this.exportLoading = false;
        }).finally(()=>{
          fileRow.downloadLoading = false;
        })
       
    },
    // 批量下载
    batchDownloadBtn() {
      this.allDownload=true;
      downLoadZip(
        "/icleartw/cusFile/downLoadCusFileAll",
        this.customsFileId,
        "附件"
      )
        .then(() => {
          this.allDownload = false;
          this.exportLoading = false;
        })
        .catch(() => {
          this.exportLoading = false;
        });
    },
    // 获取文件列表
    getUploadFileList() {
      this.tableData=[];
      this.tableLodaing=true;
      getFindSysByDeclareId(this.declareId).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data;
          if (this.tableData != null) {
            this.tableData = this.tableData.map(item => {
              return {
                ...item,
                downloadLoading: false
              };
            });
          }
        }else{
          this.$message.error(res.msg);
        }
      }).catch((res)=>{
        this.$message.error(res.msg);
      }).finally(()=>{
        this.tableLodaing = false;
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.detail-dialog {
  .title-box {
    font-size: 16px;
    font-weight: 600;
    // line-height: 22px;
    color: #000000;
    display: flex;
    justify-content: space-between;
    .el-button {
      padding: 0;
      font-size: 12px;
    }
  }
  .content {
    color: #333;
    font-size: 12px;
    .small-title {
      margin: 12px 0 4px 0;
      font-size: 14px;
    }
    .info-box {
      width: 100%;
      height: 50px;
      line-height: 17px;
      background: #f2f2f2;
      padding: 8px;
      margin-bottom: 4px;
    }
  }
  .download {
    .el-button {
      padding: 0;
      font-size: 12px;
    }
    img {
      vertical-align: -4px;
    }
  }
  ::v-deep .el-dialog {
    padding: 20px 100px;
  }
  ::v-deep .el-dialog__header {
    text-align: center;
  }
  .width-btn-box {
    width: 100%;
    text-align: center;
    margin-top: 16px;
    .el-button {
      width: 100px;
    }
  }
  ::v-deep .el-table__body-wrapper .el-table__body tbody tr {
    height: 50px;
  }
}
</style>