<template>
  <div>
    <!--轮播图-->
    <Banner :arrBanner="arrBanner"/>
    <!--消息轮播-->
    <Notice :message="noticeArr"/>
    <Goods class="margin-top-16"
           :subtitle="'明星产品'"
           :products="starProduct"
           @funJump="funJump"/>
    <Goods class="margin-top-30"
           :subtitle="'推荐贷款'"
           :products="recommendedProduct"
           @funJump="funJump"/>
  </div>
</template>

<script>
import Banner from './child/banner'
import Notice from './child/notice'
import Goods from './child/goods'
import { getBannerList, getNotice, getProduct } from './api'
import { Toast } from 'vant'

export default {
  name: 'index',
  components: {
    Banner,
    Notice,
    Goods
  },
  data () {
    return {
      arrBanner: [],
      noticeArr: [],
      noticeArrBridge: [], // 因为vue-router的keep-alive，swiper垂直滚动失效，缓存数据
      arrProducttype: [0, 1], // 产品类型: 0明星产品1推荐产品
      starProduct: [], // 明星产品
      recommendedProduct: [] // 推荐贷款
    }
  },
  activated () {
    if (!this.$route.meta.isUseCache) {
      this.arrBanner = []
      this.noticeArr = []
      this.noticeArrBridge = []
      this.arrProducttype = [0, 1]
      this.starProduct = []
      this.recommendedProduct = []
      this.fetchBanner()
      this.fetchNotice()
      this.arrProducttype.forEach(item => {
        this.fetchProduct(item)
      })
    } else {
      this.noticeArr = []
      this.$nextTick(() => {
        this.noticeArr = JSON.parse(JSON.stringify(this.noticeArrBridge))
      })
    }
    this.$refreshTitle('贷款')
    this.$route.meta.isUseCache = false
  },
  methods: {
    funJump (item) {
      this.$router.push({ name: 'loanExplain', params: { orderProductId: item.id } })
    },
    // 顶部轮播图
    fetchBanner () {
      getBannerList().then(res => {
        if (res.status) {
          this.arrBanner = res.data
        } else {
          Toast(res.msg)
        }
      }).catch(err => {
        Toast(err)
      })
    },
    // 营销通知
    fetchNotice () {
      getNotice().then(res => {
        if (res.status) {
          if (Object.prototype.toString.call(res.data) === '[object Array]') {
            this.noticeArr = res.data
            this.noticeArrBridge = JSON.parse(JSON.stringify(res.data))
          }
        } else {
          Toast(res.msg)
        }
      }).catch(err => {
        Toast(err)
      })
    },
    // 产品列表
    fetchProduct (type) {
      getProduct(type).then(res => {
        if (res.status) {
          switch (type) {
            case 0:
              this.starProduct = res.data
              break
            case 1:
              this.recommendedProduct = res.data
              break
            default:
          }
        } else {
          Toast(res.msg)
        }
      }).catch(err => {
        Toast(err)
      })
    }
  },
  beforeRouteLeave (to, from, next) {
    if (['loanMedia', 'loanExplain', 'loanCalculator', 'loanMine'].includes(to.name)) {
      from.meta.isUseCache = true
    }
    next()
  }
}
</script>

<style lang="scss" scoped>
.margin-top-16 {
  margin-top: 16px;
}

.margin-top-30 {
  margin-top: 30px;
}
</style>
