<script setup lang="ts">
import TabbarEvo from '@/components/tabbar-evo.vue'
import { iconCamera, iconWallet } from '../core/libs/pngs'
import {
  home,
  homeActive,
  material,
  materialActive,
  message,
  messageActive,
  mine,
  mineActive,
  publish,
} from '../core/libs/svgs'
import { currRoute } from '../utils'
import { defaultThemeVars } from '../core/themes/default'
import { useRouter } from '../core/utils/router'

const router = useRouter()
const publishState = ref(false)
const items = [
  {
    title: '首页',
    iconPath: home,
    selectedIconPath: homeActive,
    path: '/pages/home/index',
  },
  {
    title: '材料',
    iconPath: material,
    selectedIconPath: materialActive,
    path: '/pages/material/index',
  },
  {
    title: '发布',
    iconPath: publish,
    selectedIconPath: publish,
    path: '/pages/publish/index',
    hiddenTitle: true,
  },
  {
    title: '消息',
    iconPath: message,
    selectedIconPath: messageActive,
    path: '/pages/messages/index',
  },
  {
    title: '我的',
    iconPath: mine,
    selectedIconPath: mineActive,
    path: '/pages/mine/index',
  },
]
const handleTabbarItemClick = (path: string) => {
  if (path === '/pages/publish/index') {
    publishState.value = true
    return
  }
  router.push(path, true)
  // uni.switchTab({ url: path })
}
const toPublishMoment = () => {
  router.push('/pages/publish/moment/index?circleType=1')
  publishState.value = false
}
const toPublishCase = () => {
  router.push('/pages/publish/moment/index?circleType=2')
  publishState.value = false
}
</script>

<template>
  <wd-config-provider :themeVars="defaultThemeVars">
    <view class="bg-[#f6f6f6] pb-12 flex-grow flex flex-col">
      <slot />
    </view>

    <TabbarEvo
      :items="items"
      fixed
      safeAreaInsetBottom
      :current-path="currRoute().path"
      @click="handleTabbarItemClick"
    />
    <div
      v-if="publishState"
      class="bg-white/80 backdrop-blur-[100px] fixed top-0 left-0 right-0 bottom-0 z-2"
    >
      <div class="w-full h-full flex flex-col justify-around px-7 box-border">
        <div class="text-black/40 text-3xl font-normal font-['PingFang_SC'] leading-[45px]">
          发布记录，
          <br />
          成为更好的自己！
        </div>
        <div class="flex flex-col">
          <div class="flex justify-around">
            <div class="flex flex-col items-center" @click="toPublishMoment">
              <wd-img :src="iconCamera" width="66" mode="widthFix"></wd-img>
              <div class="text-black text-sm font-normal font-['PingFang_SC'] leading-[21px]">
                个人动态
              </div>
            </div>
            <div class="flex flex-col items-center" @click="toPublishCase">
              <wd-img :src="iconWallet" width="66" mode="widthFix"></wd-img>
              <div class="text-black text-sm font-normal font-['PingFang_SC'] leading-[21px]">
                设计案例
              </div>
            </div>
          </div>
          <wd-button
            custom-class="mt-15"
            type="icon"
            icon="close"
            @click="publishState = false"
          ></wd-button>
        </div>
      </div>
    </div>
    <wd-toast />
    <wd-message-box />
  </wd-config-provider>
</template>

<style lang="scss">
/* stylelint-disable-next-line selector-type-no-unknown */
layout-tabbar-uni,
.wot-theme-light {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
</style>
