<template>
  <view>
    <view class="tabs">
      <uv-tabs 
        :list="tabs"
        :activeStyle="{
          'font-family': 'PingFang SC',
          'font-weight': 600,
          'font-size': '28rpx',
          'line-height': 1.5,
          'color': '#FFFFFF',
          'background-color': '#252545',
          'border-radius': '32rpx',
          'padding': '9rpx 40rpx',
        }" 
        :inactiveStyle="{
          'font-family': 'PingFang SC',
          'font-weight': 400,
          'font-size': '28rpx',
          'line-height': 1.5,
          'color': '#252545',
          'background-color': '#E5E4EB',
          'border-radius': '32rpx',
          'padding': '9rpx 40rpx',
        }" 
        lineWidth="0"
        lineHeight="0"
        @change="onLevel1TabChange"
      ></uv-tabs>
      <view v-if="tabs[level1] && tabs[level1].children && tabs[level1].children.length"
        class="tabs-second"
      >
        <uv-tabs 
          :list="tabs[level1].children"
          :activeStyle="{
            'font-family': 'PingFang SC',
            'font-weight': 600,
            'font-size': '28rpx',
            'line-height': 1.5,
            'color': '#7451DE',
          }" 
          :inactiveStyle="{
            'font-family': 'PingFang SC',
            'font-weight': 400,
            'font-size': '28rpx',
            'line-height': 1.5,
            'color': '#252545',
          }" 
          lineWidth="0"
          lineHeight="0"
          @change="onLevel2TabChange"
        ></uv-tabs>
      </view>
    </view>
    <view class="content">
      <view v-for="item in list" :key="item.id">
        <productCard 
          :data="item"
          cardStyle="width: 100%; height: 210px;"
          imgStyle="width: 100%; height: 110px;"
        ></productCard>
      </view>
    </view>
  </view>
</template>

<script>
  import productCard from '@/pages_order/product/productCard.vue'

  export default {
		components: {
      productCard,
    },
    data() {
      return {
        tabs: [],
        level1: 0,
        level2: null,
        list: [],
      }
    },
    mounted() {
      let children = [
        { name: '草本类' },
        { name: '蔬菜类' },
        { name: '维生素类' },
        { name: '草本类' },
        { name: '蔬菜类' },
      ]

      this.tabs = [
        { name: '全部' },
        { name: '皮肤', children, },
        { name: '身材管理', children, },
        { name: '精力', children, },
      ]

			this.list = [
        {
          id: '001',
					url: '/pages_order/static/index/recommend-pic.png', 
          name: '月度装定制营养包',
          sales: 24770,
          price: 688.00,
          originalPrice: 1664,
        },
        {
          id: '002',
					url: '/pages_order/static/index/recommend-pic.png', 
          name: '月度装定制营养包',
          sales: 24770,
          price: 688.00,
          originalPrice: 1664,
        },
        {
          id: '003',
					url: '/pages_order/static/index/recommend-pic.png', 
          name: '月度装定制营养包',
          sales: 24770,
          price: 688.00,
          originalPrice: 1664,
        },
			]
    },
    methods: {
      onLevel1TabChange(e) {
        console.log('level1', e.index)
        this.level1 = e.index
        this.level2 = this.tabs[this.level1].children?.length ? 0 : null
        // todo
      },
      onLevel2TabChange(e) {
        console.log('level2', e.index)
        this.level2 = e.index
        // todo
      },
    },
  }
</script>

<style scoped lang="scss">
.tabs {
  margin: 0 5px;

  &-second {
    margin: 0 11px;
    padding-left: 9px;
    background: #E5E4EB;
    border-radius: 16rpx;
  }
}

.content {
  padding: 24rpx 32rpx;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32rpx;
}
</style>