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

const defaultLabel = ref('ASIN');
const filter = inject<Ref>('filter');

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

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 = '';
    }
  }
);

function handleQuery() {
  emitter.emit('QueryCondition-sendRequest');
}

function resetCondition() {
  filter.value.layerType = '';
  filter.value.searchTerm = '';
  filter.value.reportType = '';
  filter.value.reportDate = '';
  filter.value.variable = '';
}
</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">
          <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>
        <el-date-picker
            style="width: 280px;"
          v-model="filter.reportDate"
          type="daterange"
          range-separator="To"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
          :disabled-date="(time: Date) => time > new Date()" />
      </div>
    </div>
    <div class="flex gap-3.5">
      <el-button type="primary" plain :icon="Search" @click="handleQuery">查询</el-button>
      <el-button type="warning" plain round :icon="RefreshLeft" color="#0891b2" @click="resetCondition">重置</el-button>
    </div>
  </el-card>
</template>

<style scoped></style>
