<template>
  <div id="case-list-content">
    <div style="margin-bottom:30px" class="case-banner">
      <portal-header @type1="handleType" :type="queryCondition" current="case" textColor="#fff" @emitInput="emitInput" @showClass="showClass"></portal-header>
    </div>
    <div class="xcontent2">
      <!-- 新增的案例分类 -->
    <!-- <div class="xcontent2-minor" style="margin-right:36px;">
      <div class="course-title-style">
        <div class="imgTilte">
          <div>案例分类</div>
          <div>COURSE</div>
        </div>
      </div>
      <div class="course-list">
        <div class="course-one" v-for="one in treeList" :key="one.id" @click.stop="handleOptionClick(one, 1, treeList)">
          <div class="course-one-content">{{ one.name }}</div>
          <div class="course-two" v-for="(twoList, twoIndex) in one.children" :key="twoList.id"
            @click.stop="handleOptionClick(twoList, 2, one.children)"
            :class="{ courseTwoActive: twoList.id == twoId || twoList.checked }" @mouseleave.stop="leaveIndex"
            @mouseenter.stop="changeIndex(twoList.id)"
            >
            <el-popover class="popover" popper-class='coursePopperClass' placement="right-start" width="536"
              :disabled="!twoList.children.length" :open-delay="0" :close-delay="0" trigger="hover" :visible-arrow="false"
              @hide="leaveIndex" @show="changeIndex(twoList.id)" transition="none">
              <div class="course-two-content" slot="reference">{{ twoList.name }}</div>
              <div class="course-three-box">
                <div class="course-three-box-title">
                  {{ twoList.name }}
                </div>
                <div style="padding: 0 40px;display: flex;flex-wrap: wrap;">
                  <div :class="threeList.checked ? 'threeActive' : ''" v-for="threeList in twoList.children"
                    :key="threeList.id" @click.stop="handleOptionClick(threeList, 3, twoList.children)"
                    class="course-three">
                    <span>{{ threeList.name }}</span>
                  </div>
                </div>
              </div>
            </el-popover>
          </div>
        </div>
      </div>
    </div> -->
      <div class="xcontent2-main" style="margin-right: 30px;">
        <div class="left-div">
          <div class="search-div">
            <div class="searchbar" v-if="tagList.length > 0">
              <div style="line-height: 30px;">
                <span class="item-title">搜索条件</span>
                <el-tag closable v-for="(tag, tagIdx) in tagList" :key="tagIdx" @close="tagsClose(tag, tagIdx)">{{
                  tag.name
                }}</el-tag>
              </div>
            </div>
            <div class="search-item">
              <div style="margin-top:10px; display: flex;margin-bottom:24px;">
                <div style="flex:1;">
                  <div class="field">
                    <div style="line-height: 25px;padding-right: 10px;padding-left: 0;">
                      <!-- <img class="orgaicon" :src="`${webBaseUrl}/images/orgaimg.png`" alt=""> -->
                      <span class="item-title">组织领域</span>
                      <span class="item-line"></span>
                    </div>
                    <div style="padding:0;" :class="oneTagAll ? 'fieldactive' : ''" @click="domainall(1)">全部</div>
                    <div class="fieldbox">
                      <div :class="item.fielclass ? 'fieldactive' : ''" @click="fieldswich(item, 1)"
                        v-for="(item, idx) in domain" :key="'a' + idx">
                        {{ item.name }}
                      </div>
                    </div>
                  </div>
                  <!-- <el-checkbox-group v-model="queryCondition.orgDomain" size="mini" @change="search()">
                          <el-checkbox-button :label="null">全部</el-checkbox-button>
                          <el-checkbox-button v-for="item in domain" :key="item.code" :label="item.code"> {{ item.name}}</el-checkbox-button>
                        </el-checkbox-group> -->

                  <!-- 二级分类 -->
                  <!-- <div class="field" v-if="twoList.length > 0" style="margin-top: 24px;">
                    <div style="line-height: 25px;padding-right: 10px;padding-left: 0;">
                      <span class="item-title">二级分类</span>
                      <span class="item-line"></span>
                    </div>
                    <div style="padding:0;" :class="twoTagAll ? 'fieldactive' : ''" @click="domainall(2)">全部</div>
                    <div class="fieldbox">
                      <div :class="item.fielclass ? 'fieldactive' : ''" @click="fieldswich(item, 2)"
                        v-for="(item, idx) in twoList" :key="'b' + idx">{{ item.name }}</div>
                    </div>
                  </div> -->
                  <!-- 三级分类 -->
                  <!-- <div class="field" v-if="threeList.length > 0" style="margin-top: 24px;">
                    <div style="line-height: 25px;padding-right: 10px;padding-left: 0;">
                      <span class="item-title">三级分类</span>
                      <span class="item-line"></span>
                    </div>
                    <div style="padding:0;" :class="threeTagAll ? 'fieldactive' : ''" @click="domainall(3)">全部</div>
                    <div class="fieldbox">
                      <div :class="item.fielclass ? 'fieldactive' : ''" @click="fieldswich(item, 3)"
                        v-for="(item, idx) in threeList" :key="'c' + idx">{{ item.name }}</div>
                    </div>
                  </div> -->
                </div>
              </div>
            </div>
            <!-- 专业分类 -->
            <div class="search-div-collapse">
              <div class="search-item">
                <div style="margin-top:10px; display: flex;">
                  <div style="line-height: 25px;padding-right: 10px;white-space: nowrap;">
                    <!-- <img class="orgaicon" :src="`${webBaseUrl}/images/specimg.png`" alt=""> -->
                    <span class="item-title">专业分类</span>
                    <span class="item-line"></span>
                  </div>
                  <div style="flex:1;" id="searchBox">
                    <div class="field">
                      <div style="padding:0;" :class="speciAll ? 'fieldactive' : ''" @click="majorall()">全部</div>
                      <div class="fieldbox">
                        <div :class="item.fielclass ? 'fieldactive' : ''" @click="fieldmajor(item)"
                          v-for="(item, idx) in speciData" :key="'d' + idx">{{ item.name }}({{ item.explanation }})</div>
                      </div>
                    </div>
                    <!-- <el-radio-group style="display:flex;" v-model="queryCondition.majorType" size="mini" @change="search()">
                            <el-radio-button :label="null">全部</el-radio-button>
                            <div>
                              <el-radio-button v-for="item in speciData" :key="item.code" :label="item.code" > {{ item.name }} </el-radio-button>
                            </div>
                          </el-radio-group> -->
                  </div>
                </div>

              </div>
            </div>
            <div class="searBox" v-if="searchwd">
              <el-button type="text" id="closeSearchBtn" @click="closeSearch">
                {{ word }}
                <i :class="showAll ? 'el-icon-arrow-up ' : 'el-icon-arrow-down'"></i>
              </el-button>
            </div>
          </div>
          <div style="height:30px;background-color:#f6f7fc;"></div>
          <div class="order-div" style="border-bottom:none">
            <span class="quyer-tag">
              <el-button type="text" class="order-class" @click="searchexcellent('excellent')"
                :class="{ actice: queryCondition.type == 'excellent' }">最佳案例</el-button>
              <el-button type="text" class="order-class" @click="searchexcellent('recommend')"
                :class="{ actice: queryCondition.type == 'recommend' }">推荐案例</el-button>
              <el-button type="text" class="order-class" @click="searchexcellent('hot')"
                :class="{ actice: queryCondition.type == 'hot' }">最热</el-button>
              <el-button type="text" class="order-class" @click="searchexcellent('new')"
                :class="{ actice: queryCondition.type == 'new' }">最新</el-button>
            </span>
            <div style="flex: 1; display: flex; justify-content: flex-end;align-items: center;">
              <div style="margin-right: 20px;color: #6E7B84;font-size: 14px;">当前已检索 <span style="color:#387DF7;">
                  {{ caseList.count }}</span> 条数据</div>
              <el-select v-model="years" multiple collapse-tags
                style="margin-left: 20px; width: 147px; border-radius:20px !important;" placeholder="全部年份">
                <el-option v-for="item in caseYears" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="data-content">
            <div v-for="item in caseList.list" :key="item.id" class="case-list">
              <div class="case-info">
                <div class="case-info-cont">
                  <!-- <router-link :to="'/case/detail?id=' + item.id"> -->
                  <div @click="toCaseDetail(item.id, item.refId)" style="cursor: pointer;">
                    <div class="case-info-title">
                      <div class="case-titdiv">
                        <div class="case-tittext">
                          <span class="title-line-ellipsis" v-html="item.title"></span>
                        </div>
                        <div class="case-activeText">
                          <span v-if="item.breCommend" class="comWords"
                            style="background-color:rgba(232, 139, 72);">荐</span>
                          <span v-if="item.excellent" class="comWords" style="background-color:red;">最佳</span>
                        </div>
                        <div class="case-info-date portal-time">
                          <i class="el-icon-time"></i>
                          <time-show :time="item.sysCreateTime"></time-show>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- </router-link> -->
                  <div style="height:58px;padding-top:14px ">
                    <author :avatar="item.authorInfo.avatar" :name="item.authorInfo.name" :info="item.authorInfo.orgInfo"
                      :sex="item.authorInfo.sex" :aid="item.authorInfo.aid">
                      <template>
                        <div v-if="item.breCommend"
                          style="padding-top: 6px;flex: 1;display: flex;justify-content: flex-end;color: #999;font-size: 12px;">
                          <span>{{ item.recommendOrgName }}推荐</span>
                        </div>
                      </template>
                    </author>
                  </div>
                  <!-- <router-link :to="'/case/detail?id=' + item.id"> -->
                  <div @click="toCaseDetail(item.id, item.refId)" style="cursor: pointer;">
                    <div class="keyword-text clearfix">
                      <div style="color:#2974D6;font-weight: 450;" v-if="item.orgDomainParent">
                        {{ orgDomainTranslate(item.orgDomainParent) }}
                      </div>
                      <!-- <div style="color:#2974D6;font-weight: 450;" v-if="item.orgDomain">{{ orgDomainTranslate(item.orgDomain) }}</div> -->
                      <div style="color:#2974D6;font-weight: 450;" v-for="(item, idx) in item.majorType" :key="idx">
                        {{ majorTypeTranslate(item) }}
                      </div>
                      <div v-if="item.keyword1">{{ item.keyword1 }}</div>
                      <div v-if="item.keyword2">{{ item.keyword2 }}</div>
                      <div v-if="item.keyword3">{{ item.keyword3 }}</div>
                      <div v-if="item.keyword4">{{ item.keyword4 }}</div>
                      <div v-if="item.keyword5">{{ item.keyword5 }}</div>
                    </div>
                  </div>
                  <!-- </router-link> -->
                  <div class="case-info-summary two-line-ellipsis" @click="toCaseDetail(item.id, item.refId)">
                    {{ item.summary }}
                    <!-- <router-link :to="'/case/detail?id='+item.id"> -->
                    <!-- {{displayAll(item)}} -->
                    <!-- </router-link> -->
                    <!-- <span style="color:#588afc;cursor:pointer;" v-if="item.summary.length>150" @click.stop="changeIsAll(item)"> -->
                    <!-- {{item.isAll?'收起':'展开'}} -->
                    <!-- </span> -->
                  </div>
                  <div style="display: flex;justify-content: flex-end;">
                    <div style="margin:8px 0;">
                      <interactBar :type="3" :data="item" :comments="false" :shares="true"></interactBar>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-if="caseList.showPagCount > queryCondition.pageSize">
              <pagination :size="queryCondition.pageSize" :total="caseList.count" :page="queryCondition.pageIndex"
                layout="total, prev, pager, next, jumper" @change-page="currentChange"></pagination>
            </div>
          </div>
          <div class="pagination-div">
            <!-- <span class="pag-text" @click="loadMore()" v-if="moreState == 1">加载更多</span>
            <span class="pag-text-msg" v-else-if="moreState == 2">数据加载中</span>
            <span class="pag-text-msg" v-else-if="moreState == 3">没有更多数据了</span> -->
            <span class="notcoures" v-if="caseList.list.length == 0">
              <img :src="`${webBaseUrl}/images/nocase.png`" alt="">
              <h5>暂无案例，请优先学习其它案例吧～</h5>
            </span>
            <!-- <span class="pag-text-msg" v-else-if="isSeach">没有查询到相关内容</span> -->
          </div>
          <div v-if="isSeach" style="height:382px">
          </div>
        </div>

      </div>
      <!-- 打开排行榜 -->
      <div class="xcontent2-minor">
        <div id="fixd-box">
          <div class="portal-ranking ranking-bg">
            <p class="ranking-title">好评榜</p>
            <ul class="ranking-data">
              <li v-for="(item, index) in Positive" :key="index" class="title-line-ellipsis"
                style="cursor: pointer;margin-top:30px;line-height: 22px;">
                <router-link :to="'/case/detail?id=' + item.id">
                  <span class="portal-right-text blue-one" v-if="index == 0">
                    <img :src="`${webBaseUrl}/images/listblue01.png`" alt="">
                  </span>
                  <span class="portal-right-text blue-tow" v-if="index == 1">
                    <img :src="`${webBaseUrl}/images/listblue02.png`" alt="">
                  </span>
                  <span class="portal-right-text blue-three" v-if="index == 2">
                    <img :src="`${webBaseUrl}/images/listblue03.png`" alt="">
                  </span>
                  <span class="portal-right-text" v-if="index == 3">
                    <img :src="`${webBaseUrl}/images/list04.png`" alt="">
                  </span>
                  <span class="portal-right-text" v-if="index == 4">
                    <img :src="`${webBaseUrl}/images/list05.png`" alt="">
                  </span>
                  <span class="portal-title-desc" style="font-size: 14px;">{{ item.title }}</span>
                </router-link>
              </li>
            </ul>
          </div>
          <div class="portal-ranking ranking-bg1" style="margin-top:26px">
            <p class="ranking-title">人气榜</p>
            <ul class="ranking-data">
              <li v-for="(item, index) in Popularity" :key="index" class="title-line-ellipsis"
                style="cursor: pointer;margin-top:30px;line-height: 22px;">
                <router-link :to="'/case/detail?id=' + item.id">
                  <span class="portal-right-text orange-one" v-if="index == 0">
                    <img :src="`${webBaseUrl}/images/list-01.png`" alt="">
                  </span>
                  <span class="portal-right-text orange-tow" v-if="index == 1">
                    <img :src="`${webBaseUrl}/images/list02.png`" alt="">
                  </span>
                  <span class="portal-right-text orange-three" v-if="index == 2">
                    <img :src="`${webBaseUrl}/images/list03.png`" alt="">
                  </span>
                  <span class="portal-right-text" v-if="index == 3">
                    <img :src="`${webBaseUrl}/images/list04.png`" alt="">
                  </span>
                  <span class="portal-right-text" v-if="index == 4">
                    <img :src="`${webBaseUrl}/images/list05.png`" alt="">
                  </span>
                  <span class="portal-title-desc" style="font-size: 14px;">{{ item.title }}</span>
                </router-link>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div style="height: 50px;"></div>
      <el-dialog class="protocol" :close-on-click-modal="false" :visible.sync="protocolDialogVisible" width="30%"
        :show-close="false">
        <div class="protocol-title">案例查阅及使用用户协议</div>
        <div class="protocol-content">
          &emsp;&emsp;本专区内案例为BOE各组织沉淀的通用案例、 组织案例、卓越绩效案例、管理案例、 职级晋升案例、企业文化案例等。 案例内容记录作者亲历的、真实的、已完成的、
          典型工作事件，提炼解决具体问题的心得、思路经验、方法等。 仅供BOE员工查询、学习、交流使用，未经允许不得以任何方式外传。
        </div>
        <span slot="footer" class="dialog-footer">
          <el-checkbox label="我已阅读并同意。" @change="protocolCheck" style="float: left"></el-checkbox>
          <el-tooltip :disabled="!protocolConfirmButton" effect="light" content="请先勾选‘我已阅读并同意。’" placement="bottom">
            <span><el-button type="primary" :disabled="protocolConfirmButton" @click="protocolConfirm">确
                定</el-button></span>
          </el-tooltip>
        </span>
      </el-dialog>
    </div>
    <portal-footer></portal-footer>
    <portalFloatTools></portalFloatTools>
    <!-- U课堂弹窗 -->
    <div class="u-class">
      <el-dialog :visible.sync="showUClass" width="833px">
        <div class="ClassBoxContent">
          <img src="../../../assets/images/u_class.png" alt="" class="img" />
          <div class="ContentBox">
            <div class="left">
              <div class="title">U选小课堂</div>
              <div class="jy">项目简介</div>
              <div class="msg">
                于22年首推，是一个面向全集团员工开放的职业通识类数字化培养项目，旨在帮助员工开阔眼界、加厚职业素养。在原有外部精选通用力课程基础上，2023年引入创新专区，以新鲜的话题、新颖的形式，带给全员丰富、有趣的学习体验。
              </div>
              <div class="bottom"></div>
            </div>
            <div class="right">
              <div class="tyl" @click="tylClick">
                <div class="tyl_title">
                  <img src="../../../assets/images/dc.png" alt="" class="tyl_title_img" />
                  <span class="tyl_title_msg">通用力专区</span>
                </div>
                <div class="tyl_jy">加厚职业素养，轻学习、快成长！</div>
                <div class="tyl_msg">
                  内容涵盖：领导力、市场营销、职场技能、财务知识、法律常识、人力资源、经典国学、人文社科
                </div>
              </div>
              <div class="text_msg">
                创新力专区课程版权已到期！
              </div>
              <!-- <div class="cyl" @click="cylClick">
                <div class="tyl_title">
                  <img src="../../../assets/images/cyl.png" alt="" class="tyl_title_img" />
                  <span class="tyl_title_msg">创新力专区</span>
                </div>
                <div class="tyl_jy">激发创新潜力，拓视野、促思考！</div>
                <div class="tyl_msg">
                  内容涵盖：组合创新、单点破局、错位竞争、分形创新、第二曲线、数字化、元宇宙<br/>
                  创新力专区课程版权将于2024年4月16日到期，逾期将无法继续访问，请尽快完成学习
                </div>
              </div> -->
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import portalHeader from "@/components/PortalHeader.vue";
import portalFooter from "@/components/PortalFooter.vue";
import portalFloatTools from "@/components/PortalFloatTools.vue";
import interactBar from "@/components/Portal/interactBar.vue";
import timeShow from "@/components/Portal/datetimeShow.vue";
import author from "@/components/Portal/authorInfo.vue";
import apiCase from "@/api/modules/cases.js";
import apiUser from "@/api/system/user.js";
import apiSearchterm from "@/api/modules/searchterm.js";
import { deepClone } from "../../../utils";
import apiDict from "@/api/modules/dict.js";
import apiType from "@/api/modules/type.js";
import { cutFullName } from "@/utils/tools.js";
import apiPlace from "@/api/phase2/place.js"
export default {
  name: "case",
  components: {
    portalHeader,
    portalFooter,
    portalFloatTools,
    interactBar,
    timeShow,
    author
  },
  data() {
    return {
      twoId:'',
      treeList:[],
      caseType:process.env.VUE_APP_CASE_TYPE,//类型
      caseYears:[],
      refId: '',//消息跳转案例的id
      selectList: [],//点击选中的list
      twoList: [], //二级分类{type:12}
      threeList: [],//三级分类{type:13}
      showUClass: false,
      fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
      resonimg: {},
      domain: [],//组织领域
      domainAll: [],//全部的组织领域
      speciData: [],//专业分类
      moreState: 1, // 1 加载更多 2 加载中 3无数据
      isSeach: false,
      searchwd: false,
      showAll: true, //是否展开全部
      initHeight: 40,//原始 高度
      searchRecords: [],//热门搜索词
      caseList: {
        count: 0,
        list: [],
        showPagCount: 0
      },
      ankingList: [],//排行数据1
      Popularity: [],//排行数据2
      Positive: [],//排行数据3
      protocolDialogVisible: false,
      protocolConfirmButton: true,
      years: [],
      queryCondition: {
        pageIndex: 1,
        pageSize: 5,
        // orderField: "excellent",
        majorType: '', //专业分类code
        // orderAsc: false,
        // isTop: true,
        excellent: true,
        keyWord: '',
        orgDomainDtos: [],
        caseType: '',
        authorName: '',
        notInIds: [],
        type: 'excellent',
        userId: '',
        parent: '',
        children: [],
        name: '',
        years: [],
        // 随机
        notInIds: [],//重复的id
        orderField: "id",
        orderAsc: false,//排序
        sysType1:'',
        sysType2:'',
        sysType3:''
      },
      keyWord: "",
      anking: 2,
      queryExpand: true, // true更多，false收起
      category: 0,
      type2: 0,
      type3: 0,
      isFind: false,
      fielclassjor: true,
      localSessionKey: this.$xpage.constants.localCaseFiltersKey
    };
  },
  watch: {
    years() {
      this.search(true)
    }
  },
  computed: {
    ...mapGetters(["userInfo", "portalCase"]),
    word: function () {
      if (this.showAll == false) {
        //对文字进行处理
        return "展开";
      } else {
        return "收起";
      }
    },
    isMore() {
      let isOk = true;
      if (this.caseList.list.length === this.caseList.count) {
        isOk = false;
      }
      return isOk;
    },
    tagList() { //列表属性，用于计算
      let list = [];
      if (this.keyWord) {
        list.push({ type: '0', code: 'keyword', name: this.keyWord, checked: true })
      }
      this.domain.forEach(one => {
        var twoChildChecked = false;//是否有下级
        one.list.forEach(two => {
          if (two.fielclass) {
            twoChildChecked = true;
          }
          var threeChildChecked = false;
          two.list.forEach(three => {
            if (three.fielclass) {
              list.push(three);
              threeChildChecked = true;
            }
          });
          if (two.fielclass && !threeChildChecked) {
            list.push(two);
          }
        });
        if (one.fielclass && !twoChildChecked) {
          list.push(one);
        }
      })
      this.speciData.forEach(item => {
        if (item.fielclass) {
          list.push(item);
        }
      });
      this.treeList.forEach(one => {
        var twoChildChecked = false;//是否有下级
        one.children && one.children.forEach(two => {
          if (two.checked) {
            twoChildChecked = true;
          }
          var threeChildChecked = false;
          two.children  && two.children.forEach(three => {
            if (three.checked) {
              list.push(three);
              threeChildChecked = true;
            }
          });
          if (two.checked && !threeChildChecked) {
            list.push(two);
          }
        });
        if (one.checked && !twoChildChecked) {
          list.push(one);
        }
      })
      // console.log(list,'计算属性');

      return list;
    },
    oneTagAll() {
      return !this.domain.some(item => item.fielclass);
    },
    twoTagAll() {
      return !this.twoList.some(item => item.fielclass)
    },
    threeTagAll() {
      return !this.threeList.some(item => item.fielclass);
    },
    speciAll() {
      return !this.speciData.some(item => item.fielclass);
    }
  },
  beforeRouteLeave (to, from, next) {
    if(to.name !== 'caseDetail'){
      // console.log('我是外')
      this.queryCondition.pageIndex = 1
      this.search()
      // window.location.reload()
      // this.$destroy()
    }else{
      sessionStorage.setItem('pagesScroll', JSON.stringify(window.pageYOffset))
    }
    next()
  },
  beforeRouteEnter(to, from, next) {
    if(from.name !== 'caseDetail'){
      // console.log('我是内')
    }
    next(vm=>{
      vm.$nextTick(() => {
        window.scrollTo({
          left: 0,
          top: JSON.parse(sessionStorage.getItem("pagesScroll")),
        })
        sessionStorage.removeItem("pagesScroll")
      });
    })
  },
  created() {
    (() => {
      const allData = {
        0: {
          orderField: 'id',
          orderAsc: false
        },
        1: {
          orderField: 'id',
          orderAsc: true
        },
        2: {
          orderField: 'title',
          orderAsc: false
        },
        3: {
          orderField: 'title',
          orderAsc: true
        },
        4: {
          orderField: 'sysCreateTime',
          orderAsc: false
        },
        5: {
          orderField: 'sysCreateTime',
          orderAsc: true
        },
        6: {
          orderField: 'authorId',
          orderAsc: false
        },
        7: {
          orderField: 'authorId',
          orderAsc: true
        },
        8: {
          orderField: 'authorName',
          orderAsc: false
        },
        9: {
          orderField: 'authorName',
          orderAsc: true
        },
      }
      const allArr = Object.keys(allData)
      let recordsArr = JSON.parse(sessionStorage.getItem("recordsArr")) || [];
      let difference = allArr.filter(element => !recordsArr.includes(element));
      if (recordsArr.length === allArr.length) {
        difference = [...allArr]
        recordsArr = []
      }
      let random = Math.floor(Math.random() * difference.length)
      for (let i = 0; i < difference.length; i++) {
        if (i == random) {
          recordsArr.push(difference[i])
          break;
        }
      }
      sessionStorage.setItem("recordsArr", JSON.stringify(recordsArr))
      const dataList = (data) => {
        this.queryCondition.orderField = data.orderField
        this.queryCondition.orderAsc = data.orderAsc
      }
      dataList(allData[random])
    })()
  },
  mounted() {
    let $this = this;
    // if(this.speciData.length==0){
    //   this.specialized();
    // }
    // if(this.domain.length==0){
    //   this.getdomain();
    // }
    let isBack = false;
    if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL); //这里有没有都无所谓，最好是有以防万一
      isBack = true;
    }
    // console.log(isBack, 'isBack');
    // Promise.all([apiType.items("org_domain"), apiCase.majorTypes()]).then(rs => {
      // 90是测试环境，155是生产环境
      // console.log(this.caseType);

    Promise.all([apiType.treeList(1,Number(this.caseType ?? 155),1), apiCase.majorTypes()]).then(rs => {
      if (rs[0].code == 200) {
        const {records} = rs[0].data
        records.forEach(item => {
          item.fielclass = false;
          item.type = 'org_domain';
          item.list = item.children ? item.children : []
          if (Array.isArray(item.children)) {
            item.list.forEach(sub => {
              sub.list = sub.children ? sub.children : []
              sub.fielclass = false
              if (Array.isArray(sub.children)) {
                sub.list.forEach(three => {
                  three.list = three.children ? three.children : []
                  three.fielclass = false
                })
              }
            })
          }
        })
        this.domain = records;
      }
      if (rs[1].status == 200) {
        rs[1].result.forEach(item => {
          item.fielclass = false;
          item.type = 'major_type';
        })
        this.speciData = rs[1].result;
      }
      this.loadLocalFilters();
      this.$nextTick(function () {
        $this.initHeight = document.getElementById("searchBox").offsetHeight;
        $this.closeSearch();
      });
      this.search();
    });

    if (!this.portalCase.readProtocol) {
      this.protocolDialogVisible = true;
    }
    this.keyWord = this.$route.query.keyword;
    if (this.keyWord != "") {
      this.isSeach = true;
    }
    // 从消息多个案例跳转到本页面
    this.refId = this.$route.query.recommendId;
    if (this.refId) {
      this.queryCondition.type = 'recommend'
    }
    this.loadTypeData();//加载分类
    this.getAnkingData();
    this.searchterm();
    //打开排行榜下边的两个
    this.getPopularity();
    this.getPositive();
    this.couresreso();
    // window.addEventListener("scroll", this.handleScroll);
    // 获取年
    this.getYears();
  },
  beforeDestroy() {
    // window.removeEventListener("scroll", this.handleScroll);
    // console.log('销毁了');

  },
  methods: {
    handleType(msg){
      this.queryCondition.type = msg
    },
    handleOptionClick(treeItem){
      this.treeList.forEach(one => {
        one.checked = false;
        if (one.id == treeItem.id) {
          one.checked = true;
          this.queryCondition.sysType2 = ''
          this.queryCondition.sysType3 = ''
          this.queryCondition.sysType1 = one.id
        }
          one.children.forEach(two => {
          two.checked = false;
          if (two.id == treeItem.id) {
            two.checked = true
            this.queryCondition.sysType1 = ''
            this.queryCondition.sysType3 = ''
            this.queryCondition.sysType2 = two.id
          }
          two.children.forEach(three => {
            three.checked = false;
            if (three.id == treeItem.id) {
              three.checked = true
              this.queryCondition.sysType1 = ''
              this.queryCondition.sysType2 = ''
              this.queryCondition.sysType3 = three.id
            }
          })
        })
      })
      this.getCaseData()
    },
        // 移入
    changeIndex(twoId) {
      this.twoId = twoId
    },
    // 移除
    leaveIndex() {
      this.twoId = ''
    },
        // 加载分类
    async loadTypeData() {
      try {
        const { result, status } = await apiType.tree(1);
        if (status === 200) {
          result.forEach(one => {
            one.checked = false;
            if(!one.children) one.children = []
            one.children && one.children.forEach(two => {
              two.checked = false;
              if(!two.children) two.children = []
              two.children && two.children.forEach(three => {
                three.checked = false;
                if(!three.children) three.children = []
              })
            })
          })
          this.treeList = result
        }
      } catch (error) {
        // console.log(error);
      }
    },
    getYears() {
      apiCase.caseYears().then(res => {
        if (res.status == 200) {
          const { result } = res;
          // console.log(result);
          this.caseYears = result.map(year => ({
            value: year,
            label: year,
          }))
        }
      })
    },
    // 查看率的时间
    toCaseDetail(id, refId) {
      if (refId) {
        apiCase.startReadTimer(refId)
      }
      this.$router.push({ path: '/case/detail', query: { id } });
    },
    tylClick() {
      window.open("https://m.qingxuetang.com/x/?appId=qxtcorp306130");
    },
    cylClick() {
      window.open("https://u.boe.com/pc/course?keyword=创新力专区");
    },
    showClass(flag) {
      if (flag) {
        this.showUClass = flag;
      }
    },
    saveLocalFilters() {
      let typeCodeList = [];
      this.tagList.forEach(item => {
        typeCodeList.push({
          type: item.type,
          code: item.code,
          name: item.name
        })
      });
      let typeCodeString = JSON.stringify(typeCodeList);
      sessionStorage.setItem(this.localSessionKey, typeCodeString);
    },
    loadLocalFilters(t) {
      let hasData = sessionStorage.getItem(this.localSessionKey);
      if (hasData) {
        let typeCodeList = JSON.parse(hasData);
        typeCodeList.forEach(item => {
          if (item.type == '0') {
            this.keyWord = item.name;
          } else if (item.type == 'major_type') {
            this.speciData.some(m => {
              if (m.code == item.code) {
                m.fielclass = true;
                return true;
              }
              return false;
            })

          } else if (item.type == 'org_domain') {
            this.domain.some(m => {
              if (m.code == item.code) {
                m.fielclass = true;
                return true;
              }
              return false;
            })

          }
        })
      }
    },
    majorall() {
      this.queryCondition.majorType = '';
      this.speciData.forEach(item => {
        item.fielclass = false;
      })
      this.search(true);
    },
    // 组织领域全部
    domainall(type) {
      // console.log(this.selectList, 999);
      if (type == 1) {
        // 清空一下所有的
        this.domain.forEach(item => {
          item.fielclass = false;
          item?.list?.forEach(sub => {
            sub.fielclass = false;
            sub?.list.forEach(subsub => {
              subsub.fielclass = false;
            })
          })
        })
        this.twoList = [];
        this.threeList = [];
      } else if (type == 2) {
        this.twoList.forEach(item => {
          item.fielclass = false;
        })
        // 清空当前元素的三级的
        this.domain.forEach(item => {
          if (this.selectList.code == item.code) {
            item?.list?.forEach(sub => {
              sub?.list?.forEach(three => {
                three.fielclass = false
              });
            })
          }
        })
        this.threeList = [];
      } else if (type == 3) {
        this.threeList.forEach(item => {
          item.fielclass = false;
        })
      }
      this.search(true);
    },
    fieldmajor(item) {//专业分类
      item.fielclass = !item.fielclass;
      this.search(true);
    },
    //组织领域
    fieldswich(item, level) {
      item.fielclass = !item.fielclass;
      // 清空下边的为false的时候
      if (!item.fielclass) {
        if (Array.isArray(item.list)) {
          item.list.forEach(subItem => {
            subItem.fielclass = false;
            if (subItem.list) {
              subItem.list.forEach(sub => {
                sub.fielclass = false;
              })
            }
          });
        }
        if (level == 1) {
          this.twoList = [];
          this.threeList = [];
        }
        if (level == 2) {
          this.threeList = [];
        }
        this.search(true);
        return;
      }

      if (level === 1) {
        this.twoList = [];
        this.threeList = [];
        this.twoList.push(...item.list);
        // 全选根据他判断清楚三级
        this.selectList = item
      } else if (level === 2) {
        this.threeList = [];
        this.threeList.push(...item.list);
      } else if (level === 3) {
      }

      this.search(true);
    },
    banJump() {
      if (this.resonimg.JumpUrl) {
        window.open(this.resonimg.JumpUrl);
      }
    },
    couresreso() {
      let key = 'case';
      apiPlace.detail(key).then(res => {
        let lmj = JSON.parse(res.result.content)
        this.resonimg = lmj[0]
      })
    },
    specialized() {
      let $this = this;
      apiCase.majorTypes().then(res => {
        if (res.status == 200) {
          if (res.status == 200) {
            res.result.forEach(item => {
              item.fielclass = false;
              item.type = 'major_type';
            })
          }
          this.speciData = res.result;
          this.loadLocalFilters(1);
          //this.Profess=res.result;
          this.$nextTick(function () {
            $this.initHeight = document.getElementById("searchBox").offsetHeight;
            $this.closeSearch();
          });
        }
      })
    },
    // jumcasedet(item) {
    //   this.$router.push({ path: '/case/detail', query: { id: item.id } });
    // },
    // debounce(func, wait) {
    //   // 非立即执行
    //   let timeout;
    //   return function () {
    //     let context = this;
    //     let args = arguments;
    //     if (timeout) clearTimeout(timeout);
    //     timeout = setTimeout(() => {
    //       func.apply(context, args);
    //     }, wait);
    //   };
    // },
    //展示全部
    displayAll(item) {
      if (!item.isAll && item.summary && item.summary.length > 150) {
        return item.summary.slice(0, 150) + "...";
      }
      return item.summary;
    },
    changeIsAll(item) {
      item.isAll = !item.isAll;
    },
    closeSearch() {
      this.showAll = !this.showAll;
      var searchBoxHeght = document.getElementById("searchBox");
      //console.log(this.initHeight,'this.initHeight');
      if (this.initHeight > 100) {
        this.searchwd = true;
      }
      //console.log(het,'het');
      if (this.showAll) {
        //searchBoxHeght.style.height = "auto";
        searchBoxHeght.style.maxHeight = this.initHeight + "px";
      } else {
        searchBoxHeght.style.maxHeight = 70 + "px";
      }
    },
    getAnkingData() {
      apiCase.usernameList(5).then(res => {
        if (res.status == 200) {
          this.ankingList = res.result;
        }
      });
    },
    // getPopularity() {
    //   apiCase.queryPraises(5).then(res => {
    //     if (res.status == 200) {
    //       this.Popularity = res.result;
    //       // console.log(this.Popularity)
    //     }
    //   });
    // },
    getPositive() {
      apiCase.queryComments(5).then(res => {
        if (res.status == 200) {
          this.Positive = res.result;
          // console.log(res);
        }
      });
    },
    // 无用
    async getdomain() {
      let key = "org_domain";
      await apiDict.items("org_domain").then(res => {
        if (res.status == 200) {
          res.result.forEach(item => {
            item.fielclass = false;
            item.type = key;
          })
          this.domain = res.result;
          this.loadLocalFilters(2);
          // if(res.result.length > 0) {
          //  this.orgDomainLevel(res.result)
          // }
        }
      });
    },
    //删除，不再使用
    // getProfess() {
    //   let key = "major_type";
    //   apiDict.items(key).then(res => {
    //     if (res.status == 200) {
    //       this.Profess = res.result;
    //     }
    //   });
    // },
    // orgDomainLevel(organization) {
    //  this.orgData = [];
    //  organization.forEach(item=>{
    //    this.orgData.push(item);
    //    if(item.list && item.list != "" && item.list.length > 0){
    //         item.list.forEach(it =>{
    //           this.orgData.push(it);
    //         })
    //    }
    //  })
    // },
    orgDomainTranslate(code) { // 组织领域翻译
      if (code == '') {
        return
      }
      //console.log(code,'code')
      //console.log(this.domain,'this.domain')
      let name = '';
      let data = this.domain.find(item => {
        return item.code == code;
      });
      if (data) {
        name = data.name;
      }
      return name;
    },
    majorTypeTranslate(code) { // 专业分类翻译
      let name = '';
      let data = this.speciData.find(item => item.code == code);
      if (data) {
        name = data.name;
      }
      return name;
    },
    emitInput(val) {
      this.keyWord = val;
      this.isSeach = true;
      this.search(true);
    },
    searchexcellent(num) {
      if(this.queryCondition.type==num){
        this.queryCondition.excellent =false;
        this.queryCondition.type = '';
        this.search(true)
        return
      }
      this.queryCondition.excellent =false;
      this.queryCondition.type = num;
      if(num == 'excellent'){
        this.queryCondition.excellent =true;
        this.queryCondition.type = num;
      }
      this.search(true);
      // this.getCaseData();
    },
    // searchData(num) {
    //   // if(num == 1){
    //   // this.queryCondition.excellent = !this.queryCondition.excellent;
    //   // this.getCaseData();
    //   // }
    //   this.queryCondition.pageIndex = 1;
    //   this.queryCondition.type = num;
    //   this.getCaseData();
    // },
    // 滚动请求
    // handleScroll() {
    //   let innerw = document.querySelector("#fixd-box");
    //   let innerHeight = document.querySelector("#case-list-content")
    //     .clientHeight;
    //   let outerHeight = document.documentElement.clientHeight;
    //   let outerWidth = innerw.clientWidth;
    //   let scrollTop = document.documentElement.scrollTop;
    //   if (outerHeight + scrollTop + 350 >= innerHeight) {
    //     if (this.moreState == 1) {
    //       this.debounce(this.loadMore(), 5000);
    //     }
    //   }
    //   if (scrollTop > 630) {
    //     document.querySelector("#fixd-box").style.cssText =
    //       "position: fixed;top: -400px;width:" + outerWidth + "px";
    //   } else {
    //     document.querySelector("#fixd-box").style.cssText = "position: static";
    //   }
    // },
    useHotword(item) {
      this.keyWord = item.keyword;
      this.search();
    },
    searchterm() {
      apiSearchterm.list(5, 3).then(res => {
        if (res.status === 200) {
          this.searchRecords = res.result;
        }
      });
    },
    // 监听滚动发请求
    // loadMore() {
    //   this.queryCondition.pageIndex += 1;
    //   this.getCaseData();
    // },
    protocolCheck(obj) {
      this.protocolConfirmButton = !obj;
    },
    protocolConfirm() {
      this.protocolDialogVisible = false;
      this.$store.dispatch("portal/SetReadProtocol", true);
    },
    // handleSizeChange(item) {
    //   this.queryCondition.pageSize = item;
    // },
    // handleCurrentChange(item) {
    //   this.queryCondition.pageIndex = item;
    // },
    getAllFielclass() { //获取全部选中的标签
      let newlist = JSON.parse(JSON.stringify(this.domain))
      return newlist.filter(one => {
        one.list = one.list.filter(two => {
          // if (!two.fielclass) {
          //   one.list = []
          // }
          two.list = two.list.filter(three => {
            // if (!three.fielclass) {
            //   two.list = []
            // }
            return three.fielclass;
          })
          return two.fielclass;
        });
        return one.fielclass
      })
    },
    // 改变分页
    currentChange(val) {
      this.caseList.showPagCount = 0
      this.queryCondition.pageIndex = val
      this.search()
    },
    // 查询
    search(num = false) {
      // 记录查询的数据
      if (this.keyWord) {
        apiSearchterm.save({ keyword: this.keyWord, type: 3 });
      }
      if (!this.isFind) {
        this.isFind = true;
      }
      if (num) {
        this.caseList.showPagCount = 0
        this.queryCondition.pageIndex = 1;
      }
      if (this.keyWord != this.queryCondition.keyWord) {
        this.queryCondition.keyWord = this.keyWord;
      }
      if (this.queryCondition.majorType == 0) {
        this.queryCondition.majorType = ''
      }
      this.getCaseData();
    },

    async getCaseData() {
      this.saveLocalFilters();//存储本地刷新有记录
      let majorTypeList = [];
      let allFielclass = JSON.parse(JSON.stringify(this.getAllFielclass()));
      // 获取树状id
      this.queryCondition.orgDomainDtos = allFielclass.map(item => {
        item.list = item.list.map(two => {
          two.list = two.list.map(three => {
            return {
              parent: three.code
            }
          })
          return {
            parent: two.code,
            children: two.list || []
          }
        })
        return {
          parent: item.code,
          children: item.list || []
        }
      })
      // console.log(JSON.stringify(this.queryCondition.orgDomainDtos));



      // 专业分类的id
      this.tagList.forEach(tag => {
        if (tag.type == '0') {
          this.queryCondition.keyWord = tag.name;
        } else if (tag.type == 'major_type') {
          majorTypeList.push(tag.code);
        }
      });
      this.queryCondition.majorType = majorTypeList.join(',');
      //设置年
      this.queryCondition.years = this.years.map(item => parseInt(item))

      // 设置最佳案例为true或是false
      if (this.queryCondition.type == 'excellent') {
        this.queryCondition.excellent = true;
      } else {
        this.queryCondition.excellent = false;
      }

      //this.getTags();
      // if (this.queryCondition.pageIndex == 1) {
      //   this.caseList.list = [];
      // }
      this.moreState = 2;
      await apiCase.queryListV2(this.queryCondition).then((res) => {
        if (res.status == 200) {
          if (res.result.list.length > 0) {
            this.isSeach = false;
            res.result.list.forEach(item => {
              item.majorType = item.majorType ? item.majorType.split(",") : [];
              item.isAll = false;
              item.authorInfo = {
                aid: "",
                name: "",
                orgInfo: "",
                avatar: "",
                sex: null
              };
            });
            // this.caseList.list.push(...res.result.list);
            this.moreState = 1;
            if (res.result.count === res.result.list.length) {
              this.moreState = 3;
            }
          } else {
            this.moreState = 3;
          }
          // console.log(res?.result?.list ,'有没有数据');
          this.caseList.list = res.result.list
          this.getCaseUserData(res.result.list);
          // 给所有的赋值
          this.caseList.count = res.result.count;
          this.caseList.showPagCount = res.result.count;
        } else {
          this.$message.error(res.message);
        }
      }).catch(err => {
        // console.log(err);
      });

      // await apiCase.queryList(this.queryCondition).then(res => {
      //   if (res.status == 200) {
      //     if (res.result.list.length > 0) {
      //       this.isSeach = false;
      //       res.result.list.forEach(item => {
      //         item.majorType = item.majorType.split(",");
      //         item.isAll = false;
      //         item.authorInfo = {
      //           aid: "",
      //           name: "",
      //           orgInfo: "",
      //           avatar: "",
      //           sex: null
      //         };
      //       });
      //       this.caseList.list.push(...res.result.list);
      //       this.caseList.count = res.result.count;
      //       this.getCaseUserData(res.result.list);
      //       this.moreState = 1;
      //       if (res.result.count === res.result.list.length) {
      //         this.moreState = 3;
      //       }
      //     } else {
      //       this.moreState = 3;
      //     }
      //   } else {
      //     this.$message.error(res.message);
      //   }
      // })
      //   .catch(err => {
      //     console.log(err);
      //   });
    },
    // getTags() {
    //   this.searchTags = [];
    //   let caseData = deepClone(this.queryCondition);
    //   for (let i in caseData) {
    //     if (
    //       caseData[i] !== "" &&
    //       i !== "pageIndex" &&
    //       i !== "pageSize" &&
    //       i !== "orderField" &&
    //       i !== "orderAsc" &&
    //       i !== "isTop" &&
    //       caseData[i] !== null &&
    //       caseData[i] !== undefined
    //     ) {
    //       if (caseData[i] == "0") {
    //         return;
    //       }
    //       if(i == 'majorType'){
    //         this.searchTags.push({ type:'majorType',value:this.majorTypeTranslate(caseData[i])})
    //       }
    //       if(i == 'orgDomain'){
    //         this.searchTags.push({type:'orgDomain',value:this.orgDomainTranslate(caseData[i])})
    //       }
    //       if(i == 'keyWord'){
    //         this.searchTags.push({type:'keyWord',value:caseData[i]})
    //       }
    //     }
    //   }
    // },
    // 清楚数组的元素
    // clear(tag) {
    //   if (tag.type == 'org_domain') {
    //     this.twoList = [];
    //     this.threeList = [];
    //   }
    //   if (tag.type == 1) {
    //     console.log(111);
    //     this.threeList = [];
    //   }
    // },
    tagsClose(tag, index) {
      // 课程分类
      if(tag.hasOwnProperty('checked')){
        tag.checked = false;
        this.queryCondition.sysType1 =''
        this.queryCondition.sysType2 =''
        this.queryCondition.sysType3 =''
      }else{
        // 案例分类
        tag.fielclass = false;
      }
      if (tag.type == 0) {
        this.keyWord = '';
      }
      // if(tag.type=='org_domain'){
      //   console.log(tag)
      //   this.domain.some((m,idx)=>{
      //     if(m.code=tag.code){
      //       m.fielclass=false;
      //       return true;
      //     }
      //     return false;
      //   })
      // }else if(tag.type=='major_type'){
      //   this.speciData.some((m,idx)=>{
      //     if(m.code=tag.code){
      //       m.fielclass=false;
      //       return true;
      //     }
      //     return false;
      //   })
      // }else if(tag.type=='keyWord'){
      //   this.queryCondition.keyWord = "";
      //   this.keyWord = "";
      // }
      //this.fieldData.splice(index,1);
      //this.getCaseData();
      this.search(true);

    },
    getCaseUserData(caseList) {
      let ids = caseList.map((item, index) => {
        return item.authorId;
      });
      //不能为空
      if (!ids.length) return

      const noReapetIds = [...new Set(ids)];
      apiUser.getByIds(noReapetIds).then(res => {
        if (res.status == 200) {
          caseList.forEach((item, index) => {
            res.result.some(author => {
              if (author.aid == item.authorId) {
                item.authorInfo = author;
                author.orgInfo = cutFullName(author.orgInfo, 1);
                return true;
              } else {
                return false;
              }
            });
          });
        } else {
          this.$message.error(res.message);
        }
      });
    },
    getPopularity() {
      apiCase.queryPraises(5).then(res => {
        if (res.status == 200) {
          this.Popularity = res.result;
          if (res.result.length < 5) {
            for (let i = 0; i = (5 - res.result.length); i++) {
              this.Popularity.push({
                authorName: '',
                count: 1,
                id: '',
                title: '',
              })
            }
          }

        }
      });
    },
    getPositive() {
      apiCase.queryComments(5).then(res => {
        if (res.status == 200) {
          this.Positive = res.result;
          if (res.result.length < 5) {
            for (let i = 0; i = (5 - res.result.length); i++) {
              this.Positive.push({
                authorName: '',
                count: 1,
                id: '',
                title: '',
              })
            }

          }
        }
      });
    },

    jumpRouter(item) {
      // console.log(item)
      this.$router.push(`/case/detail?id=${item.id}`);
    }
  }
};
</script>

