<template>
  <div class="inner-dialog">
    <span v-if="isMinimize" class="export-box-small">
      <a href="javascript:void(0)" @click="handleMinimize"
        ><p>
          {{ $t2("列表导出", "components.excelExport.listExport")
          }}<i class="el-icon-zoom-in"></i>
        </p>
        <el-progress
          :percentage="percentageNum"
          :show-text="false"
          :stroke-width="3"
          status="success"
        ></el-progress
      ></a>
    </span>
    <exportFieldDialog
      :visiable.sync="showExportFieldDialog"
      v-if="showExportFieldDialog"
      :param="param"
      @close="closeExportFieldDialog"
      @confirm="confirmExportFieldDialog"
    ></exportFieldDialog>
    <el-dialog
      ref="exportDialog"
      :title="title"
      :visible.sync="showImportDialog2"
      :modal="false"
      :close-on-click-modal="false"
      width="501px"
      custom-class="dialog-style"
      :append-to-body="false"
      :modal-append-to-body="false"
      @close="dialogClose2"
    >
      <!-- <el-button class="isFullIcon" @click="handleMinimize">
        <el-tooltip effect="dark" content="缩小" placement="top">
          <i class="el-icon-minus"></i>
        </el-tooltip>
      </el-button> -->
      <div class="export-box">
        <div class="tips">
          {{ $t2("导出中，请勿关闭当前窗口", "components.excelExport.tip") }}
        </div>
        <el-progress
          :text-inside="true"
          :stroke-width="26"
          :percentage="percentageNum"
          class="export-progress"
        ></el-progress>
        <vxe-grid ref="exportTable" v-bind="exportGrid">
          <template #row_edit="{ row }">
            <a href="javascript:void(0);" class="a-link" @click="exportAll(row)">
              <i class="el-icon-download" />
              {{ $t2("下载", "system.button.download") }}
            </a>
          </template>
        </vxe-grid>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="fl import-count">
          <span class="f-red doneNum">{{ doneSize }}</span>
          /
          <span class="dataSize">{{ tTotalSize }}</span>
        </div>
        <el-button type="primary" plain class="button-sty" @click="dialogClose2">
          <i class="el-icon-close el-icon"></i>
          {{ $t2("取 消", "system.button.cancel2") }}
        </el-button>
        <el-button type="primary" @click="dialogClose2" class="button-sty">
          <i class="el-icon-check el-icon"></i>
          {{ $t2("确 定", "system.button.confirm2") }}
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mixins } from "./mixins";

export default {
  name: "excelExport2",
  mixins: [mixins],
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__wrapper {
  top: 20px !important;
}
::v-deep .el-dialog__body {
  padding: 0;

  .isFullIcon {
    position: absolute;
    top: 0;
    right: 69px;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    color: #464646d6;
    height: 42px;
    line-height: 42px;
    padding: 0;
  }
}
.export-box-small {
  position: absolute;
  left: 0;
  top: 0;
  width: 93px;
  line-height: 23px;
  height: 26px;
  font-size: 12px;
  color: #fff;
  white-space: nowrap;
  border: solid 1px rgba(42, 100, 148, 0.7215686275);
  padding: 0 6px;
  border-left: none;
  border-radius: 2px;
  background: #2a6494;
  text-align: center;
  .el-progress {
    position: absolute;
    bottom: -2.5px;
    left: 0;
    right: 0;
  }
  p {
    margin: 0;
  }
  i {
    vertical-align: middle;
    margin-left: 8px;
    font-size: 14px;
    color: #fff;
  }
}
</style>
