<template>
<section class="food_container">
  <section class="menu_container">
      <section class="menu_left" id="wrapper_menu" ref="wrapperMenu">
          <ul>
              <li v-for="(item,index) in menuList" :key="index" class="menu_left_li" :class="{activity_menu: index == menuIndex}" @click="chooseMenu(index)">
                  <img :src="getImgPath(item.icon_url)" v-if="item.icon_url">
                  <span>{{item.name}}</span>
                  <!-- <span class="category_num" v-if="categoryNum[index]&&item.type==1">{{categoryNum[index]}}</span> -->
              </li>
          </ul>
      </section>
      <section class="menu_right" ref="menuFoodList">
          <ul>
              <li v-for="(item,index) in menuList" :key="index">
                  <header class="menu_detail_header">
                      <section class="menu_detail_header_left">
                          <strong class="menu_item_title">{{item.name}}</strong>
                          <span class="menu_item_description">{{item.description}}</span>
                      </section>
                      <span class="menu_detail_header_right" @click="showTitleDetail(index)"></span>
                      <p class="description_tip" v-if="index == TitleDetailIndex">
                          <span>{{item.name}}</span>
                          {{item.description}}
                      </p>
                  </header>
                  <section v-for="(item,goodsindex) in item.goods" :key="goodsindex" class="menu_detail_list">
                      <span>{{item.name}}</span><br>
                      <span>{{item.tips}}</span><br>
                      <span>{{item.server_utc}}</span>
                  </section>
              </li>
          </ul>
      </section>
  </section>
</section>
</template>

