<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.id)">{{ item.title }}</van-swipe-item>
      </van-swipe>
    </van-notice-bar>
    <img src="/img/icon/meau.png" alt="" class="meau" @click="$router.push('/notices')">
  </div>
</template>
<script>
import { getCmsNewsList } from "@/api/notice";
import bus from '@/utils/bus'
export default {
  data () {
    return {
      list: [],
      language1: ''
    }
  },
  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
      }).then(res => {
        this.list = res.list || []
        this.language1 = this.language
      }).catch(() => {})
    },
    toDetail(id) {
      this.$router.push('/notice-detail/' + 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>