<script lang="ts" setup>
import { storeToRefs } from 'pinia';
import { onBeforeMount, provide, Ref, ref } from 'vue';
import TopFilter from './components/TopFilter.vue';
import AdvertisedProducts from './advertisedProducts/index.vue';
import Campaigns from './campaigns/index.vue';
import Keywords from './keywords/index.vue';
import Placement from './placement/index.vue';
import PurchasedOtherProducts from './purchasedOtherProducts/index.vue';
import SearchTerm from './searchTerm/index.vue';
import Targets from './targets/index.vue';
import DateRangePicker from '/@/components/DateRangePicker/index.vue';
import { usePublicData } from '/@/stores/publicData';
import { useShopInfo } from '/@/stores/shopInfo';
import { GetAllPortfolios } from '/@/views/adManage/portfolios/api';
import emitter from '/@/utils/emitter';

// const shopInfo = useShopInfo()
const publicData = usePublicData();
const selectedPortfolios: Ref<string[]> = ref([]);
const portfolios: Ref<Portfolio[]> = ref([]);
const { dateRange } = storeToRefs(publicData);
provide('dateRange', dateRange);

const shopInfo = useShopInfo();
const { profile } = storeToRefs(shopInfo);
provide('profile', profile);

const searchItem = ref('');
const filterItem = ref('');
provide('searchItem', searchItem);

// 防止搜索框内容变化时，搜索框内容不更新
function handleSearchChange() {
  searchItem.value = filterItem.value;
}

// 提供给PopoverFilter组件的搜索内容
emitter.on('PopoverFilter-allSkus', (data: any) => {
  topSearchItem.value = data.allSkus.value;
  searchType.value = data.searchType.value;
});
const topSearchItem = ref([]);
const searchType = ref('');
provide('topSearchItem', topSearchItem);
provide('searchType', searchType);

const tabActiveName = ref('Campaigns');
const tabs = [
  { label: '广告活动', name: 'Campaigns' },
  { label: '关键词投放', name: 'Keywords' },
  { label: '商品投放', name: 'Targets' },
  { label: '推广商品', name: 'AdvertisedProducts' },
  { label: '购买的其他商品', name: 'PurchasedOtherProducts' },
  { label: '搜索词', name: 'SearchTerm' },
  { label: '广告位', name: 'Placement' },
];
const tabsComponents: any = {
  Campaigns,
  Keywords,
  Targets,
  AdvertisedProducts,
  PurchasedOtherProducts,
  SearchTerm,
  Placement,
};

onBeforeMount(async () => {
  const resp: APIResponseData = await GetAllPortfolios();
  portfolios.value = resp.data;
});
</script>

<template>
  <div class="asj-container">
    <div class="public-search">
      <el-input v-model="filterItem" @change="handleSearchChange" style="width: 500px" placeholder="请输入搜索内容"></el-input>
      <TopFilter></TopFilter>
      <el-select
        v-model="selectedPortfolios"
        placeholder="广告组合"
        clearable
        multiple
        style="width: 200px"
        collapse-tags
        collapse-tags-tooltip
        :max-collapse-tags="3"
        :disabled="true">
        <el-option v-for="info of portfolios" :label="info.name" :value="info.portfolioId"></el-option>
      </el-select>
      <DateRangePicker v-model="dateRange"></DateRangePicker>
    </div>
    <div class="asj-tabs">
      <div
        v-for="tab of tabs"
        :key="tab.name"
        :class="['asj-tab', { active: tabActiveName === tab.name }]"
        @click="tabActiveName = tab.name">
        {{ tab.label }}
      </div>
    </div>
    <component :is="tabsComponents[tabActiveName]"></component>
  </div>
</template>

<style scoped>
::v-deep(.el-table .el-table__header-wrapper .cell) {
  border-right: 1px solid rgb(218, 221, 223);
}

::v-deep(.el-table__footer-wrapper .el-table__footer tr) {
  background-color: #f5f7fa;
}
</style>
