<script setup lang="ts">
import {ref, reactive, computed, inject, watch, Ref, onMounted} from 'vue'
import {useRouter} from "vue-router";
import { getDayData, getMonthData, getWeekData } from '/@/views/reportManage/dataCenter/api';
import {VxeGridListeners} from "vxe-table";

const router = useRouter()

const dateType = inject<Ref>('dateDimension')

//表格
const dayColumns = [
  {field: 'platformNumber', title: '平台编号', slots: {default: 'platformNumber_default'}},
  {field: 'platformName', title: '平台名称', slots: {default: 'platformName_default'}},
  {field: 'user_name', title: '运营', slots: {default: 'user_name_default'}},
  {field: 'country', title: '国家' , slots: {default: 'country_default'}},
  {field: 'brandName', title: '品牌' ,slots: {default: 'brandName_default'}},

  {field: 'sales', title: '销售额'},
  {field: 'sales_year_on_year', title: '期末同比变化'},
  {field: 'sales_monthly_year_on_year', title: '期末环比变化'},
  {field: 'ad_cost', title: '广告花费'},
  {field: 'ad_sales', title: '广告销售额'},
  {field: 'roi', title: '广告ROI'},
  {field: 'acos', title: '广告ACOS'},
  {field: 'roas', title: '广告ROAS'},
]
const weekColumns = [
  {field: 'platformNumber', title: '平台编号', slots: {default: 'platformNumber_default'}},
  {field: 'platformName', title: '平台名称', slots: {default: 'platformName_default'}},
  {field: 'user_name', title: '运营', slots: {default: 'user_name_default'}},
  {field: 'country', title: '国家' , slots: {default: 'country_default'}},
  {field: 'brandName', title: '品牌' ,slots: {default: 'brandName_default'}},

  {field: 'sales', title: '销售额'},
  {field: 'ad_cost', title: '广告花费'},
  {field: 'ad_sales', title: '广告销售额'},
  {field: 'roi', title: '广告ROI'},
  {field: 'acos', title: '广告ACOS'},
  {field: 'roas', title: '广告ROAS'},
  {field: 'impression', title: '广告曝光',},
  {field: 'ad_click', title: '广告点击',},
  {field: 'ad_order', title: '广告订单',},
  {field: 'ad_conversion_rate', title: '广告转化率',},
  {field: 'money_by_amazon', title: 'Amazon回款金额',},
  {field: 'money_by_other', title: 'Ebay及其他平台可用余额',},
  {field: 'currencyCode', title: '回款/余额币种',},
  {field: 'total_sales_current_monthly', title: '销售额完成情况',},
  {field: 'sales_year_on_year', title: '环比上周增长率',},
  {field: 'sales_monthly_year_on_year', title: '环比上月周增长率',},
  {field: 'sales_weekly_year_on_year', title: '环比上年周增长率',},
  {field: 'session', title: '流量',},
  {field: 'ad_order', title: '订单',},
  {field: 'order', title: '转化',},
  {field: "availableSalesDay", title: "当前存货可售天",},
  {field: "intransitInventory", title: "当前在途库存",},
  {field: "overseasStorage", title: "当前海外仓库存",},
  {field: "refundRate", title: "最近90天平台退货率",},
]
const monthColumns = [
  {field: 'platformNumber', title: '平台编号', slots: {default: 'platformNumber_default'}},
  {field: 'platformName', title: '平台名称', slots: {default: 'platformName_default'}},
  {field: 'user_name', title: '运营', slots: {default: 'user_name_default'}},
  {field: 'country', title: '国家' , slots: {default: 'country_default'}},
  {field: 'brandName', title: '品牌' ,slots: {default: 'brandName_default'}},

  {field: 'sales', title: '销售额'},
  {field: 'ad_cost', title: '广告花费'},
  {field: 'ad_sales', title: '广告销售额'},
  {field: 'roi', title: '广告ROI'},
  {field: 'acos', title: '广告ACOS'},
  {field: 'roas', title: '广告ROAS'},
  {field: 'impression', title: '广告曝光',},
  {field: 'ad_click', title: '广告点击',},
  {field: 'ad_order', title: '广告订单',},
  {field: 'ad_conversion_rate', title: '广告转化率',},
  {field: 'total_sales_current_monthly', title: '销售额完成情况',},
]

