<script setup lang="ts">
import { dataCenterMetricsEnum } from '/@/views/reportManage/dataCenter/utils/enum'
import { getCardData, getLineData, getLineMonthData, getLineWeekData } from '/@/views/reportManage/dataCenter/api'
import DataTendencyChart from '/@/views/reportManage/dataCenter/components/DateTendency/index.vue'
import { reactive, ref } from 'vue'
import DateRangePicker from '/@/components/DateRangePicker/index.vue'
import { storeToRefs } from 'pinia'
import { useShopInfo } from '/@/stores/shopInfo'
import { usePublicData } from '/@/stores/publicData'
import Selector from '/@/views/reportManage/dataCenter/components/Selector/index.vue'

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

const queryParams = ref({
  profileId: profile.value.profile_id,
  dateRange,
  // parentAsin,
  // childAsin,
  // sku,
})
//表格
const tableColumns = [
  { type: 'seq', title: '平台编号' },
  { field: 'Name', title: '平台名称' },
  { field: 'Operation', title: '运营' },
  { field: 'Country', title: '国家' },
  { field: 'Brand', title: '品牌' },
  { field: 'Sales', title: '销售额' },
  { field: 'YearOnYear', title: '期末同比变化' },
  { field: 'MonthOnMonth', title: '期末环比变化' },
  { field: 'AdSpend', title: '广告花费' },
  { field: 'TotalAdSales', title: '广告销售额' },
  { field: 'ROI', title: '广告ROI' },
  { field: 'ACOS', title: '广告ACOS' },
  { field: 'ROAS', title: '广告ROAS' },
  { field: 'AdExposure', title: '广告曝光' },
  { field: 'AdOrder', title: '广告订单' },
  { field: 'AdClick', title: '广告点击' },
  { field: 'AdConversionRate', title: '广告转化率' },
  { field: 'CumulativeSales', title: '累计销售额' },
  { field: 'SalesCompletion', title: '销售额完成情况' },
  { field: 'MonthOnMonthGrowthRate', title: '环比上周增长率' },
]
const tableData = ref([])

const gridOptions = reactive({
  border: true,
  height: 300,
  align: null,
  round: true,
  columnConfig: {
    resizable: true,
  },
  columns: tableColumns,
  toolbarConfig: {
    slots: {
      buttons: 'toolbar_buttons',
    },
  },
  data: [
    {
      id: 10001,
      npmName: 'Test1',
      Operation: 'T1',
      Country: 'Develop',
      Brand: 'Man',
      Sales: 28,
      YearOnYear: 11,
      MonthOnMonth: 22,
      AdSpend: 33,
      TotalAdSales: 100,
      ROI: 11,
      ACOS: 11,
      ROAS: 11,
      MonthSalesCompletionRate: 11,
      AdExposure: 11,
      AdOrder: 11,
      AdClick: 11,
      AdConversionRate: 11,
      CumulativeSales: 11,
      SalesCompletion: 11,
      MonthOnMonthGrowthRate: 11,
    },
  ],
})
// 模拟从后端获取列名数据
async function fetchColumnNames() {
  // 这里替换成实际的后端数据请求
  const response = await fetch('/api/columns'); // 假设后端接口为 /api/columns
  const data = await response.json();
  return data;
}

// 根据后端数据生成表格列配置
async function generateColumns() {
  const columnNames = await fetchColumnNames();
  columns.value = columnNames.map(columnName => ({
    field: columnName,
    title: columnName,
  }));
}

// 模拟从后端获取表格数据
async function fetchTableData() {
  // 这里替换成实际的后端数据请求
  const response = await fetch('/api/data'); // 假设后端接口为 /api/data
  const data = await response.json();
  return data;
}

// 加载表格数据
async function loadData() {
  tableData.value = await fetchTableData();
}

// 组件挂载时生成表格列配置并加载数据
onMounted(async () => {
  await generateColumns();
  await loadData();
});

</script>

<template>
  <div>
    <div class="custom-card-style flex gap-1.5 justify-between my-1.5 mx-2">
      <Selector></Selector>
      <DateRangePicker v-model="dateRange"></DateRangePicker>
    </div>
    <el-card class="mb-1.5">
      <DataTendencyChart
        :metricEnum="dataCenterMetricsEnum"
        :query="queryParams"
        :fetchCard="getCardData"
        :fetchLine="getLineData"
        :fetch-line-month="getLineMonthData"
        :fetch-line-week="getLineWeekData"
        >np
      </DataTendencyChart>
    </el-card>
    <el-card>
      <vxe-grid v-bind="gridOptions">
        <template #toolbar_buttons>
          <!--TODO: 主数据-->
          <vxe-button @click="mainData">主数据</vxe-button>
          <vxe-button @click="monthlyComparativeData">月对比数据</vxe-button>
        </template>
      </vxe-grid>
    </el-card>
  </div>
</template>

<style scoped>
.custom-card-style {
  z-index: 999;
  position: sticky;
  top: 0;
}
</style>
