<template>
  <div id="main-div">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="目录管理" name="first">
        <div class="top-div">
          <el-input placeholder="请输入目录名称" v-model="input_ml" clearable style="width: 200px;">
          </el-input>
          <el-button type="primary" @click="search_ml" style="margin-left:20px">搜索</el-button>
          <div class="xjmlfl-div" @click="add_xjflml">
            <i class="el-icon-folder-opened"></i>&nbsp;&nbsp;新建目录分类
          </div>
          <div class="plsc-div" @click="pl_delete_ml()">
            <i class="el-icon-folder-delete"></i>&nbsp;&nbsp;批量删除
          </div>
        </div>
        <div class="bottom-div">
          <div style="width: 100%; height: calc(100% - 34px); float: left">
            <el-table
              v-loading="loading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.8)"
              ref="multipleTable"
              :data="tableData_ml"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange_ml"
            >
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column type="index" width="100" label="序号">
              </el-table-column>
              <el-table-column prop="name" label="目录名称"> </el-table-column>
              <el-table-column prop="remark" label="备注"> </el-table-column>
              <el-table-column prop="cz" label="操作" width="150">
                <template slot-scope="scope">
                  <el-button type="primary" @click="handleEdit_ml(scope.$index, scope.row)" size="mini">编辑</el-button>
                  <el-button type="danger" @click="handleDelete_ml(scope.$index, scope.row)" size="mini">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="主题管理" name="second">
        <div class="top-div">
          <div class="block sjxz">
            <el-date-picker
              v-model="sj_time"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
            >
            </el-date-picker>
          </div>
          <el-form ref="form" :model="form" label-width="80px">
            <el-select
              v-model="form.ztmc"
              @change="ml_select($event)"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in ztml_data"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form>
          <el-button type="primary" @click="search">搜索</el-button>
          <div class="xjzt-div" @click="add_xjzt">
            <i class="el-icon-document-add"></i>&nbsp;&nbsp;新建主题
          </div>
          <div class="plsc-div" @click="pl_delete(tableChecked)">
            <i class="el-icon-folder-delete"></i>&nbsp;&nbsp;批量删除
          </div>
        </div>
        <div class="bottom-div">
          <div style="width: 100%; height: calc(100% - 34px); float: left">
            <el-table
              v-loading="loading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.8)"
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column type="index" width="100" label="序号">
              </el-table-column>
              <el-table-column
                prop="name"
                label="主题名称"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column prop="folder.name" label="目录名称">
              </el-table-column>
              <el-table-column label="发帖人" show-overflow-tooltip>
                <template slot-scope="scope">
                  {{
                    scope.row.characterClassify.map((e) => e.name).join("、")
                  }}
                </template>
              </el-table-column>
              <el-table-column
                prop="stTime"
                label="开始时间"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="edTime"
                label="结束时间"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="cz"
                label="操作"
                width="250"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <el-button type="primary" @click="handleEndDate(scope.$index, scope.row)" size="mini">修改时间</el-button>
                  <el-button type="primary" @click="handleEdit(scope.$index, scope.row)" size="mini">编辑</el-button>
                  <el-button type="danger" @click="handleDelete(scope.$index, scope.row)" size="mini">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="page-div">
            <el-pagination
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @current-change="handleCurrentChange"
              class="myPagination"
              @size-change="handleSizeChange"
              :page-size="everySize"
              :page-sizes="[10, 20, 50, 100]"
            >
            </el-pagination>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- //新增主题弹出层 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="30%"
      class="xzzt-div"
      :modal="modalXz"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="主题名称" prop="ztmc">
          <el-input
            v-model="ruleForm.ztmc"
            clearable
            placeholder="请输入主题名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="主题目录" prop="folder_id">
          <el-select
            v-model="ruleForm.folder_id"
            @change="onSelectztml($event)"
          >
            <el-option
              v-for="(item, index) in ztml_data"
              :label="item.name"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <div
          class="wjjs-div"
          :style="{
            backgroundImage:
              index1 == 0
                ? 'url(' + img1 + ')'
                : index1 == 1
                ? 'url(' + img2 + ')'
                : 'url(' + img3 + ')',
          }"
        >
          <div class="gjz-bitton">
            <ul>
              <li
                v-for="(item, index) in js_data"
                v-text="item.name"
                @click="jx_select(index)"
              ></li>
            </ul>
          </div>
          <div class="gjz-input" v-show="index1 == 0">
            <div>
              <el-input
                placeholder="多个关键词用英文逗号,隔开，数据同时包含任一关键词时，将保留此条数据记录"
                v-model="jxgjcdx.input_add"
                @blur="input_add_discern"
              >
                <template slot="prepend">包含以下所有关键词</template>
              </el-input>
              <el-input
                placeholder="多个关键词用英文逗号,隔开，数据包含其中任一关键词时，将保留此条数据记录"
                v-model="jxgjcdx.input_or"
                @blur="input_or_discern"
              >
                <template slot="prepend">包含以下任一关键词</template>
              </el-input>
              <el-input
                placeholder="多个关键词用英文逗号,隔开，数据不包含任一关键词时，将保留此条数据记录"
                v-model="jxgjcdx.input_not_and"
                @blur="input_not_add_discern"
              >
                <template slot="prepend">不包含以下所有关键词</template>
              </el-input>
            </div>
          </div>
          <div class="gjz-textarea" v-show="index1 == 1">
            <el-input
              type="textarea"
              :rows="7"
              placeholder="英文括号引号标记('关键词')；连接符AND/OR/NOT为英文大写，连接符与关键词间留一个空格；举例：(('上海') OR ('北京'))"
              v-model="jxgjcdx.textarea_f_keywords"
            >
            </el-input>
          </div>
          <div class="gjz-textarea" v-show="index1 == 2">
            <el-input
              type="textarea"
              :rows="7"
              placeholder="关键词用英文括号引'+'表示'并且'，'|'表示'或'，'-'表示'不包含'；举例：上海 + (世博会 | 世界博览会) - (求职 | 卖房)，表示文章中即同时出现“上海”和“世博会”或者 '上海'和'世界博览会'中任意组合，又不包含'卖房'或者'求职'中的任意一个排除词，就能监测到"
              v-model="jxgjcdx.textarea_concise"
            >
            </el-input>
          </div>
        </div>
        <el-form-item label="日期范围" style="margin-top: 20px" prop="date">
          <div class="block">
            <el-date-picker
              value-format="yyyy-MM-dd HH:mm:ss"
              v-model="ruleForm.date"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
            >
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="发帖人" style="margin-top: 20px">
          <el-tree
            :data="data_tree"
            :props="defaultProps"
            show-checkbox
            node-key="id"
            ref="tree"
          ></el-tree>
        </el-form-item>
        <el-form-item
          label="媒体范围"
          style="margin-top: 10px"
          prop="checkedFruits"
        >
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            class="fla"
            >全选</el-checkbox
          >
          <el-checkbox-group
            v-model="ruleForm.checkedFruits"
            @change="handleCheckedFruitsChange($event)"
            class="fla"
          >
            <el-checkbox
              v-for="(item, index) in fruitsArr"
              :label="item.id"
              :key="item.id"
              >{{ item.name }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="上传图片">
            <el-upload
              class="avatar-uploader"
              action="1"
              :show-file-list="false"
              :on-change="handleChangeImg"
              :file-list="fileListImg"
              accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PNG"
              :auto-upload="false"
              style="float:left"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <el-button type="danger" size="mini" circle icon="el-icon-delete"  v-if="fileListImg.length>0||img_Base64!=null" style="margin-left: 20px;margin-top: 90px;" @click="delect_img"></el-button>
        </el-form-item>
        <div class="sjyl-span" @click="sjzl('ruleForm')">
          <span>数据预览</span>
        </div>
      </el-form>
    </el-dialog>

    <!-- //数据预览 -->
    <el-dialog
      title="数据预览"
      :visible.sync="outerVisible"
      width="30%"
      class="sjyl-div"
      :modal="modalView"
    >
      <div class="icon-div"></div>
      <div class="ppsj-span">
        <span>当前已匹配数据</span>&nbsp;<span
          style="color: red"
          v-text="sjyl_totals"
        >
        </span
        >&nbsp;<span>条，最终以实际导入为准</span>
      </div>
      <div style="width: 100%; height: 80%; overflow: hidden">
        <el-table :data="sjyl_tableData" height="calc(100% - 10px)">
          <el-table-column type="index" width="100" label="序号">
          </el-table-column>
          <el-table-column
            prop="site_name"
            label="新闻来源"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column prop="title" label="新闻标题"> </el-table-column>
        </el-table>
      </div>
      <div class="page-div">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="sjyl_totals"
          @current-change="ztsjylChange"
          class="myPagination"
          @size-change="handleSizeChangeSjyl"
          :page-size="everySizeSjyl"
          :page-sizes="[10, 20, 50, 100]"
        >
        </el-pagination>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="outerVisible = false" class="syy-button"
          >上一页</el-button
        >
        <el-button type="primary" @click="bczt_add" class="bczt-button"
          >保存专题</el-button
        >
      </span>
    </el-dialog>
    <!-- //新建分类目录 -->
    <el-dialog
      title="新建分类目录"
      :visible.sync="xjflmlVisible"
      width="30%"
      class="zjglml-div"
      :modal="modalNew"
    >
      <el-form
        :model="xjmlForm"
        :rules="xjmlrules"
        ref="xjmlForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="目录标题" prop="mlbtname">
          <el-input
            v-model="xjmlForm.mlbtname"
            placeholder="请输入目录标题"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="xjmlForm.mlbz"
            placeholder="请输入备注信息"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('xjmlForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="编辑分类目录"
      :visible.sync="xjflmlVisible_edit"
      width="30%"
      class="zjglml-div"
      :modal="modalNew"
    >
      <el-form
        :model="xjmlForm_edit"
        :rules="xjmlrules"
        ref="xjmlForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="目录标题" prop="mlbtname">
          <el-input
            v-model="xjmlForm_edit.mlbtname"
            placeholder="请输入目录标题"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="xjmlForm_edit.mlbz"
            placeholder="请输入备注信息"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm_edit('xjmlForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import img1 from "../../assets/img/yqjc/53.png";
import img2 from "../../assets/img/yqjc/54.png";
import img3 from "../../assets/img/yqjc/55.png";
import jh_bg from "../../assets/img/dfzy/zwtp.png";
import { get, post, delete_util, getTreeData,imageToBase64,getTime_extent } from "../../util/http_util";
export default {
  // directives: {//无限滚动
  //   "el-table-infinite-scroll": elTableInfiniteScroll,
  // },
  data() {
    return {
      xjmlForm_edit:{
        mlbtname: "", //目录标题名称
        mlbz: "",
      },
      modalXz: false,
      modalView: false,
      modalNew: false,
      value2: "",
      data_tree: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      xjmlForm: {
        mlbtname: "", //目录标题名称
        mlbz: "",
      },
      xjmlrules: {
        mlbtname: [
          { required: true, message: "请输入专题名称", trigger: "blur" },
        ],
      },
      loading: false,
      sjyl_tableData: [], //数据预览数据
      count: 0,
      tableChecked: [], //被选中的记录数据-----对应“批量删除”传的参数值
      jxgjcdx: {
        input_add: "",
        input_or: "",
        input_not_and: "",
        textarea_f_keywords: "",
        textarea_concise: "",
      },
      img1: img1,
      img2: img2,
      img3: img3,
      fruitsArr: [], //一共有多少个选项
      checkAll: false,
      isIndeterminate: false,
      dialogVisible: false, //新建主题值
      outerVisible: false, //新建主题
      xjflmlVisible: false, //新建目录分类
      sj_time: [],
      form: {
        name: "",
        type: [],
        ztmc: "",
      },
      tableData: [], //主题列表数据
      ztml_data: [], //主题目录树
      ruleForm: {
        ztmc: "",
        date: [],
        checkedFruits: [], //默认选中的值
        id: "",
        source: [],
        folder_id: "",
        characterClassify: [],
      },
      rules: {
        ztmc: [{ required: true, message: "请输入主题名称", trigger: "blur" }],
        folder_id: [
          { required: true, message: "请选择主题目录", trigger: "change" },
        ],
        date: [
          {
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        checkedFruits: [
          {
            type: "array",
            required: true,
            message: "请至少选择一种媒体",
            trigger: "change",
          },
        ],
      },
      js_data: [
        { name: "关键词检索" },
        // { name: "富关键词检索" },
        // { name: "简约检索" },
      ],
      index1: 0,
      ztml_value: "",
      total: 0,
      sjyl_totals: 0,
      tck_ea: true, //显示新增或者编辑的弹出框
      everySize: 10,
      everySizeSjyl: 10,
      activeName: "first",
      tableData_ml: [],
      multipleSelection: [],
      xjflmlVisible_edit:false,
      input_ml:'',
      fileListImg: [],
      imageUrl:jh_bg,
      img_Base64:null,
    };
  },
  methods: {
    delect_img(){
      this.imageUrl = jh_bg;
      this.img_Base64 = null;
      this.fileListImg = [];
    },
    handleChangeImg(file, fileListImg) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.fileListImg = [fileListImg[fileListImg.length - 1]];
      imageToBase64(this.fileListImg[0].raw,this);
    },
    submitForm_edit(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          post("api/rest/sentiment/updateFolder", {
            id:this.id_edit,
            name: this.xjmlForm_edit.mlbtname,
            remark: this.xjmlForm_edit.mlbz,
          })
            .then((res) => {
              this.xjflmlVisible_edit = false;
              this.query_zlml();
              this.$message({
                message: "编辑分类目录成功！",
                type: "success",
              });
              console.log(res);
              this.$emit("closeMoule", "");
            })
            .catch((err)=>{
                this.$message.warning(err.message);
            })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    pl_delete_ml() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: "无删除项,请选择！！！",
          type: "warning",
        });
      } else {
        this.delete(this.multipleSelection);
      }
    },
    delete(ids) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delete_util("api/rest/sentiment/bulkRemoveFolder", ids)
            .then((data) => {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.$emit("closeMoule", "");
              this.query_zlml();
            })
            .catch((err)=>{
                this.$message.warning(err.message);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleDelete_ml(index, item) {
      this.delete([item.id]);
    },
    handleEdit_ml(index,item) {
        this.id_edit = item.id;
        this.xjflmlVisible_edit = true;
        this.xjmlForm_edit={
            mlbtname: item.name, //目录标题名称
            mlbz: item.remark,
        };
    },
    search_ml() {
      this.query_zlml();
    },
    handleClick(tab, event) {},
    //表格全选获取值
    handleSelectionChange(val) {
      this.tableChecked = val;
    },

    handleSelectionChange_ml(val) {
      this.multipleSelection = [];
      val.forEach((item) => {
        this.multipleSelection.push(item.id);
      });
    },
    //获取主题目录value
    ml_select(e) {
      this.ztml_value = e;
    },
    //根据条件查询主题
    search() {
      this.loading = true;
      if (!this.sj_time) {
        this.sj_time = [];
      }
      let kssj = null;
      let jssj = null;
      if (this.sj_time.length > 0) {
        kssj = this.sj_time[0];
        jssj = this.sj_time[1];
      }
      post("api/rest/sentiment/queryTheme", {
        endTime: jssj,
        folder: this.ztml_value,
        pageNum: 1,
        pageSize: this.everySize,
        startTime: kssj,
      })
        .then((res) => {
          this.loading = false;
          this.tableData = res.list;
          this.total = res.totals;
        })
        .catch((err) => {
          this.loading = false;
          this.$message.warning(err.message);
        });
    },
    //分页查询主题信息列表
    handleCurrentChange(pageNum) {
      if (!this.sj_time) {
        this.sj_time = [];
      }
      let kssj = null;
      let jssj = null;
      if (this.sj_time.length > 0) {
        kssj = this.sj_time[0];
        jssj = this.sj_time[1];
      }
      post("api/rest/sentiment/queryTheme", {
        endTime: jssj,
        folder: this.ztml_value,
        pageNum: pageNum,
        pageSize: this.everySize,
        startTime: kssj,
      })
        .then((res) => {
          this.tableData = res.list;
        }).catch((err)=>{
            this.$message.warning(err.message);
        });
    },
    //新增主题弹出
    add_xjzt() {
      setTimeout(() => {
        this.$refs.tree.setCheckedKeys([]);
      }, 2000);
      this.ruleForm = {
        ztmc: "",
        date: [],
        checkedFruits: [], //默认选中的值
        id: "",
        folder_id: "",
        characterClassify: [],
        source: [],
      };
      (this.jxgjcdx = {
        input_add: "",
        input_or: "",
        input_not_and: "",
        textarea_f_keywords: "",
        textarea_concise: "",
      }),
      this.fileListImg = [];
      this.imageUrl=jh_bg;
      this.img_Base64 = null;
        (this.dialogVisible = true);
    },
    //新建分类目录弹出
    add_xjflml() {
      this.xjmlForm = {
        mlbtname: "", //目录标题名称
        mlbz: "",
      };
      this.xjflmlVisible = true;
    },
    //新建分类目录确定
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          post("api/rest/sentiment/addFolder", {
            name: this.xjmlForm.mlbtname,
            remark: this.xjmlForm.mlbz,
          })
            .then((res) => {
              this.xjflmlVisible = false;
              this.query_zlml();
              this.$message({
                message: "新建分类目录成功！",
                type: "success",
              });
              console.log(res);
              this.$emit("closeMoule", "");
            })
            .catch((err)=>{
                this.$message.warning(err.message);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //获取主题目录id
    onSelectztml(e) {
      this.ruleForm.folder_id = e;
    },
    //全选事件
    handleCheckAllChange(val) {
      this.ruleForm.source = val ? this.fruitsArr.map((a) => a.id) : [];
      let all_checked = this.fruitsArr.map((a) => a.id);
      this.ruleForm.checkedFruits = val ? all_checked : [];
      this.isIndeterminate = false;
    },
    //单选事件
    handleCheckedFruitsChange(value) {
      this.ruleForm.source = value;
      let checkedCount = value.length;
      this.checkAll = checkedCount == this.fruitsArr.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.fruitsArr.length;
    },
    //数据预览
    sjzl(formName) {
      this.ruleForm.characterClassify = this.$refs.tree
        .getCheckedNodes()
        .map((e) => e.id);
      if (!this.ruleForm.date) {
        this.ruleForm.date = "";
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //主题信息预览查询
          this.ztsjylChange(1, totals=>{
            this.sjyl_totals = totals;
            this.outerVisible = true;
          });
        } else {
          return false;
        }
      });
    },
    //数据预览分页
    ztsjylChange(pageNum, callback) {
      this.ruleForm.characterClassify = this.$refs.tree
        .getCheckedNodes()
        .map((e) => e.id);
      if (!this.ruleForm.date) {
        this.ruleForm.date = "";
      }
      //主题信息预览查询
      post(
        "api/rest/fulltext/queryNewsByTheme?pageNum=" +
          pageNum +
          "&pageSize=" +
          this.everySizeSjyl +
          "",
        {
          edTime: this.ruleForm.date[1],
          folder_id: this.ruleForm.folder_id,
          name: this.ruleForm.ztmc,
          stTime: this.ruleForm.date[0],
          source: this.ruleForm.source,
          characterClassify: this.ruleForm.characterClassify,
          keyword: JSON.stringify(this.keyword_arr),
        }
      ).then((data) => {
        this.sjyl_tableData = data.list;
        if(callback){
          callback(data.totals);
        }
      }).catch((err)=>{
        this.$message.warning(err.message);
        if(callback){
          callback(0);
        }
      });
    },
    //保存主题
    bczt_add() {
      if (this.tck_ea) {
        //新增主题
        this.ruleForm.characterClassify = this.$refs.tree
          .getCheckedNodes()
          .map((e) => e.id);
        post("api/rest/sentiment/addTheme", {
          edTime: this.ruleForm.date[1],
          folder_id: this.ruleForm.folder_id,
          name: this.ruleForm.ztmc,
          stTime: this.ruleForm.date[0],
          source: this.ruleForm.source,
          characterClassify: this.ruleForm.characterClassify,
          keyword: JSON.stringify(this.keyword_arr),
          cover:this.img_Base64,
        })
          .then((res) => {
            this.$message({
              type: "success",
              message: "主题新增成功!",
            });
            this.$emit("closeMoule", "");
            this.search();
            this.outerVisible = false;
            this.dialogVisible = false;
          })
          .catch((err)=>{
                this.$message.warning(err.message);
            });
      } else {
        //编辑主题
        this.ruleForm.characterClassify = this.$refs.tree
          .getCheckedNodes()
          .map((e) => e.id);
        post("api/rest/sentiment/updateTheme", {
          edTime: this.ruleForm.date[1],
          folder_id: this.ruleForm.folder_id,
          name: this.ruleForm.ztmc,
          stTime: this.ruleForm.date[0],
          source: this.ruleForm.source,
          characterClassify: this.ruleForm.characterClassify,
          keyword: JSON.stringify(this.keyword_arr),
          id: this.ruleForm.id,
          cover:this.img_Base64,
        })
          .then((res) => {
            this.$message({
              type: "success",
              message: "编辑主题成功!",
            });
            this.$emit("closeMoule", "");
            this.search();
            this.outerVisible = false;
            this.dialogVisible = false;
          })
          .catch((err)=>{
                this.$message.warning(err.message);
            });
      }
    },
    jx_select(index) {
      this.index1 = index;
    },
    //批量删除
    pl_delete(tableChecked) {
      let ids = tableChecked.map((e) => e.id);
      if (tableChecked.length < 1) {
        this.$message({
          message: "请选择即将删除的数据！",
          type: "warning",
        });
      } else {
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            delete_util("api/rest/sentiment/deleteThemeByBatch", ids)
              .then((data) => {
                this.search();
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.$emit("closeMoule", "");
              })
              .catch((err)=>{
                this.$message.warning(err.message);
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      }
      console.log(tableChecked);
    },
    handleEndDate(index, row){
      this.img_Base64 = row.cover;
      this.imageUrl = row.cover==null?jh_bg:row.cover;
      this.tck_ea = false;
      this.ruleForm.characterClassify = row.characterClassify.map((e) => {
        return e.id;
      });
      this.ruleForm.source = row.source.map((e) => e.id);
      this.ruleForm = {
        ztmc: row.name,
        date: [row.stTime, getTime_extent(0).pre_rq_end],
        checkedFruits: this.ruleForm.source, //默认选中的值
        id: row.id,
        folder_id: row.folder.id,
        characterClassify: this.ruleForm.characterClassify,
        source: this.ruleForm.source,
      };
      this.jxgjcdx.input_add =
        row.keyword == "" ? "" : JSON.parse(row.keyword)[0].toString();
      this.jxgjcdx.input_or =
        row.keyword == "" ? "" : JSON.parse(row.keyword)[1].toString();
      this.jxgjcdx.input_not_and =
        row.keyword == "" ? "" : JSON.parse(row.keyword)[2].toString();
      post("api/rest/sentiment/updateTheme", {
          edTime: this.ruleForm.date[1],
          folder_id: this.ruleForm.folder_id,
          name: this.ruleForm.ztmc,
          stTime: this.ruleForm.date[0],
          source: this.ruleForm.source,
          characterClassify: this.ruleForm.characterClassify,
          keyword: JSON.stringify(this.keyword_arr),
          id: this.ruleForm.id,
          cover:this.img_Base64,
        })
          .then((res) => {
            this.$message({
              type: "success",
              message: "结束时间修改成功!",
            });
            this.$emit("closeMoule", "");
            this.search();
            this.outerVisible = false;
            this.dialogVisible = false;
          })
          .catch((err)=>{
                this.$message.warning(err.message);
            });

      // this.bczt_add();
    },
    //编辑
    handleEdit(index, row) {
      this.img_Base64 = row.cover;
      this.imageUrl = row.cover==null?jh_bg:row.cover;
      this.tck_ea = false;
      this.ruleForm.characterClassify = row.characterClassify.map((e) => {
        return {
          id: e.id,
          label: e.name,
        };
      });
      setTimeout(() => {
        this.$refs.tree.setCheckedNodes(this.ruleForm.characterClassify);
      }, 1000);
      this.ruleForm.source = row.source.map((e) => e.id);
      this.ruleForm = {
        ztmc: row.name,
        date: [row.stTime, row.edTime],
        checkedFruits: this.ruleForm.source, //默认选中的值
        id: row.id,
        folder_id: row.folder.id,
        characterClassify: this.ruleForm.characterClassify,
        source: this.ruleForm.source,
      };
      this.jxgjcdx.input_add =
        row.keyword == "" ? "" : JSON.parse(row.keyword)[0].toString();
      this.jxgjcdx.input_or =
        row.keyword == "" ? "" : JSON.parse(row.keyword)[1].toString();
      this.jxgjcdx.input_not_and =
        row.keyword == "" ? "" : JSON.parse(row.keyword)[2].toString();
      this.dialogVisible = true;
    },
    //删除
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delete_util("api/rest/sentiment/deleteTheme/" + row.id)
            .then((data) => {
              if (data == 1) {
                this.tableData.splice(index, 1);
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              }
            })
            .catch((err)=>{
                this.$message.warning(err.message);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      console.log(index, row);
    },
    //查询主题目录树
    query_zlml() {
      post("api/rest/sentiment/queryFolder?name="+this.input_ml)
        .then((res) => {
          this.tableData_ml = res;
          this.ztml_data = res;
        })
        .catch((err)=>{
                this.$message.warning(err.message);
            });
    },
    //关键字检索AND认证
    input_add_discern() {
      let arr = this.jxgjcdx.input_add
        .trim()
        .replace(/^(\s|,)+|(\s|,)+$/g, "")
        .split(",");
      let arr_input = [];
      arr.forEach((item, index) => {
        if (item == "") {
          arr_input.push(index);
        }
      });
      arr_input = arr_input.reverse();
      arr_input.forEach((item) => {
        arr.splice(item, 1);
      });
      this.jxgjcdx.input_add = arr.toString();
    },
    //关键字检索OR认证
    input_or_discern() {
      let arr = this.jxgjcdx.input_or
        .trim()
        .replace(/^(\s|,)+|(\s|,)+$/g, "")
        .split(",");
      let arr_input = [];
      arr.forEach((item, index) => {
        if (item == "") {
          arr_input.push(index);
        }
      });
      arr_input = arr_input.reverse();
      arr_input.forEach((item) => {
        arr.splice(item, 1);
      });
      this.jxgjcdx.input_or = arr.toString();
    },
    //关键字检索NOT AND认证
    input_not_add_discern() {
      let arr = this.jxgjcdx.input_not_and
        .trim()
        .replace(/^(\s|,)+|(\s|,)+$/g, "")
        .split(",");
      let arr_input = [];
      arr.forEach((item, index) => {
        if (item == "") {
          arr_input.push(index);
        }
      });
      arr_input = arr_input.reverse();
      arr_input.forEach((item) => {
        arr.splice(item, 1);
      });
      this.jxgjcdx.input_not_and = arr.toString();
    },
    handleSizeChange(val) {
      this.everySize = val;
      this.currentPage = 1;
      this.search();
    },
    handleSizeChangeSjyl(val) {
      this.everySizeSjyl = val;
      this.sjzl("ruleForm");
    },
    handleSizeChange_ml(val) {
      this.everySize = val;
      this.currentPage = 1;
      this.search();
    },
  },
  mounted() {
    //查询新闻来源
    post("api/rest/sentiment/querySource")
      .then((res) => {
        this.fruitsArr = res
          .filter((e) => e.level == 1)
          .map((e) => {
            return {
              name: e.name,
              id: e.id,
            };
          });
      })
      .catch((err)=>{
                this.$message.warning(err.message);
            });
    //查询主题信息列表
    this.search();
    //查询主题目录树
    this.query_zlml();
    //查询人员分类
    get("api/rest/sentiment/queryOpponentCharacterClassify").then((data) => {
      let tree = getTreeData(data, "id", "parentid", "children", 0);
      this.data_tree = tree;
    }).catch((err)=>{
        this.$message.warning(err.message);
    });
  },
  computed:{
    keyword_arr(){
        let _add =
          this.jxgjcdx.input_add == "" ? [] : this.jxgjcdx.input_add.split(",");
        let _or =
          this.jxgjcdx.input_or == "" ? [] : this.jxgjcdx.input_or.split(",");
        let _not_or =
          this.jxgjcdx.input_not_and == ""
            ? []
            : this.jxgjcdx.input_not_and.split(",");
        return [_add, _or, _not_or];
    }
  }
};
</script>
<style lang="scss">
#main-div {
  width: 97%;
  height: calc(100% - 0px);
  margin: 20px;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
  background-image: url("../../assets/img/yqjc/49.png");
  background-size: 100% 100%;

  .el-tabs__header {
    margin: 0;
  }
  .el-tabs__nav {
    margin-left: 10px;
  }
  .el-tabs__nav-wrap::after {
    background-color: #165b6d00;
  }
  .el-tabs__item.is-active {
    color: #06cee0;
  }
  .el-tabs__active-bar {
    height: 6px;
    background-color: #06cee0;
    border-radius: 4px;
  }
  .el-tabs__item:hover {
    color: #06cee0;
  }
  .el-tabs__item {
    color: white;
    height: 53px;
    line-height: 53px;
    font-size: 15px;
    padding: 1px 20px 10px 10px !important;
  }
  .top-div {
    width: 100%;
    height: 90px;
    .sjxz {
      width: 400px;
      margin-top: 30px;
      float: left;
      box-shadow: 0 0 10px #1b6097;
      .el-date-editor {
        background: none;
        span {
          color: white;
        }
        .el-range-input {
          color: white;
          background: none;
        }
      }
      .el-input__inner {
        border: 1px solid #146a80 !important;
      }
    }
    .el-dropdown {
      vertical-align: top;
    }
    .el-dropdown + .el-dropdown {
      margin-left: 15px;
    }
    .el-icon-arrow-down {
      font-size: 12px;
    }
    .el-button--primary {
      margin-top: 30px;
      border: 1px solid #146a80 !important;
      background-color: #1d2d46;
      box-shadow: 0 0 10px #1b6097;
    }
    .el-form {
      width: 250px;
      float: left;
      margin-top: 30px;
      margin-left: 50px;
      .el-input__inner {
        background: none;
        border: 1px solid #146a80 !important;
        color: #ffffff96;
        box-shadow: 0 0 10px #1b6097;
      }
    }
    .plsc-div {
      margin-top: 35px;
      float: right;
      margin-right: 20px;
      width: 130px;
      height: 35px;
      line-height: 35px;
      background: none;
      text-align: center;
      color: #ffffffc7;
      cursor: pointer;
      background-image: url("../../assets/img/yqjc/40.png");
      background-size: 100% 100%;
    }
    .xjzt-div {
      margin-top: 35px;
      float: right;
      width: 130px;
      height: 35px;
      line-height: 35px;
      font-size: 14px;
      background: none;
      text-align: center;
      color: #ffffffc7;
      cursor: pointer;
      background-image: url("../../assets/img/yqjc/40.png");
      background-size: 100% 100%;
    }
    .xjmlfl-div {
      margin-top: 35px;
      float: right;
      margin-right: 20px;
      width: 160px;
      height: 35px;
      line-height: 35px;
      background: none;
      text-align: center;
      color: #ffffffc7;
      cursor: pointer;
      background-image: url("../../assets/img/yqjc/40.png");
      background-size: 100% 100%;
    }
  }
  .bottom-div {
    width: 100%;
    height: calc(100% - 135px);

    .el-table__body-wrapper {
      height: calc(100% - 48px);
      overflow-y: auto;
    }
    .el-table--group::after,
    .el-table--border::after,
    .el-table::before {
      background-color: unset;
      border: unset;
    }
    .el-table tr {
      background-color: #1d2d46 !important;
      color: #ffffffc7;
    }
    .el-table td {
      border-bottom: 1px solid #127a89;
    }
    .el-table--enable-row-hover .el-table__body tr:hover > td {
      background-color: #9093991c;
    }
    .el-table th {
      border: unset;
      background-color: #263b5d !important;
    }
    .el-table--fit {
      background: none !important;
    }
    .el-icon-delete-solid {
      color: red;
      cursor: pointer;
      font-size: 18px;
    }
    .el-icon-edit {
      color: #1172d8;
      cursor: pointer;
      font-size: 20px;
    }
  }
  .xzzt-div {
    .wjjs-div {
      width: 100%;
      height: 200px;
      background-size: 100% 100%;
      .gjz-bitton {
        width: 100%;
        height: 35px;
      }
      .gjz-input {
        width: 100%;
        height: calc(100% - 35px);
        float: left;
        .el-input-group {
          width: 75%;
          margin-left: 80px;
          margin-bottom: 10px;
        }
        .el-input-group__prepend {
          background-color: #1d2d46;
          color: #ffff;
          border: unset;
          width: 140px;
        }
      }
      .gjz-bitton ul {
        list-style-type: none;
        color: #fff;
      }
      .gjz-bitton ul li {
        float: left;
        float: left;
        padding-top: 10px;
        height: 100%;
        width: 130px;
        margin-left: -20px;
        cursor: pointer;
      }
      .gjz-textarea {
        width: 100%;
        height: calc(100% - 35px);
        .el-textarea__inner {
          height: 85%;
          margin-left: 25px;
          margin-top: 2px;
          background: none;
          border: 1px solid #008080;
          width: 95%;
          color: #ffff;
          box-shadow: 0 0 10px #1b6097;
        }
      }
    }
    .el-dialog {
      background: #1d2d46 !important;
      width: 1050px !important;
      .el-tree__empty-block {
        height: unset;
      }
      .el-input__inner {
        background-color: transparent;
        color: #ffffff;
        border: 1px solid #7ac2e5;
        box-shadow: 0 0 10px #1b6097;
      }
      .el-form-item__label {
        color: #ffff;
      }
      .el-tabs--border-card {
        height: 250px;
        color: white;
        background: #1d2d46;
        border: 1px solid #008080;
      }
      .el-date-editor .el-range-input {
        background: none;
        color: #ffff;
      }
      .el-date-editor .el-range-separator {
        color: #ffff;
      }
      .el-checkbox {
        color: #ffff;
      }
      .el-checkbox__inner {
        top: -2px;
      }
      .fla {
        float: left;
        margin-right: 15px !important;
        margin-left: 5px;
        margin-top: 10px;
      }
      .sjyl-span {
        width: 110px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        color: white;
        border: 1px solid #1b6299;
        border-radius: 5px;
        background-color: #18446b;
        font-weight: 800;
        box-shadow: 0 0 18px #1b6097;
        cursor: pointer;
      }
    }
    .el-tree {
      background: #1d2d46;
      color: #ecf5ff;
      width: 30%;
    }
    .el-tree-node__content {
      background: #1d2d46;
    }
    .el-tree-node:focus > .el-tree-node__content {
      background: #1d2d46 !important;
    }
    .el-tree-node__content:hover {
      background-color: #9093991c;
    }
  }
  .sjyl-div {
    .ppsj-span {
      width: 100%;
      height: 30px;
      line-height: 30px;
      color: #ffff;
      font-size: 13px;
      margin-top: 20px;
      .el-table tr {
        background-color: #1d2d47;
        color: #ffff;
        font-size: 15px;
      }
    }
    .icon-div {
      margin-top: -60px;
      margin-left: 20px;
      width: 15px;
      height: 15px;
      background-image: url("../../assets/img/yqjc/51.png");
      background-size: 102% 102%;
    }
    .el-dialog {
      background-color: #1d2d47;
      background-size: 102% 102%;
      border-radius: 20px;
      width: 45% !important;
      .el-dialog__header {
        background-image: url("../../assets/img/yqjc/52.png");
        background-size: 100% 100%;
        .el-dialog__title {
          line-height: 24px;
          font-size: 15px;
          color: #ffff;
          padding-left: 40px;
        }
      }
      .el-dialog__body {
        height: 400px;
      }
      .syy-button {
        float: left;
        background: #283b6c;
        border: 1px solid #00ffff;
        color: #ffff;
        margin-top: -5%;
      }
      .bczt-button {
        float: left;
        margin-left: 15%;
        color: #000000f0;
        background-color: #00ffff;
        border-color: #00ffff;
        margin-top: -5%;
      }
    }
    .el-table--group::after,
    .el-table--border::after,
    .el-table::before {
      background-color: unset;
    }
    .el-table {
      background-color: #1d2d47;
    }
    .el-table tr {
      background-color: #1d2d47;
      color: #ffff;
      font-size: 15px;
    }
    .el-table th {
      background-color: #1d2d47;
      border: unset;
    }
    .el-table--border td {
      border: unset;
    }
    .el-table--border {
      border: unset;
    }
    .el-table td {
      border: unset;
    }
    .el-table--enable-row-hover .el-table__body tr:hover > td {
      background-color: #9093991c;
    }
    .el-table_2_column_12 {
      text-align: center !important;
    }
  }
  .zjglml-div .el-dialog {
    background-color: #1d2d47;
    .el-dialog__title {
      color: #f5f7fad4;
    }
    .el-form-item__label {
      color: #f5f7fa;
    }
    .el-input__inner {
      background-color: #1d2d47;
      color: #f2f6fcb8;
      border: 1px solid #008080;
      box-shadow: 0 0 10px #1b6097;
    }
    .el-button--primary {
      float: right;
      margin-top: -5%;
      color: #000000f0;
      background-color: #00ffff;
      border-color: #00ffff;
    }
  }
  .el-form {
      .el-form-item {
          .el-form-item__label {
              color: white;
          }
          .el-form-item__content {
              color: white;
              .el-upload__tip {
                  color: white;
              }
              .el-upload-list__item {
                  &:hover {
                      background: #628ed4;
                  }
                  .el-upload-list__item-name {
                      color: white;
                      height: 30px;
                  }
                  .el-upload-list__item-name [class^='el-icon'] {
                      color: white;
                  }
              }
              .el-upload--text{
                img{
                  width: 200px;
                  height: 200px;
                  border: 2px solid #034b69;
                  box-shadow: 0px 0px 10px #014877;
                }
              }
          }
          .el-radio-group {
              .el-radio {
                  margin-top: 10px;
                  color: white;
              }
              .el-radio.is-bordered + .el-radio.is-bordered {
                  margin-left: 0px;
              }
          }
      }
  }
}
</style>