<route lang="yaml">
layout: tabbar
style:
  navigationBarTitleText: 消息
  navigationBarBackgroundColor: '#fff'
</route>

<script setup lang="ts">
import Card from '@/components/card.vue'
import { integral, interact, system } from '@/core/libs/svgs'
import { beforeNow } from '@/utils/date-util'
import dayjs from 'dayjs'

const tab = ref('integral')
const tabs = ref([
  { label: '积分消息', value: 'integral' },
  { label: '系统消息', value: 'system' },
  { label: '互动消息', value: 'interact' },
])
const msgs = ref({
  integral: [
    { title: '积分变动通知', createdAt: Date.now() },
    { title: '请确认积分', createdAt: '2023-05-05' },
  ],
  system: [
    {
      title: '新豪轩门窗入驻筑巢荟',
      createdAt: Date.now(),
      content: '新豪轩材料商加入筑巢荟，为筑巢荟设计师提供更好的材料和服务！',
      img: 'https://via.placeholder.com/279x164',
    },
    { title: '平台通知', createdAt: Date.now(), content: '有新的材料商入驻平台，点击查看!' },
  ],
  interact: [
    {
      title: '王磊回复了你',
      createdAt: Date.now(),
      content: '设计师李家豪刚刚点赞了你的设计圈点击前往查看',
    },
    {
      title: '李琳赞了你的设计圈',
      createdAt: Date.now(),
      content: '设计师李家豪刚刚点赞了你的设计圈点击前往查看',
    },
  ],
})
</script>

<template>
  <view class="flex-grow">
    <wd-tabs v-model="tab">
      <block v-for="({ label, value }, i) in tabs" :key="i">
        <wd-tab :title="`${label}`" :name="value"></wd-tab>
      </block>
    </wd-tabs>
    <div class="p-3.5 gap-3.5 flex flex-col">
      <template v-for="({ title, createdAt, content, img }, i) in msgs[tab]" :key="i">
        <Card>
          <div class="grid items-center grid-cols-[38px_auto_100px]">
            <div class="row-start-1 col-start-1">
              <div
                class="w-[30px] h-[30px] bg-neutral-100 rounded-full mr-2 flex items-center justify-center"
              >
                <wd-img
                  width="18"
                  height="18"
                  :src="{ integral: integral, system: system, interact: interact }[tab]"
                ></wd-img>
              </div>
            </div>
            <div class="row-start-1 col-start-2 text-start">
              <div class="text-black/90 text-base font-normal font-['PingFang SC'] leading-[30px]">
                {{ title }}
              </div>
            </div>
            <div class="row-start-1 col-start-3 text-end">
              <div class="text-black/30 text-sm font-normal font-['PingFang SC'] leading-[10.18px]">
                {{ beforeNow(dayjs(createdAt).toDate()) }}
              </div>
            </div>
            <div class="row-start-2 col-start-2 col-end-4">
              <div
                class="my-3 text-black/40 text-sm font-normal font-['PingFang SC'] leading-[25px]"
              >
                {{ content }}
              </div>
            </div>
            <div v-if="img" class="row-start-3 col-start-2 col-end-4">
              <img class="w-[279px] h-[164px] rounded-md" :src="img" />
            </div>
            <div class="row-start-4 col-start-1 col-end-4 my-2">
              <div v-if="!img" class="bg-[#dadada] w-full h-[1px]"></div>
            </div>
            <div class="row-start-5 col-start-2 col-end-4">
              <div class="text-black/90 text-xs font-normal font-['PingFang SC'] leading-[25px]">
                查看详情
              </div>
            </div>
          </div>
        </Card>
      </template>
    </div>
  </view>
</template>

<style scoped lang="scss"></style>
