<template>
  <div class="page">
    <div class="sticky">
      <div class="header">
        <div class="left flex">
          <div class="active">
            <!-- 资讯 -->
            {{ $t('tab.tab7') }}
          </div>
        </div>
        <div class="icon-cox">
          <searchIcon></searchIcon>
          <msgIcon></msgIcon>
        </div>
      </div>
      <template v-if="language == language1">
        <div class="container" v-if="readed && (language == 'zh-CN' || language == 'zh-TW')">
          <img class="meau" @click="tabOperatePop = true" src="/img/icon/meau.png" alt="极度证券">
          <van-tabs class="vtabs" :ellipsis="false" v-model="activeName" @change="tabChange" animated swipeable>
            <van-tab :name="item.code" v-for="(item) in tabList" :key="item.code" :title="tabName[item.title] || item.title">
              <component :category="item.title" :is="item.title == '快讯' ? 'flashList' : 'list'" />
            </van-tab>
          </van-tabs>
        </div>
        <div class="container" v-if="readed && (language != 'zh-CN' && language != 'zh-TW')">
          <!-- <img class="meau" @click="tabOperatePop = true" src="/img/icon/meau.png" alt="极度证券"> -->
          <van-tabs class="vtabs" :ellipsis="false" v-model="activeName" animated swipeable>
            <van-tab name="0" :title="tabName['要闻']">
              <component category="要闻" :is="'list'" />
            </van-tab>
          </van-tabs>
        </div>
      </template>
    </div>
    <van-popup v-model="tabOperatePop" round position="bottom">
      <tabPop :allTablist="allTablist" :tabName="tabName" :activeName="activeName" :tabList="tabList" @cancel="tabOperatePop = false" @back="tabBack" @tabChange="tabChangeBack" v-if="tabOperatePop"/>
    </van-popup>
  </div>
</template>
<script>
import { getCategory } from "@/api/market";
import list from "./components/list.vue";
import { getStorage } from '@/utils/localStorage'
import flashList from "./components/flashList.vue";
import tabPop from "./components/tabPop.vue";
export default {
  components: {
    list,
    flashList,
    tabPop
  },
  data () {
    return {
      activeName: '0',
      readed: false,
      tabList: [],
      allTablist: [],
      tabOperatePop: false,
      language1: ''
    }
  },
  computed: {
    tabName() {
      return {
        "要闻": this.$t("tab.tab8"),
        "快讯": this.$t("tab.tab9"),
        "港股": this.$t("common.l42"),
        "美股": this.$t("common.l41"),
        "A股": this.$t("common.l61"),
        "综合": this.$t("common.l40"),
        "专栏": this.$t("tab.tab10"),
      }
    }
  },
  activated () {
    this.language1 = this.language
  },
  created () {
    this.language1 = this.language
    this.getCategory()
  },
  methods: {
    getCategory() {
      getCategory().then(res => {
        var list = res || []
        var tabList = []
        list.forEach((item, index) => {
          tabList.push({
            title: item,
            code: index + ''
          })
        })
        this.allTablist = tabList
        var list1 = getStorage('findShowTab1')
        var list3 = getStorage('findHideTab1')
        if (list1) {
          tabList = tabList.filter(item => list1.indexOf(item.code) !== -1).sort((a, b) => list1.indexOf(a.code) - list1.indexOf(b.code))
          var list2 = this.allTablist.filter(item => list1.indexOf(item.code) === -1 && list3.indexOf(item.code) === -1)
          tabList = tabList.concat(list2)
        }
        this.tabList = tabList
        this.readed = true
        if (this.$route.params.type) {
          this.activeName = this.$route.params.type
        } else {
          this.tabList.forEach((item, index) => {
            if (item.title == '快讯') {
              this.activeName = item.code
            }
          })
        }
      }).catch(() => {}).finally(() => {
      })
    },
    tabChange(val) {
      this.$router.replace('/finding/' + val)
    },
    tabChangeBack(val) {
      this.tabOperatePop = false
      if (this.activeName == val) {
        return
      }
      this.activeName = val
      this.tabChange(val)
    },
    tabBack(list) {
      this.tabList = list
      this.readed = false
      this.$nextTick(() => {
        this.readed = true
      })
    }
  }
}
</script>
<style lang="less" scoped>
.sticky {
  background-color: var(--bg-);
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  padding: 12px 18px;
  .left {
    column-gap: 19px;
    .active {
      font-weight: 600;
    }
  }
  .href {
    cursor: pointer;
  }
}
.icon-cox {
  display: flex;
  align-items: center;
  column-gap: 19px;
}
.container {
  position: relative;
  .meau {
    position: absolute;
    right: 18px;
    top: 13px;
    z-index: 5;
    width: 24px;
    cursor: pointer;
  }
}
.van-list {
  padding: 20px 18px;
}
.item {
  column-gap: 19px;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  padding-bottom: 22px;
  .title {
    font-size: 15px;
    line-height: 24px;
    font-weight: 500;
    color: var(--color-1-);
    margin-bottom: 12px;
  }
  .left {
    flex: 1;
    min-width: 10%;
    max-width: 100%;
  }
  .origin {
    color: #A2A2A2;
    font-size: 11px;
    font-weight: 500;
    column-gap: 18px;
  }
}
::v-deep {
  .van-tabs .van-tabs__wrap {
    box-shadow: 0px 1px 0px 0px rgba(225,225,225,0.5);
  }
}
</style>