<template>
    <div class="search-box">
        <div>
            <div class="serach-item">
                <div class="search-label">单选框:</div>
                <el-radio-group v-model="radio1">
                    <el-radio-button label="上海"></el-radio-button>
                    <el-radio-button label="北京"></el-radio-button>
                    <el-radio-button label="广州"></el-radio-button>
                    <el-radio-button label="深圳"></el-radio-button>
                </el-radio-group>
            </div>
            <div class="serach-item">
                <div class="search-label">下拉框:</div>
                <el-cascader
                    v-model="value"
                    :options="options"
                    @change="handleChange">
                </el-cascader>
            </div>
            <div class="serach-item">
                <div class="search-label">复选框:</div>
                <el-checkbox-group v-model="checkboxGroup1">
                    <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
                </el-checkbox-group>
            </div>
        </div>
        <div>
            <div style="margin-top: 15px;">
                <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </div>
        </div>
    </div>  
</template>

<script>

const cityOptions = ['上海', '北京', '广州', '深圳'];

export default {
    data() {
        return {
            radio1: "上海",
            input3: "123",
            value: [],
            options: [{
                value: 'zhinan',
                label: '指南',
                children: [{
                    value: 'shejiyuanze',
                    label: '设计原则',
                    children: [{
                    value: 'yizhi',
                    label: '一致'
                    }, {
                    value: 'fankui',
                    label: '反馈'
                    }, ]
                }, {
                    value: 'daohang',
                    label: '导航',
                    children: [{
                    value: 'cexiangdaohang',
                    label: '侧向导航'
                    }]
                }]
            }, {
            value: 'zujian',
            label: '组件',
                children: [{
                    value: 'basic',
                    label: 'Basic',
                    children: [{
                        value: 'layout',
                        label: 'Layout 布局'
                        }, {
                        value: 'color',
                        label: 'Color 色彩'
                    }]
                }, {
                    value: 'form',
                    label: 'Form',
                    children: [{
                        value: 'radio',
                        label: 'Radio 单选框'
                        }, {
                        value: 'checkbox',
                        label: 'Checkbox 多选框'
                        }, {
                        value: 'form',
                        label: 'Form 表单'
                    }]
                }]
            }, {
                value: 'ziyuan',
                label: '资源',
                children: [{
                    value: 'axure',
                    label: 'Axure Components'
                }, {
                    value: 'sketch',
                    label: 'Sketch Templates'
                }, {
                    value: 'jiaohu',
                    label: '组件交互文档'
                }]
            }],
            value: '',
            checkboxGroup1: ['上海'],
            cities: cityOptions
        }
    },
    methods: {
        handleChange(value) {
            console.log(value);
            // this.$emit("handelSearch",value)
        }
    },
};
</script>


<style lang="scss" scoped>
.el-radio-button__inner {
    margin-right: 10px;
    border: 1px solid #DCDFE6;
}
.el-checkbox-button__inner {
    margin-right: 10px;
    border: none;
    border: 1px solid #DCDFE6;
}
.search-box {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.serach-item {
    display: flex;
    align-items: center;
    margin-top: 10px;
}
.search-label {
    margin-right: 30px;
}
</style>