<template>
  <div v-show="loaded"
       :class="['wrap', { activity: info.listStyleId === 15, party: info.listStyleId === 68 }]">
    <div class="banner">
      <img width="100%"
           height="280"
           :src="info.columnBanner"
           alt="" />
      <div class="texts">
        <p class="text">{{ info.columnName }}</p>
        <p class="sub">{{ info.subtitle }}</p>
      </div>
    </div>
    <div class="column-wrap">
      <div class="article">
        <div class="left">
          <!-- 文章：侧边栏+搜索+新闻列表 -->
          <div v-if="info.listStyleId === 10"
               class="forms">
            <div class="item">
              <span class="label">{{ $t('column.classification') }}：</span>
              <el-select v-model="form.classificationId"
                         @change="filter">
                <el-option :label="$t('column.all')"
                           :value="null"></el-option>
                <el-option v-for="item in classifications"
                           :key="item.id"
                           :label="item.classificationName"
                           :value="item.id">
                </el-option>
              </el-select>
            </div>
            <div class="item">
              <span class="label">{{ $t('column.label') }}：</span>
              <el-select ref="search"
                         v-model="lableId"
                         multiple
                         @change="filter">
                <el-option v-for="item in labels"
                           :key="item.id"
                           :label="item.labelName"
                           :value="item.id"> </el-option>
              </el-select>
            </div>
            <div class="search">
              <input type="text"
                     :placeholder="$t('column.titlePlaceholder')"
                     v-model="form.title" />

              <!-- <i class="icon">
                <img src="@/assets/images/search-white.png" alt="" />
              </i> -->
            </div>
          </div>
          <!-- 侧导航+新闻列表(含文章概述) -->
          <div v-if="info.listStyleId === 12"
               class="forms">
            <div class="item">
              <span class="label">{{ $t('column.classification') }}：</span>
              <el-select v-model="form.classificationId"
                         @change="filter">
                <el-option :label="$t('column.all')"
                           :value="null"></el-option>
                <el-option v-for="item in classifications"
                           :key="item.id"
                           :label="item.classificationName"
                           :value="item.id">
                </el-option>
              </el-select>
            </div>
            <div class="item">
              <span class="label">{{ $t('column.label') }}：</span>
              <el-select ref="search"
                         v-model="lableId"
                         multiple
                         @change="filter">
                <el-option v-for="item in labels"
                           :key="item.id"
                           :label="item.labelName"
                           :value="item.id"> </el-option>
              </el-select>
            </div>
            <div class="search">
              <input type="text"
                     :placeholder="$t('column.titlePlaceholder')"
                     v-model="form.title" />
              <!-- <i class="icon">
                <img src="@/assets/images/search-white.png" alt="" />
              </i> -->
            </div>
          </div>
          <!-- 会议活动：筛选+会议活动列表 -->
          <div v-if="info.listStyleId === 15"
               class="forms">
            <ul class="switch">
              <li v-for="(item, i) in convokeTypes"
                  :key="i"
                  :class="{ active: item.id === form.convokeType }"
                  @click="switchChange(item)">
                {{ item.name }}
              </li>
            </ul>
            <div class="item">
              <span class="label">{{ $t('column.classification') }}：</span>
              <el-select v-model="form.classificationId"
                         @change="filter">
                <el-option :label="$t('column.all')"
                           :value="null"></el-option>
                <el-option v-for="item in classifications"
                           :key="item.id"
                           :label="item.classificationName"
                           :value="item.id">
                </el-option>
              </el-select>
            </div>
          </div>

          <div class="contents">
            <el-tree v-if="columns.length && columns.find(e => e.children.length) && !isFilter && showNav && info.listStyleId !== 15"
                     class="columns"
                     ref="leftColumn"
                     :data="columns"
                     highlight-current
                     :expand-on-click-node="false"
                     default-expand-all
                     :props="defaultProps"
                     node-key="id"
                     icon-class="el-icon-arrow-down"
                     @node-click="(item) => columnClick(item, 1)"
                     @current-change="(item) => columnClick(item, 1)">
              <span class="custom-tree-node"
                    slot-scope="{ node, data }"
                    style="padding-left: 10px;">
                <span :title="node.label">{{ node.label }}</span>
              </span>
            </el-tree>

            <template v-if="articles.length && !loading">
              <!-- 列表样式选的是列表详情，则直接显示最新一篇文章的详情 -->
              <div v-if="info.listStyleId === 73"
                   class="detail">

                <template v-if="article.articleTemplate != 72">
                  <h2>{{ article.title }}</h2>
                  <!-- <div class="meta">{{ article.source && article.source + ' | ' }} {{ article.author && article.author + ' | ' }} {{ article.releaseTime }}</div>
                  <div class="meta">{{ article.edit && $t('column.edit') + '：' + article.edit }} {{ article.audit && ' | ' + $t('column.auditor') + '：' + article.audit }} {{ article.label && ' | ' + $t('column.label') + '：' + article.label }}</div> -->
                </template>
                <p v-if="article.summary"
                   class="brief">{{ article.summary }}</p>
                <div class="des"
                     v-html="article.mainBody"></div>
                <div v-if="article.fileList && article.fileList.length"
                     class="annex">
                  <h6>{{$t('column.attachmentDownload')}}</h6>
                  <ul class="files">
                    <li v-for="(file, i) in article.fileList"
                        :key="i">
                      <span class="name">{{ file.fileName }}</span>
                      <span class="download"
                            @click="download(file)">{{$t('column.download')}}</span>
                    </li>
                  </ul>
                </div>

              </div>
              <template v-else>
                <template v-if="info.listStyleId === 12">
                  <div class="article-wrap">
                    <ul class="articles">
                      <li v-for="(item, i) in articles"
                          :key="i"
                          :class="{'news-notice': info.listStyleId === 55}"
                          class="readDetail"
                          @click="toArtice(item)">
                        <template v-if="info.listStyleId === 55">
                          <div class="releaseTime">
                            <p class="d">{{ item.date }}</p>
                            <p class="m">{{ item.month }}</p>
                          </div>
                          <div class="news-title">{{ item.title }}</div>
                        </template>
                        <template v-else>
                          <img class="pic"
                               :src="item.titleImg"
                               alt=""
                               onerror="javascript:this.src='./images/1.png?id=1';" />
                          <div class="texts">
                            <p v-if="(item.listStyleId === 10 || item.listStyleId === 15) && item.classificationName"
                               class="type">
                              {{ item.classificationName }}
                            </p>
                            <h6 class="titleDes">{{ item.title }}</h6>
                            <template v-if="item.listStyleId === 11 || item.listStyleId == 12">
                              <span class="meta">{{ item.releaseTime }}</span>
                              <div class="des"
                                   v-html="item.mainBody"></div>
                            </template>
                            <span v-if="item.listStyleId === 10 "
                                  class="meta">{{ item.releaseTime }} {{ item.labelName && ' | ' +
                        item.labelName }}</span>
                            <template v-if="item.listStyleId === 15 || item.listStyleId === 16">
                              <div v-if="item.keynoteSpeaker"
                                   class="meta m-b-10">
                                <img class="icon"
                                     src="@/assets/images/mine.png"
                                     alt="" /> {{ item.keynoteSpeaker }}
                              </div>
                              <div v-if="item.activityStartTime"
                                   class="meta m-b-10">
                                <img class="icon"
                                     src="@/assets/images/time.png"
                                     alt="" />
                                {{ item.activityStartTime }}
                              </div>
                              <div v-if="item.offlineLocation"
                                   class="meta m-b-10">
                                <img class="icon"
                                     src="@/assets/images/location.png"
                                     alt="" /> {{ item.offlineLocation }}
                              </div>
                              <div v-if="item.onlineLocation"
                                   class="meta">
                                <img class="icon"
                                     src="@/assets/images/online.png"
                                     alt="" /> {{ item.onlineLocation }}
                              </div>
                            </template>
                            <el-button type="primary"
                                       class="readDetailBtn">{{ $t('column.readDetail') }}</el-button>
                          </div>

                        </template>
                      </li>
                    </ul>
                    <div v-if="articles.length"
                         class="pagination">
                      <el-pagination background
                                     @current-change="currentChange"
                                     :current-page="page"
                                     :page-size="pageSize"
                                     layout="total, prev, pager, next"
                                     :total="total"></el-pagination>
                    </div>
                  </div>
                </template>
                <template v-else-if="info.listStyleId === 11 || info.listStyleId === 15 || info.listStyleId === 10">
                  <div class="article-wrap">
                    <ul class="articles">
                      <li v-for="(item, i) in articles"
                          :key="i"
                          :class="{'news-notice': info.listStyleId === 55}"
                          @click="toArtice(item)">
                        <template v-if="info.listStyleId === 55">
                          <div class="releaseTime">
                            <p class="d">{{ item.date }}</p>
                            <p class="m">{{ item.month }}</p>
                          </div>
                          <div class="news-title">{{ item.title }}</div>
                        </template>
                        <template v-else>
                          <div class="texts leftBox">
                            <p v-if="(item.listStyleId === 10 || item.listStyleId === 15|| item.listStyleId === 11) && item.classificationName"
                               class="type">
                              {{ item.classificationName }}
                            </p>
                            <h6 class="titleDes">{{ item.title }}</h6>
                            <template v-if="item.listStyleId === 11 || item.listStyleId == 12">
                              <span class="meta">{{ item.releaseTime }}
                                <template v-if="item.labelName != ''">
                                  | {{ item.labelName }}
                                </template>
                              </span>
                            </template>
                            <span v-if="item.listStyleId === 10 "
                                  class="meta">{{ item.releaseTime }} {{ item.labelName && ' | ' +
                        item.labelName }}</span>
                            <template v-if="item.listStyleId === 15 || item.listStyleId === 16">
                              <div v-if="item.keynoteSpeaker"
                                   class="meta m-b-10">
                                <img class="icon"
                                     src="@/assets/images/mine.png"
                                     alt="" /> {{ item.keynoteSpeaker }}
                              </div>
                              <div v-if="item.activityStartTime"
                                   class="meta m-b-10">
                                <img class="icon"
                                     src="@/assets/images/time.png"
                                     alt="" />
                                {{ item.activityStartTime }}
                              </div>
                              <div v-if="item.offlineLocation"
                                   class="meta m-b-10">
                                <img class="icon"
                                     src="@/assets/images/location.png"
                                     alt="" /> {{ item.offlineLocation }}
                              </div>
                              <div v-if="item.onlineLocation"
                                   class="meta">
                                <img class="icon"
                                     src="@/assets/images/online.png"
                                     alt="" /> {{ item.onlineLocation }}
                              </div>
                            </template>
                          </div>
                          <img class="pic"
                               :src="item.titleImg"
                               alt=""
                               onerror="javascript:this.src='./images/1.png?id=1';" />
                        </template>
                      </li>
                    </ul>
                    <div v-if="articles.length"
                         class="pagination">
                      <el-pagination background
                                     @current-change="currentChange"
                                     :current-page="page"
                                     :page-size="pageSize"
                                     layout="total, prev, pager, next"
                                     :total="total"></el-pagination>
                    </div>
                  </div>
                </template>
                <template v-else>
                  <div class="article-wrap">
                    <ul :class="['articles', {media: info.listStyleId === 74}]">
                      <li v-for="(item, i) in articles"
                          :key="i"
                          :class="{'news-notice': info.listStyleId === 55, 'org': info.listStyleId === 68}"
                          class="overDetail"
                          @click="toArtice(item)">
                        <template v-if="info.listStyleId === 55">
                          <div class="releaseTime">
                            <p class="d">{{ item.date }}</p>
                            <p class="m">{{ item.month }}</p>
                          </div>
                          <div class="news-title">{{ item.title }}</div>
                        </template>
                        <template v-else>
                          <img v-if="info.listStyleId !== 74"
                               class="pic"
                               :src="item.titleImg"
                               alt=""
                               onerror="javascript:this.src='./images/1.png?id=1';" />

                          <template v-else-if="item.fileList">
                            <!-- <el-image class="media-pic"
                                      :style="{backgroundImage: 'url(http://10.10.11.7/iasf/sysFiles/preview/1706961813193707521)'}"
                                      src="http://10.10.11.7/iasf/sysFiles/preview/1706961813193707521"
                                      :preview-src-list="['http://10.10.11.7/iasf/sysFiles/preview/1706961813193707521']">
                            </el-image> -->
                            <video v-if="Util.isVideo(item.fileList[0].fileName.substring(item.fileList[0].fileName.lastIndexOf('.') + 1))"
                                   class="media-video"
                                   controls
                                   preload>
                              <source :src="item.fileList[0].filePath"
                                      type="video/mp4">
                              您的浏览器不支持 video 标签。
                            </video>
                            <el-image v-else
                                      class="media-pic"
                                      :src="item.fileList[0].filePath"
                                      :preview-src-list="[item.fileList[0].filePath]">
                            </el-image>
                          </template>

                          <div class="texts">
                            <p v-if="(item.listStyleId === 10 || item.listStyleId === 15) && item.classificationName"
                               class="type">
                              {{ item.classificationName }}
                            </p>
                            <h6 class="titleDes"
                                :title="item.title">{{ item.title }}</h6>
                            <template v-if="item.listStyleId === 11 || item.listStyleId == 12 || item.listStyleId == 68">
                              <span class="meta">{{ item.releaseTime }}</span>
                              <div class="des"
                                   v-html="item.mainBody"></div>
                            </template>
                            <span v-if="item.listStyleId === 10 "
                                  class="meta">{{ item.releaseTime }} {{ item.labelName && ' | ' +
                        item.labelName }}</span>
                            <template v-if="item.listStyleId === 15 || item.listStyleId === 16">
                              <div v-if="item.keynoteSpeaker"
                                   class="meta m-b-10">
                                <img class="icon"
                                     src="@/assets/images/mine.png"
                                     alt="" /> {{ item.keynoteSpeaker }}
                              </div>
                              <div v-if="item.activityStartTime"
                                   class="meta m-b-10">
                                <img class="icon"
                                     src="@/assets/images/time.png"
                                     alt="" />
                                {{ item.activityStartTime }}
                              </div>
                              <div v-if="item.offlineLocation"
                                   class="meta m-b-10">
                                <img class="icon"
                                     src="@/assets/images/location.png"
                                     alt="" /> {{ item.offlineLocation }}
                              </div>
                              <div v-if="item.onlineLocation"
                                   class="meta">
                                <img class="icon"
                                     src="@/assets/images/online.png"
                                     alt="" /> {{ item.onlineLocation }}
                              </div>
                            </template>
                            <el-button v-if="item.listStyleId === 15 || item.listStyleId == 68"
                                       type="primary"
                                       class="readDetailBtn">{{ $t('column.readDetail') }}</el-button>
                          </div>
                        </template>
                      </li>
                    </ul>
                    <div v-if="total > articles.length"
                         class="pagination">
                      <el-pagination background
                                     @current-change="currentChange"
                                     :current-page="page"
                                     :page-size="pageSize"
                                     layout="total, prev, pager, next"
                                     :total="total"></el-pagination>
                    </div>
                  </div>
                </template>
              </template>
            </template>
            <div v-else
                 class="none">
              <img src="@/assets/images/none.png"
                   alt="">
              <p class="text">{{ $t('column.comming') }}</p>
            </div>
          </div>
        </div>
        <!-- <template v-if="info.listStyleId !== 73 && info.listStyleId !== 74"> -->
        <template v-if="info.listStyleId !== 73 && info.listStyleId !== 74">
          <div v-if="site == 2"
               class="right">
            <p class="l-title">{{ $t('column.latestNews') }}</p>
            <ul class="list">
              <li v-for="(item, i) in site2News"
                  :key="i"
                  :title="item.title"
                  @click="toArtice(item)">
                <p class="text">{{ item.title }}</p>
                <span class="date">{{ item.releaseTime }}</span>
              </li>
            </ul>
          </div>
          <!-- 选择了“列表样式”，不用显示右侧部分 -->
          <div v-else
               class="right">
            <p class="l-title">{{ $t('column.hot') }}</p>
            <ul class="list">
              <li v-for="(item, i) in hots"
                  :key="i"
                  :title="item.title"
                  @click="toArtice(item)">
                <p class="text">{{ item.title }}</p>
                <span class="date">{{ item.releaseTime }}</span>
              </li>
            </ul>

            <p class="l-title">{{ $t('column.latestNews') }}</p>
            <ul class="list">
              <li v-for="(item, i) in news"
                  :key="i"
                  :title="item.title"
                  @click="toArtice(item)">
                <p class="text">{{ item.title }}</p>
                <span class="date">{{ item.releaseTime }}</span>
              </li>
            </ul>
          </div>
        </template>
        <div v-else
             class="right"></div>
      </div>
    </div>
  </div>
