<template>
  <div>
    <el-dialog
      ref="privateProfileDialog"
      :title="title"
      :visible.sync="showDialog"
      v-if="showDialog"
      :append-to-body="true"
      :close-on-click-modal="false"
      width="1102px"
      custom-class="dialog-style drag-space"
      :destroy-on-close="true"
      @close="handleClose"
      v-el-drag-dialog
      top="0px"
    >
      <div id="containt1">
        <div v-show="title!='' && title!=null" style="overflow: hidden;">
          <div class="tree-box tree-annex fl">
            <div class="tit"><b>{{ title }}</b></div>
            <div class="tree-form">
              <el-input placeholder="请输入文件夹名称" v-model="filterText" class="txt">
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </div>
            <el-tree
              v-if="treeFlag"
              :props="defaultProps"
              :load="loadNode"
              node-key="id"
              ref="tree"
              lazy
              :filter-node-method="filterNode"
              :expand-on-click-node="false"
              @node-click="handleNodeClick"
              class="tree-list"
              icon-class="el-icon-arrow-down"
            >
              <span class="el-tree-node__label" slot-scope="{ node, data }" v-if="!node.data.moreBtn">
                <i class="ico-wenjian"></i>
                <span>{{ node.label }}</span>
              </span>
              <span v-else class="el-tree-node__label">
                <el-button type="primary" plain class="button-sty">{{ node.label }}</el-button>
              </span>
            </el-tree>
          </div>
          <label id="labBtn">
            <div class="icon">
              <i class="el-icon-more"></i>
              <i class="el-icon-more"></i>
            </div>
          </label>
          <div class="main-right file-library fr" style="overflow: hidden;">
            <div class="annex-filter" v-if="isBillEnabled">
              <el-button slot="append" icon="el-icon-search" @click="openBillDialog" size="mini" class="an-btn-search"
                         type="success"></el-button>
              <div class="abox">
                <div class="item" v-for="(checkBillData,index) in checkBillDatas"><span>{{
                    getBillLabel(checkBillData)
                  }}</span><i
                  class="el-icon-close" @click="deleteBillData(index)"></i></div>
              </div>
              <el-button slot="append" icon="el-icon-delete" size="mini" class="an-btn-del" @click="clearBill">全部删除
              </el-button>
            </div>
            <div class="annex-screen"
                 v-if="fileObjAuth.downloadAuth">
              <el-button type="primary" class="button-sty" icon="el-icon-download" @click.native="mulDownload2"
                         v-if="fileObjAuth.downloadAuth">下载
              </el-button>
            </div>
            <div class="line"
                 v-if="fileObjAuth.downloadAuth"></div>
            <div class="annex-crumbs">
              <span class="tit"><i class="iconfont icon-wenjianjia"></i>文件区</span>
              <span class="tit" style="padding-right: 0;">指定路径：</span>
              <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item v-for="treeNode in treeNodeArr" :key="treeNode.id" @click.native="doNav(treeNode)">
                  {{
                    treeNode.label
                  }}
                </el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <div class="grid-height viewBox">
              <div class="annex-searchBox">
                <div class="fl">
                  <div class="oper">
                    <el-checkbox v-model="checkAll" @change="changeCheckAll" :disabled="checkAllDisabled"
                                 :indeterminate="checkAllIndeterminate">已选中 {{
                        checkList.length
                      }} 项
                    </el-checkbox>
                  </div>
                  <div class="search-box">
                    <template v-if="currentFileCategory && currentFileCategory.id">
                      <el-input placeholder="请输入文件名" v-model="formData.fileName" clearable>
                        <el-button slot="append" icon="el-icon-search" @click="searchEvent"></el-button>
                      </el-input>
                      <el-button icon="iconfont icon-shaixuan" class="button-sty" @click="showAdvancedSearch = true">筛选
                      </el-button>
                    </template>
                  </div>

                </div>
                <div class="fr">
                  <el-button type="primary" icon="iconfont icon-icmenu2" @click="changeShowType()"
                             class="button-sty icon-btn"
                             v-show="showType==1">列表
                  </el-button>
                  <el-button type="primary" style="margin-left:0;" icon="el-icon-menu" @click="changeShowType()"
                             class="button-sty icon-btn"
                             v-show="showType==2">图示
                  </el-button>
                </div>
              </div>
              <div class="mask" v-show="is_show_mask">
              </div>
              <div class="containter1" ref="containter1" v-show="showType==1" style="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 class="item" :class="checkList.includes(attachment.id) ? 'on':''">
                          <el-checkbox :label="attachment.id" :disabled="attachment.dirs"><span></span></el-checkbox>
                          <div class="oper">
                            <a
                              href="javascript:void(0);"
                              class="a-link ico"
                              v-if="!attachment.dirs && fileObjAuth.downloadAuth"
                              @click="$commonFileUtil.downloadFile(attachment.domain + attachment.url, attachment.fileName)"
                            >
                              <el-tooltip effect="dark" content="下载" placement="top"
                                          popper-class="tooltip-skin">
                                <i class="el-icon-download"/>
                              </el-tooltip>
                            </a>
                          </div>
                          <div class="img" @click="openPreview(attachment)" v-if="!attachment.dirs">
                            <div class="show-video" v-if="hasPreview(attachment)"><i class="icon-chakan"></i></div>
                            <div class="show-video" v-if="false"><i class="el-icon-video-play"></i></div>
                            <p><img :src="getShowUrl(attachment)"/></p>
                          </div>
                          <div class="img" @click="changeCategory(attachment)" 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>
                  <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>当前记录</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>
              <div class="annex-grid-height">
                <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>当前记录</span>
                        <span class="f-red"> {{ page.records.length }} </span>
                        <span>/</span>
                        <span class="f-red"> {{ page.total }}</span>
                      </span>
                      </template>
                    </vxe-pager>
                  </template>
                </vxe-grid>
              </div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
      	<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" @click="dialogPrimary" class="button-sty">
      		<i class="el-icon-check el-icon"></i>
      		{{ $t2('确 定', 'system.button.confirm2') }}
      	</el-button>
      </span>
    </el-dialog>
    <el-image-viewer v-if="showViewer" :on-close="() => {showViewer = false;}" :initial-index.sync="chooseIndex"
                     :url-list="imageDTOs"/>
    <advancedSearchDialog v-if="showAdvancedSearch" :visiable.sync="showAdvancedSearch"
                          :formData.sync="advancedFormData" @confirm="searchEvent">
      <template #form>
        <vxe-form :model="advancedFormData" title-width="102px" :inline="true" class="adSearchForm">
          <vxe-form-item title="属性名称:">
            <template v-slot>
              <el-input v-model="advancedFormData.attributeName" clearable/>
            </template>
          </vxe-form-item>
          <vxe-form-item title="属性值:">
            <template v-slot>
              <el-input v-model="advancedFormData.attributeValue" clearable/>
            </template>
          </vxe-form-item>
          <!--          <vxe-form-item title="状态:">
                      <template v-slot>
                        <el-select v-model="advancedFormData.status" clearable>
                          <el-option :value="0" label="未归档"></el-option>
                          <el-option :value="1" label="已归档"></el-option>
                        </el-select>
                      </template>
                    </vxe-form-item>-->
          <vxe-form-item title="说明:" class-name="block">
            <template v-slot>
              <el-input v-model="advancedFormData.note" clearable/>
            </template>
          </vxe-form-item>
          <vxe-form-item title="创建时间:">
            <template v-slot>
              <el-date-picker
                v-model="advancedFormData.startTime"
                type="date"
                placeholder=""
                size="small"
                clearable
                value-format="yyyy-MM-dd"
                :picker-options="$baseStartPickerOptions(advancedFormData.endTime)"
              ></el-date-picker>
              <span>-</span>
              <el-date-picker
                v-model="advancedFormData.endTime"
                type="date"
                placeholder=""
                size="small"
                clearable
                value-format="yyyy-MM-dd"
                :picker-options="$baseEndPickerOptions(advancedFormData.startTime)"
              ></el-date-picker>
            </template>
          </vxe-form-item>
        </vxe-form>
      </template>
    </advancedSearchDialog>
  </div>
</template>

<script>
import mixins from './privateProfileDialogMixins'

export default {
  mixins: [mixins]
};
</script>
<style lang="scss" scoped>

</style>
