<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页'
  }
}
</route>
<template>
  <view class="mine-container">
    <!-- 顶部导航栏 -->
    <view class="header">
      <text class="title">我的</text>
      <view class="header-right">
        <image class="icon" src="/static/images/icon_scan_code.png" mode="aspectFit" />
        <image class="icon" src="/static/images/icon_nav_more.png" mode="aspectFit" />
      </view>
    </view>

    <!-- 用户信息区域 -->
    <view class="user-info">
      <view class="avatar-section">
        <image class="avatar" src="/static/images/default-avatar.png" />
        <view class="user-detail">
          <text class="username">未登录</text>
          <text class="user-type">游客模式 ></text>
        </view>
      </view>
      <view class="team-entry">
        <image
          class="team-icon"
          src="https://file.hikmall.com/prod/image/3e56cfb5cfae4bd285d6f55e51e1ce23.png"
        />
        <text>我的团队</text>
      </view>
    </view>

    <!-- 推荐服务 -->
    <view class="section">
      <text class="section-title">推荐服务</text>
      <view class="service-grid">
        <view class="service-item" v-for="(item, index) in recommendServices" :key="index">
          <image class="service-icon" :src="item.icon" />
          <text class="service-name">{{ item.name }}</text>
        </view>
      </view>
    </view>

    <!-- 常用工具 -->
    <view class="section">
      <text class="section-title">常用工具</text>
      <view class="tools-grid">
        <view class="tool-item" v-for="(item, index) in commonTools" :key="index">
          <image class="tool-icon" :src="item.icon" />
          <text class="tool-name">{{ item.name }}</text>
        </view>
      </view>
    </view>

    <!-- 帮助中心和分享区域 -->
    <view class="list-section">
      <view class="list-item">
        <text>帮助中心</text>
        <text class="arrow">></text>
      </view>
      <view class="list-item">
        <text>分享海康互联</text>
        <text class="arrow">></text>
      </view>
    </view>

    <!-- 底部操作区 -->
    <view class="bottom-actions">
      <view class="action-item">
        <image
          class="action-icon"
          src="https://file.hikmall.com/prod/image/4dbe971d6fac465cb4fed956defd678c.png"
        />
        <text>我的订单</text>
      </view>
      <view class="action-item">
        <image
          class="action-icon"
          src="https://file.hikmall.com/prod/image/116e1ea563474601ac075ac5bb312963.png"
        />
        <text>发票管理</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  const recommendServices = [
    {
      name: '流量充值',
      icon: 'https://file.hikmall.com/prod/image/635392a7f5e04e75bb657b6cc6e2abc8.png'
    },
    {
      name: 'VIP服务',
      icon: 'https://file.hikmall.com/prod/image/d1d07b3125f841848c3c3eb94509b2ae.png'
    },
    {
      name: '电脑客户端',
      icon: 'https://file.hikmall.com/prod/image/885eb6ac104e4a76941e67eb738142ec.png'
    },
    {
      name: '智能算法',
      icon: 'https://file.hikmall.com/prod/image/701d5a7031fa4b4290838c4562f99a0b.png'
    },
    {
      name: '电话',
      icon: 'https://file.hikmall.com/prod/image/771a717eb8d74f5bba71db68c9605a0f.png'
    }
  ]

  const commonTools = [
    {
      name: '分享管理',
      icon: 'https://file.hikmall.com/prod/image/9752516f054342d3ac310a0fdb32b654.png'
    },
    {
      name: '本地设备调试',
      icon: 'https://file.hikmall.com/prod/image/4dbe971d6fac465cb4fed956defd678c.png'
    },
    {
      name: '设备校时',
      icon: 'https://file.hikmall.com/prod/image/624a69276df1480088661e20cbc0e189.png'
    },
    {
      name: '密码恢复',
      icon: 'https://file.hikmall.com/prod/image/9e2b6e95c2904540a9a3dc675d25cc13.png'
    },
    {
      name: '局域网预览',
      icon: 'https://file.hikmall.com/prod/image/6cea7ba6b3b34464998bb501a609f3a9.png'
    },
    {
      name: 'IP扫描',
      icon: 'https://file.hikmall.com/prod/image/60c64c6c80a9429fa8d084506cd2f021.png'
    },
    {
      name: '我的相册',
      icon: 'https://file.hikmall.com/prod/image/116e1ea563474601ac075ac5bb312963.png'
    }
  ]
</script>

<style scoped lang="scss">
  .mine-container {
    min-height: 100vh;
    padding: 0 16px;
    background-color: #f5f6fa;
  }

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 44px 0 20px;

    .title {
      font-size: 18px;
      font-weight: bold;
    }

    .header-right {
      display: flex;
      gap: 16px;

      .icon {
        width: 20px;
        height: 20px;
        filter: brightness(0);
      }
    }
  }

  .user-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    margin-bottom: 16px;
    //background-color: #fff;
    border-radius: 12px;

    .avatar-section {
      display: flex;
      gap: 12px;
      align-items: center;

      .avatar {
        width: 60px;
        height: 60px;
        background-color: #ffffff;
        border-radius: 30px;
      }

      .user-detail {
        display: flex;
        flex-direction: column;
        gap: 4px;

        .username {
          font-size: 18px;
          font-weight: bold;
        }

        .user-type {
          font-size: 14px;
          color: #666;
        }
      }
    }

    .team-entry {
      display: flex;
      gap: 4px;
      align-items: center;
      padding: 2px 4px;
      font-size: 12px;
      color: #2b5cff;
      background-color: #ffffff; // 添加背景色
      border-radius: 5px;

      .team-icon {
        width: 20px;
        height: 20px;
      }
    }
  }

  .section {
    padding: 16px;
    margin-bottom: 16px;
    background-color: #fff;
    border-radius: 12px;

    .section-title {
      margin-bottom: 16px;
      font-size: 16px;
      font-weight: bold;
    }
  }

  .service-grid,
  .tools-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 12px;
    .service-item,
    .tool-item {
      display: flex;
      flex-direction: column;
      gap: 8px;

      align-items: center;

      .service-icon,
      .tool-icon {
        width: 28px;
        height: 28px;
      }

      .service-name,
      .tool-name {
        font-size: 12px;
        color: #333;
        text-align: center;
      }
    }
  }

  .service-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    overflow-x: auto; // 允许左右滑动

    .service-item,
    .tool-item {
      width: 16vw; // 单个item的宽度是屏幕宽度的四分之一
    }
  }

  .list-section {
    margin-bottom: 16px;
    background-color: #fff;
    border-radius: 12px;

    .list-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px;
      border-bottom: 1px solid #f5f5f5;

      &:last-child {
        border-bottom: none;
      }

      .arrow {
        color: #999;
      }
    }
  }

  .bottom-actions {
    display: flex;
    gap: 4px;
    justify-content: space-around;
    padding: 16px;

    .action-item {
      display: flex;
      flex-direction: row;
      gap: 4px;
      align-items: center;
      //background-color: red;

      .action-icon {
        width: 16px;
        height: 16px;
      }

      text {
        font-size: 12px;
        color: black;
      }
    }
  }
</style>
