<template>
  <div id="home_search_qwss">
    <div class="top-serch">
      <el-input
        placeholder="请输入内容 回车搜索"
        v-model="input"
        clearable
        @keyup.enter.native="onSubmit"
      >
      </el-input>
      <el-button type="primary" @click="show=!show">搜索区域限制</el-button>
    </div>
    <div class="bottom-div">
      <div class="pub-div" v-show="checkedCities.filter(n => n == '新闻'||n == 'Facebook'||n == 'Twitter'||n == '智库'||n == '主题分析报告'||n == '简报报告').length>0">
        <div class="pub-top-div">
          <span>舆情监测</span>
        </div>
        <div class="pub-bottom-div" v-show="checkedCities.filter(n => n == '新闻').length>0">
          <div class="pub-top-span">
            <span>新闻</span>
          </div>
          <div class="div-table">
            <component :is="valueSelected" :clientDetails="clientDetails" ref="compoent_new"/>
          </div>
        </div>
        <div class="pub-bottom-div" v-show="checkedCities.filter(n => n == 'Facebook').length>0">
          <div class="pub-top-span">
            <span>Facebook</span>
          </div>
          <div class="div-table">
            <component :is="valueSelected_facebook" :clientDetails="clientDetails_facebook" ref="compoent_facebook"/>
          </div>
        </div>
        <div class="pub-bottom-div" v-show="checkedCities.filter(n => n == 'Twitter').length>0">
          <div class="pub-top-span">
            <span>Twitter</span>
          </div>
          <div class="div-table">
            <component :is="valueSelected_twitter" :clientDetails="clientDetails_twitter" ref="compoent_twitter"/>
          </div>
        </div>
        <div class="pub-bottom-div" v-show="checkedCities.filter(n => n == '智库').length>0">
          <div class="pub-top-span">
            <span>智库</span>
          </div>
          <div class="div-table">
            <component :is="valueSelected_thinkTank" :clientDetails="clientDetails_thinkTank" ref="compoent_thinkTank"/>
          </div>
        </div>
        <div class="pub-bottom-div" v-show="checkedCities.filter(n => n == '主题分析报告').length>0">
          <div class="pub-top-span">
            <span>主题分析报告</span>
          </div>
          <div class="div-table">
            <component :is="valueSelected_ztfxbg" :clientDetails="clientDetails_ztfxbg" ref="compoent_ztfxbg"/>
          </div>
        </div>
        <div class="pub-bottom-div" v-show="checkedCities.filter(n => n == '简报报告').length>0">
          <div class="pub-top-span">
            <span>简报报告</span>
          </div>
          <div class="div-table">
            <component :is="valueSelected_jblb" :clientDetails="clientDetails_jblb" ref="compoent_jblb"/>
          </div>
        </div>
      </div>
      <div class="pub-div" v-show="checkedCities.filter(n => n == '敌方外网资源机构'||n == '敌方内网资源机构'||n == '敌方外网资源人物'||n == '敌方内网资源人物'||n == '敌方资源文献库').length>0">
        <div class="pub-top-div">
          <span>敌方资源</span>
        </div>
        <div class="pub-bottom-div" v-show="checkedCities.filter(n => n == '敌方外网资源机构').length>0">
          <div class="pub-top-span">
            <span>敌方外网资源机构</span>
          </div>
          <div class="div-table">
            <component :is="valueSelected_dfzy_ww_jgk" :clientDetails="clientDetails_dfzy_ww_jgk" ref="compoent_dfzy_ww_jgk"/>
          </div>
        </div>
        <div class="pub-bottom-div" v-show="checkedCities.filter(n => n == '敌方内网资源机构').length>0">
          <div class="pub-top-span">
            <span>敌方内网资源机构</span>
          </div>
          <div class="div-table">
            <component :is="valueSelected_dfzy_nw_jgk" :clientDetails="clientDetails_dfzy_nw_jgk" ref="compoent_dfzy_nw_jgk"/>
          </div>
        </div>
        <div class="pub-bottom-div" v-show="checkedCities.filter(n => n == '敌方外网资源人物').length>0">
          <div class="pub-top-span">
            <span>敌方外网资源人物</span>
          </div>
          <div class="div-table">
            <component :is="valueSelected_dfzy_ww_rwk" :clientDetails="clientDetails_dfzy_ww_rwk" ref="compoent_dfzy_ww_rwk"/>
          </div>
        </div>
        <div class="pub-bottom-div" v-show="checkedCities.filter(n => n == '敌方内网资源人物').length>0">
          <div class="pub-top-span">
            <span>敌方内网资源人物</span>
          </div>
          <div class="div-table">
            <component :is="valueSelected_dfzy_nw_rwk" :clientDetails="clientDetails_dfzy_nw_rwk" ref="compoent_dfzy_nw_rwk"/>
          </div>
        </div>
        <div class="pub-bottom-div" v-show="checkedCities.filter(n => n == '敌方资源文献库').length>0">
          <div class="pub-top-span">
            <span>敌方资源文献库</span>
          </div>
          <div class="div-table">
            <component :is="valueSelected_dfzy_wxk" :clientDetails="clientDetails_dfzy_wxk" ref="compoent_dfzy_wxk"/>
          </div>
        </div>
      </div>
      <div class="pub-div" v-show="checkedCities.filter(n => n == '我方资源机构'||n == '我方资源人物'||n == '我方资源文献库').length>0">
        <div class="pub-top-div">
          <span>我方资源</span>
        </div>
        <div class="pub-bottom-div" v-show="checkedCities.filter(n => n == '我方资源机构').length>0">
          <div class="pub-top-span">
            <span>我方资源机构</span>
          </div>
          <div class="div-table">
            <component :is="valueSelected_wfzy_jgk" :clientDetails="clientDetails_wfzy_jgk" ref="compoent_wfzy_jgk"/>
          </div>
        </div>
        <div class="pub-bottom-div" v-show="checkedCities.filter(n => n == '我方资源人物').length>0">
          <div class="pub-top-span">
            <span>我方资源人物</span>
          </div>
          <div class="div-table">
            <component :is="valueSelected_wfzy_rwk" :clientDetails="clientDetails_wfzy_rwk" ref="compoent_wfzy_rwk"/>
          </div>
        </div>
        <div class="pub-bottom-div" v-show="checkedCities.filter(n => n == '我方资源文献库').length>0">
          <div class="pub-top-span">
            <span>我方资源文献库</span>
          </div>
          <div class="div-table">
            <component :is="valueSelected_wfzy_wxk" :clientDetails="clientDetails_wfzy_wxk" ref="compoent_wfzy_wxk"/>
          </div>
        </div>
      </div>
      <div class="pub-div" v-show="checkedCities.filter(n => n == '战场环境机构'||n == '战场环境人物'||n == '战场环境文献库').length>0">
        <div class="pub-top-div">
          <span>战场环境</span>
        </div>
        <div class="pub-bottom-div" v-show="checkedCities.filter(n => n == '战场环境机构').length>0">
          <div class="pub-top-span">
            <span>战场环境机构</span>
          </div>
          <div class="div-table">
            <component :is="valueSelected_zchj_jgk" :clientDetails="clientDetails_zchj_jgk" ref="compoent_zchj_jgk"/>
          </div>
        </div>
        <div class="pub-bottom-div" v-show="checkedCities.filter(n => n == '战场环境人物').length>0">
          <div class="pub-top-span">
            <span>战场环境人物</span>
          </div>
          <div class="div-table">
            <component :is="valueSelected_zchj_rwk" :clientDetails="clientDetails_zchj_rwk" ref="compoent_zchj_rwk"/>
          </div>
        </div>
        <div class="pub-bottom-div" v-show="checkedCities.filter(n => n == '战场环境文献库').length>0">
          <div class="pub-top-span">
            <span>战场环境文献库</span>
          </div>
          <div class="div-table">
            <component :is="valueSelected_zchj_wxk" :clientDetails="clientDetails_zchj_wxk" ref="compoent_zchj_wxk"/>
          </div>
        </div>
      </div>
      <div class="pub-div" v-show="checkedCities.filter(n => n == '方案预案文献库'||n == '决策支持预案列表').length>0">
        <div class="pub-top-div">
          <span>辅助决策</span>
        </div>
        <div class="pub-bottom-div" v-show="checkedCities.filter(n => n == '方案预案文献库').length>0">
          <div class="pub-top-span">
            <span>方案预案文献库</span>
          </div>
          <div class="div-table">
            <component :is="valueSelected_fzjc_wxk" :clientDetails="clientDetails_fzjc_wxk" ref="compoent_fzjc_wxk"/>
          </div>
        </div>
        <div class="pub-bottom-div" v-show="checkedCities.filter(n => n == '决策支持预案列表').length>0">
          <div class="pub-top-span">
            <span>决策支持预案列表</span>
          </div>
          <div class="div-table">
            <component :is="valueSelected_jczcya" :clientDetails="clientDetails_jczcya" ref="compoent_jczcya"/>
          </div>
        </div>
      </div>
      <div class="pub-div" v-show="checkedCities.filter(n => n == '法律法规文件库').length>0">
        <div class="pub-top-div">
          <span>法律法规</span>
        </div>
        <div class="pub-bottom-div" v-show="checkedCities.filter(n => n == '法律法规文件库').length>0">
          <div class="pub-top-span">
            <span>法律法规文件库</span>
          </div>
          <div class="div-table">
            <component :is="valueSelected_flfg_file" :clientDetails="clientDetails_flfg_file" ref="compoent_flfg_file"/>
          </div>
        </div>
      </div>
      <div class="pub-div" v-show="checkedCities.filter(n => n == '理论学习文件库').length>0">
        <div class="pub-top-div">
          <span>学习训练</span>
        </div>
        <div class="pub-bottom-div" v-show="checkedCities.filter(n => n == '理论学习文件库').length>0">
          <div class="pub-top-span">
            <span>理论学习文件库</span>
          </div>
          <div class="div-table">
            <component :is="valueSelected_xxxl_llxx" :clientDetails="clientDetails_xxxl_llxx" ref="compoent_xxxl_llxx"/>
          </div>
        </div>
      </div>
    </div>
    <el-collapse-transition>
      <div
        v-show="show"
        style="
          position: absolute;
          width: 91%;
          margin-left: 10px;
          box-shadow: rgb(24, 110, 138) 0px 4px 6px;
          background-image: linear-gradient(rgb(29, 45, 70), rgb(21, 67, 100));
          top: 100px;
          padding: 20px 20px 6px 20px;
        ">
        <div style="
            width: 80%;
            margin-left: 13%;">
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          <div style="margin: 15px 0;"></div>
          <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
          </el-checkbox-group>
          <i class="el-icon-caret-top" style="font-size: 34px;margin-left: 50%;color: #00ffd6;cursor: pointer;" title="隐藏" @click="show=false"></i>
        </div>
      </div>
    </el-collapse-transition>
  </div>
