<template>
  <div class="main">
    <user-profile />
    <div class="lines">
      <van-cell-group title="测试页面">
        <van-cell
          v-for="page in testerPages"
          :key="page.url"
          :title="page.name"
          is-link
          :to="page.url"
          :icon="page.icon"
        />
      </van-cell-group>
    </div>
    <div class="lines">
      <van-cell-group>
        <van-cell title="消息通知" is-link to="/tongzhi">
          <template #value>
            <van-badge :show-zero="false" max="99" position="" :content="unread_tongzhi_count"/>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
    <div class="lines">
      <van-cell-group>
        <van-cell title="个性化设置" is-link to="/user-settings"></van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent, computed} from 'vue'
import { CellGroup, Cell, Badge } from 'vant'
import UserProfile from '~/components/user-profile.vue'
import useUser from '~/store/user'

const TESTER_PAGES = [
  { name: '功能测试', url: '/tester/function', icon: 'shield-o' },
  { name: 'AI测试', url: '/tester/ai', icon: 'bulb-o' },
  { name: '图片/XML 测试', url: '/tester/xml', icon: 'music-o' },
  { name: '日历测试', url: '/tester/calendar', icon: 'calendar-o' },
  { name: '标注测试', url: '/tester/map', icon: 'flower-o' },
  { name: '头像测试', url: '/tester/avatar', icon: 'user-circle-o' },
  { name: 'VF测试', url: '/tester/vf', icon: 'bulb-o' },
  { name: 'AI客服测试', url: '/tester/ai-cs', icon: 'service-o' }
]

export default defineComponent({
  name: "tester-profile",
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Badge.name]: Badge,
    [UserProfile.name]: UserProfile
  },
  setup() {
    const { store } = useUser()
    const unread_tongzhi_count = computed(() => store.current.unread_tongzhi_count)
    return { unread_tongzhi_count, testerPages: TESTER_PAGES }
  }
})
</script>

<style scoped lang="less">
.main {

}
</style>
