<script setup lang="ts">
import DateRangePicker from '/@/components/DateRangePicker/index.vue'
import { usePublicData } from '/@/stores/publicData'
import { storeToRefs } from 'pinia'
import { getProductLineSelect } from '/@/views/productCenter/productList/api'
import { inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import emitter from '/@/utils/emitter'

const publicData = usePublicData()
const { dateRange } = storeToRefs(publicData)
const profile = <any>inject('profile')

const selectValue = ref('')
const options = ref([])

const searchItem = ref('')

async function fetchProductLine() {
  try {
    const resp = await getProductLineSelect({ profileId: profile.value.profile_id })
    options.value = resp.data
    selectValue.value = options.value[0].productlineId
  } catch (error) {
    console.log('error:', error)
  }
}

function handleSearchChange() {
  emitter.emit('TopFilters-searchItem', { searchItem: searchItem.value })
}

emitter.on('ProductSelectCard-cardId', (value: any) => {
  selectValue.value = value.productlineId
})

emitter.on('ProductLineDialog-reloading', (value: any) => {
  if (value.reloading) {
    fetchProductLine()
  }
})

emitter.on('ProductSelectCard-reloading', (value: any) => {
  if (value.reloading) {
    fetchProductLine()
  }
})

watch(selectValue, () => {
  emitter.emit('TopFilters-selectValue', { selectValue: selectValue.value })
  // console.log('selectValue.value', selectValue.value)
})

onMounted(() => {
  fetchProductLine()
})

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

<template>
  <div class="filters">
    <el-input v-model="searchItem" @change="handleSearchChange" placeholder="ASIN/父ASIN/标题/SKU"></el-input>
    <el-select v-model="selectValue" class="filter-select">
      <el-option v-for="item in options" :key="item.productlineId" :label="item.productlineName" :value="item.productlineId" />
    </el-select>
    <DateRangePicker v-model="dateRange"></DateRangePicker>
  </div>
</template>

<style scoped>
.filters {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.filter-select {
  width: 300px;
}
</style>