</template>

<script>
import Setting from '@/setting';
import Util from '@/libs/util';
import Breadcrumb from '@/components/breadcrumb';
import mixins from '@/mixins/article';
export default {
  mixins: [mixins],
  data () {
    return {
      Util,
      loaded: false,
      fromColumn: this.$route.query.column,
      columnId: '',
      info: {},
      columnBanner: '',
      searchTimer: null,
      lableId: [],
      convokeTypes: [],
      form: {
        classificationId: null,
        title: '',
        convokeType: null
      },
      classifications: [],
      labels: [],
      columns: [],
      infoColumns: [],
      sameStyle: 1,
      allColumnId: [],
      showNav: false,
      showNavIds: [10, 11, 12, 16, 55, 68, 73, 74], // 显示侧导航的模板id
      isFilter: false,
      page: 1,
      pageSize: 10,
      total: 0,
      articles: [],
      defaultProps: {
        value: 'id',
        label: 'columnName'
      },
      site2News: [],
      news: [],
      hots: [],
      deepestId: '',
      getAllId: null,
      article: {},
      loading: false
    };
  },
  components: {
    Breadcrumb
  },
  watch: {
    $route () {
      this.id = this.$route.query.id;
      this.info = {}
      this.init();
    },
    'form.title': function (val) {
      clearTimeout(this.searchTimer);
      this.searchTimer = setTimeout(() => {
        this.filter();
      }, 500);
    }
  },
  mounted () {
    this.convokeTypes = [
      {
        id: null,
        name: this.$t('column.all')
      },
      {
        id: 1,
        name: this.$t('column.comingSoon')
      },
      {
        id: 2,
        name: this.$t('column.alreadyHeld')
      }
    ];
    this.init();
  },
  methods: {
    init () {
      this.getInfo();
      this.getColumn();
      this.getNews();
      this.getLabel();
    },
    // 获取栏目详情
    getInfo () {
      this.loading = true
      this.id &&
        this.$post(`${this.api.findColumn}?id=${this.id}`)
          .then(({ data }) => {
            this.columnClick(data);
            if (data.typeId !== 3) this.loaded = true; // 非长页，才展示页面
            this.info = data
            this.pageSize = data.pageSize || 10
            this.showNav = this.showNavIds.includes(data.listStyleId)
            this.handlePublication()
            this.getLeftColumn()
            this.getClassification()
          })
          .catch((res) => { });
    },
    // 判断是否是出版物模板，如果是则跳转
    handlePublication () {
      if (this.info.templateId === 11) { // 出版社直接跳转到单个的出版社页面（/publication/single），否则就查询子级是否是出版社模板（templateId = 11），是的话就跳转到/publication/index，必须是每个子级都是出版社才跳转，后者是前者的集合（专利、专著、论文）
        this.$router.push(`/publication/single?siteId=${this.site}&id=${this.id}&type=${this.info.listStyleId}`)
      } else {
        this.$post(`${this.api.getsSublevelColumnsUnderALevel}?id=${this.id}&siteId=${this.site}`).then(({ data }) => {
          data.length && data.every(e => e.templateId == 11) && this.$router.push(`/publication?siteId=${this.site}&id=${this.id}`) // 如果子级每个栏目都是出版物类型
        }).catch(err => { })
      }
    },
    // 获取banner 规则：当前栏目有上传的，用当前的，没有上传的话，读取上级的（上级没有读上上级，以此类推）都没有的读取默认的
    getBanner (data) {
      for (const e of data) {
        if (e.columnBanner) this.columnBanner = e.columnBanner;
        if (e.id == this.info.id) {
          break;
        } else if (e.children.length) {
          this.getBanner(e.children);
        }
      }
    },
    // 获取所属分类
    getClassification () {
      // 会议分类
      if (this.info.templateId === 7) {
        this.$post(`${this.api.queryClassif}?siteId=${this.site}&templateId=${7}`)
          .then(({ data }) => {
            this.classifications = data;
          })
          .catch((err) => { });
      } else {
        // 其他类型的分类
        this.$post(`${this.api.getTheFullArticleByColumn}?id=${this.id}`)
          .then(({ data }) => {
            this.classifications = data;
          })
          .catch((err) => { });
      }
    },
    // 获取标签
    getLabel () {
      this.$post(`${this.api.queryLabel}?siteId=${this.site}`)
        .then(({ data }) => {
          this.labels = data;
          // 修改placeholder
          this.$nextTick(() => {
            setTimeout(() => {
              const el = this.$refs.search;
              if (el) el.$el.querySelector('.el-input__inner').placeholder = this.$t('column.selectPlaceholder');
            }, 500);
          });
        })
        .catch((err) => { });
    },
    // 递归查询是否每个层级的栏目都是同一列表样式，如果是，则查询全部栏目下的文章，否则查询当前栏目下的
    handleColumn (data, parent) {
      for (const e of data) {
        if (this.info.typeId === 4) {
          // 子级优先
          if (e.children.length) {
            this.handleColumn(e.children);
          } else if (!this.deepestId) {
            this.deepestId = e.id;
          }
        } else {
          // 常规栏目
          if (e.id == this.id) {
            this.allColumnId.push(e.id);
            e.children.length && this.handleColumn(e.children, 1);
          } else if (parent) {
            if (e.listStyleId !== this.info.listStyleId) {
              // 如果有不同的栏目样式
              this.sameStyle = 0;
              break;
            } else {
              this.allColumnId.push(e.id); // 收集所有该栏目下相同栏目样式的id
              e.children.length && this.handleColumn(e.children, parent);
            }
          } else {
            e.children.length && this.handleColumn(e.children, parent);
          }
        }
      }
    },
    // 左边栏目
    getLeftColumn () {
      this.$post(`${this.api.oneLevelChecksThemAll}?id=${this.id}&isSort=1&siteId=${this.site}`)
        .then(({ data }) => {
          const fromColumn = this.$route.query.column; // 有column标识的，说明是通过点击左侧导航跳转过来的，这种情况只查询该栏目下的文章
          const { typeId } = this.info;
          this.sameStyle = 1;
          this.allColumnId = [];
          this.deepestId = '';
          data.length && this.handleColumn(data);
          let id = this.sameStyle && typeId === 1 ? this.allColumnId : [+this.$route.query.id];
          if (typeId === 4 && !fromColumn) {
            id = [this.deepestId];
          }
          this.getAllId = id
          this.getArticle(id);
          this.columns = data;
          // 如果没上传banner
          if (!this.info.columnBanner) {
            this.getBanner(data);
            this.info.columnBanner = this.columnBanner || require('@/assets/images/column-banner.png');
          }
          this.$nextTick(() => {
            const el = this.$refs.leftColumn;
            el && el.setCurrentKey(this.id);
          });
        })
        .catch((err) => { });
    },
    // 右边资讯
    getColumn () {
      this.$post(this.api.listWithTreeMenuVisible, {
        siteId: this.site,
        columnName: '',
        templateId: '',
        typeId: '',
        isSort: 1
      })
        .then(({ data }) => {
          this.infoColumns = data;
        })
        .catch((err) => { });

      this.$post(`${this.api.hotContent}?siteId=${this.site}`)
        .then(({ data }) => {
          this.hots = Util.removeTag(data);
        })
        .catch((err) => { });
    },
    // 最新资讯
    getNews () {
      if (this.site == 2) {
        this.$post(this.api.newlyPublishedArticles, {
          siteId: this.site,
          columnIds: [411, 412, 413],
          pageNum: 1,
          pageSize: 10,
          publicationTimeSort: 1
        }).then(({ data }) => {
          this.site2News = Util.removeTag(data.records);
        }).catch((res) => { });
      } else {
        this.$post(this.api.newlyPublishedArticles, {
          pageNum: 1,
          pageSize: 5,
          siteId: this.site,
          publicationTimeSort: 1
        }).then(({ data }) => {
          this.news = Util.removeTag(data.records);
        }).catch((res) => { });
      }
    },
    // 会议时间筛选回调
    switchChange (item) {
      this.form.convokeType = item.id;
      this.filter();
    },
    // 点击栏目回调
    columnClick (to, left) {
      console.log("🚀 ~ file: index.vue:749 ~ columnClick ~ to, left:", to, left)
      const { typeId } = to;
      // 如果是左边的栏目，并且是第一级，并且长页/链接，则不作反应
      if (left && to.level === 1 && (typeId === 2 || typeId === 3)) return false;
      // 出版物则跳转到出版物列表
      if (to.templateId === 8) {
        this.$router.replace(`/publish?id=${this.id}&siteId=${this.site}`);
        return;
      }
      // 跳转链接
      if (typeId === 2) {
        let href = to.linkAddress;
        const cType = to.connectionType;
        if (cType !== 2) {
          // 非站外链接
          const ids = href.split('-'); // 栏目文章是用-分割的，栏目是必选，文章不是必选。选择了文章则跳转到文章页，否则跳转到栏目页
          // 站点id：站内链接取当前站点，其他站点链接取siteSelection
          const site = cType === 1 ? this.$route.query.siteId || this.site : to.siteSelection;
          if (ids[1]) {
            // 文章
            href = '/article?articleId=' + ids[1];
          } else {
            // 栏目
            const columnIds = ids[0].split(',');
            href = '/column?id=' + columnIds[columnIds.length - 1];
          }
          href = this.$router.resolve(href + '&siteId=' + site).href;
        }
        // 是否新窗口打开
        if (to.isOpen) {
          var userAgent = navigator.userAgent;
          var isSafari = /Safari/.test(userAgent) && !/Chrome/.test(userAgent);
          if (isSafari) {
            window.location.href = href
          } else {
            window.open(href)
          }
        } else {
          location.href = href;
        }
      } else if (typeId === 3) {
        // 长页栏目直接获取path
        this.$router.push(`/${to.path}?id=${to.id}&siteId=${this.site}`).catch((err) => { });
      } else if (left && (typeId === 1 || (typeId === 4 && !to.children.length))) {
        // 常规栏目，或者没有子级的子级优先栏目，跳转到column页
        this.$router.push(`/column?id=${to.id + (to.level !== 1 || !this.sameStyle ? '&column=1' : '')}&siteId=${this.site}`).catch((err) => { });
      } else if (left && typeId === 4 && to.children.length) {
        // 子级优先栏目，并且有子级
        const el = this.$refs.leftColumn;
        if (el) {
          const exp = el.store.nodesMap[to.id].expanded;
          el.store.nodesMap[to.id].expanded = !exp; // 展开收缩子级
          el.setCurrentKey(this.id);
        }
      }
    },
    // 查询文章列表
    getArticle (columnIds) {
      const labelName = [];
      // 获取标签名称
      this.labels.map((e) => {
        if (this.lableId.includes(e.id)) labelName.push(e.labelName);
      });
      this.$post(this.api.newlyPublishedArticles, {
        siteId: this.site,
        columnIds,
        pageNum: this.page,
        pageSize: this.pageSize,
        labelName,
        ...this.form
      })
        .then(({ data }) => {
          const articles = Util.removeTag(data.records);
          articles.forEach(e => {
            // 把发布日期分割成年月和日，新闻中心-通知公告要展示
            if (e.releaseTime) {
              const date = e.releaseTime.split('-')
              e.date = date[2]
              e.month = date[0] + '/' + date[1]
            }
          })
          this.articles = articles
          this.total = +data.total;
          this.loading = false
          // this.total == 1 && this.info.showWithDetails && this.$router.push(`/article?articleId=${this.articles[0].id}&id=${this.articles[0].columnId}`)
          if (this.total) {
            this.$post(`${this.api.findArticle}?id=${articles[0].id}`).then(async ({ data }) => {
              this.article = data
            }).catch(err => { })
          }
        })
        .catch((res) => { });
    },
    // 递归获取栏目所有id
    getIds (data, ids) {
      data.map((e) => {
        ids.push(e.id);
        e.children && this.getIds(e.children, ids);
      });
    },
    // 筛选
    filter () {
      this.page = 1;
      this.isFilter = !!(this.form.classificationId || this.form.title || this.form.convokeType || this.lableId.length); // 是否在筛选
      let id = [];
      if (this.isFilter) {
        this.getIds(this.columns, id);
      } else if (this.columns.length) {
        id = this.getAllId
      }
      this.getArticle(id);
    },
    currentChange (val) {
      this.page = val;
      this.isFilter = !!(this.form.classificationId || this.form.title || this.form.convokeType || this.lableId.length);
      let id = [];
      if (this.isFilter) {
        this.getIds(this.columns, id);
      } else if (this.columns.length) {
        id = [this.$refs.leftColumn.getCurrentKey()];
      }
      this.getArticle(id);
    },
    // 下载附件
    download (e) {
      Util.downloadFile(e.fileName, e.filePath)
    },
  }
};
</script>

