<template>
  <div class="attachment-list">
    <div class="list-header">
      <div class="title">{{ t(`attachmentManage.all`) }}</div>
      <div class="desc">{{ t(`attachmentManage.allLoad`, {
        value: filesList ? filesList.length : 0
      }) }}</div>
    </div>
    <div class="list-content">
      <el-table
        ref="multipleTable"
        tooltip-effect="dark"
        :data="filesList"
        @selection-change="selectionChange"
        v-if="switchView"
      >
        <el-table-column type="selection" width="55" value="1"></el-table-column>
        <el-table-column :label="t(`attachmentManage.fileName`)">
          <template slot-scope="scope">
            <img :src="getFileInfo(scope.row.file_name).icon" v-if="getFileInfo(scope.row.file_name).icon">
            <i class="el-icon-tickets" v-else></i>
            <span :title="scope.row.file_name">{{getFileInfo(scope.row.file_name).name}}</span>
          </template>
        </el-table-column>
        <el-table-column :label="t(`attachmentManage.selectType`)" prop="bus_type" show-overflow-tooltip>
          <template slot-scope="scope">
            {{typeData && typeData.length>0 && typeData.filter(v=>v.value==scope.row.bus_type)[0] && typeData.filter(v=>v.value==scope.row.bus_type)[0].label}}
          </template>
        </el-table-column>
        <el-table-column :label="t(`attachmentManage.uploadTime`)" prop="upload_tm" show-overflow-tooltip></el-table-column>
        <el-table-column :label="t(`attachmentManage.uploader`)" prop="op_na" show-overflow-tooltip></el-table-column>
        <el-table-column v-if="data.showFileSize" :label="t(`attachmentManage.uploadSize`, {
          value: data.unitCut || 'kb'
        })" prop="file_size" show-overflow-tooltip></el-table-column>
        <el-table-column :label="t(`attachmentManage.remark`)" prop="remark" show-overflow-tooltip></el-table-column>
        <el-table-column 
          :label="t(`attachmentManage.status`)"
          prop="active_st"
          width="80px"
          v-if="data.invalid"
        >
          <template slot-scope="{ row, column }">
            <span>{{invalidData.find(v => v.value === row[column.property]) && invalidData.find(v => v.value === row[column.property]).label || row[column.property]}}</span>
          </template>
        </el-table-column>
        <el-table-column width="160px" :label="t(`attachmentManage.operate`)" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button
              type="text"
              v-for="(btn, btnIndex) in getOperate(scope.row)"
              :key="btnIndex"
              :icon="btn.icon"
              :title="btn.title"
              :disabled="btnDisabled(scope.row, btn)"
              @click.stop="btnClick(scope.row, btn)"
              v-if="btnShow(scope.row, btn)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="list-view" v-else>
        <div class="checkbox-all">
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkValue" @change="checkboxAll">{{ t(`attachmentManage.checkboxAll`) }}</el-checkbox>
        </div>
        <ul>
          <li
            v-loading="item.thumbnailLoading"
            v-for="(item, itemIndex) in filesList"
            :key="itemIndex"
            :title="item.remark"
            @dblclick="downloadFile(item)"
          >
            <input
              type="checkbox"
              name="checkbox"
              :id="item.id"
              :value="item.id"
              @click="checkbox(item.id, $event)"
            >
            <img style="cursor: pointer;margin: 14px 0;" @click="seeBig(item)" width="88" height="100" :src="item.thumbnail" v-if="item.thumbnail">
            <i class="el-icon-tickets" v-else></i>
            <span :title="item.name_">{{item.name_}}</span>
          </li>
        </ul>
      </div>
    </div>

    <!-- 修改 -->
    <el-dialog
      class="attachment-manage-dialog"
      :title="t(`attachmentManage.editFileInfo`)"
      width="400px"
      :visible.sync="updateVisible"
      :close-on-click-modal="false"
      @close="updateClose"
      append-to-body
    >
      <table>
        <tr height="50" v-if="data.selectType===undefined?true:data.selectType">
          <td>{{ t(`attachmentManage.selectType`) }}</td>
          <td>
            <el-select v-model="updateInfo.bus_type">
                <el-option
                  v-for="(opt, optIndex) in typeData"
                  :key="optIndex"
                  :label="opt.label"
                  :value="opt.value"
                  :disabled="opt.disabled == true"
                ></el-option>
            </el-select>
          </td>
        </tr>
        <tr>
          <td>{{ t(`attachmentManage.fileName`) }}</td>
          <td>
            <el-input v-model="updateInfo.file_name" :placeholder="t(`attachmentManage.message.fileName`)"></el-input>
          </td>
        </tr>
        <tr>
          <td>{{ t(`attachmentManage.remark`) }}</td>
          <td>
            <el-input v-model="updateInfo.remark" :placeholder="t(`attachmentManage.message.remark`)"></el-input>
          </td>
        </tr>
        <tr v-if="data.appendix">
          <td>{{ t(`attachmentManage.appendix`) }}</td>
          <td>
            <el-select v-model="updateInfo.attatch_tag">
                <el-option
                  v-for="(opt, optIndex) in tagData"
                  :key="optIndex"
                  :label="opt.label"
                  :value="opt.value"
                ></el-option>
            </el-select>
          </td>
        </tr>
      </table>
      <template slot="footer">
        <el-button @click="updateClose">{{ t(`toolbar.cancel`) }}</el-button>
        <el-button type="primary" @click="updateSubmit">{{ t(`toolbar.confirm`) }}</el-button>
      </template>
    </el-dialog>
    <!-- 查看大图 -->
    <el-dialog append-to-body custom-class="imgPreview_xy" :fullscreen="true" :visible.sync="imgVisible">
        <img style="max-height: 100%;max-width: 100%;margin-left: 0px;margin-top: 0px;" :src="rowImgUrl"/>
    </el-dialog>
	
	 <viewer class="file-viewer" :images="images" @inited="inited" ref="viewer" width="100%" style="display: none;">
		<img
			v-for="(src,index) in images"
			:src="src"
			:key="index"
			width="100%"
		/>
	</viewer>
  </div>
