<template>
  <view class="home-container page-home d-flex flex-col bg-base">
    <image 
      class="w-100 position-absolute"
      src="https://mn.wenlvti.net/app_static/minnan/images/home/BackgroundBanner.jpg"
      mode="widthFix"
    />
    <view class="content d-flex flex-col wing-l">

      <!-- 分栏 -->
      <view class="shadow-l radius-l bg-base p-3">
        <view 
          class="main-banner-box"
          @click="navTo('home/introduction')"
        >
          <text class="title">闽南文化生态保护区(厦门市)</text>
          <text>世界闽南文化交流中心</text>
          <view class="more">
            <text>查看详情</text>
          </view>
          <image 
            class="footer"
            src="https://mn.wenlvti.net/app_static/minnan/images/home/MainBanner2.png"
            mode="widthFix"
          />
        </view>
        <view class="position-relative d-flex flex-row flex-wrap justify-between mt-3">
          <view  
            v-for="(tab, k) in subTabs1" 
            :key="k"
            class="d-flex flex-column align-center width-1-5 mt-2"
            @click="tab.onClick"
          >
            <image class="width-100" :src="tab.icon" mode="widthFix" />
            <text class="color-second-text mt-2 size-base text-align-center">{{ tab.name }}</text>
          </view>

          <Box1AudioPlay
            class="w-100 mt-3 mb-3" 
            :title="indexAudioPlayer.currentTitle.value"
            :image="indexAudioPlayer.currentItem?.value?.image"
            :playState="indexAudioPlayer.isPlaying.value"
            :playTime="indexAudioPlayer.timeString.value"
            @playPauseClick="indexAudioPlayer.playpause"
            @nextClick="indexAudioPlayer.next"
            @prevClick="indexAudioPlayer.prev"
            @arrowClick="subTabs1[0].onClick"
          />

          <view  
            v-for="(tab, k) in subTabs2" 
            :key="k"
            class="d-flex flex-column align-center width-1-5 mt-2"
            @click="tab.onClick"
          >
            <image class="width-100" :src="tab.icon" mode="widthFix" />
            <text class="color-second-text mt-2 size-base text-align-center">{{ tab.name }}</text>
          </view>
        </view>
      </view>

      <!-- 文化地图 -->
      <HomeTitle title="文化地图" />
      <view class="position-relative radius-l overflow-hidden">
        <map 
          id="map"
          class="w-100 height-400"
          :markers="mapLoader.content.value || []"
          :enable-zoom="false"
          :enable-scroll="false"
          :scale="15"
          @click="navTo('inhert/map/index')"
        />
        <view class="position-absolute map-tags d-flex flex-row">
          <view :class="mapTab == 1 ? 'active' : ''" @click="mapTab=1">
            <text class="iconfont icon-read" />
            文物
          </view>
          <view :class="mapTab == 2 ? 'active' : ''" @click="mapTab=2">
            <text class="iconfont icon-task-trip" />
            非遗
          </view>
          <view :class="mapTab == 3 ? 'active' : ''" @click="mapTab=3">
            <text class="iconfont icon-task-trip" />
            非遗传习所
          </view>
        </view>
      </view>

      <!-- 近期活动 -->
      <!-- <HomeTitle title="近期活动" />
      <SimplePageContentLoader :loader="activityLoader">
        <view 
          class="d-flex flex-col shadow-l radius-l bg-base p-3"
          v-for="(item, k) in activityLoader.content.value"
          :key="k"
        >
          <image 
            class="w-100 radius-base"
            :src="item.thumbnail || item.image"
            mode="widthFix"
          />
          <view class="d-flex flex-row justify-between mt-3">
            <text class="color-primary size-l">{{ item.title }}</text>
            <text class="color-primary">剩余名额：{{item.count}}</text>
          </view>
          <view class="d-flex flex-row justify-between align-center mt-3">
            <view class="d-flex flex-one flex-col">
              <view class="d-flex flex-row align-center">
                <image :src="IconLocation" class="width-30 height-30 mr-3" />
                <text class="color-second size-l">{{ item.location }}</text>
              </view>
              <text class="color-second">
                <text class="iconfont icon-time mr-2" />
                {{ item.time }}
              </text>
            </view>
            <view class="width-1-5">
              <u-button shape="circle" type="primary">立即报名</u-button>
            </view>
          </view>
        </view>
      </SimplePageContentLoader> -->

      <!-- 精彩推荐 -->
      <HomeTitle title="精彩推荐" />
      <SimplePageContentLoader :loader="recommendLoader">
        <view class="d-flex flex-row justify-between flex-wrap">
          <view 
            v-for="(tab, k) in recommendLoader.content.value"
            :key="k"
            class="grid4-item position-relative mb-3"
            @click="handleGoDetails(tab)"
          >
            <text 
              class="tag bg-mask-white color-primary radius-l p-1 position-absolute size-s text-lines-1"
            >
              {{ tab.title }}
            </text> 
            <image
              class="w-100 height-250 radius-base"
              :src="tab.thumbnail || tab.image"
              mode="aspectFill"
            />
          </view>
        </view>
      </SimplePageContentLoader>
    </view>
  </view>
  <tabbar :current="0"></tabbar>
