<template>
  <FlexCol 
    v-if="appConfiguration"
    innerClass="nana-travel-route-list" 
    :innerStyle="{ 
      backgroundImage: `url('${appConfiguration.routeListImage}')`,
      ...appConfiguration.routeListImageStyle
    }"
  >
    <StatusBarSpace backgroundColor="transparent" />
    <NavBar
      title=""
      leftButton="back"
      backgroundColor="transparent"
    />
    <SimplePageContentLoader :loader="listLoader">
      <FlexCol backgroundColor="#fdfefe" :gap="30" :radius="35" :padding="40" :margin="[appConfiguration.routeListMarginTop,0,0,0]">
        <FlexRow justify="space-between">
          <SimpleDropDownPicker v-model="selectedRegion" :columns="regionData.content.value" />
          <!-- <SimpleDropDownPicker v-model="selectedType" :columns="typeData.content.value" /> -->
          <SearchBar 
            v-model="searchValue"
            placeholder="搜索路线" 
            leftIcon=""
            searchState="show"
            @search="doSearch" 
            @cancel="doSearch" 
          />
        </FlexRow>
        <Touchable           
          v-for="(item,index) in listLoader.content.value"
          backgroundColor="white"
          :key="item.id"
          :radius="20"
          :padding="[25,30]"
          :gap="10"
          direction="column"
          shadow="default"
          @click="handleGo(item)"
        >
          <FlexRow :gap="20">
            <FlexCol position="relative">
              <Tag 
                :text="`路线${(index + 1)}`"
                :innerStyle="{ position: 'absolute', top: 0, left: 0, zIndex: 2 }"
                type="primary" 
                size="small"
              />
              <Image
                :src="item.image"
                :width="200"
                :height="145"
                :radius="10"
              />
            </FlexCol>
            <FlexCol :gap="10">
              <Text fontConfig="subTitle" :text="item.title" />
              <Text fontConfig="subSecondText" :text="item.desc || item.title" />
            </FlexCol>
          </FlexRow>
          <Divider color="border.light" />
          <FlexRow justify="space-between">
            <Text fontConfig="subSecondText" :text="`${item.regionText} · ${item.keywords?.length || 0} 个景点`" />
            <Button size="small" type="primary" shape="round" :radius="40" text="Let's Go" @click="handleGo(item)" />
          </FlexRow>
        </Touchable>
        <Empty
          v-if="listLoader.content.value?.length == 0"
          :description="listLoader.content.value?.length == 0 ? '暂无数据' : ''"
        />
      </FlexCol>
    </SimplePageContentLoader>
  </FlexCol>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue';
import { navTo } from '@/components/utils/PageAction';
import { useSimplePageContentLoader } from '@/common/composeabe/SimplePageContentLoader';
import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
import { waitTimeOut } from '@imengyu/imengyu-utils';
import { injectAppConfiguration } from '@/api/system/useAppConfiguration';
import type { GetContentListItem } from '@/api/CommonContent';
import SimplePageContentLoader from '@/common/components/SimplePageContentLoader.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import TravalContent from '@/api/traval/TravalContent';
import NavBar from '@/components/nav/NavBar.vue';
import StatusBarSpace from '@/components/layout/space/StatusBarSpace.vue';
import Image from '@/components/basic/Image.vue';
import Divider from '@/components/display/Divider.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Text from '@/components/basic/Text.vue';
import Button from '@/components/basic/Button.vue';
import Tag from '@/components/display/Tag.vue';
import SearchBar from '@/components/form/SearchBar.vue';
import SimpleDropDownPicker from '@/common/components/SimpleDropDownPicker.vue';
import CommonContent, { GetContentListParams } from '@/api/CommonContent';
import Empty from '@/components/feedback/Empty.vue';
import Touchable from '@/components/feedback/Touchable.vue';
import { injectCommonCategory } from '@/pages/article/data/CommonCategoryGlobalLoader';
import type { IHomeTravelListDefine } from '@/pages/article/data/defines/Travel';

const appConfiguration = injectAppConfiguration();
const commonCategory = injectCommonCategory();
const pageDefine = computed(() => commonCategory.value.page.find((p) => p.name === 'TravelList'));
const pageContentDefine = computed(() => pageDefine.value?.content as IHomeTravelListDefine);

const listLoader = useSimplePageContentLoader(async () => {
  const res = (await TravalContent.getTravalRouteList(
    new GetContentListParams()
      .setKeywords(searchValue.value)
      .setSelfValues({
        region: selectedRegion.value == 0 ? undefined : selectedRegion.value,
        type: selectedType.value == 0 ? undefined : selectedType.value,
      })
  )).list;
  return res;
});

const selectedRegion = ref(0);
const selectedType = ref(0);
const searchValue = ref('');

const regionData = useSimpleDataLoader(async () => {
  const res = await CommonContent.getCategoryList(1);
  const data = res.filter(p => p.pid == 5).map(p => ({
    id: p.id,
    name: p.title,
  }));
  data.unshift({
    id: 0,
    name: '全部地区',
  });
  return data;
});
const typeData = useSimpleDataLoader(async () => {
  const res = await CommonContent.getCategoryList(1);
  const data = res.map(p => ({
    id: p.id,
    name: p.title,
  }));
  data.unshift({
    id: 0,
    name: '全部兴趣',
  });
  return data;
});

watch(selectedRegion, () => {
  listLoader.loadData(undefined, true);
});
watch(selectedType, () => {
  listLoader.loadData(undefined, true);
});

const doSearch = () => {
  listLoader.loadData(undefined, true);
};
const handleGo = (item: GetContentListItem) => {
  navTo('./travel-route', { id: item.id });
};

onMounted(async () => {
  await waitTimeOut(250);
  await listLoader.loadData(undefined, true);
});
</script>

<style lang="scss">
.nana-travel-route-list {
  background-size: 100% auto;
  background-position: 0 60rpx;
  background-repeat: no-repeat;
}
</style>