</template>

<script>
import Locale from 'element-ui-qz/src/mixins/locale';
import ElTable from 'element-ui-qz/packages/table';
import ElTableColumn from 'element-ui-qz/packages/table-column';
import ElButton from 'element-ui-qz/packages/button';
import ElInput from 'element-ui-qz/packages/input';
import ElDialog from 'element-ui-qz/packages/dialog';
import ElCheckbox from 'element-ui-qz/packages/checkbox';

export default {
  mixins: [Locale],
  components: {
    ElTable,
    ElTableColumn,
    ElButton,
    ElInput,
    ElDialog,
    ElCheckbox
  },
  props: {
    switchView: Boolean,
    search: String,
    interfaceUrl: String,
    data: Object,
    typeData: Array,
    tagData: Array,
    deleteFile: { type: Function, default: () => {} }
  },
  watch: {
    'data.prn'() {
      this.getTableData();
    },
    search(value) {
      let data = this.filesListSearch;
      this.filesList = data && data.filter(v => v.file_name.search(value) !== -1) || [];
    },
    switchView(value) {
      this.checkValue = false;
      this.isIndeterminate = false;
      // this.$refs.multipleTable && this.$refs.multipleTable.clearSelection();
      if(!value){
        // 缩略图模式
        this.listSetImg();
      }
      this.$nextTick(function() {
        this.checkedData.forEach(v => {
          const row = this.filesList.find(item => item.id === v.id) || {};
          if (this.$refs.multipleTable) {
            this.$refs.multipleTable.toggleRowSelection(row, true);
          } else {
            this.checkbox(row.id);
          }
        });
      });
    },
    filesList(value) {
      if (value.length === 0) {
        this.checkValue = false;
        this.isIndeterminate = false;
        this.checkedData = [];
      }
      !this.switchView && this.listSetImg();
    }
  },
  data() {
    return {
      filesList: [],
      filesListSearch: [],
      updateVisible: false,
      updateInfo: {},
      checkValue: false,
      checkedData: [],
      isIndeterminate: false,
      invalidData: [
        { label: '激活', value: 'JH' },
        { label: '作废', value: 'ZF' }
      ].map(v => ({
        ...v,
        label: this.t(`attachmentManage.invalid.${v.value}`)
      })),
      imgVisible:false,
      rowImgUrl:'',
	  images:[]
    };
  },
  methods: {
    getOperate(row) {
      let data = [
        {
          icon: 'el-icon-edit-outline',
          title: '修改',
          type: 'edit'
        },
        {
          icon: 'el-icon-download',
          title: '下载',
          type: 'download'
        },
        {
          icon: 'el-icon-delete',
          title: '删除',
          type: 'delete'
        },
        {
          icon: 'el-icon-view',
          title: '预览',
          type: 'preview'
        },
        {
          icon: 'el-icon-setting',
          // title: `${row.active_st === 'ZF' ? '激活' : '作废'}`,
          title: '设置状态',
          type: 'invalid'
        }
      ].map(v => ({
        ...v,
        title: this.t(`attachmentManage.toolbar.${v.type}`)
      }));
      return data || [];
    },
    btnDisabled(row, btn) {
      let result = this.data.allButtonDisabled;
      if (this.data.disabled) {
        let value = this.data[btn.type];
        if (this.data.disabled.includes(btn.type) && value !== undefined) {
          result = !value;
        }
      };
      // 作废
      if (this.data.invalid) {
        if (['download', 'preview'].includes(btn.type)) {
          if (row.active_st === 'ZF') {
            result = this.data.allButtonDisabled;
          }
        }
      }
      return result;
    },
    btnShow(row, btn) {
      let result = true;
      if (this.data[btn.type] !== undefined) {
        result = this.data[btn.type];
      }
      // 作废
      if (this.data.invalid) {
        if (['download', 'preview'].includes(btn.type)) {
          if (row.active_st === 'ZF') {
            result = true;
          }
        }
      }
      // 预览
      if (btn.type === 'preview'){
        try {
          const type = row.file_name.substr(row.file_name.lastIndexOf('.'))
          const limit = [
            ".zip",
            ".ico",
            ".java",
            ".sql",
            ".xml",
            ".py",
            ".php",
            ".vue",
            ".sh",
            ".cmd",
            ".py3",
            ".css",
            ".json",
            ".rar",
            ".exe",
            ".bat"
          ]
          result = !limit.includes(type)
        } catch (error) {}
      }
      if (btn.type === 'delete') {
        if (!result) return result // 总的删除按钮为false 就直接返回false
        result = this.data.deleteIcon;
      }
      return result;
    },
    btnClick(row, btn) {
      if (this.data.logic_code && !row[btn.type]) {
        this.$message.warning(this.t(`attachmentManage.message.noAuth`));
        return;
      }
      switch (btn.type) {
        case 'edit':
          this.updateShow(row);
          break;
        case 'download':
          this.downloadFile(row);
          break;
        case 'delete':
          this.deleteFile(row.id);
          break;
        case 'preview':
          this.previewFile(row);
          break;
        case 'invalid':
          this.invalidFile(row);
          break;
      }
    },
    invalidFile(row) {
      const title = row.active_st === 'ZF' ? this.t(`attachmentManage.message.isJH`) : this.t(`attachmentManage.message.isZF`)
      this.$confirm(title, this.t(`confirm.title`), {
        confirmButtonText: this.t(`toolbar.confirm`),
        cancelButtonText: this.t(`toolbar.cancel`),
        type: 'warning'
      }).then(() => {
        this.$http.post(`${this.interfaceUrl}updateStatus`, {
          ids: row.id,
          status: row.active_st === 'ZF' ? 'JH' : 'ZF'
        }, {
          emulateJSON: true,
          headers: {
            JID: this.data.JID
          }
        }).then((res) => {
          if (res.body.status) {
            this.$message.success(this.t(`message.optSuccess`));
            this.getTableData();
            this.$parent && this.$parent.$emit('invalidEvent');
          } else {
            this.$message.error(res.body.error);
          }
        }, (error) => {
          console.log(error);
        });
      }).catch(() => {});
    },
    // previewFile(row) {
    //         // 切换到zs调用原本接
    //     let interfaceUrl='previewFile';

    //   if(this.$store.state.basic_global_sql.get('filePreviewFrom')){
    //      interfaceUrl='onlinePreview'
    //   }

    //   this.$http.get(`${this.interfaceUrl}${interfaceUrl}`, {
    //     params: {
    //       filePrn: row.file_prn,
    //       JID: this.data.JID,
    //       waterMark: this.data.watermark || ''
    //     }
    previewFile: function previewFile(row) {

      let interfaceUrl = 'previewFile';

      // 文件预览取消online接口（任务54875）
      /* if (this.$store.state.basic_global_sql.get('filePreviewFrom')) {
        interfaceUrl = 'onlinePreview';
        interfaceUrl = 'onlinePreview';
        let url = this.interfaceUrl;
        let result = url.includes('/ks-prj/pic');
        if (result) {
          this.interfaceUrl = url.replace(/ks-prj\/pic/, 'ks-prj');
        }
      } */

      //   var _this3 = this;

      this.$http.get(this.interfaceUrl + interfaceUrl, {
        params: {
          filePrn: row.file_prn,
          JID: this.data.JID,
          waterMark: this.data.watermark || ''
        }
      }).then(async (res) => {
        if (res.status === 200) {
          // debugger
          console.log('this.resres', res.url);
        //   window.open(res.url, '_blank');
        }
        if (res.body.obj) {
          // window.open(`${window.location.origin}${res.body.obj}`, '_blank');
          // window.open(res.body.obj, '_blank');
          let pdfUrl = res.body.obj;
          const preview = this.filePreview ? await this.filePreview(pdfUrl, {
            uploadCompressPic: this.data.uploadCompressPic
          }) : false
          if (preview) {
            pdfUrl = preview.resource_ngx_uri
			let type2 = pdfUrl && row.file_name && row.file_name.split('.').pop();
			let imgArry= ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff']
			 if(imgArry.includes(type2)){
				  this.images=[pdfUrl]
				  this.$viewer.show()	  
          document.getElementsByClassName('viewer-prev')[0].style="display:none"
          document.getElementsByClassName('viewer-next')[0].style="display:none"
          this.$parent && this.$parent.$emit('previewEvent');
				  return
			 }
          } else {
            let type = pdfUrl && row.file_name && row.file_name.split('.').pop();
            if (type === 'pdf' && window.pdfviewer) {
              const baseUrl = `${window.pdfviewer}/web/viewer.html`;
              // pdfUrl = `${baseUrl}?file=${window.configs.api.url}:${window.configs.api.port}${window.configs.fileProxy}${row.file_uri}&download=${this.data.download}`;
              const newUrl = this.data.watermark ? pdfUrl : `${window.configs.api.url}:${window.configs.api.port}${window.configs.fileProxy}${row.file_uri}`;
              pdfUrl = `${baseUrl}?file=${newUrl}&download=${this.data.download}`;
            }
			
			let imgArry= ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff']
			 if(imgArry.includes(type)){
				  this.images=[pdfUrl]
				  this.$viewer.show()	  
         document.getElementsByClassName('viewer-prev')[0].style="display:none"
          document.getElementsByClassName('viewer-next')[0].style="display:none"
          this.$parent && this.$parent.$emit('previewEvent');
				  return
			 }
          }
		   // this.$viewer.show()
          window.open(this.syncUrl ? this.syncUrl(pdfUrl) : pdfUrl, '_blank');
          this.$parent && this.$parent.$emit('previewEvent');
        }
      }, (error) => {
        console.log(error);
      });
    },
	inited (viewer) {
		this.$viewer = viewer
	},
    getTableData() {
      const { prn, JID } = this.data || {};
      if (!this.interfaceUrl || !prn || !JID) {
        this.filesList = [];
        this.filesListSearch = [];
        return;
      };
      // 文件单位转小写
      let params = JSON.parse(JSON.stringify(this.data));
      params.unitCut = params.unitCut && params.unitCut.toLowerCase() || 'kb';
      this.$http.get(`${this.interfaceUrl}getListByPrn`, {
        params: {
            JID: params.JID,
            prn: params.prn,
            tag: params.tag,
            returnAllData: params.returnAllData || null,
            hdv_pic: params.hdv_pic || null,
            m_code: params.m_code || null,
            showType: params.showType || null,
            isShowFirst: params.isShowFirst || null,
            unitCut: params.unitCut || null,
        }
      }).then((res) => {
        this.filesList = res.body.list || [];
        this.filesListSearch = res.body.list || [];
        if (this.data.logic_code && this.filesList.length > 0) {
          let ids = this.filesList.map((v)=>{
            return v.id;
          });
          this.getBtnDis(ids);
        }
      }, (error) => {
        console.log(error);
      });
    },
    getBtnDis(ids) {
      this.$http.post('/ks-prj/logicOpt/doOpt', {
        sourceDataJsonStr: JSON.stringify({lgObj: {file_ids: ids}}),
        logic_code: this.data.logic_code
      }, {
        emulateJSON: true,
        headers: {
          JID: this.data.JID
        }
      }).then((res) => {
        if (!res.data.status) {
          this.$message.error(res.data.error);
          return;
        }
        let resList = res.data.obj.data;
        this.filesList.forEach(v => {
          resList.forEach(vv => {
            for (var key in vv) {
              if (v.id == key) {
                v = Object.assign(v, vv[key]);
              }
            }
          });
        });
      }, (error) => {
        console.log(error);
      });
    },
    seeBig(item){
      const cansee = !this.btnDisabled(item, {type:'preview'})//图片预览权限
      if(item.thumbnail_ && cansee){
        this.imgVisible = true;
        this.rowImgUrl = item.thumbnail_;
      }
    },
    listSetImg(){
      this.filesList.forEach(item=>{
        let arr = item.file_name.split('.');
        let format = arr[arr.length - 1];
        let index = item.file_name.indexOf(format);
        if(item.name_ == undefined){
          item.name_ = item.file_name.substring(0, index - 1);
        }
        if(['png','jpg'].includes(format) && item.thumbnail == undefined){
          this.getThumbnail(item,format);
        }
        switch (format) {
          case 'doc':
          case 'docx':
            item.thumbnail = require('../images/doc-file-icon.png');
            break;
          case 'pdf':
            item.thumbnail = require('../images/pdf-file-icon.png');
            break;
          case 'xls':
          case 'xlsx':
          case 'xlsm':
            item.thumbnail = require('../images/xsl-file-icon.png');
            break;
        }
      })
    },
    getThumbnail(item,format){
        const cansee = !this.btnDisabled(item, {type:'preview'});//图片预览权限
        if(!cansee){
          item.thumbnail = format == 'png' ? require('../images/png-file-icon.png') : require('../images/jpg_file_icon.png');
          this.$forceUpdate();
          return
        }
        item.thumbnailLoading = true;
        this.$http.get('/ks-prj/pic/previewFile', {
          params: {
            filePrn: item.file_prn,
            unZio: true,
            JID:this.data.JID
          }
        }).then((res) => {
          item.thumbnailLoading = false;
          item.thumbnail_ = !res.body.status ? '' : res.body.obj.indexOf('/gizp') > -1 ? res.body.obj.replace('/gizp', '') : res.body.obj // 赋值原图
          item.thumbnail = !res.body.status ? '' : res.body.obj;//图片缩略图地址
          this.$forceUpdate();
        });
    },
    getFileInfo(fileName) {
      let arr = fileName.split('.');
      let format = arr[arr.length - 1];
      let index = fileName.indexOf(format);
      let name = fileName.substring(0, index - 1);
      let pic = null;
      let icon = null;
      switch (format) {
        case 'png':
          icon = require('../images/png-icon-small.png');
          break;
        case 'jpg':
          icon = require('../images/jpg_icon_small.png');
          break;
        case 'doc':
        case 'docx':
          pic = require('../images/doc-file-icon.png');
          icon = require('../images/doc-icon.png');
          break;
        case 'pdf':
          pic = require('../images/pdf-file-icon.png');
          icon = require('../images/pdf-icon.png');
          break;
        case 'xls':
        case 'xlsx':
        case 'xlsm':
          pic = require('../images/xsl-file-icon.png');
          icon = require('../images/xsl-icon.png');
          break;
      }
      return { name, pic, icon};
    },
    selectionChange(selection) {
      this.checkedData = selection;
      let arr = selection.map(v => {
        return v.id;
        // return v.file_prn
      });
      this.$emit('headCallBack', selection);
    },
    checkbox(id, event) {
      let el = document.getElementById(id);
      if (!el) {
        return;
      }
      let parent = el.parentNode;
      /* if (el.checked) {
        parent.setAttribute('class', 'selected');
      } else {
        parent.setAttribute('class', '');
      } */
      el.checked = event ? event.target.checked : true;
      parent.setAttribute('class', el.checked ? 'selected' : '');
      //
      const row = this.filesList.find(v => v.id == id);
      const rowIndex = this.checkedData.findIndex(v => v.id == id);
      if (el.checked) {
        rowIndex === -1 && this.checkedData.push(row);
      } else {
        this.checkedData.splice(rowIndex, 1);
      }
      this.isIndeterminate = this.checkedData.length > 0 && this.checkedData.length < this.filesList.length;
      this.checkValue = this.checkedData.length === this.filesList.length;
    },
    checkboxAll(val) {
      let checkbox = document.getElementsByName('checkbox');
      /* if (this.checkValue) {
        for (let key in checkbox) {
          checkbox[key].checked = 'checked';
          checkbox[key].parentNode.setAttribute('class', 'selected');
        }
      } else {
        for (let key in checkbox) {
          checkbox[key].checked = '';
          checkbox[key].parentNode.setAttribute('class', '');
        }
      } */
      for (let key in checkbox) {
        if (typeof checkbox[key] === 'object') {
          checkbox[key].checked = val ? 'checked' : '';
          checkbox[key].parentNode.setAttribute('class', val ? 'selected' : '');
        }
      }
      this.checkedData = val ? JSON.parse(JSON.stringify(this.filesList)) : [];
    },
    downloadFile(row) {
      if (this.data.logic_code && !row.download) {
        this.$message.warning(this.t(`attachmentManage.message.noAuthDownload`));
        return;
      }
      const { file_prn, file_name } = row;
      // const url = `${this.interfaceUrl}downloadFile?filePrn=${file_prn}&fileName=${file_name}&JID=${this.data.JID}`;
      const convertObj = (data) => {
        let _result = [];
        for (let key in data) {
          // let value = data[key] || {};
          let value = typeof data[key] === 'string' ? data[key] : data[key] || {};
          if (value.constructor === Array) {
            value.forEach(function(_value) {
              _result.push(key + '=' + _value);
            });
          } else {
            _result.push(key + '=' + value);
          }
        }
        return _result.join('&');
      };
      let { JID, isUploadLocal, watermark } = this.data;
      let obj = {
        filePrn: file_prn,
        // fileName: file_name,
        JID,
        waterMark: watermark || ''
      };
      if (isUploadLocal !== undefined) {
        obj.isUploadLocal = isUploadLocal;
      }
      const url = `${this.interfaceUrl}downloadFile?${convertObj(obj)}`;
      console.log('download', row, url);
      //
      if (this.downloadUrl) {
        this.downloadUrl(url, file_name);
      } else {
        let eleLink = document.createElement('a');
        eleLink.download = file_name;
        eleLink.style.display = 'none';
        eleLink.href = url;
        document.body.appendChild(eleLink);
        eleLink.click();
      };
      this.$parent && this.$parent.$emit('downloadEvent');
    },
    updateShow(row) {
      this.updateInfo = JSON.parse(JSON.stringify(row));
      this.updateVisible = true;
    },
    updateClose() {
      this.updateVisible = false;
      this.updateInfo = {};
    },
    updateSubmit() {
      const { id, bus_type, file_name, file_prn, file_size, file_uri, remark, source, upload_tm, up_ver, attatch_tag } = this.updateInfo || {};
      let params = {
        id,
        bus_type,
        file_name,
        file_prn,
        file_size,
        file_uri,
        remark,
        source,
        upload_tm,
        up_ver,
        attatch_tag,
        busin_co: '',
        encr_lev: ''
      };
      this.$http.post(`${this.interfaceUrl}update`, Object.assign(params, this.data), {
        emulateJSON: true,
        headers: {
          JID: this.data.JID
        }
      }).then((res) => {
        this.$message.success(this.t(`message.editSuccess`));
        this.updateVisible = false;
        this.getTableData();
      }, (error) => {
        console.log(error);
      });
    }
  },
  created() {
    this.getTableData();
  }
};
</script>
<style lang="scss" scoped>
   .file-viewer{
    .viewer-toolbar{
      .viewer-prev{
        display: none;
      }
      .viewer-next{
        display: none;
      }
    }
   }
</style>