<template>
  <div>
    <headerView/>
    <!-- banner -->
    <div class="er_banner">
      <div class="bannerimg" v-if="parentData">
        <div class="banneritem">{{$tf(parentData,"name")}}</div>
      </div>
    </div>
    <!-- banner -->
    <div class="er_cont clearfloat">
      <div class="contl left">
        <ul>
          <li v-for="(column,columnIndex) in columnList" :key="columnIndex" :class="id==column.id?'er_active':''">
            <a href="javascript:void(0);" @click="$to('listPage',{pid:column.parent,id:column.id})" :class="id==column.id?'er_active2':''">{{$tf(column,"name")}}</a>
          </li>
          <!-- <li >
            <a href="javascript:void(0);" class="er_active2">通知公告</a>
          </li> -->
        </ul>
      </div>
      <div class="contr right">
        <div class="contrupbox clearfloat">
          <span class="contrupl left">{{$tf(thisColumn,'name')}}</span>
          <div class="contrupr right">
            <span>{{$t('common.currentLocation')}}</span>
            <a href="javascript:void(0);" @click="$to('home')">{{$t('common.homeName')}} </a>
            <a href="javascript:void(0);" @click="$to('listPage',{pid:thisColumn.parent})"> > {{$tf(parentData,"name")}}</a>
            <a href="javascript:void(0);"> > {{$tf(thisColumn,'name')}}</a>
          </div>
        </div>

        <div class="contrdown">
          <ul>

            <li v-for="(article,articleIndex) in articleList" :key="articleIndex">
              <a href="javascript:void(0);" class="clearfloat" @click="$to('detailedPage',{id:article.id})">
                <span class="dian left"></span>
                <h3 class="left elli">{{$tf(article,"title")}}</h3>
                <span class="right">{{article.updateTime || article.createTime}}</span>
              </a>
            </li>

          </ul>
        </div>
      </div>
    </div>
    <footerView/>
  </div>
</template>

<script>
import { getwayMixin } from '@/views/gateway/mixins/getwayMixin'
import { getAction } from '@/api/manage'
import headerView from '@/views/gateway/common/header'
import footerView from '@/views/gateway/common/footer'

export default {
  mixins:[getwayMixin],
  components:{
    headerView,
    footerView
  },
  props:{
  },
  data(){
    return {
      parentData:{},
      thisColumn:{},
      columnList:[],
      articleList: [],
    }
  },
  computed:{
    pid(){
      return this.$route.query.pid || '-1';
    },
    id(){
      return this.$route.query.id;
    },
    findStr(){
      if(this.$route.query.findStr){
        return '*'+this.$route.query.findStr+'*';
      }else{
        return '';
      }
    },
  },
  mounted(){
    this.loadData();
  },
  watch:{
    pid(){
      this.loadData();
    },
    id(){
      this.loadData();
    },
    findStr(){
      this.loadData();
    }
  },
  updated(){
  },
  methods:{
    loadData(){
      //查询栏目（包含当前的和候选的）
      getAction('/gateway/gatewayColumn/list',{pageSize:-1,isEnable:'Y',fpid:this.pid}).then((res)=>{
        if(res.success){
          let list = res.result.records||res.result;
          //查出根节点
          this.parentData = list.find(x => !x.parent);
          this.thisColumn = list.find(x => x.id == this.id);
          this.columnList = list.filter(x => x.parent);

          if(!this.id){
            let firstColumn = this.columnList[0]
            if(firstColumn){
              //this.$to('listPage',{pid:firstColumn.parent,id:firstColumn.id},true)
            }
          }
        }
      });
      //如果没有ID自动选中一个
      // if(this.id){
        let columnId = this.id;
        //查询文章列表
        let findParam = {}
        if(this.findStr){
          if(this.utils.isCn()){
            findParam.title = this.findStr;
          }else if(this.utils.isEn()){
            findParam.titleen = this.findStr;
          }
        }else{
          //非搜索，还没有子id，差个锤子
          columnId = (columnId || this.pid) || '-1'
        }
        getAction('/gateway/gatewayArticle/list',{pageSize:-1,isRelease:'Y',columnId,...findParam}).then((res)=>{
          if(res.success){
            let list = res.result.records||res.result;
            this.articleList = list;
          }
        });
      // }
    },
  },
}
</script>

<style scoped>
</style>