<style lang="scss" scoped>
.banner {
    position: relative;
    height: 24rem;
    color: #fff;
    img {
        height: 24rem;
        object-fit: cover;
    }
    .texts {
        position: absolute;
        top: 160px;
        left: 267px;
    }

    .text {
        font-size: 2.16rem;
        font-weight: 600;
        @include ellipsis;
    }

    .sub {
        margin-top: 0.5rem;
        font-size: 1.6rem;
    }
}
.el-tree-node__content {
    padding-left: 10px !important;
}
.l-title {
    font-weight: 600;
}

.column-wrap {
    padding: 2rem 0;
    background: url(../../assets/images/column-bg.png) 0 0 / auto no-repeat,
        url(../../assets/images/column-bg2.png) bottom right/auto auto no-repeat;
    background-color: #f9fafa;
}

.article {
    display: flex;
    justify-content: space-between;
    width: 1200px;
    margin: 0 auto;

    .left {
        width: 83%;
    }

    .article-wrap {
        width: 100%;
    }

    .switch {
        display: inline-flex;
        align-items: center;
        margin-right: 2.5rem;

        li {
            padding: 0 0.75rem;
            margin-right: 0.5rem;
            line-height: 1.8rem;
            font-size: 1rem;
            color: #333;
            background: #f7f7f7;
            cursor: pointer;
        }

        .active {
            color: #fff;
            background: linear-gradient(126deg, #1150ac 0%, #17beff 100%);
        }
    }

    .forms {
        display: flex;
        align-items: center;
        padding: 1.5rem;
        margin-bottom: 1rem;
        background-color: #fff;

        .item {
            display: inline-flex;
            align-items: center;
            margin-right: 1.5rem;
        }

        .label {
            font-size: 0.912rem;
            color: #333;
            white-space: nowrap;
        }

        /deep/.el-input__inner {
            width: 100%;
            height: 2.4rem;
            line-height: 2.4rem;
            border: 0;
            background: #f7f7f7;
        }

        .search {
            display: inline-flex;
            width: 34%;
            margin-top: 0.1rem;

            input {
                width: 100%;
                height: 2.4rem;
                padding: 0 0.75rem;
                font-size: 1rem;
                color: #333;
                background: #f7f7f7;
                border: 0;
                border-radius: 6px;

                &:focus {
                    outline: none;
                }
            }
        }

        .icon {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width: 3.1rem;
            height: 2.4rem;
            background: #1583ff;
            border-radius: 0px 6px 6px 0px;
            cursor: pointer;
        }
    }

    .contents {
        display: flex;
    }

    /deep/.columns {
        & + .detail {
            padding-left: 10px;
        }
        width: 22%;
        margin-right: 0.6rem;
        overflow: auto;
        span {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        &:after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 2px;
            height: 100%;
            background-color: #e1e6f2;
        }

        .el-tree-node__content {
            position: relative;
            height: 2.4rem;
            padding-left: 2rem;
            margin-bottom: 1px;
            font-size: 1.04rem;
            color: #666;
            background-color: #fff;
            border-top: 1px solid #f8f9f9;
            cursor: pointer;

            &:hover {
                color: #0c84eb;
            }
        }

        .el-tree-node__label {
            font-size: 1.28rem;
            color: #666;
            line-height: 22px;
        }

        .el-tree-node__expand-icon.expanded {
            transform: rotate(180deg);
        }

        .el-tree-node__expand-icon {
            position: absolute;
            right: 10px;
        }

        .is-current > .el-tree-node__content {
            background-color: #e5edf8;
            border-top: 0;

            &:after {
                content: '';
                z-index: 2;
                position: absolute;
                top: 0;
                right: 0;
                width: 2px;
                height: 100%;
                background-color: #083a93;
            }

            .el-tree-node__label,
            .custom-tree-node {
                font-weight: 600;
                color: #1150ac;
            }
        }
    }

    .articles {
        .readDetail {
            padding: 10px 20px;
            justify-content: flex-start;
            align-items: center;
            .texts {
                padding-left: 1.5rem;
                .titleDes {
                    margin-bottom: 10px;
                    font-size: 1.2rem;
                    margin-top: 0;
                }
                .des {
                    margin-top: 10px;
                }
            }
            .titleDes {
                margin-top: 0.8rem;
                -webkit-line-clamp: 1;
            }
            .readDetailBtn {
                margin-top: 10px;
            }
            .texts {
                flex-grow: 1;
            }
        }
        .overDetail {
            .texts {
                width: 70%;
            }
        }
        li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            background-color: #fff;
            cursor: pointer;
        }

        .texts {
            width: 60%;
            padding-left: 30px;
        }

        .type {
            margin-bottom: 15px;
            font-size: 1.024rem;
            color: #333;
        }

        h6 {
            margin-bottom: 10px;
            font-size: 1.368rem;
            color: #000;
            @include mul-ellipsis(2);
        }

        .meta {
            display: flex;
            align-items: center;
            font-size: 0.88rem;
            line-height: 1;
            font-family: PingFangSC-Medium;
            color: #333;
        }

        .icon {
            margin-right: 10px;
        }

        .des {
            margin-top: 10px;
            @include mul-ellipsis(2);
        }

        .pic {
            width: 30%;
            height: auto;
            object-fit: cover;
        }
    }
    .media {
        display: flex;
        flex-wrap: wrap;
        margin-left: 10px;
        li {
            flex-direction: column;
            width: calc(25% - 30px);
            margin-right: 30px;
            background-color: transparent;
            &:nth-child(4n) {
                margin-right: 0;
            }
        }
        .media-video {
            width: 100%;
            height: 155px;
        }
        /deep/.media-pic {
            width: 100%;
            height: 155px;
            img {
                object-fit: cover;
            }
        }
        .texts {
            width: 100% !important;
            padding-left: 0;
        }
        h6 {
            margin-top: 10px;
            margin-bottom: 0;
            font-size: 1rem;
            text-align: center;
            -webkit-line-clamp: 1;
        }
    }
    .news-notice {
        .releaseTime {
            width: 88px;
            height: 88px;
            padding: 10px 0 16px;
            margin-right: 24px;
            color: #fff;
            text-align: center;
            background: #0b5086;
        }
        .d {
            font-size: 2rem;
            font-family: DINCondensed-Bold, DINCondensed;
            font-weight: bold;
            line-height: 43px;
        }
        .m {
            font-size: 0.9rem;
            line-height: 20px;
        }
        .news-title {
            width: calc(100% - 110px);
            font-size: 1.1rem;
            color: #333;
            line-height: 1.6;
            @include mul-ellipsis(2);
        }
    }
    .org {
        padding: 15px;
    }
    .right {
        width: 17%;
        padding-left: 20px;
        overflow: hidden;
    }

    .list {
        margin-bottom: 1rem;

        li {
            padding: 0.8rem 0;
            border-bottom: 1px solid #d8d8d8;
        }

        .text {
            margin-bottom: 5px;
            font-size: 0.98rem;
            cursor: pointer;
            @include ellipsis;

            &:hover {
                color: $main-color;
            }
        }

        .date {
            font-size: 0.78rem;
            color: #999;
        }
    }
}

