<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { inject, onBeforeUnmount, ref } from 'vue'
import { getCardData, getLineData, getLineMonthData, getLineWeekData } from '../api'
import { productListMetricsEnum } from '../utils/enum'
import { usePublicData } from '/@/stores/publicData'
import emitter from '/@/utils/emitter'
import DataTendencyChart from '/@/views/productCenter/productAnalysis/components/DateTendency/index.vue'

const profile = <any>inject('profile')

// 公共数据
const publicData = usePublicData()
const { dateRange } = storeToRefs(publicData)

const listData = ref([])

const parentAsin = ref('')
const childAsin = ref('')
const sku = ref('')

emitter.on('useSelectItem-clickParentAsinBtn', (value: any) => {
  parentAsin.value = value.selectedParentAsin
})

emitter.on('useSelectItem-clickAsinBtn', (value: any) => {
  parentAsin.value = value.selectedParentAsin
  childAsin.value = value.selectedAsin
})

emitter.on('useSelectItem-clickSkuItem', (value: any) => {
  parentAsin.value = value.selectedParentAsin
  childAsin.value = value.selectedAsin
  sku.value = value.selectedSku
})

const queryParams = ref({
  profileId: profile.value.profile_id,
  dateRange,
  parentAsin,
  childAsin,
  sku,
})

const emit = defineEmits(['updateList'])

function update(value) {
  listData.value = value
  emit('updateList', value)
}

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

<template>
  <el-card>
    <!-- <p>{{ queryParams }}</p> -->
    <DataTendencyChart
      :metricEnum="productListMetricsEnum"
      :query="queryParams"
      :fetchCard="getCardData"
      :fetchLine="getLineData"
      :fetch-line-month="getLineMonthData"
      :fetch-line-week="getLineWeekData"
      @changeStatDim="update">
    </DataTendencyChart>
  </el-card>
</template>

<style scoped></style>
