<template>
  <div>
    <el-dialog
      :title="$t2('回收站','components.fileLibrary.recycleBin')"
      :close-on-click-modal="false"
      :visible.sync="showDialog"
      :modal="false"
      custom-class="dialog-style list-dialog"
      width="80%"
      @close="dialogClose"
      v-el-drag-dialog
      v-el-dialog-center
    >
      <div id="containt">
        <div class="file-library" style="padding:0 6px 6px;">
          <div class="annex-screen">
            <div class="fl">
              <el-button type="primary" class="button-sty" icon="el-icon-refresh-left" @click="rever()">{{$t2('还原','components.fileLibrary.revert')}}
              </el-button>
            </div>
            <div class="fr">
              <div class="search-box">
                <el-input :placeholder="$t2('请输入文件名/文件夹名','components.fileLibrary.reverPlaceholder')" v-model="formData.fileName" clearable>
                </el-input>
                <el-input v-model="formData.treePathName" placeholder="文件地址" clearable></el-input>
                <el-input v-model="formData.deleteBy" placeholder="删除人" clearable></el-input>
              </div>
              <el-button icon="el-icon-search" class="button-sty icon-btn" @click="searchEvent" type="warning"></el-button>
              <el-button icon="iconfont icon-icmenu2" @click="changeShowType()" class="button-sty icon-btn"
                         v-if="showType==1"></el-button>
              <el-button icon="el-icon-menu" @click="changeShowType()"
                         class="button-sty icon-btn"
                         v-if="showType==2"></el-button>
            </div>
          </div>
          <div class="annex-crumbs">
            <div class="oper">
              <el-checkbox v-model="checkAll" @change="changeCheckAll" :disabled="checkAllDisabled"
                           :indeterminate="checkAllIndeterminate">{{$t2('已选中'+
                checkList.length +'项','components.fileLibrary.checkboxLabel',{num:checkList.length})}}
              </el-checkbox>
            </div>
          </div>
          <div class="grid-height viewBox">
            <div class="mask" v-show="is_show_mask">
            </div>
            <div ref="containter1" v-show="showType==1" style="/*height:calc(100vh - 120px);*/overflow: auto;">

              <div class="annex-piclist">
                <div class="clearfix">
                  <el-checkbox-group v-model="checkList" @change="checkChange" class="f-group">
                    <template v-for="(attachment,index) in page.records">
                      <li :key="index" class="item" :class="checkList.includes(attachment.id) ? 'on':''">

                        <el-checkbox :label="attachment.id"><span></span></el-checkbox>
                        <div class="oper">
                          <el-tooltip effect="dark" :content="$t2('详情','components.fileLibrary.detail')" placement="top"><i
                            class="el-tooltip iconfont icon-shuxing ico"
                            @click="openPropertiesDialog(attachment)"></i>
                          </el-tooltip>
                          <a
                            href="javascript:void(0);"
                            class="a-link ico"
                            @click="rever([attachment])"
                          >
                            <el-tooltip effect="dark" :content="$t2('还原','components.fileLibrary.revert')" placement="top"
                                        popper-class="tooltip-skin">
                              <i class="el-icon-refresh-left"/>
                            </el-tooltip>
                          </a>
                        </div>
                        <div class="img" v-if="!attachment.dirs" @click="openPreview(attachment)">
                          <p><img :src="getShowUrl(attachment)"/></p>
                        </div>
                        <div class="img" v-if="attachment.dirs">
                          <svg-icon icon-class="ico-wenjianjia"/>
                        </div>
                        <el-tooltip :enterable="false" effect="dark" :content="attachment.fileName"
                                    placement="top">
                          <div class="txt-box">
                            <div class="tb-left"></div>
                            <div class="tb-mid">
                              <div class="txt">
                                <span class="name">{{ getFileName(attachment) }}</span><span
                                v-if="attachment.extension">.{{ attachment.extension }}</span>
                              </div>
                            </div>
                            <div class="format">... .{{ attachment.extension }}</div>
                          </div>
                        </el-tooltip>
                      </li>
                    </template>
                  </el-checkbox-group>
                  <!--              <div class="item more">
                                  <div class="img"><svg-icon icon-class="ico-more" /></div>
                                  <div class="name">更多</div>
                                </div>-->
                </div>
                <div class="vxe-grid">
                  <div class="vxe-grid&#45;&#45;pager-wrapper">
                    <vxe-pager
                      class="pages-box"
                      :current-page.sync="page.current"
                      :page-size.sync="page.size"
                      :total="page.total"
                      :layouts="['PrevPage', 'Number', 'NextPage']"
                      @page-change="changePageNew"
                    >
                      <template #right>
                    <span>
                      <span>{{$t2('当前记录','components.table.pageInfo')}}</span>
                      <span class="f-red"> {{ page.records.length }} </span>
                      <span>/</span>
                      <span class="f-red"> {{ page.total }}</span>
                    </span>
                      </template>
                    </vxe-pager>
                  </div>
                </div>
              </div>
            </div>
            <vxe-grid v-show="showType==2" ref="table-m1" v-bind="vxeOption" :data="page.records"
                      @resizable-change="$vxeTableUtil.onColumnWitchChange" @custom="$vxeTableUtil.customHandle"
                      @checkbox-change="tableCheckChange"
                      @checkbox-all="tableCheckAll">
              <template #pager>
                <vxe-pager
                  class="pages-box"
                  :current-page.sync="page.current"
                  :page-size.sync="page.size"
                  :total="page.total"
                  :layouts="['PrevPage', 'Number', 'NextPage']"
                  @page-change="changePageNew"
                >
                  <template #right>
                    <span>
                      <span>{{$t2('当前记录','components.table.pageInfo')}}</span>
                      <span class="f-red"> {{ page.records.length }} </span>
                      <span>/</span>
                      <span class="f-red"> {{ page.total }}</span>
                    </span>
                  </template>
                </vxe-pager>
              </template>
              <template #operate="{row}">
                <a
                  href="javascript:void(0);"
                  class="a-link"
                  @click="openPropertiesDialog(row)"
                >
                  <el-tooltip :enterable="false" effect="dark" :content="$t2('详情','components.fileLibrary.detail')" placement="top"
                              popper-class="tooltip-skin">
                    <i class="iconfont icon-shuxing"/>
                  </el-tooltip>
                </a>
                <a
                  href="javascript:void(0);"
                  class="a-link"
                  @click="rever([row])"
                >
                  <el-tooltip :enterable="false" effect="dark" :content="$t2('还原','components.fileLibrary.revert')" placement="top"
                              popper-class="tooltip-skin">
                    <i class="el-icon-refresh-left"/>
                  </el-tooltip>
                </a>
              </template>
            </vxe-grid>

          </div>
        </div>
      </div>
    </el-dialog>

    <categoryMoveDialog
      v-if="showCategoryMoveDialog"
      :visiable.sync="showCategoryMoveDialog"
      :checkRows.sync="operateRows"
      :handleType="0"
      @confirm="confirmMoveDialog"></categoryMoveDialog>
    <recycleBinPropertiesDialog v-if="showPropertiesDialog" :visiable.sync="showPropertiesDialog"
                                :editAttachment.sync="editAttachment"></recycleBinPropertiesDialog>
    <el-image-viewer v-if="showViewer" :on-close="() => {showViewer = false;}" :initial-index.sync="chooseIndex"
                     :url-list="imageDTOs"/>
  </div>
</template>

<script>
import mixins from './mixins/recycleBinDialogMixins';

export default {
  mixins: [mixins]
}

</script>
<style lang="scss" scoped>
#labBtn {
  height: calc(100vh - 34px);
}

#containt .main-right {
  margin-left: -1%;
  padding-left: 18px !important;
  padding-top: 8px;
  padding-right: 8px;
}

.upload-list .upload-box {
  display: inline-block;
}


.vxe-grid .vxe-gird-block {
  height: calc(100vh - 161px);
}

::v-deep .file-library .annex-screen .search-box > .el-input{
  height: 28px !important;
  margin-right: 10px;
}

::v-deep .file-library .annex-screen .search-box > .el-input .el-input__inner{vertical-align: text-bottom;    border-color: #e8e8e8}

/*.viewBox {
  overflow: hidden;
  position: relative;
  user-select: none;

  .mask {
    position: absolute;
    background: #409eff;
    opacity: 0.4;
    z-index: 9999;
  }
}*/

</style>