</template>

<script setup lang="ts">
import Tabbar from '@/common/components/tabs/tabbar.vue';
const MainBoxIcon1 = 'https://mn.wenlvti.net/app_static/minnan/images/home/MainBoxIcon1.png';
const MainBoxIcon2 = 'https://mn.wenlvti.net/app_static/minnan/images/home/MainBoxIcon2.png';
const MainBoxIcon3 = 'https://mn.wenlvti.net/app_static/minnan/images/home/MainBoxIcon3.png';
const MainBoxIcon4 = 'https://mn.wenlvti.net/app_static/minnan/images/home/MainBoxIcon4.png';
const MainBoxIcon5 = 'https://mn.wenlvti.net/app_static/minnan/images/home/MainBoxIcon5.png';
const MainBoxIcon6 = 'https://mn.wenlvti.net/app_static/minnan/images/home/MainBoxIcon6.png';
const MainBoxIcon7 = 'https://mn.wenlvti.net/app_static/minnan/images/home/MainBoxIcon7.png';
const MainBoxIcon8 = 'https://mn.wenlvti.net/app_static/minnan/images/home/MainBoxIcon8.png';
const ImageTest = 'https://mn.wenlvti.net/app_static/minnan/images/home/ImageTest.jpg';
import HomeTitle from '@/pages/parts/HomeTitle.vue'; 
import Box1AudioPlay from '@/pages/parts/Box1AudioPlay.vue';
import SimplePageContentLoader from "@/common/components/SimplePageContentLoader.vue";
import { navTo } from '@/common/utils/PageAction';
import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
import CommonContent, { GetContentListParams } from '@/api/CommonContent';
import { ref, watch } from 'vue';
import UnmoveableContent from '@/api/inheritor/UnmoveableContent';
import SeminarContent from '@/api/inheritor/SeminarContent';
import ProjectsContent from '@/api/inheritor/ProjectsContent';
import { useSimpleListAudioPlayer } from '@/common/composeabe/SimpleAudioPlayer';

const subTabs1 = [
  { 
    name: '闽南语', 
    icon: MainBoxIcon1, 
    onClick: () => navTo('/pages/article/common/list', {
      title: '闽南语',
      mainBodyColumnId: '257,235,237,210',
      modelId: 5,
      itemType: 'article-common',
      detailsPage: '/pages/video/details',
    }) 
  },
  { 
    name: '古早味', 
    icon: MainBoxIcon2, 
    onClick: () => navTo('/pages/article/common/list', {
      title: '古早味',
      mainBodyColumnId: 103,
      modelId: 8,
      itemType: 'article-common',
      detailsPage: '/pages/article/details',
    }) 
  },
  { name: '先贤列传', icon: MainBoxIcon3, onClick: () => navTo('/pages/introduction/character') },
  { 
    name: '民俗活动', 
    icon: MainBoxIcon4, 
    onClick: () => navTo('/pages/article/common/list', {
      title: '民俗活动', 
      mainBodyColumnId: 299,
      modelId: 18,
      itemType: 'article-common',
      detailsPage: '/pages/article/details',
    }) 
  },
]
const subTabs2 = [
  { 
    name: '红砖厝韵', 
    icon: MainBoxIcon5 , 
    onClick: () => navTo('/pages/article/common/list', {
      title: '红砖厝韵',
      mainBodyColumnId: 252,
      modelId: 3,
      itemType: 'article-common',
      detailsPage: '/pages/article/details',
    }) 
  },
  { 
    name: '薪传匠艺', 
    icon: MainBoxIcon6 , 
    onClick: () => navTo('/pages/inhert/intangible/list')
  },
  { 
    name: '工夫茶道', 
    icon: MainBoxIcon7 , 
    onClick: () => navTo('/pages/article/common/list', {
      title: '工夫茶道',
      mainBodyColumnId: 311,
      modelId: 3,
      itemType: 'article-common',
      detailsPage: '/pages/article/details',
    }) 
  },
  { 
    name: '特色村社', 
    icon: MainBoxIcon8 , 
    onClick: () => navTo('/pages/inhert/village/list')
  },
]

