<template>
  <div class="menu-box clearfix">
      <div
        class="menu fl"
        :class="menuStyleType == 0 ? 'type1':'type2'"
        v-for="(item, key) in menuList"
        :key="key"
        @click="toLink(item)">
        <img :src='menuImg[menuStyleType][item]' mode="widthFix">
        <img class="live" v-if="item === 'LIVE_BROADCAST'" src="../assets/images/title_icon_1.png" mode="widthFix">
      </div>
  </div>
</template>

<script>
export default {
  props: ['menuData'],
  computed: {
    menuList () {
      return this.menuData.filter(item => {
        return item.isShow && (this.menuImg[0][item.moduleType] || this.menuImg[1][item.moduleType])
      }).sort((a, b) => {
        return b.sort - a.sort
      }).map(item => {
        return item.moduleType
      })
    },
    menuStyleType () {
      return this.menuList.length % 2
    }
  },
  data () {
    return {
      menuImg: [
        {
          'EXPERTS_SAY': require('../assets/images/menu_img_1.png'),
          'PARENTING_COURSES': require('../assets/images/menu_img_2.png'),
          'LIVE_BROADCAST': require('../assets/images/menu_img_3.png'),
          'BABY_GROWTH_TOOLS': require('../assets/images/menu_img_4.png')
        },
        {
          'EXPERTS_SAY': require('../assets/images/menu_img_5.png'),
          'PARENTING_COURSES': require('../assets/images/menu_img_6.png'),
          'LIVE_BROADCAST': require('../assets/images/menu_img_7.png')
        }
      ],
      urlObj: {
        'EXPERTS_SAY': '/pages/expertSay/main', // 专家说
        'PARENTING_COURSES': '/pages/teachClass/main', // 育儿课堂
        'LIVE_BROADCAST': '', // 大咖直播
        'BABY_GROWTH_TOOLS': '/pages/babyGrowth/main' // 宝宝成长工具
      }
    }
  },
  methods: {
    toLink (key) {
      switch (key) {
        case 'LIVE_BROADCAST': // 大咖直播
          /* add by 梁展鹏 20200628 [大咖直播]打开[看点直播]微信小程序 */
          /* 操作指引：https://mp.weixin.qq.com/s/fJHLUF-lMj6tUXWt1Rxjeg */
          /* 操作指引：https://docs.qq.com/doc/DT1RnalVDR3RLaEpq */
          wx.navigateToMiniProgram({
            appId: 'wx60d176f873ca2d67', // 看点直播
            path: 'pages/personal-center/index?id=3605508950' // 小汤妈妈的看点直播首页
            // path: 'pages/reserve/main?p=0_1395345' // 小汤妈妈的直播详情
          })
          break
        default:
          let url = this.urlObj[key]
          if (url === '') {
            url = '/pages/webview/main?url=live'
          }

          wx.navigateTo({ url: url })

          break
      }
    }
  }
}
</script>

<style scoped lang="less">
@import '~@/assets/less/common.less';
.menu-box{
  margin: 0 @spacing - 5 @spacing - 10;
  overflow: hidden;
  .menu{
    position: relative;
    padding: 0 5px 10px;
    box-sizing: border-box;
    overflow: hidden;
    &.type1{
      width: 50%;
    }
    &.type2{
      width: 33.33%;
    }
    .live{
      position: absolute;
      top: 0;
      right: 5px;
      width: 40px;
    }
  }
}
</style>