const dayData = []
const weekData = []
const monthData = []

const gridOptions = reactive({
  border: false,
  height: 600,
  align: null,
  round: true,
  columnConfig: {
    resizable: true,
  },
  pagerConfig: {
    enabled: true,
    total: 20,
    currentPage: 1,
    pageSize: 10,
    pageSizes: [10, 20, 30],
  },
  toolbarConfig: {
    slots: {
      buttons: 'toolbar_buttons',
    },
  },
  day: {
    columns: dayColumns,
    data: dayData
  },
  week: {
    columns: weekColumns,
    data: weekData
  },
  month: {
    columns: monthColumns,
    data: monthData
  }
})

const currentGridOptions = computed(() => {
  const selectedGridOptions = gridOptions[dateType.value];
  return {
    ...gridOptions,
    ...selectedGridOptions
  };
})
// 分页
const gridEvents = {
  pageChange({currentPage, pageSize}) {
    if (gridOptions.pagerConfig) {
      gridOptions.pagerConfig.currentPage = currentPage
      gridOptions.pagerConfig.pageSize = pageSize
      if (dateType.value === 'day') {
        fetchDayData();
      } else if (dateType.value === 'week') {
        fetchWeekData();
      } else if (dateType.value === 'month') {
        fetchMonthData();
      }
    }
  }
}

async function fetchData(apiFunction) {
  const resp = await apiFunction({
    page: gridOptions.pagerConfig.currentPage,
    limit: gridOptions.pagerConfig.pageSize
  });
  gridOptions[dateType.value].data = resp.data;
  gridOptions.pagerConfig.total = resp.total;
}

async function fetchDayData() {
  await fetchData(getDayData);
}

async function fetchWeekData() {
  await fetchData(getWeekData);
}

async function fetchMonthData() {
  await fetchData(getMonthData);
}

function fetchCurrentData() {
  if (dateType.value === 'day') {
    fetchDayData();
  } else if (dateType.value === 'week') {
    fetchWeekData();
  } else if (dateType.value === 'month') {
    fetchMonthData();
  }
}

const handleImport = () => {
  router.push({
    name: 'TableDataEntry',
    query: {
      dateType: dateType.value,
    }
  })
}

// const QueryTask = (row: any) => {
//   router.push({
//     name: 'TaskManage',
//   })
// }

onMounted(() => {
  fetchCurrentData();

  // 监听 dateType 的变化
  watch(dateType, () => {
    fetchCurrentData();
  });
});
</script>

<template>
  <div>
    <vxe-grid v-bind="currentGridOptions" v-on="gridEvents">
      <template #toolbar_buttons>
        <vxe-button @click="handleImport">数据录入</vxe-button>
        <!--<vxe-button @click="QueryTask">任务列表</vxe-button>-->
      </template>
      <template #platformNumber_default ="{ row }">
        <div>{{ row.task_info.platformNumber }}</div>
      </template>
      <template #platformName_default ="{ row }">
        <div>{{ row.task_info.platformName }}</div>
      </template>
      <template #user_name_default ="{ row }">
        <div>{{ row.task_info.user_name}}</div>
      </template>
      <template #country_default ="{ row }">
        <div>{{ row.task_info.country }}</div>
      </template>
      <template #brandName_default ="{ row }">
        <div>{{ row.task_info.brandName }}</div>
      </template>
    </vxe-grid>
  </div>
</template>

<style scoped>
.vxe-grid {
  border-radius: 10px;
}
</style>