<template>
  <div
    class="bg-filter-group"
    :style="{ 'border-bottom': showFlag ? 'none' : '', 'padding-bottom': showFlag ? '8px' : '16px' }">
    <div class="top-filter">
      <div class="left-slot">
        <slot name="left_action"></slot>
      </div>
      <div class="right-filter">
        <el-input
          v-if="showSearch"
          :placeholder="placeholder"
          @keydown.enter="search"
          @clear="search"
          clearable
          :style="{ width: inputWidth }"
          v-model.trim="modelValue">
          <template #append>
            <div class="append-btn" @click="search">
              <bg-icon style="font-size: 12px; color: #404a62" icon="#bg-ic-search"></bg-icon>
            </div>
          </template>
        </el-input>
        <div class="more-btn" :class="showFlag ? 'more-btn1' : ''" v-if="$slots.filter_group">
          <el-button type="default" class="more-filter" @click="moreFilter">
            高级搜索
            <bg-icon
              style="font-size: 8px; color: #404a62; margin-left: 8px"
              icon="#bg-ic-arrow-down"
              v-if="!showFlag"></bg-icon>
            <bg-icon style="font-size: 8px; color: #404a62; margin-left: 8px" icon="#bg-ic-arrow-up" v-else></bg-icon>
          </el-button>
        </div>
      </div>
    </div>
    <div class="filter-group" v-show="showFlag">
      <slot name="filter_group"></slot>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted, reactive, toRefs, watch, ref } from "vue";

const state = reactive({
  showFlag: false,
  modelValue: "",
});

const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
  placeholder: {
    type: String,
    default: "请输入关键词",
  },
  showSearch: {
    type: Boolean,
    default: true,
  },
  inputWidth: {
    type: String,
    default: "280px",
  },
});

watch(props, (n, o) => {
  state.modelValue = n.modelValue;
});
watch(
  () => state.modelValue,
  (n, o) => {
    emit("update:modelValue", n);
  }
);
const emit = defineEmits(["search", "update:modelValue"]);
const search = () => {
  emit("search", state.modelValue);
};
const moreFilter = () => {
  state.showFlag = !state.showFlag;
};
onMounted(() => {
  state.modelValue = props.modelValue;
});
const { modelValue, showFlag } = toRefs(state);
</script>
