<script lang="ts" setup>
/**
 * @Name: QueryCondition.vue
 * @Description:  搜索词-分析页-条件筛选栏
 * @Author: Cheney
 */
import { RefreshLeft, Search } from '@element-plus/icons-vue';
import { inject, onBeforeMount, onMounted, ref, Ref, watch } from 'vue';
import emitter from '/@/utils/emitter';
import WeekRangePicker from '/@/components/WeekRangePicker/index.vue';
import MonthRangePicker from '/@/components/MonthRangePicker/index.vue';
import dayjs from 'dayjs';
import _ from 'lodash';


const weekDate = ref([
  dayjs().subtract(2, 'week').day(0).format('YYYY-MM-DD'),
  dayjs().subtract(1, 'week').day(6).format('YYYY-MM-DD')
]);
const monthDate = ref([
  dayjs().subtract(2, 'month').startOf('month').format('YYYY-MM-DD'),
  dayjs().subtract(0, 'month').startOf('month').format('YYYY-MM-DD')
]);
const defaultLabel = ref('ASIN');
const filter = inject<Ref>('filter');

onBeforeMount(() => {
  handleDateChange();
});

onMounted(() => {
  handleQuery();
});

watch([ weekDate, monthDate ], () => {
  handleDateChange();
});

watch(
    () => filter.value.layerType,
    (newValue) => {
      if (newValue === 'asin_view') {
        defaultLabel.value = 'ASIN';
      } else if (newValue === 'brand_view') {
        defaultLabel.value = 'Brand';
      } else {
        defaultLabel.value = 'ASIN';
        filter.value.variable = '';
      }
    }
);

const throttledEmit = _.throttle(() => {
  emitter.emit('QueryCondition-sendRequest');
}, 3000);

function handleQuery() {
  throttledEmit();
}

function resetCondition() {
  filter.value.layerType = 'asin_view';
  filter.value.searchTerm = '';
  filter.value.reportType = 'MONTHLY';
  // filter.value.reportDate = '';
  filter.value.variable = '';
}

function handleDateChange() {
  let date = [];
  if (filter.value.reportType === 'MONTHLY') {
    date = monthDate.value;
  } else {
    date = weekDate.value;
  }
  emitter.emit('QueryCondition-dateChange', date);
}
</script>

<template>
  <el-card body-class="flex justify-between gap-3.5" shadow="hover" style="border: none; margin-bottom: 10px">
    <div class="flex flex-wrap gap-7">
      <div>
        <span class="font-bold mr-2" style="color: #303133">层级类型:</span>
        <el-select v-model="filter.layerType" style="width: 130px">
          <el-option label="Asin View" value="asin_view"></el-option>
          <el-option label="Brand View" value="brand_view"></el-option>
        </el-select>
      </div>
      <div>
        <span class="font-bold mr-2" style="color: #303133">报告类型:</span>
        <el-select v-model="filter.reportType" style="width: 100px" @change="handleDateChange">
          <el-option label="月度" value="MONTHLY"></el-option>
          <el-option label="周度" value="WEEKLY"></el-option>
        </el-select>
      </div>
      <div>
        <span class="font-bold mr-2" style="color: #303133">搜索词:</span>
        <el-input v-model="filter.searchTerm" :prefix-icon="Search" style="width: 180px"></el-input>
      </div>
      <div>
        <span class="font-bold mr-2" style="color: #303133">{{ defaultLabel }}:</span>
        <el-input v-model="filter.variable" :prefix-icon="Search" style="width: 180px"></el-input>
      </div>
      <div>
        <span class="font-bold mr-2" style="color: #303133">报告日期:</span>
        <MonthRangePicker v-if="filter.reportType === 'MONTHLY'" v-model="monthDate"/>
        <WeekRangePicker v-else v-model="weekDate"/>
      </div>
    </div>
    <div class="flex gap-3.5">
      <el-button :icon="Search" plain type="primary" @click="handleQuery">查询</el-button>
      <el-button :icon="RefreshLeft" color="#0891b2" plain round type="warning" @click="resetCondition">重置</el-button>
    </div>
  </el-card>
</template>

<style scoped></style>