const mapCtx = uni.createMapContext('map');
const mapTab = ref(1);
const mapLoader = useSimpleDataLoader(async () => {
  let list ;
  switch (mapTab.value) {
    default:
    case 1:
      list = (await UnmoveableContent.getContentList(new GetContentListParams(), 1, 6)).list
      break;
    case 2:
      list = (await ProjectsContent.getContentList(new GetContentListParams(), 1, 6)).list
      break;
    case 3:
      list = (await SeminarContent.getContentList(new GetContentListParams(), 1, 6)).list
      break;
  }  
  const res = list.map((p) => {
    return {
      ...p,
      id: p.id,
      longitude: Number(p.longitude),
      latitude: Number(p.latitude),
      iconPath: p.thumbnail,
      width: 40,
      height: 40,
    };
  });
  mapCtx.includePoints({
    points: res.map(p => ({
      latitude: p.latitude,
      longitude: p.longitude,
    })),
    padding: [20, 20, 20, 20],
  });
  return res;
}, true, undefined, true);

watch(mapTab, () => mapLoader.loadData(undefined, true));

const indexAudioPlayer = useSimpleListAudioPlayer(async () => {
  return (await CommonContent.getContentList(new GetContentListParams()
    .setModelId(5)
    .setMainBodyColumnId(313)
  , 1, 6)).list.sort(() => Math.random()>0.5?-1:1).map((p) => {
    return {
      id: p.id,
      title: p.title,
      image: p.thumbnail || p.image,
      src: p.audio as string, 
    }
  });
})

const activityLoader = useSimpleDataLoader(async () => {
  //TODO: 活动接口
  return [
    {
      title: '茶艺传承工坊',
      image: ImageTest,
      count: 8,
      content: '这是一个活动的内容',
      time: '2025年06月16日 12:00',
      location: '湖里创新园',
      link: '/pages/article/details',
    }
  ]
})
const recommendLoader = useSimpleDataLoader(async () => {
  const list = [];
  list.push(...(await CommonContent.getContentList(new GetContentListParams()
    .setModelId(1)
  , 1, 6)).list.map((p) => {
    p.itemType = 'artifact';
    return p;
  }))
  list.push(...(await CommonContent.getContentList(new GetContentListParams()
    .setModelId(16)
  , 1, 6)).list.map((p) => {
    p.itemType = 'intangible';
    return p;
  }))


  return list;
});

function handleGoDetails(item: any) {
  switch (item.itemType) {
    case 'artifact': 
      navTo('/pages/inhert/artifact/details', { id: item.id });
      break;
    case 'intangible': 
      navTo('/pages/inhert/intangible/details', { id: item.id });
      break;
    default:
      navTo('/pages/article/details', { id: item.id });
      break;
  }
}

</script>

<style lang="scss">
.page-home {
  .map-tags {
    left: 0;
    top: 0;
    padding: 20rpx;

    view {
      border-radius: 40rpx;
      padding: 10rpx 20rpx;
      background-color: #f7f3e8;
      color: #d9492e;
      margin-right: 10rpx;

      &.active {
        background-color: #d9492e;
        color: #f7f3e8;
      }
    }
  }
  .grid4-item {
    width: 320rpx;

    .tag {
      top: 2rpx; 
      right: 2rpx;
    }
  }
  .main-banner-box {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 15rpx;
    background: linear-gradient(180deg, #E5CDAB 0%, #F0E3D6 100%), #F7F3E8;
    padding: 20rpx;
    font-family: "SongtiSCBlack";
    color: #432A04;

    .title {
      font-size: 40rpx;
    }
    text {
      font-size: 35rpx;
      margin-top: 10rpx;
    }
    .more {
      margin-top: 30rpx;
      padding: 10rpx 20rpx;
      width: 150rpx;
      background-image: url('https://mn.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: 0;
      bottom: 0;
      width: 370rpx;
      z-index: 2;
      height: auto;
    }
  }
}
</style>