<template>
  <div id="containt">
    <div v-show="title!='' && title!=null">
      <div class="tree-box tree-annex fl">
        <div class="tit"><b>{{ title }}</b></div>
        <div class="tree-form">
          <el-input :placeholder="$t1('请输入查询区名称')" 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-screen">
          <el-button type="primary" class="button-sty" icon="el-icon-download" @click.native="mulDownload2">
            {{ $t1('下载') }}
          </el-button>
        </div>
        <div class="line"></div>
        <div class="annex-crumbs">
          <span class="tit"><i class="iconfont icon-wenjianjia"></i>{{ $t1('文件区') }}</span>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item v-for="(treeNode,index) in treeNodeArr" :key="index" @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">{{ $t1('已选中') }} {{
                    checkList.length
                  }} {{ $t1('项') }}
                </el-checkbox>
              </div>
              <div class="search-box">
                <el-input :placeholder="$t1('请输入文件名')" v-model="formData.name" clearable>
                  <el-button slot="append" icon="el-icon-search" @click="searchEvent"></el-button>
                </el-input>
              </div>
            </div>
            <div class="fr">

              <el-button type="primary" icon="iconfont icon-icmenu2" @click="changeShowType()"
                         class="button-sty icon-btn"
                         v-show="showType==1">{{ $t1('列表') }}
              </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">{{ $t1('图示') }}
              </el-button>
            </div>

          </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) in page.records">
                    <li :key="attachment.id" 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="$t1('详情')" 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" v-if="attachment.billUrl">
                          <el-tooltip effect="dark" :content="$t1('查看单据')" placement="top"><i
                            class="el-icon-files"
                            @click="openWfDialog(attachment)"></i>
                          </el-tooltip>
                        </a>
                        <a
                          href="javascript:void(0);"
                          class="a-link ico"
                          v-if="!attachment.dirs"
                          @click="$commonFileUtil.downloadFile(attachment.domain + attachment.url, attachment.name)"
                        >
                          <el-tooltip effect="dark" :content="$t1('下载')" 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.name" 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>{{ $t1('当前记录') }}</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>{{ $t1('当前记录') }}</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>
      <el-image-viewer v-if="showViewer" :on-close="() => {showViewer = false;}" :initial-index.sync="chooseIndex"
                       :url-list="imageDTOs"/>
      <propertiesDialog v-if="showPropertiesDialog" :visiable.sync="showPropertiesDialog"
                        :editAttachment.sync="editAttachment" :isEdit="isEdit"
                        :treeNodeArr.sync="treeNodeArr"></propertiesDialog>
      <el-dialog
        :title="$t1('查看单据')"
        :append-to-body="true"
        :modal-append-to-body="true"
        :close-on-click-modal="false"
        v-if="showWfDialog"
        :visible.sync="showWfDialog"
        :modal="false"
        custom-class="dialog-style designer-dialog indexUse"
        width="100%"
        height="100%"
        top="0px"
        bottom="0px"
        :destroy-on-close="true"
        v-el-drag-dialog
      >
        <div id="containt">
          <component
            v-if="showWfContent && wfContent"
            :is="wfContent"
            visible-key="showWfContent"
            :_dataId.sync="wfDataId"
            :parent-target="_self"
            :defaultShowWfContent="true"
            :_viewType="1"
            @reload="$reloadHandle"
          ></component>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>

import ElImageViewer from "@base/components/VabUpload/image-viewer";
import {treeScollx} from "@base/utils/global";
import propertiesDialog from './propertiesDialog';

