<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 :placeholder="placeholder" @keydown.enter="search" @clear="search" clearable v-model.trim="value">
          <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-if="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,
  value: ""
})

const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
  placeholder: {
    type: String,
    default: "请输入关键词"
  }
})

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