<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { provide, ref } from 'vue'
import DataTable from './components/DataTable.vue'
import SalesOverview from './components/SalesOverview.vue'
import TopParentAsin from './components/TopParentAsin.vue'
import TrendOverview from './components/TrendOverview.vue'
import DateRangePicker from '/@/components/DateRangePicker/index.vue'
import { usePublicData } from '/@/stores/publicData'
import { useShopInfo } from '/@/stores/shopInfo'

// 店铺信息
const shopInfo = useShopInfo()
const { profile } = storeToRefs(shopInfo)
// 公共数据
const publicData = usePublicData()
const { dateRange } = storeToRefs(publicData)

provide('dateRange', dateRange)
provide('profile', profile)

const activeName = ref('trendOverview')
provide('activeName', activeName)
// const filter1 = ref('')
// const options1 = [
//   {
//     value: 'Option1',
//     label: 'Option1',
//   },
//   {
//     value: 'Option2',
//     label: 'Option2',
//   },
// ]

// const filter2 = ref('')
// const options2 = [
//   {
//     value: 'Option1',
//     label: 'Option1',
//   },
//   {
//     value: 'Option2',
//     label: 'Option2',
//   },
// ]

const updatedData = ref([])
provide('tableData', updatedData)

function handleUpdate(value: any) {
  updatedData.value = value
}
</script>

<template>
  <div class="outer-container">
    <TopParentAsin></TopParentAsin>
    <div class="filters">
      <DateRangePicker v-model="dateRange" class="date-range"></DateRangePicker>
      <!-- <div v-show="activeName == 'trendOverview'">
        <el-select v-model="filter1" placeholder="Select" style="width: 240px; margin-right: 8px">
          <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-select v-model="filter2" placeholder="Select" style="width: 240px">
          <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div> -->
    </div>
    <div>
      <el-tabs v-model="activeName" type="border-card" class="chart-tabs">
        <el-tab-pane label="趋势总览" name="trendOverview">
          <TrendOverview @updateList="handleUpdate"></TrendOverview>
          <DataTable></DataTable>
        </el-tab-pane>
        <!-- <el-tab-pane label="广告优化" name="adOptimization">广告优化</el-tab-pane> -->
        <el-tab-pane label="销售概览" name="salesOverview" lazy>
          <SalesOverview></SalesOverview>
        </el-tab-pane>
        <!-- <el-tab-pane label="竞品推荐" name="cpRecommendations">
          <CpRecommendations></CpRecommendations>
        </el-tab-pane> -->
      </el-tabs>
    </div>
  </div>
</template>

<style scoped>
.outer-container {
  padding: 5px 10px 0 10px;
}
.filters {
  display: flex;
  flex-direction: row-reverse;
  gap: 8px;
  margin-top: 5px;
}
/* :deep(.el-tabs--border-card > .el-tabs__header) {
  background-color: transparent;
} */
/* 卡片的边框弧度 */
:deep(.el-tabs.el-tabs--top.el-tabs--border-card.chart-tabs) {
  border-radius: 8px;
}
.date-range {
  position: absolute;
  right: 14px;
  top: 163px;
  z-index: 9;
  border-radius: 20px;
}
</style>
