<script setup>
  import { navigateTo } from '@/utils/router'

  const btnList = [
    { name: '等级排行榜', icon: 'grade' },
    { name: '签到', icon: 'sign' },
    { name: '公司介绍', icon: 'company' },
    { name: '朋友圈', icon: 'circle' },
    { name: '线上商城', icon: 'mall' },
    { name: '我的拼团', icon: 'team' },
    { name: '项目入口', icon: 'project' }
  ]

  const onGo = item => {
    if (item === 'mall') {
      navigateTo('/pages/mall/list')
    }
  }
</script>

<template>
  <view class="discover-box">
    <view
      v-for="(item, index) in btnList"
      :key="index"
      class="card-box"
      @click="onGo(item.icon)"
    >
      <view class="left-box">
        <image
          :src="`/static/images/discover/${item.icon}.png`"
          mode="heightFix"
          class="icon"
        ></image>
        <text>{{ item.name }}</text>
      </view>
      <image
        src="/static/images/public/right-arrow.png"
        mode="heightFix"
        class="right-box"
      ></image>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  .discover-box {
    padding: 32rpx 24rpx;
    .card-box {
      padding: 20rpx 32rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left-box {
        display: flex;
        align-items: center;
        .icon {
          height: 80rpx;
          margin-right: 16rpx;
        }
        text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 32rpx;
          color: #333333;
          font-style: normal;
          text-transform: none;
        }
      }
      .right-box {
        height: 32rpx;
      }
    }
  }
</style>
