<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { onBeforeUnmount, provide, ref } from 'vue';
import { getCardData, getLineData, getLineMonthData, getLineWeekData } from './api';
import DataTable from './components/DataTable.vue';
import DataTendencyChart from './components/DateTendency/index.vue';
import ProductLineDialog from './components/ProductDialog.vue';
import ProductSelectCard from './components/ProductSelectCard.vue';
import TopFilters from './components/TopFilter.vue';
import useButtonGroup from './hooks/useButton';
import { productListMetricsEnum } from './utils/enum';
import { usePublicData } from '/@/stores/publicData';
import { useShopInfo } from '/@/stores/shopInfo';
import emitter from '/@/utils/emitter';

// 接收下拉框选中的值MetricsCards组件的queryParams
const productlineId = ref('ALL');
emitter.on('TopFilters-selectValue', (value: any) => {
  // console.log('value', value.selectValue)
  productlineId.value = value.selectValue;
});

// 接收搜索框的值
const searchItem = ref('');
emitter.on('TopFilters-searchItem', (value: any) => {
  searchItem.value = value.searchItem;
});

// 店铺信息
const shopInfo = useShopInfo();
const { profile } = storeToRefs(shopInfo);
// 公共数据
const publicData = usePublicData();
const { dateRange } = storeToRefs(publicData);
const queryParams = ref({
  profileId: profile.value.profile_id,
  dateRange,
  productlineId,
  searchItem,
});

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

// 按钮组
const { buttons, activeButton, activeStyle, handleClickBtn } = useButtonGroup();
provide('activeButton', activeButton);

// 控制创建产品线弹窗
function handleCreateDialog() {
  emitter.emit('open-productLine-dialog', { isVisible: true });
}

onBeforeUnmount(() => {
  emitter.all.clear();
});
</script>

<template>
  <div class="outer-container">
    <TopFilters></TopFilters>
    <div class="table-tips">
      <el-icon>
        <Warning />
      </el-icon>
      <p class="prompt-words">商品中心广告数据统计不包含SB广告</p>
    </div>
    <el-card>
      <DataTendencyChart
        :metricEnum="productListMetricsEnum"
        :query="queryParams"
        :fetchCard="getCardData"
        :fetchLine="getLineData"
        :fetch-line-month="getLineMonthData"
        :fetch-line-week="getLineWeekData">
      </DataTendencyChart>
    </el-card>
  </div>
  <ProductSelectCard></ProductSelectCard>
  <div class="pl-and-asin-tables">
    <div class="asin-table-container">
      <vxe-button
        class="custom-button"
        type="text"
        status="primary"
        content="创建产品线"
        icon="vxe-icon-add"
        @click="handleCreateDialog"></vxe-button>
      <div class="xp-radio-group-wrapper">
        <el-button-group>
          <el-button
            bg
            text
            v-for="button in buttons"
            :key="button"
            :style="activeButton === button ? activeStyle : {}"
            @click="() => handleClickBtn(button)">
            {{ button }}
          </el-button>
        </el-button-group>
      </div>
      <DataTable></DataTable>
    </div>
  </div>
  <ProductLineDialog></ProductLineDialog>
</template>

<style scoped>
.outer-container {
  padding: 5px 10px 0 10px;
}

.table-tips {
  color: #8d9095;
  display: flex;
  align-items: center;
  margin: 8px 0;
}

.pl-and-asin-tables {
  padding: 10px 12px 0 12px;
}

.asin-table-container {
  width: 100%;
  padding: 8px;
  color: #4e5969;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
}

.xp-radio-group-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
  align-items: center;
}

.custom-button {
  position: absolute;
  color: #3a83f7 !important;
}

::v-deep(.el-form--default.el-form--label-top .el-form-item .el-form-item__label) {
  color: red;
}

.rompt-words {
  margin-left: 3px;
}
</style>