</template>

<style lang="scss">
#home_search_qwss {
  width: 100%;
  height: 100%;
  padding: 1% 3% 3% 2%;
  color: white;
  box-sizing: border-box;
  position: relative;
  .top-serch {
    height: 50px;
    margin-top: 40px;
    width: 100%;
    .el-input {
      margin-left: 29%;
      width: 43%;
      height: 40px;
      .el-input__inner {
        background-color: #131e2f00 !important ;
        border: 1px solid #0dada7b0;
        box-shadow: 0 0 10px #1b6097;
        color: #53e4fb;
      }
    }
  }
  .bottom-div {
    width: 100%;
    height: calc(100% - 90px);
    overflow-y: auto;
    .pub-div {
      width: calc(98% - 40px);
      margin-left: 1%;
      padding: 20px;
      background: #253145;
      float: left;
      margin-top: 30px;
      .pub-top-div {
        width: 100%;
        height: 40px;
        line-height: 40px;
        width: 100px;
        background: #58b5fc;
        text-align: center;
        border-radius: 4px;
        font-weight: 900;
        font-size: 14px;
        letter-spacing: 4px;
      }
      .pub-bottom-div {
        height: 380px;
        width: 48%;
        float: left;
        padding: 1%;
        .pub-top-span {
          height: 30px;
          line-height: 30px;
          font-size: 14px;
          letter-spacing: 2;
          width: fit-content;
          background: #ffa148;
          text-align: center;
          padding: 0 30px;
          border-radius: 4px 4px 0px 0px;
        }
        .div-table {
          width: 100%;
          height: calc(100% - 40px);
        }
      }
    }
  }
  //弹框
  .el-dialog {
    .el-dialog__body {
      span {
        div {
          &:first-child {
            text-align: center;
            color: #b3b3b3;
          }
          &:nth-child(3) {
            color: white;
            margin-top: 10px;
            font-size: 13px;
            text-indent: 2em;
          }
        }
      }
    }
    .el-tag {
      height: 20px;
      padding: 0px 8px;
      line-height: 19px;
    }
  }
  .el-checkbox{
    color: #cbd3e4;
    padding: 5px;
  }
}
</style>

