<template>
    <div class="search1">
        <el-input
            class="search"
            prefix-icon="el-icon-search"
            placeholder="请输入您想找到的作品名称…"
            v-model="search"
            clearable
            @change="onSearch"
        >
        </el-input>
        <el-select class="select" v-model="sortStr" placeholder="请选择">
            <el-option v-for="item in sortList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
    </div>
</template>
<script>
export default {
    data() {
        return {
            search: '',
            sortList: [
                {
                    label: '综合排序',
                    value: 'createdAt,desc'
                },
                {
                    label: '热门排序',
                    value: 'likes,desc'
                },
                {
                    label: '价格降序',
                    value: 'price,desc'
                },
                {
                    label: '价格升序',
                    value: 'price,asc'
                }
            ]
        };
    },
    methods: {
        onCommand(command) {}
    }
};
</script>
<style lang="less" scoped>
.search1 {
    height: 124px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /deep/ .el-input__inner {
        background: #1a1a1a;
        width: 280px;
        height: 42px;
        color: #fff;
        border-radius: 8px;
        border: 1px solid #898989;
    }
    /deep/ .el-button {
        background: #1a1a1a;
        width: 120px;
        height: 42px;
        color: #fff;
        border-radius: 8px;
        border: 1px solid #898989;
    }
    /deep/ .el-dropdown-menu {
        background: #fff;
    }
}
</style>
