<script lang="ts" setup name="SearchArea">
import {
  Check,
  Delete,
  More,
  Search,
  Star,
} from '@element-plus/icons-vue'
// props参数
type Size = 'small' | 'large' | 'default' | ''
const props = defineProps({
  type: {
    type: String,
    default: 'seperate',
  }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
  needClear: {
    type: Boolean,
    default: false,
  }, // 是否需要重置按钮
  needSearchMore: {
    type: Boolean,
    default: false,
  }, // 是否需要高级检索
  searchMoreType: {
    type: String,
    default: 'default',
  }, // 高级检索的样式，default页面内，dialog弹窗
  size: {
    type: String,
    default: '',
    validator: (value: string) => {
      return ['', 'small', 'large', 'default', 'mini'].includes(value)
    },
  }, // 按钮及输入框大小
  icon: {
    type: Boolean,
    default: false,
  }, // 是否显示图标
})
// 抛出事件
const emit = defineEmits(['search', 'clear', 'toggleMore'])
// data
const data = ref({
  searchMoreShow: false,
})

function search() {
  emit('search')
}
function clearInput() {
  emit('clear')
}
function toggleSearchMore() {
  emit('toggleMore')
  data.value.searchMoreShow = !data.value.searchMoreShow
}
function dialogSearch() {
  data.value.searchMoreShow = false
  search()
}
function dialogClearInput() {
  data.value.searchMoreShow = false
  clearInput()
}
function dialogCancel() {
  data.value.searchMoreShow = false
}
</script>

<template>
  <div class="search-div" id="search-div-id">
    <div :class="{ 'search-left': type === 'seperate', 'search-all': type === 'default' }">
      <div class="input-div">
        <slot />
      </div>

      <el-collapse-transition>
        <div v-if="needSearchMore && searchMoreType === 'default'" v-show="data.searchMoreShow">
          <slot name="searchMore" />
        </div>
      </el-collapse-transition>
      <div v-if="type === 'default'">
        <el-button v-if="type === 'default'" :size="size as Size" type="primary" class="search-btn" :icon="icon ? Search : ''" @click="search">
          搜索
        </el-button>
        <el-button v-if="type === 'default' && needSearchMore" :size="size as Size" type="primary" class="search-btn" :icon="icon ? More : ''" @click="toggleSearchMore">
          高级检索
        </el-button>
        <el-button v-if="type === 'default' && needClear" :size="size as Size" type="warning" class="search-btn" :icon="icon ? Delete : ''" @click="clearInput">
          重置
        </el-button>
        <slot name="btns" />
      </div>
    </div>
    <div v-if="type === 'seperate'" class="search-right" :style="{ width: `${90 + (needClear ? 100 : 0) + (needSearchMore ? +100 : 0)}px` }">
      <el-button :size="size as Size" type="primary" :icon="icon ? Search : ''" class="search-btn" @click="search">
        查询
      </el-button>
      <el-button v-if="needSearchMore" :size="size as Size" type="primary" class="search-btn" :icon="icon ? More : ''" @click="toggleSearchMore">
        高级检索
      </el-button>
      <el-button v-if="needClear" :size="size as Size" type="warning" class="search-btn" :icon="icon ? Delete : ''" @click="clearInput">
        重置
      </el-button>
      <slot name="btns" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.search-div {
  padding: 12px;
  padding-bottom: 2px; /* 本身输入框有10px下边距 */
  background-color: #fff; /* Safari */
  display: flex;
  justify-content: space-between;
  border-radius: 7px;

  .input-div {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
  }

  .search-btn {
    margin-bottom: 10px;
  }

  .search-right {
    width: auto;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
  }
}

.dialog-footer {
  margin-top: 10px;
  text-align: right;
}
</style>

<style lang="scss">
.search-div {
  .search-btn {
    margin-bottom: 10px;
  }
}

.search-item + .search-btn {
  margin-left: 12px;
}
</style>