<template>
  <div v-if="showContent">
    <el-dialog
      :title="$t1('导入发布')"
      :append-to-body="falseValue"
      :modal-append-to-body="falseValue"
      :close-on-click-modal="falseValue"
      :visible.sync="showImportDialog"
      :modal="falseValue"
      custom-class="dialog-style"
      width="501px"
      v-el-drag-dialog
    >
      <div class="import-box">
        <!--        <div class="tips">{{ $t2('请下载文件模板，填写信息后再上传文件', 'components.excelImport.tip') }}</div>-->
        <el-upload v-if="!fileRaw" ref="uploadBtn" action="" class="upload-file" :auto-upload="false"
                   :on-change="fileChange">
          <div class="el-upload-dragger">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text"><em>{{ $t2('点击上传', 'components.excelImport.uploadBUtton') }}</em></div>
          </div>
        </el-upload>
        <div class="upload-finish" v-if="fileRaw">
          <img :src="require('@/resources' + '/images/ico-txt.svg')" class="ico"/>
          <p class="name">{{ fileRaw.name }}</p>
          <!-- <p>2022-1-17</p> -->
          <el-tooltip :enterable="false" class="item" effect="dark"
                      :content="$t2('关闭', 'components.excelImport.closeBUtton')" placement="bottom">
            <i
              class="el-icon-error js-close"
              @click="
								fileRaw = false;
								$refs.uploadBtn.clearFiles();
							"
            ></i>
          </el-tooltip>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
				<el-button type="primary" plain class="button-sty" @click="dialogClose1">
					<i class="el-icon-close el-icon"></i>
					{{ $t2('取 消', 'system.button.cancel2') }}
				</el-button>
				<el-button type="primary" @click="dialogPrimary1" class="button-sty">
					<i class="el-icon-check el-icon"></i>
					{{ $t2('确 定', 'system.button.confirm2') }}
				</el-button>
			</span>
    </el-dialog>
    <el-dialog
      ref="importDialog"
      :title="$t2('导入', 'components.excelImport.title')"
      :append-to-body="falseValue"
      :modal-append-to-body="falseValue"
      :close-on-click-modal="falseValue"
      :visible.sync="showImportDialog2"
      :modal="falseValue"
      custom-class="dialog-style"
      width="501px"
      height="250px"
      @close="dialogClose2"
      v-el-drag-dialog
    >
      <div>
        <div class="import-box">
          <div class="tips">
            {{ $t2('导入中，请勿关闭当前窗口', 'components.excelImport.tip2') }}
            <!-- <span class="fr">耗时：<em class="time-txt">0 时 0 分 0 秒 </em></span> -->
          </div>
<!--          <el-progress :text-inside="true" :stroke-width="26" :percentage="percentageNum"
                       class="export-progress"></el-progress>-->
          <div class="i-status">
            <div class="item">
              <i class="el-icon-success f-green"></i>
              {{ $t2('成功', 'components.excelImport.success') }}：
              <span class="successNum" @click="showSuccessResult">{{ totalSuccessNum }}</span>
            </div>
            <div class="item">
              <i class="el-icon-error f-red"></i>
              {{ $t2('失败', 'components.excelImport.fail') }}：
              <span class="failNum" @click="showErrorResult">{{ totalErrorNum }}</span>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer" center="true">
        <div class="fl import-count">
          <span class="f-red doneNum">0</span>
          /
          <span class="dataSize">0</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" class="button-sty" @click="dialogPrimary2">
          <i class="el-icon-check el-icon"></i>
          {{ $t2('确 定', 'system.button.confirm2') }}
        </el-button>
      </div>
    </el-dialog>
    <el-dialog
      :title="$t2('结果', 'components.excelImport.resultTitle')"
      :append-to-body="true"
      :modal-append-to-body="true"
      :close-on-click-modal="falseValue"
      :visible.sync="showImportResult"
      :modal="falseValue"
      custom-class="dialog-style list-dialog"
      width="1200px"
      v-el-drag-dialog
    >
      <div>
        <div class="box-style">
          <div class="cont">
            <div class="table-div">
              <vxe-grid
                id="resGrid"
                ref="resGrid"
                height="440px"
                v-bind="resOption"
                @resizable-change="$vxeTableUtil.onColumnWitchChange"
                @custom="$vxeTableUtil.customHandle"
              >
                <template #form>
                  <div class="clearfix screen-btns">
                    <div class="fl">
                      <vxe-button status="primary" class="button-sty" icon="el-icon-upload2" @click="exportToExcel()">
                        导出
                      </vxe-button>
                    </div>
                    <div class="fr"></div>
                  </div>
                </template>
              </vxe-grid>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

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

export default {
  mixins: [mixins],
  components: {}
};
</script>
