<script setup>
  import { navigateTo } from '@/utils/router'
  import { ref } from 'vue'
  import { useUI } from '@/utils/use-ui'

  const { showDialog } = useUI()

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

  const onGo = item => {
    if (item === 'project') {
      showDialog('提示', '外部链接暂未提供', false)
      return
    }
    if (item === 'grade') {
      navigateTo('/pages/discover/ranking-list')
      return
    }
    if (item === 'sign') {
      navigateTo('/pages/discover/punch')
      return
    }
    if (item === 'company') {
      navigateTo('/pages/discover/company')
      return
    }
    if (item === 'circle') {
      navigateTo('/pages/discover/dynamic/dynamic')
      return
    }
    if (item === 'mall') {
      navigateTo('/pages/mall/list')
      return
    }
    if (item === 'team') {
      navigateTo('/pages/shop-together/index')
      return
    }
    if (item === 'liveStream') {
      let url = ''
      // #ifdef APP-PLUS
      url = '/pages/discover/livelist/index'
      // #endif

      // #ifdef H5
      url = '/pages/discover/livelist/h5-list'
      // #endif
      navigateTo(url)
      return
    }
  }

  const onScan = () => {
    uni.scanCode({
      onlyFromCamera: false,
      scanType: ['qrCode'],
      success: res => {
        navigateTo(res.result)
      }
    })
  }
</script>

<template>
  <view>
    <nav-bar :showBack="false" isTopBg isPlaceholder title="发现">
      <template #right>
        <!-- #ifdef APP-PLUS -->
        <image
          src="/TUIKit/assets/icon/scan.svg"
          mode="heightFix"
          class="scan-icon"
          @click="onScan"
        ></image>
        <!-- #endif -->
      </template>
    </nav-bar>
    <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>
  </view>
</template>

<style lang="scss" scoped>
  .scan-icon {
    height: 34rpx;
  }
  .discover-box {
    padding: 32rpx 24rpx;
    .card-box {
      padding: 20rpx 0;
      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>
