<template>
  <div class="page">
    <download v-if="appParams.apkDownLoad == 1" />
    <div class="header flex">
      <div class="left flex">
        <van-image
          @click="$router.push('/nav')"
          width="29"
          height="29"
          round
          fit="cover"
          :src="userInfo.head_file || '/img/home/user.png'"
        />
        <div class="input flex" @click="$router.push('/search')">
          <img class="search" src="/img/home/search.png" alt="极度证券">
          <div>
            <!-- 股票名称/币种名称/代码/首字母 -->
            {{ $t('home.l') }}
          </div>
        </div>
      </div>
      <div class="right flex">
        <img class="icon" @click="$router.push('/chat')" src="/img/home/icon1.png" alt="极度证券">
        <van-badge v-if="msgDotNumber" :content="msgDotNumber" max="99">
          <img class="icon" @click="$router.push('/inform')" src="/img/home/msg.png" alt="极度证券">
        </van-badge>
        <img class="icon" v-else @click="$router.push('/inform')" src="/img/home/msg.png" alt="极度证券">
      </div>
    </div>
    <van-pull-refresh pulling-text=" " loosing-text=" " loading-text=" " v-model="refreshing" @refresh="onRefresh">
      <div class="section">
        <loginBox />
        <routerBox1 />
        <noticeList/>
        <leverView v-if="appParams.lever && appParams.lever.enable == 1" />
        <activities v-if="exponentShow" :centerLeftList="centerLeftList" :centerRightList="centerRightList" />
      </div>
      <marketTabs v-if="optionBoxShow" />
      <div class="section">
        <swipeView v-if="exponentShow" :list="topList" />
        <newsList ref="news" v-if="newsListShow" @success="onRefreshed" />
      </div>
    </van-pull-refresh>
    <router-view></router-view>
  </div>
</template>
<script>
import loginBox from "./components/loginBox.vue";
import routerBox1 from "./components/router-box1.vue";
import swipeView from "./components/swipe.vue";
import newsList from "./components/newsList.vue";
import marketTabs from "./components/marketTabs.vue";
import activities from "./components/activities.vue";
import download from "./components/download.vue";
import noticeList from "./components/noticeList.vue";
import leverView from "./components/lever.vue";
import { getFaBannerList } from "@/api/app";
import { mapGetters } from "vuex";
import bus from '@/utils/bus'
export default {
  components: {
    loginBox,
    routerBox1,
    swipeView,
    newsList,
    marketTabs,
    activities,
    download,
    noticeList,
    leverView
  },
  data () {
    return {
      exponentShow: true,
      optionBoxShow: false,
      newsListShow: false,
      // topList: [{image: "https://d.jdnx.com/upload/1698766333.png"}],
      topList: [],
      centerLeftList: [],
      centerRightList: [],
      language1: '',
      refreshing: false,
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  deactivated() {
    this.exponentShow = false
    bus.$off('selectLang', this.getFaBannerList)
  },
  activated() {
    this.exponentShow = true
    if (this.language1 != this.language) {
      this.getFaBannerList()
    }
    bus.$on('selectLang', this.getFaBannerList)
  },
  methods: {
    getFaBannerList() {
      getFaBannerList({
        language: this.language,
      }).then(res => {
        var list = res.list || []
        var topList = []
        var centerLeftList = []
        var centerRightList = []
        list.forEach(item => {
          if (item.area == 'index_top_center') {
            topList.push(item)
          }
          if (item.area == 'index_center_left') {
            centerLeftList.push(item)
          }
          if (item.area == 'index_center_right') {
            centerRightList.push(item)
          }
        })
        this.topList = topList
        this.centerLeftList = centerLeftList
        this.centerRightList = centerRightList
        this.language1 = this.language
      }).catch(() => {}).finally(() => {
        this.optionBoxShow = true
        this.newsListShow = true
      })
    },
    onRefresh() {
      this.refreshing = true;
      if (this.$refs['news']) {
        this.$refs['news'].getNews()
      } else {
        this.refreshing = false
      }
    },
    onRefreshed() {
      this.refreshing = false
    }
  }
}
</script>
<style lang="less" scoped>
.page {
  padding:0 0 12px;
}
.header {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 5px 18px 11px;
  column-gap: 16px;
  justify-content: space-between;
  background-color: var(--bg-);
  .left {
    flex: 1;
    min-width: 20%;
    column-gap: 9px;
  }
  .van-image {
    cursor: pointer;
  }
  .input {
    flex: 1;
    min-width: 20%;
    height: 34px;
    padding: 0 12px;
    background-color: #F6F7F9;
    border-radius: 6px;
    font-size: 12px;
    color: #8B909B;
    white-space: nowrap;
    overflow: hidden;
    .search {
      width: 11px;
      margin-right: 1px;
    }
  }
  .right {
    column-gap: 16px;
  }
  .icon {
    cursor: pointer;
    width: 18px;
    display: block;
  }
}
.section {
  background-color: var(--bg-);
  padding: 0 18px;
}
.section1 {
  background-color: var(--bg-);
  padding: 4px 0 20px 18px;
}
</style>