<template>
    <div class="search-area">
        <div>
            <my-input
                    ref="myInput"
                    class="search-name"
                    action="LinkName"
                    placeholder="请输入友情链接名称"
                    @change="handleChange">
            </my-input>
            <el-button size="medium" type="primary" @click="handleSearch">查询</el-button>
        </div>
        <div>
            <el-button size="medium" plain @click="handleDelete">删除</el-button>
            <el-button size="medium" type="primary" @click="handleOpenAdd">新增</el-button>
        </div>

    </div>
</template>

<script>
    import MyInput from '@/components/@Mta/components/MyInput';

    export default {
        name:       'searchArea',
        components: {
            MyInput,
        },
        data() {
            return {
                LinkName: '',
            };
        },
        methods:    {
            handleChange(action, data) {
                this[action] = data;
            },
            handleSearch() {
                this.$emit('search', { name: this.LinkName });
            },
            handleDelete() {
                this.$emit('delete');
            },
            handleOpenAdd() {
                this.$emit('add');
            },
            setSearchData(data) {
                this.$refs.myInput.setInputValue(data);
            },

        },
    };
</script>

<style lang="scss" scoped>
    .search-name {
        width: 220px;
        margin-right: 10px;
    }

    .search-area {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
</style>