export default {
  name: 'file_view_ins:list',
  props: {
    option: {
      type: Object
    }
  },
  components: {
    ElImageViewer,
    propertiesDialog
  },
  provide() {
    return {
      current_prefix: this.current_prefix,
      viewAreaCode: this.viewAreaCode,
      dataId: this.dataId
    }
  },
  created() {

  },
  mounted() {
    this.initTitle();
    this.initTableList();
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  data() {
    let pageSize = 1000;
    let categoryPageSize = 1000;
    return {
      showBillDialog: false,
      billDialogContent: null,
      checkBillDatas: [],
      title: '',
      folderStatus: false,
      filterText: '',
      defaultProps: {
        children: 'children',
        label: 'itemName',
        isLeaf: 'leaf'
      },
      resolveFunc: function () {
      },
      fileAttachmentCategorys: [],
      currentFileCategoryCode: null,
      chooseIndex: -1,
      imageDTOs: [],
      showViewer: false,
      showPropertiesDialog: false,
      editAttachment: null,
      vxeOption: {},
      showType: 1,
      formData: {},
      showAdvancedSearch: false,
      advancedFormData: {},
      pageSize: pageSize,
      page: {
        current: 1,
        size: pageSize,
        total: 0,
        records: []
      },
      categoryPageSize: categoryPageSize,
      categoryPage: {
        current: 1,
        size: categoryPageSize,
        total: 0,
        records: []
      },
      showEditCategoryDialog: false,
      editCategory: {},
      currentFileCategory: null,
      rootCategory: false,
      currentNode: null,
      treeNodeArr: [],
      checkRows: [],
      showCategoryMoveDialog: false,
      checkList: [],
      handleType: 1,//1移动，2复制
      showFileHistoryDialog: false,
      operateFileHistory: null,
      showShareDialog: false,
      shareAttachment: null,
      checkAll: false,
      fileArr: [],
      checkList2: [],
      showRecycleBinDialog: false,

      showVideoDialog: false,
      videoOption: null,

      //个人文档
      userInfo: {
        nickName: null
      },
      treeFlag: false,
      currentUser: {},
      showUserDialog: false,
      isDocAdmin: false,

      viewAreaCode: "file_view_area",

      showWfDialog: false,
      showWfContent: true,
      wfContent: null,
      wfDataId: '',
    };
  },
  computed: {
    current_prefix() {
      return this.currentFileCategory && this.currentFileCategory.serviceId ? '/' + this.currentFileCategory.serviceId : '';
    },
    pictureDtoList() {
      return this.page.records.filter(row => {
        return row.url && this.$commonFileUtil.isPictureFile(row.url)
      });
    },
    checkAllDisabled() {
      return this.page.records.length == 0
    },
    checkAllIndeterminate() {
      return this.checkList.length > 0 && (this.checkList.length < this.page.records.length)
    },
  },
  methods: {
    getFileName(row) {
      if (row.extension) {
        let index = row.name.lastIndexOf('.' + row.extension)
        return row.name.substring(0, index);
      } else {
        return row.name;
      }
    },
    getCheckRows() {
      let checkRows = [];
      if (this.showType == 1) {
        let checkList = this.checkList;
        checkRows = this.page.records.filter(row => checkList.includes(row.id));
      } else {
        checkRows = this.$refs['table-m1'].getCheckboxRecords(true);
      }
      return checkRows;
    },
    getRows() {
      let rows = [];
      if (this.showType == 1) {
        rows = this.page.records;
      } else {
        rows = this.$refs['table-m1'].getTableData().fullData;
      }
      return rows;
    },
    changeShowType() {
      this.showType = this.showType == 1 ? 2 : 1;
      this.searchEvent();
    },
    changeCategory(row, node) {
      if (!node) {
        node = this.$refs.tree.getNode(row.id + '');
        this.$refs.tree.setCurrentKey(row)
      }
      this.handleNodeData(node);
      this.searchEvent();
    },
    searchEvent() {
      this.doSearch()
    },
    resetEvent() {
      this.formData = {};
      this.doSearch();
    },
    doSearch() {
      this.checkList = [];
      this.checkAll = false;
      this.initAttchInfo();
    },
    openPropertiesDialog(attachment) {
      this.editAttachment = attachment;
      this.showPropertiesDialog = true;
    },
    getShowUrl(attachment, field) {
      if (!field) field = 'medium';
      return this.$commonFileUtil.getShowUrl(attachment.domain + (attachment[field] ? attachment[field] : attachment.url));
    },
    hasPreview(attachment) {
      let fileSuffix = this.$commonFileUtil.getFileSuffix(attachment.url);
      return this.$commonFileUtil.isPictureFile(attachment.url) || this.$commonFileUtil.isPreviewFile(attachment.url);
    },
    openPreview(attachment) {
      if (this.$commonFileUtil.isPictureFile(attachment.url)) {
        this.imageDTOs = this.pictureDtoList;
        this.chooseIndex = this.pictureDtoList.findIndex(row => row.id == attachment.id);
        this.showViewer = true;
      } else if (this.$commonFileUtil.isPreviewFile(attachment.url)) {
        this.$openFilePreview(attachment)
      }
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.itemName.indexOf(value) !== -1;
    },
    initAttchInfo(page) {
      if (!this.current_prefix) {
        return;
      }
      let defaultPage = {
        current: 1,
        size: this.pageSize,
        total: 0,
        records: []
      }
      page = page || {
        current: 1,
        size: this.pageSize
      };

      let parent = this.currentFileCategory && this.currentFileCategory.id ? this.currentFileCategory.id : 0;
      this.$http({
        method: 'post',
        url: this.current_prefix + '/file_view_ins/viewFiles',
        data: {
          itemCode: this.currentFileCategory ? this.currentFileCategory.itemCode : null,
          viewAreaCode: this.viewAreaCode,
          condition: {
            ...this.formData,
            ...this.advancedFormData,
            ...page
          }
        },
        isLoading: true,
        success: res => {
          this.page = res.objx && res.objx.data ? res.objx.data : defaultPage;
        }
      });
    },
    initTableList() {
      let that = this;
      let tableOption = {
        vue: this,
        tableRef: 'table-m1',
        tableName: 'pcp_product_file_list-m1',
        config: {
          height: 'auto',
          pagerConfig: {
            autoHidden: false,
            enabled: true
          }
        },
        columns: [
          {type: 'checkbox', width: 48, resizable: false, fixed: 'left'},
          {
            title: this.$t1('文件名称'),
            field: 'name',
            width: 250,
            fixed: 'left',
            slots: {
              default: ({row, rowIndex}) => {
                let h = this.$createElement;
                if (!row.dirs) {
                  let showUrl = that.getShowUrl(row, 'thumbnail');
                  return [
                    h('a', {
                      staticClass: "a-link img",
                      on: {
                        click: (event) => {
                          event.stopPropagation();
                          that.openPreview(row)
                        }
                      }
                    }, [
                      h('el-tooltip', {
                        props: {
                          enterable: false,
                          effect: "dark",
                          content: this.$t1('展示图'),
                          placement: "top",
                          "popper-class": "tooltip-skin"
                        }
                      }, [
                        h('el-image', {
                          props: {
                            src: showUrl
                          }
                        })
                      ])
                    ]),
                    h('span', row.name)
                  ];
                } else {
                  return [
                    h('a', {
                      staticClass: "a-link img",
                      on: {
                        click: (event) => {
                          event.stopPropagation();
                          that.changeCategory(row);
                        }
                      }
                    }, [
                      h('div', {
                        staticClass: "img"
                      }, [
                        h('svg-icon', {
                          props: {"icon-class": "ico-wenjianjia"}
                        }),
                        h('span', row.name)
                      ])
                    ])
                  ]
                }
              }
            }
          },
          {
            title: this.$t1('文件大小'),
            field: 'fileSize',
            width: 150,
            slots: {
              default: ({row, rowIndex}) => {
                if (!row.dirs) {
                  return this.formatFileSize(row.fileSize);
                }
              }
            }
          },
          {title: this.$t1('文件说明'), field: 'note', width: 250},
          {title: this.$t1('单号'), field: 'billSn', width: 250},
          {title: this.$t1('单据说明'), field: 'billInfo', width: 250},
          {title: this.$t1('创建人'), field: 'createBy', width: 150},
          {
            field: 'createDate',
            title: this.$t1('创建时间'),
            width: 150
          },
          {
            width: 150,
            fixed: 'right',
            title: '',
            sortable: false,
            slots: {
              default: ({row, rowIndex}) => {
                return [
                  this.getBtnVnode({
                    class: "iconfont icon-shuxing",
                    title: this.$t1('详情'),
                    click: (event) => {
                      this.openPropertiesDialog(row);
                    }
                  }),
                  this.getBtnVnode({
                    class: "el-icon-files",
                    title: this.$t1('查看单据'),
                    show: row.billUrl != null,
                    click: (event) => {
                      this.openWfDialog(row)
                    }
                  }),
                  this.getBtnVnode({
                    class: "el-icon-download",
                    title: this.$t1('下载'),
                    click: (event) => {
                      this.$commonFileUtil.downloadFile(row.domain + row.url, row.name);
                    }
                  })
                ];
              }
            }
          }
        ],
        callback(a, b) {

        }
      };
      this.$vxeTableUtil.initVxeTable(tableOption).then(opts => {
        this.vxeOption = opts;
      });
    },
    getBtnVnode(opt) {
      let h = this.$createElement;
      let show = opt.show === false ? false : true;
      if (show) {
        return h('a', {
          staticClass: "a-link",
          on: {
            click: (event) => {
              opt.click && opt.click(event)
            }
          }
        }, [
          h('el-tooltip', {
            props: {
              enterable: false,
              effect: "dark",
              content: opt.title,
              placement: "top",
              "popper-class": "tooltip-skin"
            }
          }, [
            h('i', {
              staticClass: opt.class
            })
          ])
        ]);
      }
    },
    changePageNew({type, currentPage, pageSize, $event}) {
      this.checkList = [];
      this.checkAll = false;
      this.initAttchInfo({
        current: currentPage,
        size: pageSize,
      })
    },
    handleNodeClick(data, node, v) {
      this.changeCategory(data, node);
    },
    doNav(t) {
      let node = this.$refs.tree.getNode(t.data.id + '');
      this.$refs.tree.setCurrentKey(node.data)
      this.handleNodeClick(node.data, node, this);
    },
    // 异步树叶子节点懒加载逻辑
    loadNode(node, resolve, callback) {
      let url, param;
      url = USER_PREFIX + '/file_view_item/listPage';
      param = {
        viewAreaCode: this.viewAreaCode,
        size: this.categoryPageSize,
      };
      this.$http({
        url: url,
        method: 'post',
        data: param,
        success: res => {
          let page = res.objx;
          let rows = page && page.records ? page.records : [];

          // moreBtn
          rows.forEach(value => {
            value.leaf = true;
            value.hasChild = false;
          });

          if (node.level === 0) {
            setTimeout(() => {
              if (node.childNodes.length) {
                this.$refs.tree.setCurrentKey(node.childNodes[0].data)
                this.handleNodeData(node.childNodes[0]);
                this.searchEvent();
              }
            }, 200);
            this.$nextTick(() => {
              callback && callback();
            })

          } else {
            this.$nextTick(() => {
              callback && callback();
            })
          }
          resolve(rows);
        }
      });
    },
    handleNodeData(node) {
      let treeNodeArr = [];
      let tree = this.$refs.tree;
      if (node) {
        treeNodeArr.push(node);
        let end = false;
        let pNode = node;
        while (!end) {
          pNode = pNode.parent;
          if (pNode && pNode.data) {
            let pData = pNode.data;
            treeNodeArr.push(pNode);
            end = pNode.level <= 1;
          } else {
            end = true;
          }
        }
        treeNodeArr = treeNodeArr.reverse();
      }
      this.currentFileCategory = node ? node.data : null;
      this.currentNode = node;
      this.$set(this, 'treeNodeArr', treeNodeArr);
    },
    mulDownload() {
      let checkRows = this.getCheckRows();
      if (!checkRows.length) {
        this.$message({
          message: this.$t1('请选择需要下载的文件'),
          type: 'error',
          showClose: true,
          duration: 3000,
        });
        return;
      }
      checkRows.forEach(row => {
        this.$commonFileUtil.downloadFile(row.domain + row.url, row.name);
      })
    },
    mulDownload2() {
      let checkRows = this.getCheckRows();
      if (!checkRows.length) {
        this.$message({
          message: this.$t1('请选择需要下载的文件'),
          type: 'error',
          showClose: true,
          duration: 3000,
        });
        return;
      }

      this.getDownloadDomian(domain => {
        this.getFileWhole(checkRows, (fileWhole) => {
          this.$http({
            method: 'post',
            url: domain + '/docfile/download',
            data: fileWhole,
            isLoading: true,
            success: res => {
              window.open(res.objx.url);
            }
          });
        })
      })
    },
    getDownloadDomian(callback) {
      this.$http({
        method: 'post',
        url: USER_PREFIX + '/common/fileDownloadUrl',
        data: {},
        isLoading: true,
        success: res => {
          callback(res.objx)
        }
      });
    },
    getFileWhole(rows, callback) {
      let ids = rows.map(row => row.id);
      this.$http({
        method: 'post',
        url: this.current_prefix + '/file_view_ins/getFileWhole',
        data: ids,
        isLoading: true,
        success: res => {
          callback(res.objx)
        }
      });
    },
    checkChange() {
      let rows = this.getRows();
      let checkRows = this.getCheckRows();
      this.checkAll = rows.length && rows.length == checkRows.length
    },
    changeCheckAll(val) {
      let rows = this.getRows();
      this.checkList = val ? rows.map(row => row.id) : [];
      if (this.showType == 2) {
        this.$refs['table-m1'].setAllCheckboxRow(val);
      }
    },
    tableCheckChange() {
      let checkRows = this.getCheckRows();
      this.checkList = checkRows.map(row => row.id);
      this.checkChange();
    },
    tableCheckAll(val) {
      let checkRows = this.getCheckRows();
      this.checkList = checkRows.map(row => row.id);
      this.checkChange();
    },
    initTitle() {
      this.$http({
        method: 'post',
        url: USER_PREFIX + '/file_view_area/getByCode',
        data: {
          stringOne: this.viewAreaCode,
        },
        isLoading: true,
        success: res => {
          let fileStoreArea = res.objx;
          if (fileStoreArea) {
            this.title = fileStoreArea.viewAreaName;
            this.$nextTick(() => {
              treeScollx({target: this, type: 'default'});
              this.treeFlag = true;
            });
          } else {
            this.$baseAlert(this.$t1('凭证查询区未维护'));
          }
        }
      });
    },
    formatFileSize(fileSize) {
      fileSize = fileSize || 0;
      if (fileSize < 1024) {
        return fileSize + 'B';
      } else if (fileSize < (1024 * 1024)) {
        var temp = fileSize / 1024;
        temp = temp.toFixed(2);
        return temp + 'KB';
      } else if (fileSize < (1024 * 1024 * 1024)) {
        var temp = fileSize / (1024 * 1024);
        temp = temp.toFixed(2);
        return temp + 'MB';
      } else {
        var temp = fileSize / (1024 * 1024 * 1024);
        temp = temp.toFixed(2);
        return temp + 'GB';
      }
    },
    reflushTree() {
      this.treeFlag = false;
      setTimeout(() => {
        this.treeFlag = true;
      }, 200)
    },
    openWfDialog(row) {
      let url = row.billUrl + '.vue';
      let id = row.billId;
      this.wfDataId = !id || typeof id == 'object' ? 0 : id;
      this.showWfDialog = true;
      this.showWfContent = true;
      this.wfContent = require('@/views' + url).default;
    },
  }
};
</script>
<style lang="scss" scoped>
#labBtn {
  height: calc(100vh - 35px);
}

#containt {
  overflow: hidden;

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

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


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

.grid-height.viewBox {
  height: calc(100vh - 84px);

  .containter1 {
    .annex-piclist > .clearfix {
      height: calc(100vh - 159px);
    }
  }

  .annex-grid-height {
    height: calc(100vh - 126px);
  }
}

.annex-screen + .line + .annex-crumbs + .grid-height.viewBox {
  height: calc(100vh - 133px);

  .containter1 {
    .annex-piclist > .clearfix {
      height: calc(100vh - 208px);
    }
  }

  .annex-grid-height {
    height: calc(100vh - 175px);
  }
}

.annex-filter + .annex-crumbs + .grid-height.viewBox {
  height: calc(100vh - 133px);

  .containter1 {
    .annex-piclist > .clearfix {
      height: calc(100vh - 208px);
    }
  }

  .annex-grid-height {
    height: calc(100vh - 175px);
  }
}

.annex-filter + .annex-screen + .line + .annex-crumbs + .grid-height.viewBox {
  height: calc(100vh - 181px);

  .containter1 {
    .annex-piclist > .clearfix {
      height: calc(100vh - 256px);
    }
  }

  .annex-grid-height {
    height: calc(100vh - 223px);
  }
}
</style>
