<template>
  <div class="page">
    <div class="title">点击进入栏目</div>
    <div class="tab-list">
      <div v-for="(item, index) in tabList" :key="index" :class="tabIndex == index ? 'tab-item active' : ' tab-item'" @click="tabClick(index)">{{item}}</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'page',
    data () {
      return {
        tabList: [],
        tabIndex: 0,
        parentId: ''
      }
    },
    onLoad (option) {
      this.tabIndex = option.index,
      this.parentId = option.parentId
      this.getList()
      this.$forceUpdate()
    },

    methods: {
      tabClick(index) {
      this.tabIndex = index
      uni.navigateBack({ 
        success: ()=>{
          uni.$emit('update',this.tabIndex)
        }
       })
      },
      getList() {
        this.$http.post('/app/apppublicitycategory/list',null,{
          params: {
            parentId: this.parentId,
            categoryType: '2',
          }
        }).then((res)=>{
          var array = []
          res.data.records.map(item=>{
           array.push(item.categoryName)
          })
          this.tabList = array
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
.page{
  height: 100%;
  background-color: #FFFFFF;
  .title{
    font-size: 26rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #B9B9B9;
    line-height: 36rpx;
    padding: 32rpx 0 30rpx 40rpx;
  }
  .tab-list{
    padding: 0 0 0 30rpx;
    .tab-item{
      display: inline-block;
      width: 144rpx;
      height: 48rpx;
      line-height: 48rpx;
      text-align: center;
      border-radius: 24rpx;
      border: 2rpx solid #CBCBCB;
      font-size: 26rpx;
      color: #333;
      box-sizing: border-box;
      margin: 0 38rpx 32rpx 0;
    }
    .active{
      color: #3376FD;
    }
  }
}
</style>