<style scoped lang="scss">
// 课程分类
.course-title-style {
  position: relative;
  height: 100px;
  background-image: url('../../../../public/images/courseBg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;

  .imgTilte {

    & div:first-child {
      padding-left: 40px;
      font-size: 30px;
      color: #FFFFFF;
    }

    & div:last-child {
      padding-left: 40px;
      font-size: 20px;
      color: #FFFFFF;
      opacity: .5;
      font-family: ArialMT !important;
    }

  }
}

// 三级列表
.course-list {
  background-color: #fff;

  .course-one {
    position: relative;

    .course-one-content {
      cursor: pointer;
      line-height: 38px;
      height: 38px;
      padding-left: 40px;
      background: linear-gradient(270deg, #F0F7FF 0%, #DDEDFF 100%);
    }

    // 二级的高亮
    .courseTwoActive {
      color: #387DF7;
      border-image: linear-gradient(90deg, rgba(47, 101, 236, 1), rgba(228, 236, 255, 1)) 1 1 !important;
    }

    .course-two {
      position: relative;
      border-bottom: 1px solid;
      border-image: linear-gradient(333deg, rgba(243, 243, 243, 1), rgba(227, 227, 227, 1)) 1 1;

      .course-two-content {
        cursor: pointer;
        height: 38px;
        line-height: 38px;
        font-size: 16px;
        padding-left: 40px;
      }
    }

    .popover {
      background: linear-gradient(180deg, rgba(78, 166, 255, 0.2) 0%, rgba(78, 166, 255, 0) 100%);
    }

  }

}
.u-class {
  ::v-deep .el-dialog {
    border-radius: 15px;

    .el-dialog__headerbtn .el-dialog__close {
      color: white;
      position: absolute;
      z-index: 99;
      right: 15px;
    }
  }

  ::v-deep .el-dialog__body {
    padding: 0px;
  }

  .ClassBoxContent {
    width: 100%;
    height: 396px;
    // background: red;
    border-radius: 15px;

    .ContentBox {
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 9;
      display: flex;

      .left,
      .right {
        height: calc(100% - 30px);
      }

      .left {
        padding-left: 30px;
        width: 48%;
        margin-top: -32px;

        .title {
          width: 200px;
          height: 59px;
          line-height: 59px;
          text-align: center;
          margin-left: -8px;
          font-size: 38px;
          color: white;
          margin-top: 42.97px;
          padding-top: 5px;
          text-shadow: 0 6px 3px rgba(96, 85, 243, 0.4);
        }

        .jy {
          color: white;
          font-size: 20px;
          margin-top: 87.53px;
          font-weight: 400;
        }

        .msg {
          margin-top: 5px;
          color: rgba(255, 255, 255, 0.85);
          width: 326px;
          text-align: justify;
          line-height: 20px;
        }

        .bottom {
          width: 100px;
          height: 1px;
          background: rgba(255, 255, 255, 0.85);
          margin-top: 40px;
        }
      }

      .right {
        // padding-left: 10px;
        width: 50%;

        .tyl {
          cursor: pointer;
          width: calc(100% - 20px);
          background: rgba(255, 255, 255, 0.95);
          box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
          border-radius: 4px;
          height: 160px;
          margin-top: 163px;

          .tyl_title {
            width: 100%;
            padding-left: 20px;
            padding-top: 20px;

            .tyl_title_img {
              width: 18px;
              height: 18px;
            }

            .tyl_title_msg {
              font-size: 20px;
              margin-left: 10px;
              color: #333333;
              font-weight: 600;
            }
          }

          .tyl_jy {
            margin-top: 6.5px;
            font-size: 14px;
            font-weight: 600;
            padding-left: 20px;
            color: #333333;
          }

          .tyl_msg {
            width: 350.36px;
            margin-top: 13px;
            margin-left: 20px;
            font-size: 14px;
            color: #666666;
            font-weight: 400;
            letter-spacing: 0;
            text-align: justify;
          }
        }

        .tyl:hover {
          border: 0.96px solid rgba(140, 105, 242, 1);
          box-shadow: 7px 5px 6px 0px rgba(76, 31, 221, 0.3);
        }
        .text_msg{
          margin: 43px 0 0 222px;
          font-size: 14px;
          color: #000;
        }

        .cyl {
          cursor: pointer;
          width: calc(100% - 20px);
          background: rgba(255, 255, 255, 0.95);
          box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
          border-radius: 4px;
          height: 180px;
          margin-top: 10px;

          .tyl_title {
            width: 100%;
            padding-left: 20px;
            padding-top: 20px;

            .tyl_title_img {
              width: 18px;
              height: 18px;
            }

            .tyl_title_msg {
              font-size: 20px;
              margin-left: 10px;
              color: #333333;
              font-weight: 600;
            }
          }

          .tyl_jy {
            margin-top: 6.5px;
            font-size: 14px;
            font-weight: 600;
            padding-left: 20px;
            color: #333333;
          }

          .tyl_msg {
            width: 350.36px;
            margin-top: 13px;
            margin-left: 20px;
            font-size: 14px;
            color: #666666;
            font-weight: 400;
            letter-spacing: 0;
            text-align: justify;
          }
        }

        .cyl:hover {
          border: 0.96px solid rgba(140, 105, 242, 1);
          box-shadow: 7px 5px 6px 0px rgba(76, 31, 221, 0.24);
        }
      }
    }

    .img {
      width: 835px;
      height: 428px;
      margin-left: -1px;
      margin-top: -1px;
      position: absolute;
      top: 0px;
    }
  }
}

.fieldbox {

  display: flex;
  white-space: nowrap;
  flex-wrap: wrap;

  div {
    padding: 0 15px;
    display: inline-block;
    font-size: 14px;
    line-height: 25px;
    color: #3d3d3d;
    font-weight: 500;
  }

  .fieldactive {
    color: #387DF7;
  }
}

.field {
  display: flex;
  white-space: nowrap;

  // flex-wrap: wrap;
  div {
    padding: 0 15px;
    // display: inline-block;
    font-size: 14px;
    line-height: 25px;
    color: #3d3d3d;
    font-weight: 500;
  }

  .fieldactive {
    color: #387DF7;
  }
}

::v-deep .el-checkbox-button.is-checked .el-checkbox-button__inner {
  box-shadow: none !important;
}

::v-deep .el-checkbox-button.is-checked .el-checkbox-button__inner {
  color: #387df7 !important;
  background-color: #fff !important;
}

::v-deep .el-checkbox-button--mini .el-checkbox-button__inner {
  font-size: 14px;
}

::v-deep .el-checkbox-button .el-checkbox-button__inner {
  border: none !important;
}

.notcoures {
  text-align: center;

  img {
    width: 360px;
    height: 226px;
  }

  h5 {
    font-size: 14px;
    color: #333333;
    font-weight: 400;
  }
}

.orgaicon {
  width: 22px;
  height: 22px;
  vertical-align: middle;
  margin-right: 8px;

  img {
    width: 100%;
    height: 100%;
  }
}

.course-resources {
  margin-top: 26px;

  img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
  }
}

.case-banner {
  height: 240px;
  background: url('../../../../public/images/case-banner.png');
}

::v-deep .el-checkbox {
  .el-checkbox__input {
    .el-checkbox__inner {
      border: 1px solid #3e3c3c;
    }
  }

}

::v-deep .el-radio-button {
  margin-right: -5px;
}

::v-deep .el-button {
  border-radius: 0px;
}

.case-titdiv {
  line-height: 30px;
  display: flex;

  .case-tittext {
    font-size: 18px;
    font-weight: 600;
    color: #333333;
    max-width: 67%;
  }

  .case-activeText {
    line-height: 27.5px;

    .comWords {
      color: white;
      font-size: 12px;
      border-radius: 2px;
      padding: 2px 4px;
      margin-left: 20px;
    }

  }
}

::v-deep .interact-bar .interact-bar-btns .interact-bar-btn {
  margin-left: 0;
  margin-right: 20px;
}

.clearfix:after {
  content: "020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.keyword-text {

  div {
    padding: 0px 8px;
    margin-top: 5px;
    float: left;
    line-height: 24px;
    font-size: 12px;
    border-radius: 2px;
    margin-right: 8px;
    color: #2C68FF;
    height: 24px;
    background: rgba(44, 104, 255, 0.06);
  }
}

.searBox {
  text-align: center;
  margin: 0px auto 0 auto;
}

#searchBox {
  overflow: hidden;

}

