<template>
  <div class="tab-box">
    <div class="box-scroll" @touchmove.stop @touchstart.stop @touchend.stop ref="boxScroll">
      <ul class="list" @scroll="listScroll">
        <li
          class="item"
          :class="{ 'z-active': active == index }"
          v-for="(item, index) in menuList"
          :key="index"
          @click.stop="_tabSwitch(index)"
        >
          <span >{{ item.menuName }}</span>
        </li>
      </ul>
    </div>
    <div class="follow" v-if="wechatInfo.status" @click="_showFollow" ref="follow">
      <span class="icon"></span>
      <span>关注</span>
    </div>
    <div class="follow-box" v-if="wechatInfo.status" v-transfer-dom>
      <transition name="fade">
        <follow-box v-show="wechatInfo.isShow" v-model="wechatInfo"></follow-box>
      </transition>
    </div>
  </div>
</template>
<script>
import { getWechatInfo } from '@/plugins/API/apiAll';
import { mapGetters } from 'vuex';
const followBox = resolve => require(['@/components/modules/followBox'], resolve);

export default {
  name: 'menu-tab',
  props: {
    value: {}
  },
  components: {
    followBox
  },
  data() {
    return {
      wechatInfo: {}
    };
  },
  computed: {
    ...mapGetters({
      channelInfo: 'channelInfo',
      menuList: 'menuList'
    }),
    active: {
      get() {
        return this.value;
      },
      set(nVal) {
        this.$emit('input', nVal);
      }
    }
  },
  mounted() {
    this._getWechatInfo();
  },
  methods: {
    async _getWechatInfo() {
      const res = await getWechatInfo({
        id: this.channelInfo.id
      });
      if (res.code === 200 && res.errorCode === 0) {
        this.wechatInfo = res.data || {};
        this.$nextTick(() => {
          this.isScroll()
          this.listScroll()
          this.boxScrollListener()
        })
      }
    },
    _tabSwitch(num) {
      this.active = num;
    },
    _showFollow() {
      this.wechatInfo.isShow = true;
    },
    // dom
    switchMid() {
      this.$nextTick(() => {
        const fatherWidth = this.$refs.boxScroll.clientWidth // offsetWidth
        const zActive = this.$refs.boxScroll.getElementsByClassName('z-active')[0]
        const targetLeft = zActive ? zActive.offsetLeft : 0
        const targetWidth = zActive ? zActive.clientWidth : 0
        const left = targetLeft - (fatherWidth / 2) + (targetWidth / 2)
        this.$refs.boxScroll.scrollLeft = left
      })
    },
    // dom
    isScroll() {
        const boxScroll = this.$refs.boxScroll
        const fatherWidth = boxScroll.clientWidth
        const list = boxScroll.getElementsByClassName('list')[0]
        const childWidth = list.clientWidth
        if (fatherWidth > childWidth) {
          for (const item of boxScroll.getElementsByClassName('item')) {
              item.style['max-width'] = 'none'
          }
          list.style.width = '100%'
          list.style.display = 'flex'
          list.style['justify-content'] = 'space-around'
        } else {
          list.style.width = 'fit-content'
          list.style.display = 'block'
        }
    },
    boxScrollListener() {
      this.$nextTick(() => {
        const boxScroll = this.$refs.boxScroll
        if (!boxScroll) return
        boxScroll.addEventListener('scroll', this.listScroll)
      })
    },
    listScroll() {
      const boxScroll = this.$refs.boxScroll
      const fatherWidth = boxScroll.clientWidth
      const childWidth = boxScroll.getElementsByClassName('list')[0].clientWidth
      if (fatherWidth >= childWidth) return
      const max = childWidth - fatherWidth
      const scrollLeft = boxScroll.scrollLeft
      if (scrollLeft > 0 && scrollLeft < max) {
        boxScroll.style.background = 'radial-gradient(at left, rgba(0,0,0,.3), transparent 70%) left/ 15px 200%, radial-gradient(at right, rgba(0,0,0,.3), transparent 70%) right / 15px 200%'
        boxScroll.style['background-repeat'] = 'no-repeat'
      } else if (scrollLeft <= 0) {
        boxScroll.style.background = 'radial-gradient(at right, rgba(0,0,0,.3), transparent 70%) right / 15px 200%'
        boxScroll.style['background-repeat'] = 'no-repeat'
      } else if (scrollLeft >= max) {
         boxScroll.style.background = 'radial-gradient(at left, rgba(0,0,0,.3), transparent 70%) left/ 15px 200%'
        boxScroll.style['background-repeat'] = 'no-repeat'
      }
    }
  },
  watch: {
    active(){
      this.switchMid()
    },
  }
};
</script>
<style lang="less" scoped>
.tab-box {
  position: relative;
  display: flex;
  height: 0.4rem;
  line-height: 0.4rem;
  font-size: 0.12rem;
  text-align: center;
  background-color: #fff;
  color: #666666;
  .box-scroll {
    // ios background-attachment 歇逼
    // background:linear-gradient(white 50px, hsla(0,0%,100%,0)) left/ 50px 100%,
    // radial-gradient(at left, rgba(0,0,0,.5), transparent 70%) left/ 15px 200%,
    // linear-gradient(to left, white 50px, hsla(0,0%,100%,0)) right / 50px 100% ,
    // radial-gradient(at right, rgba(0,0,0,.5), transparent 70%) right / 15px 200%;
    // background-repeat: no-repeat;
    // background-attachment: local, scroll;
    height: 0.4rem;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    &::-webkit-scrollbar {
		display:none;
    }
    .list {
      margin: 0 auto;
      height: 0.4rem;
      width: fit-content;
      .item {
        display: inline-block;
        max-width: 120px;
        padding: 0 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        span {
          white-space: nowrap;
        }
        &.z-active {
          position: relative;
          font-size: 0.14rem;
          font-weight: bold;
          max-width: 150px;
          color: var(--main-color);
          &:after {
            content: '';
            display: block;
            position: absolute;
            left: calc(50% - 0.12rem);
            bottom: 0.02rem;
            width: 0.24rem;
            height: 0.02rem;
            background: var(--main-color);
            border-radius: 0.02rem;
          }
        }
      }
    }
  }
  
  .follow {
    flex: 0 0 0.8rem;
    width: 0.8rem;
    background: var(--main-color);
    color: #fff;
    span {
      vertical-align: middle;
    }
    .icon {
      margin-right: 0.04rem;
      display: inline-block;
      width: 0.1rem;
      height: 0.1rem;
      background-image: var(--icon-jia-white);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 100% auto;
    }
  }
}
</style>
