<template>
  <div class="index-box">
    <!-- 头部搜索 -->
    <div class="search-box">
      <div class="clearfix">
        <navigator
          url="/pages/notify/main"
          hover-class="none"
          class="msg fr">
          <span v-if="isUnRead" class="active"></span>
        </navigator>
        <navigator
          url="/pages/search/main"
          hover-class="none"
          class="search">
          输入内容关键词
        </navigator>
      </div>
      <div class="bg-blank"></div>
    </div>

    <!-- banner图 -->
    <banner :bannerList="bannerList"></banner>

    <!-- 导航 -->
    <menu-link :menuData="menuData"></menu-link>

    <div v-for="(item, index) in indexData" :key="index">
      <!-- 标题 -->
      <title-more
        :url="typeData[item.moduleType].url"
        :title="typeData[item.moduleType].title"
        :moreText="typeData[item.moduleType].text"></title-more>

      <!-- 列表 -->
      <div v-for="(list, key) in item.wxArticlePageResponses" :key="key">
        <media-item v-if="list.contentType == 'video' || list.contentType == 'audio'" :mediaInfo="list"></media-item>
        <article-item v-else :articleInfo="list"></article-item>
      </div>
    </div>

    <!-- 广告海报 -->
    <poster :posterData="posterData"></poster>

    <!-- 联系客服 -->
    <div class="contact">
      <img src="../../assets/images/contact_icon.png" mode="widthFix" />
      <button open-type="contact"></button>
    </div>
  </div>
</template>

<script>
import banner from '@/components/banner'
import menuLink from '@/components/menuLink'
import titleMore from '@/components/titleMore'
import mediaItem from '@/components/mediaItem'
import articleItem from '@/components/articleItem'
import poster from '@/components/poster'

import { wxBanner, notifyPage, wxIndexData, wxIndex } from '@/utils/api'
import { posterData } from '@/utils/tempData.js'

export default {
  components: {
    banner,
    menuLink,
    titleMore,
    mediaItem,
    articleItem,
    poster
  },
  data () {
    return {
      bannerList: [],
      menuData: [],
      indexData: [],
      posterData: posterData,
      typeData: {
        'ONE_LESSON_PER_WEEK': {
          title: '每周一课',
          url: '',
          text: ''
        },
        'EXPERTS_SAY': {
          title: '专家说',
          url: '/pages/expertSay/main',
          text: '更多'
        },
        'PARENTING_COURSES': {
          title: '育儿课堂',
          url: '/pages/teachClass/main',
          text: '更多'
        }
      },
      // 是否新消息
      isUnRead: false
    }
  },
  mounted () {
    this.initData()
  },
  async onShow () {
    this.isUnRead = (await notifyPage(1, 1)).data.some(item => !item.isRead)
  },
  methods: {
    // 初始化数据
    async initData () {
      // wx.showLoading({
      //   title: '加载中'
      // })

      this.bannerList = await wxBanner()
      this.menuData = await wxIndex()
      this.indexData = await wxIndexData()

      wx.hideLoading()
    }
  },
  onShareAppMessage (res) {
    return {
      title: '海量专家育儿干货，超实用宝典快来看！',
      path: '/pages/index/main',
      imageUrl: '/static/images/share/xiaotangmama.png'
    }
  }
}
</script>

<style scoped lang="less">
@import '../../assets/less/common.less';
.search-box{
  position: relative;
  padding: @spacing;
  box-sizing: border-box;
  background: @themeColor;
  .msg{
    margin: 5px 0 0 15px;
    width: 20px;
    height: 20px;
    background: url('../../assets/images/icon_msg.png') no-repeat center center;
    background-size: 20px auto;
    .active{
      display: block;
      width: 100%;
      height: 100%;
      background: url('../../assets/images/icon_msg_active.png') no-repeat right top;
      background-size: 8px auto;
    }
  }
  .search{
    height: 30px;
    line-height: 30px;
    border-radius: 15px;
    text-indent: 30px;
    background: #fff;
    background: url('../../assets/images/icon_search.png') no-repeat 10px center #fff;
    background-size: auto 14px;
    color: #999;
    overflow: hidden;
  }
  .bg-blank{
    z-index: -1;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 36px;
    background: @themeColor;
  }
}
.contact{
  position: fixed;
  right: 10px;
  bottom: 46px;
  width: 45px;
  height: 45px;
  img{
    width: 100%;
    height: 100%;
  }
  button{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }
}
</style>
