<template>
  <div class="com" v-if="list.length">
    <van-notice-bar left-icon="/img/home/notice1.png" background="#fff" color="#333333" :scrollable="false">
      <van-swipe
        vertical
        class="notice-swipe"
        :autoplay="3000"
        :show-indicators="false"
      >
        <van-swipe-item v-for="(item, index) in list" :key="index" @click="toDetail(item)">{{ item.title }}</van-swipe-item>
      </van-swipe>
    </van-notice-bar>
    <img src="/img/icon/meau.png" alt="极度证券" class="meau" @click="$router.push('/notices')">
    <van-popup v-model="detailPop" :style="{ width: '324px' }">
      <detailPop v-if="detailPop" @cancel="detailPop = false" :targetData="targetData" :symbolList="symbolList" />
    </van-popup>
  </div>
</template>
<script>
import { getCmsNewsList } from "@/api/notice";
import bus from '@/utils/bus'
import detailPop from "@/view/notices/list/components/detailPop.vue";
export default {
  components: {
    detailPop
  },
  inject: ['getproductDataObj'],
  data () {
    return {
      list: [],
      language1: '',
      symbolList: [],
      detailPop: false,
      targetData: {}
    }
  },
  computed: {
    productDataObj() {
      return this.getproductDataObj()
    },
    productList() {
      return this.symbolList.filter(item => this.productDataObj[item])
    }
  },
  deactivated() {
    bus.$off('selectLang', this.getCmsNewsList)
  },
  activated() {
    if (this.language1 != this.language) {
      this.getCmsNewsList()
    }
    bus.$on('selectLang', this.getCmsNewsList)
  },
  methods: {
    getCmsNewsList() {
      getCmsNewsList({
        language: this.language,
        tag: 'home'
      }).then(res => {
        var list = res.list || []
        list.forEach(item => {
          item.extras = item.extras ? JSON.parse(item.extras) : null
        })
        this.list = list
        this.language1 = this.language
      }).catch(() => {})
    },
    toDetail(item) {
      if (item.extras) {
        var data = item.extras.data || {}
        if (this.language != 'zh-CN' && (item.extras.data_en && item.extras.data_en.title)) {
          data = item.extras.data_en
        }
        if (this.language == 'zh-TW' && (item.extras.data_tw && item.extras.data_tw.title)) {
          data = item.extras.data_tw
        }
        if (data.product && data.product[0]) {
          this.symbolList = data.product.map(item => item.symbol)
          bus.$emit("alterProductData", {
            getData: this.symbolList,
          });
        }
        this.targetData = data
        this.detailPop = true
        return
      }
      this.$router.push('/notice-detail/' + item.id)
    }
  }
}
</script>
<style lang="less" scoped>
.com {
  position: relative;
  padding-right: 30px;
  margin-bottom: 16px;
  .meau {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    width: 18px;
  }
}
.van-notice-bar {
  height: 20px;
  line-height: 20px;
  padding: 0;
}
.van-swipe {
  height: 20px;
  line-height: 20px;
  .van-swipe-item {
    color: #6F6F6F;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
::v-deep {
  .van-notice-bar__left-icon {
    font-size: 20px;
    margin-right: 6px;
  }
}
</style>