<script>
import {
  endLoading,
  get,
  startLoading,
  delete_util,
  post
} from "../../util/http_util";
import navs_new from "../../components/common_search/yqjc/new_search.vue";
import navs_twitter from "../../components/common_search/yqjc/twitter_search.vue";
import navs_facebook from "../../components/common_search/yqjc/facebook_search.vue";
import navs_thinkTank from "../../components/common_search/yqjc/thinkTank_search.vue";
import navs_ztfxbg from "../../components/common_search/yqjc/ztfxbg_search.vue";
import navs_jblb from "../../components/common_search/yqjc/jblb_search.vue";
import navs_dfzy_ww_jgk from "../../components/common_search/dfzy/dfzy_ww_jgk_search.vue";
import navs_dfzy_nw_jgk from "../../components/common_search/dfzy/dfzy_nw_jgk_search.vue";
import navs_dfzy_ww_rwk from "../../components/common_search/dfzy/dfzy_ww_rwk_search.vue";
import navs_dfzy_nw_rwk from "../../components/common_search/dfzy/dfzy_nw_rwk_search.vue";
import navs_dfzy_wxk from "../../components/common_search/dfzy/dfzy_wxk_search.vue";
import navs_wfzy_jgk from "../../components/common_search/wfzy/wfzy_jgk_search.vue";
import navs_wfzy_rwk from "../../components/common_search/wfzy/wfzy_rwk_search.vue";
import navs_wfzy_wxk from "../../components/common_search/wfzy/wfzy_wxk_search.vue";
import navs_zchj_jgk from "../../components/common_search/zchj/zchj_jgk_search.vue";
import navs_zchj_rwk from "../../components/common_search/zchj/zchj_rwk_search.vue";
import navs_zchj_wxk from "../../components/common_search/zchj/zchj_wxk_search.vue";
import navs_fzjc_faya_wxk from "../../components/common_search/fzjc/fzjc_faya_wxk_search.vue";
import navs_jczcya from "../../components/common_search/fzjc/jczcya_search.vue";
import navs_flfg_file from "../../components/common_search/flfg/flfg_search.vue";
import navs_xxxl_llxx from "../../components/common_search/xxxl/llxx_search.vue";
const cityOptions = ['新闻', 'Facebook', 'Twitter', '智库', '主题分析报告', '简报报告', '敌方外网资源机构',
             '敌方内网资源机构', '敌方外网资源人物', '敌方内网资源人物', '敌方资源文献库', '我方资源机构','我方资源人物',
             '我方资源文献库','战场环境机构','战场环境人物','战场环境文献库','方案预案文献库','法律法规文件库','理论学习文件库'];
            //  '决策支持预案列表',
