import { inject, ref, onBeforeUnmount } from 'vue'
import emitter from '/@/utils/emitter'
import { getProduct } from '../api'

export default function useSelectItem() {
  const profile = <any>inject('profile')

  const visible = ref(false)

  const productSelect = ref('')
  emitter.on('ExchangeProduct-productSelect', (value: any) => {
    productSelect.value = value
  })

  const allData = ref([])
  emitter.on('ExchangeProduct-allData', (value: any) => {
    allData.value = value.value
  })

  const selectedIndex = ref(-1)
  const selectedParentAsin = ref('')
  const asinData = ref([])

  const selectedAsinIndex = ref(-1)
  const selectedAsin = ref('')
  const skuData = ref([])

  const selectedSkuIndex = ref(-1)
  const selectedSku = ref('')

  function handlePaAsinSelection(index) {
    selectedIndex.value = index
    const selectedItem = allData.value[index]
    selectedParentAsin.value = selectedItem.parentAsin
  }

  // 点击父AsinItem
  function selectPaAsin(index) {
    handlePaAsinSelection(index)
    fetchAsin()
  }

  async function fetchAsin() {
    const query = {
      profileId: profile.value.profile_id,
      productlineId: productSelect.value,
      parentAsin: selectedParentAsin.value,
    }
    try {
      const res = await getProduct(query)
      asinData.value = res.data
    } catch (error) {
      console.log('error:', error)
    }
  }

  // 点击父AsinItem 按钮
  function clickParentAsinBtn(index) {
    handlePaAsinSelection(index)
    emitter.emit('useSelectItem-clickParentAsinBtn', { selectedParentAsin: selectedParentAsin.value })
    resetPopover()
  }

  function handleAsinSelection(index) {
    selectedAsinIndex.value = index
    const selectedItem = asinData.value[index]
    selectedAsin.value = selectedItem.Asin
  }

  function selectAsin(index) {
    handleAsinSelection(index)
    fetchSku()
  }

  async function fetchSku() {
    const query = {
      profileId: profile.value.profile_id,
      productlineId: productSelect.value,
      parentAsin: selectedParentAsin.value,
      childAsin: selectedAsin.value,
    }
    try {
      const res = await getProduct(query)
      skuData.value = res.data
    } catch (error) {
      console.log('error:', error)
    }
  }

  function clickAsinBtn(index) {
    handleAsinSelection(index)
    emitter.emit('useSelectItem-clickAsinBtn', { selectedParentAsin: selectedParentAsin.value, selectedAsin: selectedAsin.value })
    resetPopover()
  }

  function selectSku(index) {
    selectedSkuIndex.value = index
    const selectedItem = skuData.value[index]
    selectedSku.value = selectedItem.sku
    emitter.emit('useSelectItem-clickSkuItem', { selectedParentAsin: selectedParentAsin.value, selectedAsin: selectedAsin.value, selectedSku: selectedSku.value })
    resetPopover()
  }

  function resetPopover() {
    selectedIndex.value = -1
    asinData.value = []
    selectedAsinIndex.value = -1
    selectedSkuIndex.value = -1
    skuData.value = []
    visible.value = false
  }

  onBeforeUnmount(() => {
    emitter.all.clear()
  })

  return { visible, asinData, skuData, selectedIndex, selectedAsinIndex, selectedSkuIndex, selectPaAsin, selectAsin, selectSku, clickParentAsinBtn, clickAsinBtn }
}
