<template>
  <view class="d-flex flex-col bg-base" style="min-height:100vh"> 
    <view class="top-tab bg-base">
      <Tabs
        :tabs="tabs.content.value || []" 
        v-model:currentIndex="tab"
        :autoItemWidth="false"
        :autoScroll="true"
        :defaultItemWidth="205"
        class="top-tab"
        @click="(e: any) => tab = e.id"
      />
    </view>

    <view class="d-flex flex-col p-2">
      <SearchBar
        v-model="searchValue"
        placeholder="搜索闽南话" 
        @cancel="doSearch"
        @search="doSearch"
      />
      <view class="d-flex flex-row justify-between align-center pl-3 pr-3">
        <view class="d-flex flex-row align-center">
          自动连播
          <switch 
            class="ml-1"
            color="#d9492e"
            :checked="playAuto" 
            @change="(e: any) => playAuto = e.detail.value" 
            style="transform:scale(0.6)" 
          />
        </view>
        <view>
          <text class="iconfont icon-play mr-1"></text>
          <text v-if="playMode=='list'" @click="playMode='loop'">列表播放</text>
          <text v-else-if="playMode=='loop'" @click="playMode='random'">单个循环</text>
          <text v-else-if="playMode=='random'" @click="playMode='list'">随机播放</text>
          <text v-else @click="playMode='list'">播放模式</text>
        </view>
      </view>
    </view>
    <view class="d-flex flex-col p-2 pt-0">
      <SimpleListAudioPlayer
        ref="player"
        :list="listLoader.list.value ?? []"
        :playMode="playMode"
        :playAuto="playAuto"
      >
        <template #default="{ currentPlayItemId, isPlaying }">
          <view
            v-for="item in listLoader.list.value"
            :key="item.id"
          >
            <Box2LinePlayRightArrow 
              classNames="ml-2 mb-3"
              titleColor="title-text"
              :image="item.image"
              :title="item.title"
              :isCurrent="item.id == currentPlayItemId"
              :isPlaying="isPlaying"
              @click="player.playpause(item.id)"
            />
          </view>
        </template>
      </SimpleListAudioPlayer>
    </view>
    <SimplePageListLoader :loader="listLoader" />
  </view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { useSimplePageListLoader } from '@/common/composeabe/SimplePageListLoader';
import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
import CommonContent, { GetContentListParams } from '@/api/CommonContent';
import SimplePageListLoader from '@/common/components/SimplePageListLoader.vue';
import AppCofig from '@/common/config/AppCofig';
import Box2LinePlayRightArrow from '@/pages/parts/Box2LinePlayRightArrow.vue';
import SimpleListAudioPlayer from '@/common/components/SimpleListAudioPlayer.vue';
import Tabs from '@/components/nav/Tabs.vue';
import SearchBar from '@/components/form/SearchBar.vue';

const tabs = useSimpleDataLoader(async () => {
  const res = await CommonContent.getModelColumList(5, 313, 1, 50);
  setTimeout(() => {
    tab.value = 0
  }, 200);
  return res.map((item) => ({
    ...item,
    text: item.name,
  }));
}, true);

const player = ref();
const playMode = ref<'loop'|'random'|'list'>(uni.getStorageSync('LanguagePlayMode') || 'list');
const playAuto = ref(Boolean(uni.getStorageSync('LanguageAutoPlay')));

const searchValue = ref('');
const tab = ref(-1)
const listLoader = useSimplePageListLoader(8, async (page, pageSize) => {
  const res = await CommonContent.getContentList(new GetContentListParams()
    .setModelId(5)
    .setKeywords(searchValue.value)
    .setMainBodyColumnId(tabs.content.value?.[tab.value]?.id ?? 0)
  , page, pageSize);
  return { list: res.list.map((item) => {
    return {
      id: item.id,
      image: item.thumbnail || item.image || AppCofig.defaultImage,
      title: item.title,
      src: item.audio as string,
    }
  }), total: res.total }
});

watch(playMode, () => uni.setStorageSync('LanguagePlayMode', playMode.value));
watch(playAuto, () => uni.setStorageSync('LanguageAutoPlay', playAuto.value))
watch(tab, () => listLoader.loadData(undefined, true));

function doSearch() {
  listLoader.loadData(undefined, true);
}
</script>