export default {
    components: { 
        "news": navs_new,
        "twitters": navs_twitter,
        "facebooks": navs_facebook,
        "thinkTanks": navs_thinkTank,
        "ztfxbgs": navs_ztfxbg,
        "jblbs": navs_jblb,
        "dfzy_ww_jgks": navs_dfzy_ww_jgk,
        "dfzy_nw_jgks": navs_dfzy_nw_jgk,
        "dfzy_ww_rwks": navs_dfzy_ww_rwk,
        "dfzy_nw_rwks": navs_dfzy_nw_rwk,
        "dfzy_wxks": navs_dfzy_wxk,
        "wfzy_jgks": navs_wfzy_jgk,
        "wfzy_rwks": navs_wfzy_rwk,
        "wfzy_wxks": navs_wfzy_wxk,
        "zchj_jgks": navs_zchj_jgk,
        "zchj_rwks": navs_zchj_rwk,
        "zchj_wxks": navs_zchj_wxk,
        "fzjc_faya_wxks": navs_fzjc_faya_wxk,
        "jczcyas": navs_jczcya,
        "flfg_files": navs_flfg_file,
        "xxxl_llxxs": navs_xxxl_llxx,
    },
    data() {
        return {
            input: "",
            valueSelected:'news',
            clientDetails:{},
            valueSelected_facebook:'facebooks',
            clientDetails_facebook:{},
            valueSelected_twitter:'twitters',
            clientDetails_twitter:{},
            valueSelected_thinkTank:'thinkTanks',
            clientDetails_thinkTank:{},
            valueSelected_ztfxbg:'ztfxbgs',
            clientDetails_ztfxbg:{},
            valueSelected_jblb:'jblbs',
            clientDetails_jblb:{},
            valueSelected_dfzy_ww_jgk:'dfzy_ww_jgks',
            clientDetails_dfzy_ww_jgk:{},
            valueSelected_dfzy_nw_jgk:'dfzy_nw_jgks',
            clientDetails_dfzy_nw_jgk:{},
            valueSelected_dfzy_ww_rwk:'dfzy_ww_rwks',
            clientDetails_dfzy_ww_rwk:{},
            valueSelected_dfzy_nw_rwk:'dfzy_nw_rwks',
            clientDetails_dfzy_nw_rwk:{},
            valueSelected_dfzy_wxk:'dfzy_wxks',
            clientDetails_dfzy_wxk:{},
            valueSelected_wfzy_jgk:'wfzy_jgks',
            clientDetails_wfzy_jgk:{},
            valueSelected_wfzy_rwk:'wfzy_rwks',
            clientDetails_wfzy_rwk:{},
            valueSelected_wfzy_wxk:'wfzy_wxks',
            clientDetails_wfzy_wxk:{},
            valueSelected_zchj_jgk:'zchj_jgks',
            clientDetails_zchj_jgk:{},
            valueSelected_zchj_rwk:'zchj_rwks',
            clientDetails_zchj_rwk:{},
            valueSelected_zchj_wxk:'zchj_wxks',
            clientDetails_zchj_wxk:{},
            valueSelected_fzjc_wxk:'fzjc_faya_wxks',
            clientDetails_fzjc_wxk:{},
            valueSelected_jczcya:'jczcyas',
            clientDetails_jczcya:{},
            valueSelected_flfg_file:'flfg_files',
            clientDetails_flfg_file:{},
            valueSelected_xxxl_llxx:'xxxl_llxxs',
            clientDetails_xxxl_llxx:{},
            checkAll: true,
            cities: cityOptions ,
            checkedCities: cityOptions,
            isIndeterminate: false,
            show:false,
        };
    },
    methods: {
        handleCheckAllChange(val) {
          this.checkedCities = val ? this.cities : [];
          this.isIndeterminate = false;
          this.search();
        },
        handleCheckedCitiesChange(value) {
          let checkedCount = value.length;
          this.checkAll = checkedCount === this.cities.length;
          this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
          this.search();
        },
        search(){
          let _this = this;
          setTimeout(function () {
              if(_this.checkedCities.filter(n => n == '新闻').length>0){
                _this.clientDetails={
                    input: _this.input,
                };
              }
              if(_this.checkedCities.filter(n => n == 'Facebook').length>0){
                _this.clientDetails_facebook={
                    input: _this.input,
                };
              }
              if(_this.checkedCities.filter(n => n == 'Twitter').length>0){
                _this.clientDetails_twitter={
                    input: _this.input,
                };
              }
              if(_this.checkedCities.filter(n => n == '智库').length>0){
                _this.clientDetails_thinkTank={
                    input: _this.input,
                };
              }
              if(_this.checkedCities.filter(n => n == '主题分析报告').length>0){
                _this.clientDetails_ztfxbg={
                    input: _this.input,
                };
              }
              if(_this.checkedCities.filter(n => n == '简报报告').length>0){
                _this.clientDetails_jblb={
                    input: _this.input,
                };
              }
              if(_this.checkedCities.filter(n => n == '敌方外网资源机构').length>0){
                _this.clientDetails_dfzy_ww_jgk={
                    input: _this.input,
                };
              }
              if(_this.checkedCities.filter(n => n == '敌方内网资源机构').length>0){
                _this.clientDetails_dfzy_nw_jgk={
                    input: _this.input,
                };
              }
              if(_this.checkedCities.filter(n => n == '敌方外网资源人物').length>0){
                _this.clientDetails_dfzy_ww_rwk={
                    input: _this.input,
                };
              if(_this.checkedCities.filter(n => n == '敌方内网资源人物').length>0){
                _this.clientDetails_dfzy_nw_rwk={
                    input: _this.input,
                };
              }
              if(_this.checkedCities.filter(n => n == '敌方资源文献库').length>0){
                _this.clientDetails_dfzy_wxk={
                    input: _this.input,
                };
              }
              if(_this.checkedCities.filter(n => n == '我方资源机构').length>0){
                _this.clientDetails_wfzy_jgk={
                    input: _this.input,
                };
              }
              if(_this.checkedCities.filter(n => n == '我方资源人物').length>0){
                _this.clientDetails_wfzy_rwk={
                    input: _this.input,
                };
              }
              if(_this.checkedCities.filter(n => n == '我方资源文献库').length>0){
                _this.clientDetails_wfzy_wxk={
                    input: _this.input,
                };
              }
              if(_this.checkedCities.filter(n => n == '战场环境机构').length>0){
                _this.clientDetails_zchj_jgk={
                    input: _this.input,
                };
              }
              if(_this.checkedCities.filter(n => n == '战场环境人物').length>0){
                _this.clientDetails_zchj_rwk={
                    input: _this.input,
                };
              }
              if(_this.checkedCities.filter(n => n == '战场环境文献库').length>0){
                _this.clientDetails_zchj_wxk={
                    input: _this.input,
                };
              }
              if(_this.checkedCities.filter(n => n == '方案预案文献库').length>0){
                _this.clientDetails_fzjc_wxk={
                    input: _this.input,
                };
              }
              if(_this.checkedCities.filter(n => n == '决策支持预案列表').length>0){
                _this.clientDetails_jczcya={
                    input: _this.input,
                };
              }
              if(_this.checkedCities.filter(n => n == '法律法规文件库').length>0){
                _this.clientDetails_flfg_file={
                    input: _this.input,
                };
              }
              if(_this.checkedCities.filter(n => n == '理论学习文件库').length>0){
                _this.clientDetails_xxxl_llxx={
                    input: _this.input,
                };
              }
            }
          }, 300);
        },
        onSubmit(){
          this.show = false;
          this.search();
        }
    },
    computed: {},
    activated() {
    },

};
</script>