<route lang="json">
{ "style": { "navigationBarTitleText": "设计传播", "navigationBarBackgroundColor": "#fff" } }
</route>

<script setup lang="ts">
import Card from '@/components/card.vue'
import { award, camera, wechat } from '../../../core/libs/svgs'
import InfoCard from '../components/info-card.vue'
import SectionHeading from '@/components/section-heading.vue'
import ElegantInfoCard from '../components/elegant-info-card.vue'
import { useRouter } from '../../../core/utils/router'
import { getBanners, getContents } from '../../../core/libs/requests'
import { NetImages } from '../../../core/libs/net-images'
import { BannerMode } from '../../../core/libs/models'
import Banner from '../components/banner.vue'

const router = useRouter()
const { data, run: setData } = useRequest(
  () =>
    getContents({
      contentType: '3',
    }),
  {
    initialData: { list: [] },
  },
)
const { data: banners, run: setBanners } = useRequest(
  () => getBanners({ mode: BannerMode.Spread }),
  { initialData: [] },
)

const menus = ref([
  {
    title: '微信代运营',
    icon: wechat,
    class: 'col-start-1 row-start-1 row-end-3 items-start!',
    path: '/pages/home/spread/wx-agent-operation/index',
  },
  {
    title: '设计奖项',
    icon: award,
    class: 'col-start-2 row-start-1',
    path: '/pages/home/spread/design-awards/index',
  },
  {
    title: '案例拍摄',
    icon: camera,
    class: 'col-start-2 row-start-2',
    path: '/pages/home/spread/case-shooting/index',
  },
])
onMounted(async () => {
  await setData()
  await setBanners()
})
</script>

<template>
  <view class="px-3.5 py-5.5 flex-grow">
    <Banner :mode="BannerMode.Spread"></Banner>

    <view class="my-6 grid gap-2.5 grid-cols-2">
      <template v-for="it of menus" :key="it.title">
        <div :class="it.class" @click="router.push(it.path)">
          <Card :custom-class="'w-full h-full flex justify-between items-center'">
            <div
              class="my-3.5 text-black/40 text-base font-normal font-['PingFang_SC'] leading-[10.18px]"
            >
              {{ it.title }}
            </div>
            <view class="h-full flex items-end">
              <div
                class="w-[42px] h-[42px] flex justify-center items-center bg-white rounded-full border border-solid border-[#ececec]"
              >
                <wd-img :src="it.icon" width="23" height="23"></wd-img>
              </div>
            </view>
          </Card>
        </div>
      </template>
    </view>
    <info-card
      title="筑巢荟-设计传播"
      desc="我们为您精心打造了一个独特且极具价值的游学项目。这个项目的核心旨在全方位提升您作为设计师的能力。
在这里，您将拥有无比优质的游学资源。我们与全球知名的设计学府、顶尖设计工作室以及具有代表性的经典建筑和室内空间建立了紧密合作。您将有机会深入这些卓越的场所，亲身体验最前沿的设计理念和实践。
参与专业的研讨会和工作坊，与同行们分享见解、碰撞思维火花，进一步深化对设计的理解。
"
    ></info-card>
    <section-heading title="最新资讯"></section-heading>
    <div class="my-6">
      <template v-for="(it, i) in data.list" :key="i">
        <ElegantInfoCard :options="it"></ElegantInfoCard>
      </template>
      <wd-status-tip
        v-if="!data.list?.length"
        :image="NetImages.NotContent"
        tip="暂无内容"
      ></wd-status-tip>
    </div>
  </view>
</template>

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