<template>
  <view class="home-container page-home d-flex flex-col bg-base">
    <template v-if="pageDefine">
      <NImage 
        innerClass="main-banner position-absolute"
        width="100%"
        :src="pageContentDefine?.props.homeBanner"
        :showFailed="false"
        mode="widthFix"
      />
      <view class="content d-flex flex-col wing-l">

        <view class="shadow-base radius-l border-all-base main-banner-box mb-25">
          <image 
            class="logo"
            src="https://mncdn.wenlvti.net/app_static/minnan/images/home/MainLogo1.png"
          />
          <view>
            <text class="title">{{pageContentDefine?.props.title || ''}}</text>
            <text>{{pageContentDefine?.props.subTitle || ''}}</text>
          </view>
          <image 
            class="footer"
            src="https://mncdn.wenlvti.net/app_static/minnan/images/home/MainBanner3.png"
            mode="widthFix"
          />
        </view>
        
        <view class="position-relative d-flex flex-row flex-wrap justify-between mt-25 row-gap-sss">
          <HomeButton
            v-for="item in pageContentDefine?.props.homeButtons || []"
            :key="item.title"
            :title="item.showTitle !== false ? item.title : ''"
            :icon="item.icon"
            :size="item.size"
            :buttonStyle="item.style"
            @click="navTo(item.link)"
          />
        </view>

        <!-- 分栏 -->
        <CommonCategoryBlocks :categoryDefine="categoryDefine" />
      </view>
    </template>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { onShareTimeline, onShareAppMessage } from '@dcloudio/uni-app';
import { navTo } from '@/components/utils/PageAction';
import { type IHomeCommonCategoryDefine, type IHomeCommonCategoryHomeDefine } from '../article/data/CommonCategoryDefine';
import NImage from '@/components/basic/Image.vue';
import HomeButton from '../parts/HomeButton.vue';
import CommonCategoryBlocks from '../article/data/CommonCategoryBlocks.vue';
import type { CategoryDefine } from '../article/data/CommonCategoryBlocks';

const props = defineProps<{
  pageDefine: IHomeCommonCategoryDefine['page'][0],
  pageContentDefine: IHomeCommonCategoryHomeDefine,
}>();
const categoryDefine = computed(() => props.pageContentDefine.props.categorys
  .filter((item) => item.visible !== false)
  .map((item) => {
    return {
      ...item,
      showTitle: item.showTitle !== false,
      title: item.text,
      content: item.data,
      type: item.type as CategoryDefine['type'],
    }
  })
);

onShareTimeline(() => {
  return {}; 
})
onShareAppMessage(() => {
  return {}; 
})
</script>

<style lang="scss">
.page-home {

  .main-banner {
    top: -100rpx;
  }
  .content {
    margin-top: 360rpx;
  }
  .main-banner-box {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    overflow: hidden;
    background: linear-gradient(180deg, #f9efe5 0%, #ebcab5 100%), #F7F3E8;
    padding: 50rpx 20rpx;
    font-family: "SongtiSCBlack";
    color: #432A04;

    > view {
      display: flex;
      flex-direction: column;
      margin-left: -20rpx;
      margin-right: 60rpx;
    }

    .logo {
      width: 140rpx;
      height: 85rpx;
      margin-left: -10rpx;
      margin-right: 0rpx;
    }
    
    .title {
      font-size: 47rpx;
      letter-spacing: -0.15rem;
    }
    text {
      font-size: 36rpx;
      letter-spacing: -0.04rem;
      margin-top: 10rpx;
    }
    .more {
      margin-top: 30rpx;
      padding: 10rpx 18rpx;
      width: 180rpx;

      &.badge {
        background-image: url('https://mncdn.wenlvti.net/app_static/minnan/images/home/MainBanner.png');
        background-size: 100% auto;
        background-repeat: no-repeat;
      }

      text {
        font-family: initial;
        font-size: 30rpx;
      }
    }
    .footer {
      position: absolute;
      right: -10rpx;
      bottom: -10rpx;
      width: 220rpx;
      z-index: 2;
      height: auto;
    }
  }
}
</style>