::v-deep .title-line-ellipsis {
  // width: 100%;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  box-sizing: border-box;
  word-break: break-all;
}

::v-deep .el-card__body {
  padding: 0;
}

::v-deep .bacolor:nth-child(odd) {
  background-color: #f6f6f6;
  padding: 0 5px;
}

::v-deep .bacolor:nth-child(even) {
  background-color: #fff;
  padding: 0 5px;
}

::v-deep .el-card {
  border: none;
  border-radius: 0px;
  // border: 1px solid #ebeef5;
}

::v-deep .el-radio-button__inner,
.el-radio-group {
  vertical-align: top;
}

::v-deep .el-radio-button__inner {
  background: none;
}

::v-deep .el-radio-button:first-child .el-radio-button__inner {
  border-left: none;

  // border-radius: 4px 0 0 4px;
  //box-shadow: none!important;
}

::v-deep.item-title {
  margin: 15px 10px 10px 0;
  font-size: 16px !important;
  font-weight: 400;
  color: #6B7C85;
  line-height: 25px;
}

.item-line {
  padding-left: 2px;
  height: 20px;
  // background: #ddd;
}

.portal-content {
  display: flex;
  justify-content: space-between;

}

.searchbar {
  background-color: #ffffff;

}

.fixed {
  position: fixed;
  top: 0px;
  background-color: #f0f0f0;
  z-index: 999;
  height: 50px;
}

