<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { Ref, onBeforeMount, provide, ref, watch } from 'vue'
import DateRangePicker from '/@/components/DateRangePicker/index.vue'
import { usePublicData } from '/@/stores/publicData'
import { GetAllPortfolios } from '/@/views/adManage/portfolios/api'
import Campaigns from '/@/views/adManage/sb/campaigns/index.vue'
import Keywords from '/@/views/adManage/sb/keywords/index.vue'
import Placement from '/@/views/adManage/sb/placement/index.vue'
import SearchTerm from '/@/views/adManage/sb/searchTerm/index.vue'
import Targets from '/@/views/adManage/sb/targets/index.vue'

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

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

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

const tabActiveName = ref('Campaigns')
const tabs = [
  { label: '广告活动', name: 'Campaigns' },
  { label: '关键词', name: 'Keywords' },
  { label: '商品投放', name: 'Targets' },
  { label: '搜索词', name: 'SearchTerm' },
  { label: '广告位', name: 'Placement' },
]
const tabsComponents: any = {
  Campaigns,
  Keywords,
  Targets,
  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="searchItem" @change="handleSearchChange" style="width: 500px" placeholder="请输入搜索内容"></el-input>
      <DateRangePicker v-model="dateRange"></DateRangePicker>
      <el-select
        v-model="selectedPortfolios"
        placeholder="广告组合"
        clearable
        multiple
        style="width: 400px"
        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>
    </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>