<script>
import svgIcon from '../common/svg';
import BScroll from 'better-scroll'
var util = require("util")
export default {
  name: "tabSwithcer",
  data() {
    return {
      // menuList: [],
      menuIndex: 0, //已选菜单索引值，默认为0
      menuIndexChange: true,//解决选中index时，scroll监听事件重复判断设置index的bug
      shopListTop: [], //商品列表的高度集合
      foodScroll: null,  //食品列表scroll
      TitleDetailIndex: null, //点击展示列表头部详情
      showLoading: false, //显示加载动画
    };
  },
  props: {
    menuList: {
      type: Array,
      required: true,
      default: [{}]
    }
  },
  mounted() {
    this.getFoodListHeight();
  },
  watch: {
    showLoading: function (value){
        if (!value) {
            this.$nextTick(() => {
                this.getFoodListHeight();
                this.initCategoryNum();
            })
        }
    },
  },
  methods: {
    //点击左侧食品列表标题，相应列表移动到最顶层
    chooseMenu(index){
        this.menuIndex = index;
        //menuIndexChange解决运动时listenScroll依然监听的bug
        this.menuIndexChange = false;
        this.foodScroll.scrollTo(0, -this.shopListTop[index], 400);
        this.foodScroll.on('scrollEnd', () => {
            this.menuIndexChange = true;
        })
    },
    showTitleDetail(index){
        if (this.TitleDetailIndex == index) {
            this.TitleDetailIndex = null;
        }else{
            this.TitleDetailIndex = index;
        }
    },
    //当滑动食品列表时，监听其scrollTop值来设置对应的食品列表标题的样式
    listenScroll(element){
        this.foodScroll = new BScroll(element, {
            probeType: 3,
            deceleration: 0.001,
            bounce: false,
            swipeTime: 2000,
            click: true,
        });

        const wrapperMenu = new BScroll('#wrapper_menu', {
            click: true,
        });

        const wrapMenuHeight = this.$refs.wrapperMenu.clientHeight;
        this.foodScroll.on('scroll', (pos) => {
            if (!this.$refs.wrapperMenu) {
                return
            }
            this.shopListTop.forEach((item, index) => {
                if (this.menuIndexChange && Math.abs(Math.round(pos.y)) >= item) {
                  
                    this.menuIndex = index;
                    const menuList=this.$refs.wrapperMenu.querySelectorAll('.activity_menu');
                    const el = menuList[0];
                    wrapperMenu.scrollToElement(el, 800, 0, -(wrapMenuHeight/2 - 50));
                }
            })
        })
    },
    //获取食品列表的高度，存入shopListTop
    getFoodListHeight(){
        const listContainer = this.$refs.menuFoodList;
        if (listContainer) {
          const listArr = Array.from(listContainer.children[0].children);
          listArr.forEach((item, index) => {
              this.shopListTop[index] = item.offsetTop;
          });
          this.listenScroll(listContainer)
        }

    },
    

  }
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";
.food_container{
    display: flex;
    flex: 1;
    flex-direction: column;
}
.menu_container{
    display: flex;
    flex: 1;
    overflow-y: hidden;
    position: relative;
    background-color: #f5f5f5;
    
    .menu_left{
        width: 3.8rem;
        .menu_left_li{
            padding: .7rem .3rem;
            border-bottom: 0.025rem solid #ededed;
            box-sizing: border-box;
            border-left: 0.15rem solid #f8f8f8;
            position: relative;
            img{
                @include wh(.5rem, .6rem);
            }
            span{
                @include sc(.6rem, #666);
            }
            .category_num{
                position: absolute;
                top: .1rem;
                right: .1rem;
                background-color: #ff461d;
                line-height: .6rem;
                text-align: center;
                border-radius: 50%;
                border: 0.025rem solid #ff461d;
                min-width: .6rem;
                height: .6rem;
                @include sc(.5rem, #fff);
                font-family: Helvetica Neue,Tahoma,Arial;
            }
        }
        .activity_menu{
            border-left: 0.15rem solid #3190e8;
            background-color: #fff;
            span:nth-of-type(1){
                font-weight: bold;
            }
        }
    }
    .menu_right{
        flex: 4;
        overflow-y: auto;
        .menu_detail_header{
            width: 100%;
            padding: .4rem;
            position: relative;
            @include fj;
            align-items: center;
            .menu_detail_header_left{
                width: 11rem;
                white-space: nowrap;
                overflow: hidden;
                .menu_item_title{
                    @include sc(.7rem, #666);
                    font-weight: bold;
                }
                .menu_item_description{
                    @include sc(.5rem, #999);
                    width: 30%;
                    overflow: hidden;
                }
            }
            .menu_detail_header_right{
                @include wh(.5rem, 1rem);
                display: block;
                @include bis('../../images/icon_point.png');
                background-size: 100% .4rem;
                background-position: left center;
            }
            .description_tip{
                background-color: #39373a;
                opacity: 0.95;
                @include sc(.5rem, #fff);
                position: absolute;
                top: 1.5rem;
                z-index: 14;
                width: 8rem;
                right: .2rem;
                padding: .5rem .4rem;
                border: 1px;
                border-radius: .2rem;
                span{
                    color: #fff;
                    line-height: .6rem;
                    font-size: .55rem;
                }
            }
            .description_tip::after{
                content: '';
                position: absolute;
                @include wh(.4rem, .4rem);
                background-color: #39373a;
                top: -.5rem;
                right: .7rem;
                transform: rotate(-45deg) translateY(.41rem);
            }
        }
        .menu_detail_list{
            background-color: #fff;
            padding: .6rem .4rem;
            border-bottom: 1px solid gray;
            position: relative;
            overflow: hidden;
            font-size: 15px;
            .menu_detail_link{
                display:flex;
                .menu_food_img{
                    margin-right: .4rem;
                    img{
                        @include wh(2rem, 2rem);
                        display: block;
                    }
                }
                .menu_food_description{
                    width: 100%;
                    .food_description_head{
                        @include fj;
                        margin-bottom: .2rem;
                        .description_foodname{
                            @include sc(.7rem, #333);
                        }
                        .attributes_ul{
                            display: flex;
                            li{
                                font-size: .3rem;
                                height: .6rem;
                                line-height: .35rem;
                                padding: .1rem;
                                border: 1px solid #666;
                                border-radius: 0.3rem;
                                margin-right: .1rem;
                                transform: scale(.8);
                                p{
                                    white-space: nowrap;
                                }
                            }
                            .attribute_new{
                                position: absolute;
                                top: 0;
                                left: 0;
                                background-color: #4cd964;
                                @include wh(2rem, 2rem);
                                display: flex;
                                align-items: flex-end;
                                transform: rotate(-45deg) translate(-.1rem, -1.5rem);
                                border: none;
                                border-radius: 0;
                                p{
                                    @include sc(.4rem, #fff);
                                    text-align: center;
                                    flex: 1;
                                    transform: scale(0.8) translate(0.1rem, -.1rem);
                                }
                            }
                        }
                    }
                    .food_description_content{
                        @include sc(.5rem, #999);
                        line-height: .6rem;
                    }
                    .food_description_sale_rating{
                        line-height: .8rem;
                        span{
                            @include sc(.5rem, #333);
                        }
                    }
                    .food_activity{
                        line-height: .4rem;
                        span{
                            font-size: .3rem;
                            border: 1px solid currentColor;
                            border-radius: 0.3rem;
                            padding: .08rem;
                            display: inline-block;
                            transform: scale(.8);
                            margin-left: -0.35rem;

                        }
                    }
                }
            }
            .menu_detail_footer{
                margin-left: 2.4rem;
                font-size: 0;
                margin-top: .3rem;
                @include fj;
                .food_price{
                    span{
                        font-family: 'Helvetica Neue',Tahoma,Arial;
                    }
                    span:nth-of-type(1){
                        @include sc(.5rem, #f60);
                        margin-right: .05rem;
                    }
                    span:nth-of-type(2){
                        @include sc(.7rem, #f60);
                        font-weight: bold;
                        margin-right: .3rem;
                    }
                    span:nth-of-type(3){
                        @include sc(.5rem, #666);
                    }
                }
            }
        }
    }
}
</style>