.activity {
    .column-wrap {
        padding: 0;
        background: none;
    }

    .article-wrap {
        width: 100%;
    }

    .article {
        .forms {
            padding: 30px 0;
        }

        .articles li {
            flex-direction: row-reverse;
            justify-content: flex-end;
            padding-bottom: 38px;
            margin-bottom: 38px;
            border-bottom: 1px solid #ddd;
        }

        .right {
            padding-top: 30px;
        }
    }
}
.party {
    /deep/.columns {
        .el-tree-node__content {
            &:hover {
                color: $partyTheme;
            }
        }
        .is-current > .el-tree-node__content {
            background-color: $lightPartyTheme;
            &:after {
                background-color: $partyTheme;
            }

            .el-tree-node__label,
            .custom-tree-node {
                color: $partyTheme;
            }
        }
    }
    .article {
        .readDetailBtn {
            width: 100px;
            padding: 10px 20px;
            margin-top: 10px;
            background-color: $partyTheme;
            border-color: $partyTheme;
        }
    }
    /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
        background-color: $partyTheme !important;
    }
}
.detail {
    flex: 1;
    padding: 10px 15px;
    background-color: #fff;
    h2 {
        margin-bottom: 1rem;
        font-size: 1.9rem;
        color: #1c1c1c;
    }
    .meta {
        margin: 1rem 0;
        font-size: 0.88rem;
        color: #9b9b9b;
    }
    .brief {
        padding-bottom: 1.5rem;
        margin-bottom: 1rem;
        font-size: 1.2rem;
        line-height: 1.33;
        color: #606060;
        border-bottom: 1px solid #d8d8d8;
    }
    /deep/.des {
        a {
            color: rgb(0, 0, 238);
        }
        img {
            max-width: 100%;
            object-fit: cover;
        }
    }
    .annex {
        margin-top: 30px;
        h6 {
            padding-left: 8px;
            margin-bottom: 20px;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            line-height: 1;
            color: #333;
            border-left: 4px solid #1583ff;
        }
        li {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        .name {
            margin-right: 8px;
            font-size: 14px;
        }
        .download {
            color: #1583ff;
            cursor: pointer;
        }
    }
}
.none {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
    text-align: center;
    .text {
        margin-top: 20px;
        font-size: 0.9rem;
        color: #333;
    }
}

@media (max-width: 1200px) {
    .banner {
        height: 15rem !important;
        img {
            height: 15rem !important;
        }
        .texts {
            top: 6rem;
            left: 3rem;
        }
    }
    .article {
        flex-direction: column;
        width: 90%;
        .columns {
            width: 40%;
        }
        .left {
            width: 100%;

            .forms {
                flex-direction: column;
                justify-content: center;
                align-items: center;

                .item,
                .search {
                    margin: 20px 0 0 0;
                }

                .item:first-child {
                    margin: 0;
                }

                div {
                    width: 100%;
                }
            }
        }

        .article-wrap {
            width: 90%;
            margin: 0 auto;
        }

        .articles {
            li:not(.news-notice) {
                flex-direction: column;
                align-items: flex-start;
                padding: 1rem;
                margin-top: 1rem;
                .pic {
                    width: 100%;
                    margin: 10px 0;
                }
            }
            .readDetail {
                align-items: flex-start;
                .texts {
                    width: 100%;
                    padding-left: 0;
                }
            }
        }
        .media {
            li {
                padding: 0;
            }
        }

        .right {
            width: 95%;
            margin: 20px auto;
        }
    }
}

@media (max-width: 640px) {
    .banner {
        height: 12rem !important;
        img {
            height: 12rem !important;
        }
        .texts {
            left: 2rem;
            bottom: 2rem;
            .text {
                font-size: 1.5rem;
            }
        }
    }
    .article {
        .contents {
            flex-direction: column;
            padding: 0 15px;
        }
        .columns,
        .article-wrap {
            width: 100%;
            margin-right: 0;
        }
        .articles {
            li {
                .leftBox {
                    padding-left: 0;
                    .titleDes {
                        line-height: 1.368rem;
                    }
                }
            }
        }
        .media {
            margin-left: 0;
            li {
                width: calc(50% - 20px);
                margin-right: 20px;
                &:nth-child(2n) {
                    margin-right: 0;
                }
            }
        }
    }
    .forms {
        .switch {
            width: 100%;
            flex-direction: column;
            margin-right: 0;
            li {
                width: 90%;
                margin: 0 auto;
                margin-top: 10px;
            }
        }
    }
}
</style>
