<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      v-if="dialogFormVisible"
      :close-on-click-modal="false"
      width="1150px"
      :custom-class="'dialog-style '+(option.otherParams && option.otherParams.uploadDialogCustomClass?option.otherParams.uploadDialogCustomClass:'')"
      :append-to-body="true"
      :destroy-on-close="true"
      @close="handleClose"
      v-el-drag-dialog
    >
      <div class="upload-box" style="margin-left:-20px;margin-right:-20px;">
        <div class="upload-b_left" @click="choosePasteArea" :class="{on:pasteAreaStatus}"
             v-show="option.hidePasteArea!==true">
          <div class="t"><i
            class="el-icon-warning-outline"></i>{{ $t2('选择此处，可粘贴文件', 'components.VabUpload.tip') }}（Ctrl+V）
          </div>
          <ul class="el-upload-list el-upload-list--picture">
            <div class="nodata" v-if="pasteList.length == 0">
              <img src="~@/resources/images/nodata2.png"/>
            </div>
            <li v-for="(pasteFile,index) in pasteList" :key="index" class="el-upload-list__item is-success">
              <div>
                <img
                  :src="getShowImage(pasteFile)"
                  class="el-upload-list__item-thumbnail"
                />
                <div class="el-upload-list__item-name">
                  <!-- <p class="flex">
                    <el-input size="mini" v-model="pasteFile.fileName" @change="changeFileName(pasteFile)"></el-input>
                  </p> -->
                  <div class="txt-box">
                    <div class="tb-left"></div>
                    <div class="tb-mid name">
                      <div class="txt">
                        <span>{{ pasteFile.fileName }}</span>
                        <span><i class="el-icon-edit" @click="openFileNameDialog(pasteFile,index)"></i></span>
                      </div>
                    </div>
                    <div class="format"><i class="el-icon-edit" @click="openFileNameDialog(pasteFile,index)"></i></div>
                  </div>

                  <!--                  <p>admin</p>-->
                  <p>{{ $t2('格式', 'components.VabUpload.fileType') }}：{{ pasteFile.fileSuffix }}</p>
                  <p>{{ $t2('大小', 'components.VabUpload.fileSize') }}：{{ formatFileSize(pasteFile.size) }}</p>
                </div>
                <div class="el-icon-close" @click="deletePasteFile(index)">
                  <i class="el-tooltip iconfont iconshanchu"></i>
                </div>
              </div>
            </li>
          </ul>
          <el-button type="primary" @click="confirmPasteFile" class="button-sty" v-if="pasteList.length>0">
            <i class="el-icon-check el-icon"></i>
            {{ $t2('确定文件', 'components.VabUpload.confirmFile') }}
          </el-button>
        </div>
        <div class="upload-b_right">
          <div class="tips">
            {{
              $t2('注意：当前所有文件上传完，才允许确定操作，单个文件上传大小，请尽量小于100MB。', 'components.VabUpload.tip2')
            }}
            <div class="upload-count fr">
              <div>{{ $t2('总数', 'components.VabUpload.total') }}：<span>{{ totalQuantity }}</span></div>
              <div>{{ $t2('成功', 'components.VabUpload.success') }}：<span>{{ successQuantity }}</span></div>
              <div>{{ $t2('失败', 'components.VabUpload.fail') }}：<span
                :class="{error : errorQuantity > 0}">{{ errorQuantity }}</span></div>
            </div>
          </div>
          <el-upload
            ref="upload"
            :action="action"
            :http-request="changeFile"
            :auto-upload="auto"
            :close-on-click-modal="false"
            :data="data"
            :file-list="fileList"
            :headers="headers"
            :limit="limit"
            :multiple="isMulti"
            :name="name"
            :on-change="handleChange"
            :on-error="handleError"
            :on-exceed="handleExceed"
            :on-preview="handlePreview"
            :on-progress="handleProgress"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :before-upload="handleBeforeUpload"
            :accept="accept"
            class="upload-demo"
            list-type="picture"
          >
            <div class="avatar-uploader hidden" slot="trigger" v-if="showLocalUploadBtn" ref="uploadBtn" v-show="false">
              <i
                class="el-icon-plus avatar-uploader-icon"></i></div>
            <div slot="file" slot-scope="{ file }">
              <img :src="getShowImage(file)" class="el-upload-list__item-thumbnail"/>
              <div class="el-upload-list__item-name">
                <p>{{ file.name }}</p>
                <p>{{ formatFileSize(file.size) }}</p>
                <p class="f-red" v-if="file.status=='fail'">{{ file.failMsg }}</p>
              </div>
              <el-progress :percentage="file.percentage"
                           v-if="file.status == 'uploading' || file.status == 'preUpload'"></el-progress>
              <div class="el-upload-list__item-status-label error" v-else-if="file.status == 'fail'"><i
                class="el-icon-upload-success iconfont icon-gantanhao"></i></div>
              <div class="el-upload-list__item-status-label" v-else-if="file.percentage==100"><i
                class="el-icon-upload-success el-icon-check"></i></div>
              <div class="el-upload-list__item-status-label load" v-else-if="file.status == 'ready'"><i
                class="el-icon-loading"></i></div>

              <div class="el-icon-close" @click="removeFile(file)">
                <el-tooltip :enterable="false" effect="dark" :content="$t2('删除', 'components.VabUpload.delete')"
                            placement="top" popper-class="tooltip-skin">
                  <i
                    class="iconfont iconshanchu"></i></el-tooltip>
              </div>
            </div>
            <el-dialog :visible.sync="dialogVisible" append-to-body
                       :title="$t2('查看大图', 'components.VabUpload.checkBigImgage')">
              <div><img :src="dialogImageUrl" alt="" width="100%"/></div>
            </el-dialog>
          </el-upload>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="fl" style="margin-left:291px;">
          <el-button type="warning" class="button-sty" slot="trigger" v-if="showLocalUploadBtn"
                     @click="$refs.uploadBtn.click()">
          	<i class="el-icon-plus"></i>
          	{{ $t2('从本地选择', 'components.VabUpload.localPick') }}
          </el-button>
          <el-button type="success" class="button-sty" @click="showPrivateProfileDialog= true"
                     v-if="showPrivateUploadBtn">
          	<i class="iconfont icon-wendangshangchuan"></i>
          	{{ $t2('从个人文档工作区选择', 'components.VabUpload.privateDocumentPick') }}
          </el-button>
        </div>

				<el-button type="primary" plain class="button-sty" @click="handleClose">
					<i class="el-icon-close el-icon"></i>
					{{ $t2('取 消', 'system.button.cancel2') }}
				</el-button>
        <el-button type="primary" plain class="button-sty" @click="submitUpload" v-if="!auto && hasReadyFile">
        	<i class="el-icon el-icon-video-play"></i>
        	{{ $t2('确认上传', 'components.VabUpload.comfirmUpload') }}
        </el-button>
				<el-button type="primary" @click="submitImage" class="button-sty" v-if="!uploading">
					<i class="el-icon-check el-icon"></i>
					{{ $t2('确 定', 'system.button.confirm2') }}
				</el-button>
        <!-- <el-button type="primary" plain class="button-sty" @click="handleBtn" v-if="uploading">
        	<i class="el-icon el-icon-video-play" v-if="btn==true"></i>
          <i class="el-icon el-icon-video-pause" v-if="btn==false"></i>
        	{{btn|btnText}}
        </el-button> -->
			</span>
    </el-dialog>
    <privateProfileDialog v-if="showPrivateProfileDialog" :visiable.sync="showPrivateProfileDialog"
                          @confirm="confirmPrivateProfileDialog"></privateProfileDialog>
    <el-dialog
      :title="$t2('文件名修改', 'components.VabUpload.modifyFileName')"
      :append-to-body="true"
      :modal-append-to-body="true"
      :close-on-click-modal="false"
      v-if="showFileNameDialog"
      :visible.sync="showFileNameDialog"
      :modal="false"
      custom-class="dialog-style list-dialog dialog-checkbox pd_8"
      width="400px"
      v-el-drag-dialog
      v-el-dialog-center
    >
      <div class="cont">
        <el-form ref="editForm" label-width="110px" class="adSearchForm" style="width: 362px;height: auto;">
          <el-form-item :label="$t2('文件名称', 'components.VabUpload.fileName')">
            <el-input v-model="editFileName" clearable class="all-width"/>
          </el-form-item>
          <el-form-item :label="$t2('文件格式', 'components.VabUpload.fileCategory')">
            {{ editFileSuffix }}
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
      <el-button type="primary" plain class="button-sty" @click="showFileNameDialog=false">
        <i class="el-icon-close el-icon"></i>
        {{ $t2('取 消', 'system.button.cancel2') }}
      </el-button>
      <el-button type="primary" @click="confirmFileNameDialog" 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 {
  mixins: [mixins],
  components: {
    privateProfileDialog: () => import('@base/components/VabUpload/privateProfileDialog')
  }
};
</script>

<style lang="scss" scoped>
.pup-annex-box {
  height: 355px;
  background: #fff;
}

::v-deep .dialog-style {
  margin-top: 7vh !important;

  .dialog-footer {
    padding-left: 6px;
    display: block;
  }

  .upload-box .upload-demo .el-upload {
    margin-top: 0 !important;
  }
}
</style>
