<template>
    <div id="wxk_public">
        <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="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 :model="form_add" label-width="80px" style="margin-bottom: 0px" ref="forms" :rules="rules">
                <el-form-item label="文档名称" prop="name">
                    <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" prop="fileList">
                    <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 :model="form_edit" label-width="80px" ref="forms1" :rules="rules">
                <el-form-item label="文档名称" prop="name">
                    <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_PUT,
    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: {},
            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: "", //文件夹名称
            wjfx_qh: true,
            gjc_input: "",
            tab_jsfx: true,
            znjsfx_name: "",
            clientDetails_type: [], //默认查询id为21的方案预案
            ids: "",
            module_name: '',
            fl_type: '',
            rules: {
                name: [
                    { required: true, message: '请输入文档', trigger: 'blur' },
                ],
                fileList: [
                    { required: true, message: '请选择文件', trigger: 'change' }
                ]
            }
        };
    },
    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] == this.fl_type ? this.module_name : null,
                treeId: _this.clientDetails_type[0] == this.fl_type ? null : _this.clientDetails_type[0],
            };
            // startLoading();
            _this.tableData = [];
            _this.total = 0;
            post(
                "api/rest/3z/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/elastic/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) {
            console.log(1121212121212);
            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/file/download/Document/";
                    path_srt = path_srt + 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/file/download/Document/";
                    path_srt = path_srt + 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/3z/document/pdf/" +
                //     _this.type_folder +
                //     "/" +
                //     row.file.uuid;
                // window.open(path_srt);
                window.open(`api/rest/file/pdf/DocumentPDF?objectName=${row.file.uuid}`);
            }
        },
        //table_全文搜索预览
        handleView_qwss(item) {
            // let path_srt =
            //     "api/rest/3z/document/pdf/" +
            //     this.type_folder +
            //     "/" +
            //     item.fileInfo.file.uuid;
            // window.open(path_srt);
            window.open(`api/rest/file/pdf/DocumentPDF?objectName=${item.fileInfo.file.uuid}`);
        },
        //table数据下载
        handleDownload(index, row) {
            let path_srt =
                "api/rest/3z/document/download/" + this.type_folder + "/" + row.file.uuid;
            download(path_srt, row.file.name);
        },
        //table_全文搜索下载
        handleDownload_qwss(item) {
            let path_srt =
                "api/rest/3z/document/download/" +
                this.type_folder +
                "/" +
                item.fileInfo.file.uuid;
            download(path_srt, item.fileInfo.file.name);
        },
        //table数据编辑弹出框展示
        handleEdit(index, row) {
            let _this = this;
            _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;
            // setTimeout(function () {
            //     _this.$refs.forms1.resetFields();
            // }, 200)
        },
        //table数据删除
        handleDelete(index, row) {
            let _this = this;
            let ids = row.id;
            this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    delete_util(
                        "api/rest/3z/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.warning(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;
            setTimeout(function () {
                _this.$refs.forms.resetFields();
            }, 200)
        },

        //编辑弹出框确定
        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,
            };
            this.$refs['forms1'].validate((valid) => {
                if (valid) {
                    post("api/rest/3z/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;
                    })
                        .catch((err) => {
                            this.$message.warning(err.message);
                        })
                }
            });
        },
        //新增弹出框确定（文件上传）
        submitUpload() {
            this.$refs['forms'].validate((valid) => {
                if (valid) {
                    //此处是获取选择的下拉框（文件类别）的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 {
                        if (this.clientDetails_type[0] == 1 || this.clientDetails_type[0] == 2 || this.clientDetails_type[0] == 3 || this.clientDetails_type[0] == 4) {
                            this.$message({
                                type: "warning",
                                message: "请选择文档列表子节点",
                            });
                        } 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(),
                                module: this.module_name
                            };
                            fd.append("info", JSON.stringify(fileInfo));
                            fd.append("folder", this.type_folder);
                            fd.append("file", this.form_add.fileList[0].raw);
                            fileUpload_PUT("api/rest/3z/document/upload", fd).then((data) => {
                                this.$message({
                                    type: "success",
                                    message: "文件上传成功!",
                                });
                                this.centerDialogVisible_add = false;
                                this.handleCurrentChange_lb(1);
                            })
                                .catch((err) => {
                                    this.$message.warning(err.message);
                                })
                        }
                    }
                }
            });
        },

        //上传文件中的删除
        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.$refs.forms.validateField('fileList')
                    //选中文件，将文件名绑定到文档名称中
                    // 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, _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/3z/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)
                }
            })
                .catch((err) => {
                    this.$message.warning(err.message);
                })
        },
        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.module_name = val.module_name;
            this.type_folder = val.type_folder;
            this.fl_type = val.fl_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">
#wxk_public {
    width: calc(100% - 0px);
    height: calc(100% - 0px);
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
    background-size: 100% 100%;

    .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 #146a80 !important;
                box-shadow: 0 0 10px #1b6097;
            }
        }

        .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 #146a80 !important;
            }
        }

        .button-discuss {
            width: 100px;
            height: 30px;
            line-height: 30px;
            float: left;
            font-size: 14px;
            margin-top: 5px;
            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;
            font-size: 14px;
            margin-top: 5px;
            margin-right: 20px;
            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);
        box-shadow: 0 0 10px #1b6097;

        .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;
            }
        }

        .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;
                        }
                    }
                }
            }
        }
    }

    .el-dialog {
        .el-input__inner {
            color: white !important;
            background: none !important;
            border: 1px solid #146a80 !important;
            box-shadow: 0 0 10px #1b6097;
        }

        .el-textarea__inner {
            color: white !important;
            background: none !important;
            border: 1px solid #146a80 !important;
            box-shadow: 0 0 10px #1b6097;
        }

        background: #1d2d46 !important;

        .el-dialog__title {
            color: #ffffff;
        }

        .el-form-item__label {
            color: #dadada;
        }

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

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

        .el-upload-list__item-name [class^='el-icon'] {
            color: #2870ff;
            height: unset !important;
        }

        .el-upload__tip {
            color: #c7c7c7;
        }

        .el-upload-list__item-name {
            color: #4382ff;
        }

        .audio-class {
            margin-left: 75px;
        }
    }

    /deep/ .el-list-enter-active,
    /deep/ .el-list-leave-active {
        transition: none;
    }

    /deep/ .el-list-enter,
    /deep/ .el-list-leave-active {
        opacity: 0;
    }

    /deep/ .el-upload-list {
        height: 40px;
    }

    .slide-fade-enter-active {
        transition: all 0.3s ease;
    }

    .slide-fade-leave-active {
        transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
    }

    .slide-fade-enter,
    .slide-fade-leave-to

    /* .slide-fade-leave-active for below version 2.1.8 */
        {
        transform: translateX(10px);
        opacity: 0;
    }

    .xzwd {
        .el-dialog__body {
            padding: 25px 25px 0px;
        }
    }
}</style>