.protocol {
  .protocol-title {
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 25px;
  }

  .protocol-content {
    font-size: 14px;
    line-height: 25px;
  }
}

.left-div {
  border: none;

  .quyer-tag {

    // margin-left: 10px;
    .order-class {
      padding: 0px 12px;
      color: #6E7B84;
      line-height: 32px;
      border-radius: 0px;

      .el-icon--right {
        margin-left: 0;
      }
    }

    .actice {
      border: 0px;
      background: #387DF7;
      color: #fff;
      font-size: 14px;
      border-radius: 4px;
    }
  }

  /* 分页div */
  .pagination-div {
    text-align: center;
    padding: 10px 0;

    .pag-text {}
  }

  .order-div {
    padding: 34px 40px 20px 40px;
    background-color: #fff;
    display: flex;
    align-items: center;
    // margin-bottom: ;
  }

  .data-content {
    background-color: #fff;
    padding: 5px 50px;

    ::v-deep .interact-bar-btns {
      .interact-bar-btn {
        text-align: right;
        min-width: 78px !important;
        margin-right: 0;
      }
    }

    .case-list:last-child {
      border-bottom: none;
    }

    .case-list {
      border-bottom: 1px solid rgba(153, 153, 153, .2);
      margin-top: 10px;
      margin-bottom: 25px;
      padding-left: 5px;
      padding-right: 5px;
    }

    .case-image {
      width: 230px;
      height: 170px;
      float: left;
      border: 1px solid #eee;
    }

    .case-info {
      .case-info-cont {
        .case-info-title {
          font-size: 15px;
          color: #333;
          font-weight: 600;
          height: 30px;

          .case-info-date {
            flex: 1;
            text-align: right;
            font-weight: normal;

            // font-size: 12px;
            // height: 30px;
            // font-weight: 200;
            // color: #8590a6;
            i {
              margin-right: 5px;
            }
          }
        }

        .case-info-summary {
          margin-top: 16px;
          cursor: pointer;
          margin-bottom: 5px;
          word-break: break-all;
          line-height: 24px;
          font-size: 14px;
          color: #333330;
          font-weight: 400;
        }

        .case-info-tools {
          height: 30px;

          .case-info-tools-auth {
            float: left;
            font-size: 13px;
            color: #999999;

            img {
              margin-right: 10px;
              width: 30px;
              border: 1px solid #eee;
              border-radius: 50%;
              vertical-align: middle;
            }
          }

          .case-info-tools-btns {
            float: right;

            .case-info-tools-btn {
              margin: 0 0 0 15px;
            }
          }
        }
      }
    }
  }

  .search-div {
    background: #fff;
    padding: 30px 40px;

    .search-keyword {
      line-height: 30px;

      .tip {
        font-size: 12px;
        color: #999999;
        // margin-bottom: 20px;
      }
    }

    .search-item {
      cursor: pointer;
      // margin-bottom: 10px;
      // padding: 10px 0;
    }

    // .search-item:not(:last-child) {
    //   //  border-bottom: 1px solid #dfdfdf;
    // }
  }

  .search-div-collapse {
    display: block;
  }

  .search-div-expand {
    display: none;
  }

  .search-div-more {
    text-align: center;
  }
}
</style>
