<script setup lang="ts">
import tab from "@/plugins/tab";
import list from "./template.config.js";

interface ListItem {
  groupName: string;
  list: FieldItem[];
}

interface FieldItem {
  title: string;
  icon: string;
  path: string;
}

const listData = list as ListItem[];
const getIcon = (path: string) => `../static/uview/demo/${path}.png`;
const openPage = (path: string) => tab.navigateTo(path)
const getGroupTitle = (item: ListItem) => item.groupName;
const getFieldTitle = (item: FieldItem) => item.title;
</script>
<template>
  <view class="wrap">
    <view class="list-wrap">
      <u-cell-group title-bg-color="rgb(243, 244, 246)" :title="getGroupTitle(item)" v-for="(item, index) in listData"
        :key="index">
        <u-cell :titleStyle="{ fontWeight: 500 }" @click="openPage(item1.path)" :title="getFieldTitle(item1)"
          v-for="(item1, index1) in item.list" :key="index1">
          <template v-slot:icon>
            <image class="u-cell-icon" :src="getIcon(item1.icon)" mode="widthFix"></image>
          </template>
        </u-cell>
      </u-cell-group>
    </view>
    <u-gap height="70"></u-gap>
  </view>
</template>
<style lang="scss" scoped>
page {
  background-color: rgb(240, 242, 244);
}

.u-cell-icon {
  width: 36rpx;
  height: 36rpx;
  margin-right: 8rpx;
}
</style>