<template>
    <div class="search-row">
        <div class="left">
            <span class="title" v-if="title">{{ title }}</span>
            <el-button v-if="fresh" type="info" icon="Refresh" @click="emit('query')"> </el-button>
            <el-button v-if="add" type="primary" icon="Plus" @click="emit('add')"> 添加 </el-button>
            <el-button v-if="del" type="danger" icon="Delete" @click="emit('delete')"> 删除 </el-button>
            <slot name="left"></slot>
        </div>
        <div class="query">
            <slot></slot>
            <el-button v-if="query" type="primary" icon="Search" @click="emit('query')"> 查询 </el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, defineProps, defineEmits } from "vue";
const prop = defineProps({
    title: {
        type: String,
        default: null
    },
    fresh: {
        type: Boolean,
        default: true,
    },
    add: {
        type: Boolean,
        default: true,
    },
    del: {
        type: Boolean,
        default: true,
    },
    query: {
        type: Boolean,
        default: true,
    },
});

const emit = defineEmits(["query", "add", "delete"]);

onMounted(() => { });
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.query {
    text-align: right;
    float: right;
}

.left {
    float: left;
}

.title {
    font-weight: bold;
    padding-right: 15px;
    font-size: 20px;
    min-width: 20px;
}
</style>