<template>
  <div id="dfwxk">
    <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="dict_item.name"
                  label="文档类别"
                  width="250"
                >
                </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
                    >&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="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>
                    <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="[10, 20,50,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="[10, 20,50,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等等 ,且不超过100M
            </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">
      <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
        ></video>
      </div>
    </el-dialog>

    <el-dialog
      :title="title_sound"
      :visible.sync="centerDialogVisible_sound"
      center
      width="500px"
    >
      <audio
        controls
        id="sound_id"
        :src="sound_src"
        controlslist="nodownload"
        class="audio-class"
      ></audio>
    </el-dialog>
  </div>
</template>
<script>
import {
  lastIndexOf,
  get,
  post,
  fileUpload,
  delete_util,
  startLoading,
  endLoading,
  download,
  format_file, //上传的文件格式
  arr_video_format, //视频的文件格式
  arr_sound_format, //音频的文件格式
} from "../../util/http_util";
import { uuid } from "../../util/data_util";
export default {
  data() {
    return {
      centerDialogVisible_add: false,
      centerDialogVisible_edit: false,
      centerDialogVisible_video: false,
      centerDialogVisible_sound: false,
      title: "", //视频播放页面的titile
      title_sound: "", //音频播放页面的titile
      title_txt: "",
      video_src: "",
      sound_src: "",
      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: 10,
      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: 10,
      current_page_qw: 1,
      format_files: "",
      get_files: [],
      type_folder: "dfzy", //文件夹名称
      wjfx_qh:true,
      gjc_input: "",
      tab_jsfx: true,
      znjsfx_name: "",
      clientDetails_type: [1], //默认查询id为21的方案预案
      ids:"",
      module_name:'敌方资源文档',
      tab_actives: "-1", //表格切换
    };
  },
  props: {
    clientDetails: {
      type: Object,
      default: {},
    },
  },
  methods: {
    //列表动画效果结束让全文动画开始
    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[0]==1?this.module_name:null,
        treeId: _this.clientDetails_type[0]==1?null:_this.clientDetails_type[0],
      };
      // startLoading();
      _this.tableData = [];
      _this.total = 0;
      post(
        "api/rest/document/queryDoc?pageNum=" +
          pageNum +
          "&pageSize=" +
          _this.pageSize,
        _this.paramData
      ).then((data) => {
        if (data.list.length > 0) {
          _this.tableData = data.list;
          _this.total = data.totals;
          _this.current_page = pageNum;
        }
        // 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;
      post(
        "api/rest/fulltext/searchFiles?pageNum=" +
          pageNum +
          "&pageSize=" +
          _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;
      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;
        }
      });
      if (video_type) {
        _this.title = "正在播放视频---" + row.name;
        _this.centerDialogVisible_video = true;
        setTimeout(function () {
          let path_srt = "api/rest/document/download/";
          path_srt = path_srt + _this.type_folder + '/'+row.file.uuid;
          _this.video_src = path_srt;
          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/document/download/";
          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 {
        let path_srt =
          "api/rest/document/pdf/" +
          _this.type_folder +
          "/" +
          row.file.uuid;
        window.open(path_srt);
      }
    },
    //table_全文搜索预览
    handleView_qwss(item) {
      let path_srt =
        "api/rest/document/pdf/" +
        this.type_folder +
        "/" +
        item.fileInfo.file.uuid;
      window.open(path_srt);
    },
    //table数据下载
    handleDownload(index, row) {
      let path_srt =
        "api/rest/document/download/" + this.type_folder + "/" + row.file.uuid;
      download(path_srt, row.file.name);
    },
    //table_全文搜索下载
    handleDownload_qwss(item) {
      let path_srt =
        "api/rest/document/download/" +
        this.type_folder +
        "/" +
        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[0],
          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() {
      let _this = this;
      if (_this.gjc_input != "") {
        _this.tab_jsfx = false;
        _this.znjsfx_name = _this.gjc_input;
        _this.seach_znjsfx(1,_this.clientDetails_type[0],true);
      }
    },
    seach_znjsfx(pageNum,ids,type) {
      let _this = this;
      if (_this.znjsfx_name == "") {
        this.$message({
          type: "warning",
          message: "关键词不能为空",
        });
        return;
      }
      let paramDatas = {
        keyword: _this.znjsfx_name,
        treeId: ids,
      };
      _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.tableData = data.list;
          _this.total_znjsfx = data.totals;
          _this.current_page_znjsfx = pageNum;
        }else if(type&&data.list.length == 0){
          if(_this.clientDetails_type.length==2)
          this.seach_znjsfx(1,_this.clientDetails_type[1],false)
        }
      });
    },
    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;
    }
  },
  mounted() {
    let _this = this;
    _this.format_files = format_file();
    //默认查询数据
    // _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();
      }
    },
    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);
    },
  },
};
</script>
<style lang="scss">
#dfwxk {
  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>
