<template>
  <div id="znfx">
    <div v-show="wjfx_qh">
      <div class="top-div">
        <el-input v-model="wd_name" suffix-icon="el-icon-search" placeholder="请输入关键字"></el-input>
        <div class="block sjxz">
          <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="sc_time" type="daterange" range-separator="至"
            start-placeholder="上传起始时间" end-placeholder="上传结束时间" :default-time="['00:00:00', '23:59:59']">
          </el-date-picker>
        </div>
        <div class="toggle-switch">
          <el-switch style="display: block" v-model="toggle_value" active-color="#09e8e4" inactive-color="#409eff"
            active-text="全文检索" inactive-text="列表检索">
          </el-switch>
        </div>
        <div class="button-discuss" @click="searchs">搜索</div>
        <!-- <el-tooltip
          class="item"
          effect="light"
          content="文件分析"
          placement="top-start"
        >
          <el-button
            type="info"
            icon="el-icon-data-line"
            size="small"
            style="margin-left: 50px; pointer-events: none"
            circle
          ></el-button>
        </el-tooltip>
        <el-tooltip
          class="item"
          effect="light"
          content="智能检索分析"
          placement="top-start"
        >
          <el-button
            type="primary"
            icon="el-icon-data-board"
            size="small"
            @click="znjsfx_cli()"
            circle
          ></el-button>
        </el-tooltip> -->
        <!-- <div class="button-discuss1" @click="handleAdd()">新增</div> -->
      </div>
      <div class="bottom-div">
        <transition name="el-zoom-in-top" v-on:after-leave="afterLeave_lb">
          <div v-if="toggle_value_lb" class="transition-box">
            <!-- <div class="table-div">
              <el-table
                :data="tableData"
                height="calc(100% - 0px)"
                border
                style="width: 100%"
              >
                <el-table-column type="index" label="序号" width="80">
                </el-table-column>
                <el-table-column prop="name" label="文档名称" width="250">
                </el-table-column>
                <el-table-column prop="description" label="简要描述">
                </el-table-column>
                <el-table-column prop="keyword" label="关键词">
                </el-table-column>
                <el-table-column
                  prop="createTime"
                  label="上传时间"
                  width="220"
                >
                </el-table-column>
                <el-table-column
                  prop="file.type"
                  label="文档类型"
                  width="110"
                >
                </el-table-column>
                <el-table-column
                  prop="cz"
                  label="操作"
                  width="150"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    <i
                      class="el-icon-view"
                      @click="handleView(scope.$index, scope.row)"
                      title="预览"
                    ></i
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div> -->
            <div class="card-div">
              <template v-for="(item, index) in tableData">
                <div class="cards-div animate__animated bk-xxzp-animation" :class="[
                  index % 4 == 0
                    ? 'animate__lightSpeedInLeft'
                    : index % 4 == 1
                      ? 'animate__zoomIn'
                      : index % 4 == 2
                        ? 'animate__zoomIn'
                        : 'animate__lightSpeedInRight',
                ]">
                  <div :class="[
                    'tilts',
                    tab_actives == index ? 'table-active' : '',
                  ]" @click="handleView(index, item)">
                    <div class="img-div">
                      <!-- <img class="tx-bg" :src="item.photos" :onerror="errimg" /> -->
                      <!-- <div class="tx-bg animate__animated animate__infinite animate__pulse">
                        <span>
                          {{ item.file.type.toUpperCase() }}
                        </span>
                      </div> -->
                      <div class="tx-bg" style="display: flex;justify-content: center;"
                        :class="[item.imgUrl == undefined ? 'animate__animated animate__infinite animate__pulse' : '']">
                        <span v-if="item.imgUrl == undefined">
                          {{ item.file.type.toUpperCase() }}
                        </span>
                        <div style="width: 60px;height: 60px;" v-else>
                          <img :src="item.imgUrl == null ? '' : item.imgUrl" :onerror="errimg"
                            style="background-size: 100% 100%;width: 100%;height: 100%;border-radius: 0px 10px" />

                        </div>
                      </div>
                    </div>
                    <div class="text-div">
                      <div class="name-div">
                        <div class="top-span">
                          {{ item.name }}
                        </div>
                      </div>
                      <div class="bottom-span">
                        {{ item.createTime }}
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </div>

            <div class="page-div">
              <el-pagination class="myPagination" background layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange" :page-size="pageSize" :current-page="current_page" :total="total"
                @current-change="handleCurrentChange_lb" :page-sizes="[12, 20, 30, 40, 50, 60, 70, 80, 90, 100]">
              </el-pagination>
            </div>
          </div>
        </transition>
        <transition name="el-zoom-in-bottom" v-on:after-leave="afterLeave_qw">
          <div v-if="toggle_value_qw" class="transition-box">
            <div class="bottom-content">
              <div class="content-title">
                <span>为您提供<span class="new-num" v-text="totals_qw"></span>条数据</span>
              </div>
              <div class="content-text">
                <div class="content-news" v-for="(item, index) in get_files">
                  <div class="news-title">
                    <div class="first-div">
                      <span>文档名称：<span v-text="item.fileInfo.name" class="span_cl"></span></span>
                    </div>
                    <div class="last-div">
                      <span>文件原名称：<span v-text="item.fileInfo.file.name" class="span_cl"></span></span>
                    </div>
                  </div>
                  <div class="news-content" v-html="item.highLight"></div>
                  <div class="news-info">
                    <span class="news-info-from">类型：<span v-text="item.fileInfo.file.type"></span></span>&emsp;
                    <span class="news-info-channel">上传时间：<span v-text="item.create_time"></span></span>&emsp;
                    <div class="news-info-tool">
                      <i class="el-icon-view views" @click="handleView_qwss(item)" title="预览"></i>
                      <!-- &nbsp;
                      <i
                        class="el-icon-download"
                        @click="handleDownload_qwss(item)"
                        title="下载"
                      ></i> -->
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="page-div">
              <div class="pagination-div">
                <el-pagination class="myPagination" background layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleSizeChange_qw" :page-size="pageSize_qw" :current-page="current_page_qw"
                  :total="totals_qw" @current-change="handleCurrentChange_qw"
                  :page-sizes="[12, 20, 30, 40, 50, 60, 70, 80, 90, 100]">
                </el-pagination>
              </div>
            </div>
          </div>
        </transition>
      </div>
    </div>
    <div v-show="!wjfx_qh">
      <div v-show="tab_jsfx" style="position: relative">
        <el-input style="width: 30%; margin-left: 35%; margin-top: 20%" v-model="gjc_input" placeholder="请输入关键词 回车搜索"
          suffix-icon="el-icon-search" @keyup.enter.native="onSubmit"></el-input>
        <el-tooltip class="item" effect="light" content="文件分析" placement="top-start">
          <el-button type="primary" icon="el-icon-data-line" size="small" style="right: 75px; position: absolute"
            @click="wjfx_cli()" circle></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="light" content="智能检索分析" placement="top-start">
          <el-button type="info" icon="el-icon-data-board" size="small"
            style="right: 35px; position: absolute; pointer-events: none" circle></el-button>
        </el-tooltip>
      </div>
      <div v-show="!tab_jsfx">
        <div class="top-div">
          <el-input v-model="znjsfx_name" suffix-icon="el-icon-search" placeholder="请输入关键字"></el-input>
          <div class="button-discuss" @click="seach_znjsfx(1)">搜索</div>
          <!-- <el-tooltip
            class="item"
            effect="light"
            content="文件分析"
            placement="top-start"
          >
            <el-button
              type="primary"
              icon="el-icon-data-line"
              size="small"
              style="margin-left: 50px"
              @click="wjfx_cli()"
              circle
            ></el-button>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="light"
            content="智能检索分析"
            placement="top-start"
          >
            <el-button
              type="info"
              icon="el-icon-data-board"
              size="small"
              style="pointer-events: none"
              circle
            ></el-button>
          </el-tooltip> -->
        </div>
        <div class="bottom-div">
          <div class="table-div">
            <el-table :data="tableData_znjsfx" height="100%" border style="width: 100%">
              <el-table-column type="index" label="序号" width="80">
              </el-table-column>
              <el-table-column prop="name" label="文档名称" width="250">
              </el-table-column>
              <el-table-column prop="keyword" label="关键词" width="300">
              </el-table-column>
              <el-table-column prop="description" label="简要描述">
              </el-table-column>
              <el-table-column prop="createTime" label="上传时间" width="220">
              </el-table-column>
              <el-table-column prop="file.type" label="文档类型" width="110">
              </el-table-column>
              <el-table-column prop="cz" label="操作" width="150" show-overflow-tooltip>
                <template slot-scope="scope">
                  <i class="el-icon-view" @click="handleView(scope.$index, scope.row)" title="预览"></i>&nbsp;
                  <!-- <i
                    class="el-icon-download"
                    @click="handleDownload(scope.$index, scope.row)"
                    title="下载"
                  ></i
                  >&nbsp; -->
                  <i class="el-icon-edit" @click="handleEdit(scope.$index, scope.row)" title="编辑"></i>&nbsp;
                  <i class="el-icon-delete-solid" @click="handleDelete(scope.$index, scope.row)" title="删除"></i>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="page-div">
            <el-pagination class="myPagination" background layout="prev, pager, next" :total="total_znjsfx"
              :page-size="pageSize" :current-page="current_page_znjsfx" @current-change="seach_znjsfx">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="新增文档" :visible.sync="centerDialogVisible_add" width="30%" center class="xzwd">
      <el-form ref="form" :model="form_add" label-width="80px" style="margin-bottom: 0px">
        <el-form-item label="文档名称">
          <el-input v-model="form_add.name" maxlength="20" show-word-limit placeholder="请输入文档名称"></el-input>
        </el-form-item>
        <!-- <el-form-item label="文档类别">
          <el-select v-model="form_add.region" placeholder="请选择文档类别">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="关键词">
          <el-input v-model="form_add.gjc" show-word-limit placeholder="请输入关键词，多个关键词使用英文逗号,隔开"></el-input>
        </el-form-item>
        <el-form-item label="文档描述">
          <el-input type="textarea" placeholder="请输入文档描述" v-model="form_add.ms" maxlength="100" show-word-limit :rows="4">
          </el-input>
        </el-form-item>
        <el-form-item label="选择文件" style="margin-bottom: 0px">
          <el-upload class="upload-demo" ref="upload" action="uploadUrl" :file-list="form_add.fileList"
            :on-change="handleChange" :show-file-list="true" :auto-upload="false" :multiple="false"
            :on-remove="handleRemove" :accept="format_files">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <div slot="tip" class="el-upload__tip">
              允许上传DOC、PPT、JPG、PNG、MP4等等 ,且不超过500M
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible_add = false">取 消</el-button>
        <el-button type="primary" @click="submitUpload">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="编辑文档" :visible.sync="centerDialogVisible_edit" width="30%" center>
      <el-form ref="form" :model="form_edit" label-width="80px">
        <el-form-item label="文档名称">
          <el-input v-model="form_edit.name" maxlength="20" show-word-limit></el-input>
        </el-form-item>
        <!-- <el-form-item label="文档类别">
          <el-select v-model="form_edit.region" placeholder="请选择文档类别">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="关键词">
          <el-input v-model="form_edit.gjc" show-word-limit placeholder="请输入关键词，多个关键词使用英文逗号,隔开"></el-input>
        </el-form-item>
        <el-form-item label="文档描述">
          <el-input type="textarea" placeholder="请输入文档描述" v-model="form_edit.ms" maxlength="100" show-word-limit
            :rows="4">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible_edit = false">取 消</el-button>
        <el-button type="primary" @click="submit_bj">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :title="title" :visible.sync="centerDialogVisible_video" center width="800px" :destroyOnClose="true">
      <div style="height: 400px; position: relative">
        <!-- <video id="video" class="" preload="meta" controls width="100%" object-fit="fill" height="100%"
          controlslist="nodownload" :src="video_src" disablePictureInPicture autoplay muted></video> -->
        <VideoPlayer v-if="centerDialogVisible_video" :src="video_src"></VideoPlayer>
      </div>
    </el-dialog>

    <el-dialog :title="title_sound" :visible.sync="centerDialogVisible_sound" center width="500px" :destroyOnClose="true">
      <audio controls id="sound_id" :src="sound_src" controlslist="nodownload" class="audio-class"></audio>
    </el-dialog>
    <el-dialog :title="title_img" :visible.sync="centerDialogVisible_img" center width="800px"
        :destroyOnClose="true">
        <div style="text-align: center;" v-loading="loadings">
            <el-image style="width: 750px; height: 500px" :src="img_src" :preview-src-list="[img_src]">
            </el-image>
        </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  lastIndexOf,
  get,
  getBlob,
  post,
  fileUpload,
  delete_util,
  startLoading,
  endLoading,
  download,
  format_file, //上传的文件格式
  arr_video_format, //视频的文件格式
  arr_sound_format, //音频的文件格式
  arr_img_format, //图片的文件格式
} from "../../util/http_util";
import { uuid } from "../../util/data_util";
import VanillaTilt from "vanilla-tilt";
import "animate.css";
import { queryDoc, searchFiles } from '../../api/zfclk/wxgl';
import VideoPlayer from "../../components/common/video_player.vue";
import PSD from 'psd.js';
export default {
  data() {
    return {
      errimg: '',
      centerDialogVisible_add: false,
      centerDialogVisible_edit: false,
      centerDialogVisible_video: false,
      centerDialogVisible_sound: false,
      centerDialogVisible_img: false,
      loadings: false,
      title: "", //视频播放页面的titile
      title_sound: "", //音频播放页面的titile
      title_txt: "",
      video_src: "",
      sound_src: "",
      img_src: "",
      title_img: "",
      sc_time: "", //上传时间参数
      wd_name: "", //文档名称
      wd_classify: "", //文档类别
      tableData: [],
      options: [],
      value: "", //请选择文件大类默认选中值
      uploadUrl: "",
      form_add: {
        name: "",
        region: "",
        fileList: [],
        ms: "",
        gjc: "",
      },
      form_edit: {
        name: "",
        region: "",
        ms: "",
        gjc: "",
      },
      total: 0,
      pageSize: 12,
      current_page: 1,
      tableData_znjsfx: [],
      total_znjsfx: 0,
      current_page_znjsfx: 1,
      paramData: {},
      type_classify: "0001", //全局变量，判断是法律法规的页面
      edit_ids: "", //编辑页面传id
      toggle_value: false, //切换按钮
      toggle_value_lb: true,
      toggle_value_qw: false,
      totals_qw: 0,
      pageSize_qw: 12,
      current_page_qw: 1,
      format_files: "",
      get_files: [],
      type_folder: "DocumentPDF", //文件夹名称
      wjfx_qh: true,
      gjc_input: "",
      tab_jsfx: true,
      znjsfx_name: "",
      clientDetails_type: "4", //默认查询id为21的方案预案
      module_name: "战法策略文档",
      tab_actives: "-1", //表格切换
    };
  },
  components: {
    VideoPlayer
  },
  props: {
    clientDetails: {
      type: Object,
      default: {},
    },
  },
  methods: {
    loadTiff(url) {
        let _this = this;
        var xhr = new XMLHttpRequest();
        xhr.responseType = 'arraybuffer';
        xhr.open('GET', url);
        xhr.onload = function (e) {
            var tiff = new Tiff({buffer: xhr.response});
            _this.loadings = false;
            _this.img_src = tiff.toDataURL();
        };
        xhr.send();
    },
    //列表动画效果结束让全文动画开始
    afterLeave_lb(el) {
      let _this = this;
      _this.toggle_value_qw = true;
    },
    //全文动画效果结束让列表动画开始
    afterLeave_qw(el) {
      let _this = this;
      _this.toggle_value_lb = true;
    },
    //搜索table数据
    searchs(pageNum) {
      let _this = this;
      if (!_this.toggle_value) {
        _this.handleCurrentChange_lb(1);
      } else {
        _this.handleCurrentChange_qw(1);
      }
    },
    handleSizeChange_qw(val) {
      this.pageSize_qw = val;
      this.current_page_qw = 1;
      this.handleCurrentChange_qw(1);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.current_page = 1;
      this.handleCurrentChange_lb(1);
    },
    //列表分页
    handleCurrentChange_lb(pageNum) {
      let _this = this;
      let startTime = "";
      let endTime = "";
      if (_this.sc_time != "" && _this.sc_time != null) {
        startTime = _this.sc_time[0];
        endTime = _this.sc_time[1];
      }
      _this.paramData = {
        beginTime: startTime == "" ? null : startTime,
        endTime: endTime == "" ? null : endTime,
        name: _this.wd_name == "" ? null : _this.wd_name,
        module: _this.clientDetails_type == "4" ? this.module_name : null,
        treeId: _this.clientDetails_type == 4 ? null : _this.clientDetails_type,
      };
      // startLoading();
      _this.tableData = [];
      _this.total = 0;
      queryDoc(pageNum, _this.pageSize, _this.paramData).then((data) => {
        setTimeout(() => {
          if (data.list.length != 0) {
            data.list.forEach(item => {
              //用户判断此格式是否是视频格式
              let video_type = false;
              //用户判断此格式是否是音频格式
              let img_type = false;
              arr_video_format().forEach((name) => {
                if (name.toUpperCase() == item.file.type.toUpperCase()) {
                  video_type = true;
                }
              });
              arr_img_format().forEach((name) => {
                if (name.toUpperCase() == item.file.type.toUpperCase()) {
                  img_type = true;
                }
              });
              // if (video_type) {
              //   item.imgUrl = 'api/rest/file/viewPicture/DocumentPicture?objectName=' + item.file.uuid + '&' + new Date().getTime();
              // }
              if (img_type) {
                if (item.file.type.toUpperCase() == 'BMP' || item.file.type.toUpperCase() == "JPEG" || item.file.type.toUpperCase() == "JPG" || item.file.type.toUpperCase() == "PNG") {
                  item.imgUrl = 'api/rest/file/viewPicture/Document?objectName=' + item.file.uuid + '&' + new Date().getTime();
                }else if(item.file.type.toUpperCase() == 'PSD'){
                  PSD.fromURL(item.imgUrl).then(function (psd) {
                    item.imgUrl  = psd.image.toPng().src;
                  });
                }else if(item.file.type.toUpperCase() == 'TIF'||item.file.type.toUpperCase() == 'TIFF'){
                  var xhr = new XMLHttpRequest();
                  xhr.responseType = 'arraybuffer';
                  xhr.open('GET', item.imgUrl);
                  xhr.onload = function (e) {
                      var tiff = new Tiff({buffer: xhr.response});
                      item.imgUrl = tiff.toDataURL();
                  };
                  xhr.send();
                }
              }
            })
            _this.tableData = data.list;
          }
          _this.total = data.totals;
          _this.current_page = pageNum;
        }, 500);
        // endLoading();
      })
        .catch((err) => {
          this.$message.warning(err.message);
        });
    },
    //列表分页
    handleCurrentChange_qw(pageNum) {
      let _this = this;
      let startTime = "";
      let endTime = "";
      if (_this.sc_time != "" && _this.sc_time != null) {
        startTime = _this.sc_time[0];
        endTime = _this.sc_time[1];
      }
      if (_this.wd_name == "") {
        this.$message({
          type: "warning",
          message: "关键字不能为空!",
        });
        return;
      }
      let paramDatas = {
        content: _this.wd_name == "" ? null : _this.wd_name,
        module: _this.module_name,
        // code: _this.wd_classify == "" ? null : _this.wd_classify,
        // starttime: startTime,
        // endtime: endTime,
        // type: _this.type_classify,
      };
      startLoading();
      _this.get_files = [];
      _this.totals_qw = 0;
      searchFiles(pageNum, _this.pageSize_qw, paramDatas).then((data) => {
        if (data.list.length != 0) {
          data.list.forEach((item, index) => {
            data.list[index].create_time = new Date(
              data.list[index].create_time
            ).Format("yyyy-MM-dd hh:mm:ss");
          });
          _this.get_files = data.list;
          _this.totals_qw = data.totals;
          _this.current_page_qw = pageNum;
        }
        endLoading();
      })
        .catch((err) => {
          endLoading();
          this.$message.warning(err.message);
        });
    },

    //table数据预览
    handleView(index, row) {
      let _this = this;
      //用户判断此格式是否是视频格式
      let video_type = false;
      //用户判断此格式是否是音频格式
      let sound_type = false;
      //用户判断此格式是否是图片
      let img_type = false;
      arr_video_format().forEach((name) => {
        if (name.toUpperCase() == row.file.type.toUpperCase()) {
          video_type = true;
        }
      });
      arr_sound_format().forEach((name) => {
        if (name.toUpperCase() == row.file.type.toUpperCase()) {
          sound_type = true;
        }
      });
      arr_img_format().forEach((name) => {
          if (name.toUpperCase() == row.file.type.toUpperCase()) {
              img_type = true;
          }
      });
      if (video_type) {
        _this.video_src = `api/rest/file/playVideo/Document?objectName=${row.file.uuid}`
        _this.title = "正在播放视频---" + row.name;
        _this.centerDialogVisible_video = true;
        // setTimeout(function () {
        //   // let path_srt = "api/rest/file/download/Document/";
        //   // path_srt = path_srt + row.file.uuid;
        //   // _this.video_src = path_srt;
        //   _this.video_src = `api/rest/file/playVideo/Document?objectName=${row.file.uuid}`
        //   if (document.getElementById("video").currentTime != 0)
        //     document.getElementById("video").currentTime = 0;
        // }, 500);
      } else if (sound_type) {
        _this.title_sound = "正在播放音频---" + row.name;
        _this.centerDialogVisible_sound = true;
        setTimeout(function () {
          let path_srt = "api/rest/file/download/Document/";
          path_srt = path_srt + _this.type_folder + "/" + row.file.uuid;
          _this.sound_src = path_srt;
          if (document.getElementById("sound_id").currentTime != 0)
            document.getElementById("sound_id").currentTime = 0;
        }, 500);
      } else if (img_type) {
        _this.loadings = true;
        _this.title_img = "正在预览图片---" + row.name;
        _this.centerDialogVisible_img = true;
        setTimeout(function () {
            let path_srt = "api/rest/file/download/Document/";
            path_srt = path_srt + row.file.uuid;
            if (row.file.type.toUpperCase() == 'BMP') {
                _this.convertBMPtoPNG(path_srt, function (pngImage) {
                    _this.img_src = pngImage;
                    _this.loadings = false;
                });
            } else if (row.file.type.toUpperCase() == 'PSD') {
                PSD.fromURL(path_srt).then(function (psd) {
                    _this.img_src = psd.image.toPng().src;
                    _this.loadings = false;
                });
            } else if(row.file.type.toUpperCase() == 'TIF'||row.file.type.toUpperCase() == 'TIFF') {
                _this.loadTiff(path_srt);
            }else{
                _this.img_src = path_srt;
                _this.loadings = false;
            }
        }, 500);
      } else {

        get(`api/rest/file/exists?bucket=DocumentPDF&filename=${row.file.uuid}`).then(res => {
          if (res) {
            window.open(`api/rest/file/pdf/DocumentPDF?objectName=${row.file.uuid}`);
          } else {
            return post("api/rest/file/path?bucket=Document&filename=" + row.file.uuid);
          }
        }).then(res => {
          if (res) {
            window.open(`./onlyoffice.html?url=${encodeURIComponent(res)}&fileType=${row.file.type}&filename=${row.name}`);
          }
        }).catch(err => {
          this.$message("预览失败");
        });
      }
    },
    //table_全文搜索预览
    handleView_qwss(item) {
      get(`api/rest/file/exists?bucket=DocumentPDF&filename=${item.fileInfo.file.uuid}`).then(res => {
          if (res) {
            window.open(`api/rest/file/pdf/DocumentPDF?objectName=${item.fileInfo.file.uuid}`);
          } else {
            return post("api/rest/file/path?bucket=Document&filename=" + item.fileInfo.file.uuid);
          }
        }).then(res => {
          if (res) {
            window.open(`./onlyoffice.html?url=${encodeURIComponent(res)}&fileType=${item.fileInfo.file.type}&filename=${item.fileInfo.name}`);
          }
        }).catch(err => {
          this.$message("预览失败");
        });
    },
    //table数据下载
    handleDownload(index, row) {
      let path_srt =
        "api/rest/file/download/Document/DocumentPDF/" + row.file.uuid;
      download(path_srt, row.file.name);
    },
    //table_全文搜索下载
    handleDownload_qwss(item) {
      let path_srt =
        "api/rest/file/download/Document/DocumentPDF/" +
        item.fileInfo.file.uuid;
      download(path_srt, item.fileInfo.file.name);
    },
    //table数据编辑弹出框展示
    handleEdit(index, row) {
      this.form_edit = {
        name: row.name,
        region: row.dict_code,
        ms: row.description,
        gjc: row.keyword,
      };
      this.edit_ids = row.id;
      this.centerDialogVisible_edit = true;
    },
    //table数据删除
    handleDelete(index, row) {
      let _this = this;
      let ids = row.id;
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delete_util(
            "api/rest/document/delDoc/" +
            ids +
            "?folder=" +
            _this.type_folder +
            "&name=" +
            row.file.uuid
          )
            .then((data) => {
              if (data == 1) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              } else {
                this.$message({
                  type: "error",
                  message: "删除失败!",
                });
              }
              _this.handleCurrentChange_lb(1);
            })
            .catch((err) => {
              this.$message(err.message);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      // console.log(index, row);
    },

    //新增弹出框弹出
    handleAdd() {
      let _this = this;
      //设置下拉框默认选择第一条
      // _this.form_add.region = _this.options[0].value;
      this.centerDialogVisible_add = true;
    },

    //编辑弹出框确定
    submit_bj() {
      let _this = this;
      let params = {
        id: _this.edit_ids,
        description: _this.form_edit.ms,
        name: _this.form_edit.name,
        keyword: _this.form_edit.gjc,
        // dict_code: _this.form_edit.region,
      };
      post("api/rest/document/updDoc", params).then((data) => {
        if (data == 1) {
          this.$message({
            type: "success",
            message: "修改成功!",
          });
        } else {
          this.$message({
            type: "error",
            message: "修改失败!",
          });
        }
        _this.handleCurrentChange_lb(1);
        this.centerDialogVisible_edit = false;
      });
    },
    //新增弹出框确定（文件上传）
    submitUpload() {
      //此处是获取选择的下拉框（文件类别）的laber，如：国际法
      if (this.form_add.name == "") {
        this.$message({
          type: "warning",
          message: "文件名称不能为空!",
        });
        return;
      }
      if (this.form_add.fileList.length == 0) {
        this.$message({
          type: "warning",
          message: "未选择文件!",
        });
        return;
      } else {
        let fd = new FormData();
        let file_ext = this.form_add.fileList[0].name.substring(
          lastIndexOf(this.form_add.fileList[0].name, ".") + 1,
          this.form_add.fileList[0].name.length
        );
        let fileInfo = {
          createId: this.$store.getters.userInfo.account,
          description: this.form_add.ms,
          file: {
            name: this.form_add.fileList[0].name,
            size: this.form_add.fileList[0].size,
            type: file_ext,
            uuid: uuid() + "." + file_ext,
          },
          treeId: this.clientDetails_type,
          name: this.form_add.name,
          keyword: this.form_add.gjc.trim(),
        };
        fd.append("info", JSON.stringify(fileInfo));
        fd.append("folder", this.type_folder);
        fd.append("file", this.form_add.fileList[0].raw);
        fileUpload("api/rest/document/upload", fd).then((data) => {
          this.$message({
            type: "success",
            message: "文件上传成功!",
          });
          this.centerDialogVisible_add = false;
          this.handleCurrentChange_lb(1);
        });
      }
    },

    //上传文件中的删除
    handleRemove(index, row) {
      this.form_add.fileList = [];
    },
    //选择文件
    handleChange(file, fileList) {
      if (fileList.length > 0) {
        if (fileList[fileList.length - 1].size > 100 * 1024 * 1024) {
          this.$message({
            type: "warning",
            message: "文件只能小于100M!",
          });
          this.form_add.fileList = [];
          return;
        } else {
          this.form_add.fileList = [fileList[fileList.length - 1]]; // 这一步，是展示最后一次选择的文件
          //选中文件，将文件名绑定到文档名称中
          // this.form_add.name = file.name;
          // if (lastIndexOf(file.name, ".") != -1) {
          //   this.form_add.name = file.name.substring(0, lastIndexOf(file.name, "."));
          // }
        }
      }
    },
    //智能检索分析
    onSubmit() {
      if (this.gjc_input != "") {
        this.tab_jsfx = false;
        this.znjsfx_name = this.gjc_input;
        this.seach_znjsfx(1);
      }
    },
    seach_znjsfx(pageNum) {
      let _this = this;
      if (_this.znjsfx_name == "") {
        this.$message({
          type: "warning",
          message: "关键词不能为空",
        });
        return;
      }
      let paramDatas = {
        keyword: _this.znjsfx_name,
        treeId: _this.clientDetails_type,
      };
      _this.tableData_znjsfx = [];
      _this.total_znjsfx = 0;
      post(
        "api/rest/document/queryDoc?pageNum=" +
        pageNum +
        "&pageSize=" +
        _this.pageSize,
        paramDatas
      ).then((data) => {
        if (data.list.length != 0) {
          _this.tableData_znjsfx = data.list;
        }
        _this.total_znjsfx = data.totals;
        _this.current_page_znjsfx = pageNum;
      });
    },
    znjsfx_cli() {
      this.wd_name = "";
      this.toggle_value = false; //切换按钮
      this.toggle_value_lb = true;
      this.toggle_value_qw = false;
      this.sc_time = "";
      this.gjc_input = "";
      this.tab_jsfx = true;
      this.znjsfx_name = "";
      this.searchs(1);
      this.wjfx_qh = false;
    },
    wjfx_cli() {
      this.wd_name = "";
      this.toggle_value = false; //切换按钮
      this.toggle_value_lb = true;
      this.toggle_value_qw = false;
      this.sc_time = "";
      this.gjc_input = "";
      this.tab_jsfx = true;
      this.znjsfx_name = "";
      this.searchs(1);
      this.wjfx_qh = true;
    },
    convertBMPtoPNG(bmpImage, callback) {
        // 创建一个新的 Image 对象
        const img = new Image();
        img.onload = function () {
            // 创建一个 Canvas 元素
            const canvas = document.createElement('canvas');
            canvas.width = img.width;
            canvas.height = img.height;

            // 获取 CanvasRenderingContext2D 对象
            const ctx = canvas.getContext('2d');

            // 将 BMP 图片绘制到 Canvas 上
            ctx.drawImage(img, 0, 0);

            // 将 Canvas 的内容转换为 PNG 格式的 DataURL
            const pngImage = canvas.toDataURL('image/png');

            // 调用回调函数并传递转换后的 PNG 图片
            callback(pngImage);
        };

        // 设置 BMP 图片源
        img.src = bmpImage;
    }
  },
  mounted() {
    let _this = this;
    _this.format_files = format_file();
    this.searchs(1);
    //默认查询数据
    // _this.searchs(1);
    // _this.options = [];
    // get("api/rest/dictitem/queryDictItem/" + _this.type_classify).then(
    //   (data) => {
    //     if (data.length != 0) {
    //       data.forEach((item) => {
    //         _this.options.push({ value: item.code, label: item.name });
    //       });
    //     }
    //   }
    // );
  },
  watch: {
    //全文检索和列表检索开关监听
    toggle_value: function (s) {
      if (!s) this.toggle_value_qw = s;
      else this.toggle_value_lb = !s;
    },
    //新增弹出框隐藏事件
    centerDialogVisible_add: function (s) {
      if (!s) {
        this.form_add = {
          name: "",
          // region: this.options[0].value,
          ms: "",
          gjc: "",
          region: "",
          fileList: [],
        };
      }
    },
    //视频预览弹出框隐藏事件
    // centerDialogVisible_video: function (s) {
    //   if (!s) {
    //     this.video_src = "";
    //     document.getElementById("video").pause();
    //   }
    // },
    //音频预览弹出框隐藏事件
    centerDialogVisible_sound: function (s) {
      if (!s) {
        this.sound_src = "";
        document.getElementById("sound_id").pause();
      }
    },
    //图片弹框预览
    centerDialogVisible_img: function (s) {
        if (!s) {
            this.img_src = "";
        }
    },
    clientDetails: function (val) {
      this.clientDetails_type = val.type;
      this.wjfx_qh = true;
      this.wd_name = "";
      this.toggle_value = false; //切换按钮
      this.toggle_value_lb = true;
      this.toggle_value_qw = false;
      this.sc_time = "";
      this.gjc_input = "";
      this.tab_jsfx = true;
      this.znjsfx_name = "";
      this.searchs(1);
    },
    tableData(val) {
      this.$nextTick(() => {
        VanillaTilt.init(document.querySelectorAll(".tilts"), {
          max: 20,
          speed: 400,
        });
        // var paragraphs = document.querySelectorAll('.text-div');
        // var paragraphs1 = document.querySelectorAll('.desc');
        // var paragraphs2 = document.querySelectorAll('.bottom-span');
        // setTimeout(function(){
        //   paragraphs.forEach(function(paragraph) {
        //     paragraph.style.height = 'px'; // 设置颜色为蓝色
        //   });
        //   paragraphs1.forEach(function(paragraphs1) {
        //     paragraphs1.style.height = '33px'; // 设置颜色为蓝色
        //   });
        //   paragraphs2.forEach(function(paragraphs2) {
        //     paragraphs2.style.height = '24px'; // 设置颜色为蓝色
        //   });
        // },1500)
      });
    },
  },
};
</script>
<style lang="scss">
#znfx {
  width: calc(100% - 0px);
  height: calc(100% - 0px);
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
  background-size: 100% 100%;
  color: white;

  .el-tabs--card>.el-tabs__header {
    border-bottom: 1px solid #146a80;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__nav {
    border: 1px solid #146a80;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
    border-bottom-color: #3b9cff;
  }

  .el-tabs__item {
    color: #656565;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__item {
    border-left: 1px solid #146a80;
  }

  .el-tabs__item.is-active {
    color: #409eff !important;
  }

  .el-input__count {
    color: #229dbd;
    background: #1d2d4600;
  }

  .el-input__count-inner {
    color: #229dbd;
    background: #1d2d46;
  }

  .top-div {
    width: 100%;
    height: 60px;

    .el-button {
      float: left;
      margin-left: 10px;
      margin-top: 3px;
    }

    .el-input {
      float: left;
      width: 200px;
      margin-right: 30px;

      .el-input__inner {
        background: none;
        color: #ffff;
        border: 1px solid #3a5f94c9 !important;
      }
    }

    .el-select {
      float: left;
    }

    .sjxz {
      width: 350px;
      float: left;

      .el-date-editor {
        background: none;

        span {
          color: white;
        }

        .el-range-input {
          color: white;
          background: none;
        }
      }

      .el-input__inner {
        border: 1px solid #3a5f94c9 !important;
      }
    }

    .button-discuss {
      width: 100px;
      height: 30px;
      line-height: 30px;
      float: left;
      margin-top: 5px;
      font-size: 14px;
      margin-left: 20px;
      text-align: center;
      cursor: pointer;
      background-image: url(../../assets/img/yqjc/40.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    .button-discuss1 {
      width: 100px;
      height: 30px;
      line-height: 30px;
      float: right;
      margin-top: 5px;
      margin-right: 20px;
      font-size: 14px;
      text-align: center;
      cursor: pointer;
      background-image: url(../../assets/img/yqjc/40.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    .toggle-switch {
      float: left;
      margin-top: 10px;
      margin-left: 20px;

      .el-switch__label.is-active {
        color: #409eff !important;
      }

      .el-switch__label {
        display: unset;
        color: #5a5a5a;

        span {
          font-size: 15px;
        }
      }
    }
  }

  .bottom-div {
    width: 100%;
    height: calc(100% - 55px);

    .table-div {
      width: 100%;
      height: calc(100% - 50px);

      .el-table tr {
        background-color: transparent !important;
        color: #ffffffc7;
      }

      .el-table thead tr {
        height: 40px;
        background: url(../../assets/img/setting/tr1.png) no-repeat;
        background-size: 100% 100%;
      }

      .el-table th {
        background-color: transparent;
      }

      tbody tr {
        border-bottom: 1px solid #252631;
      }

      .el-table td {
        border-bottom: 1px solid #252631;
        border-right: unset;
      }

      .el-table--enable-row-hover .el-table__body tr:hover>td {
        background-color: #82848a78;
      }

      .el-table th {
        border: unset;
        // background-color: #263b5d !important;
      }

      .el-table--fit {
        background: none !important;
        border: unset;
      }

      .el-icon-delete-solid {
        color: red;
        cursor: pointer;
        font-size: 18px;
      }

      .el-icon-edit {
        color: #1172d8;
        cursor: pointer;
        font-size: 20px;
      }

      .el-icon-view {
        color: #00ffff;
        font-size: 20px;
        cursor: pointer;
      }

      .el-table--group::after,
      .el-table--border::after,
      .el-table::before {
        background-color: unset;
      }
    }

    .card-div {
      width: 100%;
      height: calc(100% - 50px);
      overflow-y: auto;
      overflow-x: hidden;

      .cards-div {
        width: 23%;
        height: 160px;
        margin: 1%;
        float: left;

        .tilts {
          width: 100%;
          height: 100%;
          background-image: url("../../assets/img/fzjc/new/2.png");
          background-size: 100% 100%;
          cursor: pointer;
          transform: perspective(1000px);
        }

        .tilts:hover {
          transform-style: preserve-3d;
          background-image: url("../../assets/img/fzjc/new/1.png");

          // .span-div {
          //   .span-div-bg {
          //     background-image: url("../../assets/img/dfzy/new/5.png");
          //   }
          // }
          .top-span {
            background: linear-gradient(to bottom, #fffe7f, #54ff88);
            -webkit-background-clip: text;
            color: transparent;
          }
        }

        .table-active {
          background-image: url("../../assets/img/dfzy/new/1.png");

          // .span-div {
          //   .span-div-bg {
          //     background-image: url("../../assets/img/dfzy/new/5.png");
          //   }
          // }
          .top-span {
            background: linear-gradient(to bottom, #fffe7f, #54ff88);
            -webkit-background-clip: text;
            color: transparent;
          }
        }

        .img-div {
          width: 70px;
          height: 70px;
          float: left;
          margin: 40px 3px 28px 40px;
          // border: 2px solid white;
          // border-radius: 50%;
          transform: translateZ(20px);
          display: flex;
          align-items: center;

          .tx-bg {
            width: 100%;
            background-size: 100% 100%;
            border-radius: 50%;
            text-align: center;
            letter-spacing: 2;
            font-weight: 900;

            span {
              background: linear-gradient(to bottom, #fffe7f, #54ff88);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }
          }
        }

        .text-div {
          width: calc(100% - 140px);
          height: 54px;
          float: left;
          margin-top: 40px;
          transform: translateZ(20px);

          .name-div {
            width: 100%;
            height: 100%;
            // background-image: url("../../assets/img/dfzy/new/6.png");
            // background-size: 100% 100%;
            // text-align: center;
            color: white;

            .top-span {
              font-size: 13px;
              letter-spacing: 1px;
              line-height: 23px;
              word-break: break-all;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
            }
          }

          .bottom-span {
            text-align: center;
            font-size: 12px;
          }

          .synopsis-div {
            color: #ffffff87;
            font-size: 15px;
            padding-right: 20px;
            padding-left: 20px;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            text-indent: 2em;
            word-break: break-all;
            white-space: pre-line;
          }

          .xq-div {
            width: calc(100% - 40px);
            padding-left: 28px;
            height: 20px;
            overflow: hidden;
            margin-top: 5px;
            float: left;
          }

          .el-tag {
            float: left;
            margin-right: 10px;
            height: 20px;
            padding: 0px 8px;
            line-height: 19px;
          }
        }
      }
    }

    .bottom-content {
      width: 100%;
      height: calc(100% - 50px);

      .content-title {
        width: 100%;
        height: 40px;
        line-height: 40px;
        padding-left: 20px;
        box-sizing: border-box;
        background: #263b5d;

        .new-num {
          color: #09c69c;
        }
      }

      .content-text {
        width: 100%;
        height: calc(100% - 40px);
        padding: 10px;
        overflow-y: auto;
        box-sizing: border-box;

        .content-news {
          border-bottom: 1px solid #156677;

          .news-title {
            width: 100%;
            height: 40px;
            line-height: 40px;
            padding-left: 20px;
            cursor: pointer;
            box-sizing: border-box;

            .first-div {
              font-size: 18px;
              float: left;
            }

            .last-div {
              font-size: 15px;
              float: left;
              margin-left: 50px;
            }

            .span_cl {
              color: #28d0ff;
            }
          }

          .news-content {
            font-size: 18px;
            text-indent: 25px;
            margin-top: 10px;
            cursor: pointer;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            color: #08addb;

            em {
              color: red;
              font-size: 22px;
              font-style: normal;
              font-weight: 600;
            }
          }

          .news-info {
            width: 100%;
            height: 30px;
            margin-top: 10px;

            .news-info-from {
              margin-left: 20px;

              span {
                color: #28d0ff;
              }
            }

            .news-info-channel {
              margin-left: 20px;

              span {
                color: #28d0ff;
              }
            }

            .news-info-time {
              margin-left: 20px;
            }

            .news-info-feeling {
              margin-left: 20px;
            }

            .news-info-tool {
              width: 100px;
              float: right;
            }

            .el-icon-download {
              color: #1172d8;
              cursor: pointer;
              font-size: 20px;
            }

            .views {
              color: #00ffff;
              font-size: 20px;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>
