<template>
  <div id="rdsj">
    <div class="rdsj-module">
      <div class="rdsj-div">
        <div class="rdsj-title">
          <div class="title">新闻</div>
          <div class="change-content" @click="change_data(0)">
            &nbsp; <i class="el-icon-refresh"></i>换一换
          </div>
        </div>
        <div class="rdsj-table">
          <table>
            <tr v-for="(item, index) in data_news" @click="show_newsInfo(item.id)">
              <td>
                <span class="tag" v-text="index+1" :style="{
                    background:
                      index == 0
                        ? 'red'
                        : index == 1
                        ? 'orange'
                        : index == 2
                        ? 'yellow'
                        : '#ddd',
                    color: index == 0 || index == 1 ? 'white' : 'black',
                  }"></span>
              </td>
              <td class="new-title" :title="item.title" v-text="item.title"></td>
              <td v-text="item.score"></td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <div class="rdsj-module">
      <div class="rdsj-div">
        <div class="rdsj-title">
          <div class="title">社交</div>
          <div class="change-content" @click="change_data(1)">
            &nbsp; <i class="el-icon-refresh"></i>换一换
          </div>
        </div>
        <div class="rdsj-table">
          <table>
            <tr v-for="(item, index) in data_twitter" @click="show_twitterInfo(item)">
              <td>
                <span class="tag" v-text="index+1" :style="{
                    background:
                      index == 0
                        ? 'red'
                        : index == 1
                        ? 'orange'
                        : index == 2
                        ? 'yellow'
                        : '#ddd',
                    color: index == 0 || index == 1 ? 'white' : 'black',
                  }"></span>
              </td>
              <td class="new-title" :title="item.title" v-text="item.title"></td>
              <td v-text="item.score"></td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <div class="rdsj-module">
      <div class="rdsj-div">
        <div class="rdsj-title">
          <div class="title">涉华</div>
          <div class="change-content" @click="change_data(2)">
            &nbsp; <i class="el-icon-refresh"></i>换一换
          </div>
        </div>
        <div class="rdsj-table">
          <table>
            <tr v-for="(item, index) in module[2].data">
              <td>
                <span class="tag" v-text="index+1" :style="{
                    background:
                      index == 0
                        ? 'red'
                        : index == 1
                        ? 'orange'
                        : index == 2
                        ? 'yellow'
                        : '#ddd',
                    color: index == 0 || index == 1 ? 'white' : 'black',
                  }"></span>
              </td>
              <td class="new-title" :title="item.text" v-text="item.text"></td>
              <td v-text="item.num"></td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <div class="rdsj-module">
      <div class="rdsj-div">
        <div class="rdsj-title">
          <div class="title">预警</div>
          <div class="change-content" @click="change_data(3)">
            &nbsp; <i class="el-icon-refresh"></i>换一换
          </div>
          <i class="el-icon-setting" title="新建主题" @click="add_xjzt"></i>
        </div>
        <div class="rdsj-table">
          <table>
            <tr v-for="(item, index) in module[3].data">
              <td>
                <span class="tag" v-text="index+1" :style="{
                    background:
                      index == 0
                        ? 'red'
                        : index == 1
                        ? 'orange'
                        : index == 2
                        ? 'yellow'
                        : '#ddd',
                    color: index == 0 || index == 1 ? 'white' : 'black',
                  }"></span>
              </td>
              <td class="new-title" :title="item.title" v-text="item.title"></td>
              <td v-text="item.score"></td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <!-- //新增主题弹出层 -->
    <el-dialog title="预警设置" :visible.sync="dialogVisible" width="30%" class="xzzt-div">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="预警方式" prop="ztlb">
          <el-select v-model="ruleForm.ztlb">
            <el-option label="方式一" value="1"></el-option>
            <el-option label="方式二" value="2"></el-option>
            <el-option label="方式三" value="3"></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.input1">
                <template slot="prepend">包含以下任一关键词</template>
              </el-input>
              <el-input placeholder="多个关键词用英文逗号,隔开，数据同时包含任一关键词时，将保留此条数据记录" v-model="jxgjcdx.input2">
                <template slot="prepend">包含以下任一关键词</template>
              </el-input>
              <el-input placeholder="多个关键词用英文逗号,隔开，数据同时包含任一关键词时，将保留此条数据记录" v-model="jxgjcdx.input3">
                <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">
            </el-input>
          </div>
          <div class="gjz-textarea" v-show="index1 == 2">
            <el-input type="textarea" :rows="7"
              placeholder="关键词用英文括号引'+'表示'并且'，'|'表示'或'，'-'表示'不包含'；举例：上海 + (世博会 | 世界博览会) - (求职 | 卖房)，表示文章中即同时出现“上海”和“世博会”或者 '上海'和'世界博览会'中任意组合，又不包含'卖房'或者'求职'中的任意一个排除词，就能监测到"
              v-model="jxgjcdx.textarea1">
            </el-input>
          </div>
        </div>
        <el-form-item label="日期范围" style="margin-top: 20px">
          <el-date-picker v-model="sj_time.value1" type="daterange" range-separator="至" start-placeholder="起始时间"
            end-placeholder="结束时间" :default-time="['00:00:00', '23:59:59']">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="媒体范围">
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" class="fla">全选
          </el-checkbox>
          <el-checkbox-group v-model="checkedFruits" @change="handleCheckedFruitsChange" class="fla">
            <el-checkbox v-for="fruit in fruitsArr" :label="fruit" :key="fruit">{{ fruit }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <div class="sjyl-span" @click="sjzl">
          <span>数据预览</span>
        </div>
      </el-form>
    </el-dialog>

    <!-- //数据预览 -->
    <el-dialog title="数据预览" :visible.sync="outerVisible" width="30%" class="sjyl-div">
      <div class="icon-div"></div>
      <div class="ppsj-span">
        <span>当前已匹配数据</span>&nbsp;<span style="color: red" v-text="all_data">
        </span>&nbsp;<span>条，最终以实际导入为准</span>
      </div>
      <div style="width: 100%; height: 80%; overflow: hidden">
        <el-table height="330px" v-loading="loading" element-loading-text="数据抽取中，等待时间较长"
          element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"
          v-el-table-infinite-scroll="load" :data="sjyl_tableData">
          <el-table-column prop="date" width="180"> </el-table-column>
          <el-table-column prop="name"> </el-table-column>
          <el-table-column prop="address" width="80"> </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="outerVisible = false" class="syy-button">上一页</el-button>
        <el-button type="primary" @click="outerVisible = false" class="bczt-button">保存专题</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
const exampleData = new Array(10).fill({
  date: "2016-05-02",
  name: "王小虎",
  address: "4 min",
});
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 elTableInfiniteScroll from "el-table-infinite-scroll";
import title_bg from "../../assets/img/main/02.png";
import div_bg from "../../assets/img/main/03.png";
import "../../assets/css/rdsj.css";
import { get, post } from "../../util/http_util";
import { Notification } from "element-ui";
export default {
  name: "rdsj",
  directives: {
    "el-table-infinite-scroll": elTableInfiniteScroll,
  },
  data() {
    return {
      xjmlForm: {
        mlbtname: "", //目录标题名称
      },
      xjmlrules: {
        mlbtname: [
          { required: true, message: "请输入专题名称", trigger: "blur" },
        ],
      },
      loading: false,
      all_data: 30,
      sjyl_tableData: exampleData,
      count: 0,
      tableChecked: [], //被选中的记录数据-----对应“批量删除”传的参数值
      jxgjcdx: {
        input1: "",
        input2: "",
        input3: "",
        input4: "",
        textarea: "",
        textarea1: "",
      },
      img1: img1,
      img2: img2,
      img3: img3,
      fruitsArr: [], //一共有多少个选项
      checkAll: true,
      checkedFruits: ["新闻"], //默认选中的值
      isIndeterminate: false,
      dialogVisible: false, //新建主题值
      outerVisible: false, //新建主题
      sj_time: {
        value: "",
        value1: "",
      },
      form: {
        name: "",
        type: [],
        region: "全网数据专题",
      },
      ruleForm: {
        ztlb: "",
      },
      rules: {
        ztlb: [
          { required: true, message: "请选择专题类别", trigger: "change" },
        ],
      },
      js_data: [
        { name: "关键词检索" },
        { name: "富关键词检索" },
        { name: "简约检索" },
      ],
      index1: 0,

      title_bg: title_bg,
      div_bg: div_bg,
      module: [
        {
          title: "新闻",
          data: [
            { index: 1, title: "专家解读延迟退休如何进行", num: 565645 },
            { index: 2, title: "苏伊士运河搁浅货轮因潮汐脱困", num: 553655 },
            { index: 3, title: "香港基本附件一附件二完成修订", num: 545355 },
            { index: 4, title: "亚裔男子在纽约地铁遭黑人毒打", num: 123566 },
            { index: 5, title: "佛洛伊德家法院外跪地9分钟", num: 92441 },
            { index: 6, title: "特朗普个人网站正式上线", num: 68852 },
          ],
        },
        {
          title: "社交",
          data: [
            { index: 1, text: "专家解读延迟退休如何进行", num: 565645 },
            { index: 2, text: "苏伊士运河搁浅货轮因潮汐脱困", num: 553655 },
            { index: 3, text: "香港基本附件一附件二完成修订", num: 545355 },
            { index: 4, text: "亚裔男子在纽约地铁遭黑人毒打", num: 123566 },
            { index: 5, text: "佛洛伊德家法院外跪地9分钟", num: 92441 },
            { index: 6, text: "特朗普个人网站正式上线", num: 68852 },
          ],
        },
        {
          title: "涉华",
          data: [
            { index: 6, text: "特朗普个人网站正式上线", score: 554 },
            { index: 1, text: "专家解读延迟退休如何进行", num: 565645 },
            { index: 2, text: "苏伊士运河搁浅货轮因潮汐脱困", num: 553655 },
            { index: 3, text: "香港基本附件一附件二完成修订", num: 545355 },
            { index: 4, text: "亚裔男子在纽约地铁遭黑人毒打", num: 123566 },
            { index: 5, text: "佛洛伊德家法院外跪地9分钟", num: 92441 },
            { index: 6, text: "特朗普个人网站正式上线", num: 68852 },
          ],
        },
        {
          title: "预警",
          data: [
            { title: "专家解读延迟退休如何进行", score: 565 },
            { title: "苏伊士运河搁浅货轮因潮汐脱困", score: 555 },
            { title: "香港基本附件一附件二完成修订", score: 554 },
            { title: "亚裔男子在纽约地铁遭黑人毒打", score: 554 },
            { title: "佛洛伊德家法院外跪地9分钟", score: 554 }
          ],
        },
      ],
      test_data: [
        [
          { index: 1, text: "瑞丽新增6例确诊23例无症状", num: "151555" },
          { index: 2, text: "华南海鲜市场动物制品未发现阳性", num: "150015" },
          { index: 3, text: "14国质疑世卫溯源报告 外交部回应", num: "132542" },
          { index: 4, text: "在沪停留超24小时需登记系误读", num: "128984" },
          { index: 5, text: "红火蚁已入侵12省份 专家支招", num: "110025" },
          { index: 6, text: "王伟牺牲20周年", num: "98562" },
        ],
        [
          { index: 1, text: "加拿大宣称其军舰航经南海", num: "151555" },
          { index: 2, text: "国内成品油价格下调 加一箱少花9元", num: "150015" },
          { index: 3, text: "国防部提醒日方停止挑衅中国", num: "132542" },
          { index: 4, text: "苏伊士运河通航首船挂香港特区区旗", num: "128984" },
          { index: 5, text: "世卫组织发布新冠病毒溯源报告", num: "110025" },
          { index: 6, text: "外交部回应美欲放宽与台湾官方往来", num: "98562" },
        ],
        [
          { index: 1, text: "加拿大宣称其军舰航经南海", num: "151555" },
          { index: 2, text: "国内成品油价格下调 加一箱少花9元", num: "150015" },
          { index: 3, text: "国防部提醒日方停止挑衅中国", num: "132542" },
          { index: 4, text: "苏伊士运河通航首船挂香港特区区旗", num: "128984" },
          { index: 5, text: "世卫组织发布新冠病毒溯源报告", num: "110025" },
          { index: 6, text: "外交部回应美欲放宽与台湾官方往来", num: "98562" },
        ],
        [
          {
            index: 1,
            title: "常驻日内瓦代表团发言人刘玉印驳斥英国等官员涉华错误言论",
            score: "151555",
          },
          {
            index: 2,
            title: "BBC驻北京记者已转移至台湾 此前涉华报道“劣迹斑斑”",
            score: "150015",
          },
          {
            index: 3,
            title: "国防部:就日方近期一系列涉华消极举动表示强烈不满",
            score: "132542",
          },
          {
            index: 4,
            title: "加拿大宣称其军舰航经南海：“通过了邻近中国的敏感水域”",
            score: "128984",
          },
          { index: 5, title: "涉华敏感问题,美媒发现他们“不同”", num: "110025" },
          {
            index: 6,
            title: "外交部就BBC涉华不实报道提严正交涉:停止对华污蔑",
            score: "98562",
          },
        ],
      ],
      tmp_data: [],
      data_news: [],
      data_twitter: [],
    };
  },
  methods: {
    change_data(index) {
      if (index == 0||index==1) {
        this.queryHot(index);
      } else {
        this.tmp_data = this.module[index].data;
        this.module[index].data = this.test_data[index];
        this.test_data[index] = this.tmp_data;
      }
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.tableChecked = val;
    },
    //新增主题
    add_xjzt() {
      this.dialogVisible = true;
    },
    // 全选事件
    handleCheckAllChange(val) {
      this.checkedFruits = val ? this.fruitsArr : [];
      this.isIndeterminate = false;
    },
    handleCheckedFruitsChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.fruitsArr.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.fruitsArr.length;
    },
    sjzl() {
      this.outerVisible = true;
    },
    jx_select(index) {
      this.index1 = index;
    },
    //table无限滚动刷新
    load() {
      this.loading = true;
      setTimeout(() => {
        this.sjyl_tableData = this.sjyl_tableData.concat(exampleData);
        this.loading = false;
      }, 2000);
    },
    show_newsInfo(id) {
      this.$router.push({ name: "新闻详情" + this.$route.meta.type_name, params: { key: id } });
    },
    show_twitterInfo(item) {
      this.$router.push({ name: "Twitter热搜列表" + this.$route.meta.type_name, params: item });
    },
    queryHot(type) {
      if (type == 0) {
        get("api/rest/fulltext/hotNews")
          .then((res) => {
            this.data_news = res;
          })
          .catch((err) => {
            console.log(err);
          });
      } else if (type == 1) {
        get("api/rest/fulltext/hotTwitter")
          .then((res) => {
            this.data_twitter = res;
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
  },
  mounted() {
    post("api/rest/sentiment/querySource")
      .then((res) => {
        this.fruitsArr = res.filter((e) => e.level == 1).map((e) => e.name);
      })
      .catch((err) => {
        console.log(err);
      });
      
      this.queryHot(0);
      this.queryHot(1);
  },
  computed:{
    wsMessages() {
      return this.$store.getters.wsMessages;
    }
  },
  watch:{
    wsMessages(newVal,oldVal){
      let that = this;
      let achieveMessage = eval('('+newVal+')');
      if(achieveMessage.type == '预警'){
        let obj = {};
        obj.title = achieveMessage.content.title;
        obj.score = achieveMessage.content.score;
        that.module[3].data.unshift(obj);
      }
    }
  }
};
</script>

<style lang="scss">
.xzzt-div {
  .el-dialog__title {
    color: #ffff;
  }
  .el-dialog__header {
    text-align: center;
  }
  .wjjs-div {
    width: 100%;
    height: 200px;
    background-size: 100% 100%;
    .gjz-bitton {
      width: 100%;
      height: 35px;
    }
    .gjz-input {
      width: 100%;
      height: calc(100% - 35px);
      .el-input-group {
        width: 75%;
        margin-left: 80px;
        margin-bottom: 10px;
      }
      .el-input-group__prepend {
        background-color: #1d2d46;
        color: #ffff;
        border: unset;
      }
    }
    .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-input__inner {
      background-color: transparent;
      color: #ffffffad;
      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;
    }
  }
}
.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 tr {
    background-color: #1d2d47;
    color: #ffff;
    font-size: 15px;
  }
  .el-table th {
    background-color: #1d2d47;
    border: unset;
  }
  .el-table th.is-leaf,
  .el-table td {
    border-bottom: 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: #82848a78;
  }
  .el-table_2_column_12 {
    text-align: center !important;
  }
}
</style>
