<template>
    <div>
        <span>少于五条:</span>
        <sh-base-select :tips="tips" :options="options1"></sh-base-select>
        <span>多于五条:</span>
        <sh-base-select :tips="tips" :options="options"></sh-base-select>
        <span>日历选择</span>
        <!-- 时间选择控件，图标为日期格式且显示于右侧 -->
        <sh-select @dateChange="dateChange"></sh-select>
        <span>时间选择</span>
        <sh-time-select @timeChange="timeChange"></sh-time-select>
        <span>城市选择</span>
        <sh-city-select @cityChange="cityChange"></sh-city-select>
    </div>
</template>

<script>
    import ShBaseSelect from "@/lib/components/Select/sh-base-select";
    export default {
        name: "select",
        components: {ShBaseSelect},
        data() {
            return {
                tips: '请自行修改',
                value3:'',
                options1: [{
                    value: '选项1',
                    label: '请自行修改1'
                },
                    {
                        value: '选项2',
                        label: '请自行修改2'
                    },
                    {
                        value: '选项3',
                        label: '请自行修改3'
                    },
                    {
                        value: '选项4',
                        label: '请自行修改4'
                    },
                    {
                        value: '选项5',
                        label: '请自行修改5'
                    }],
                value: '',
                options: [{
                    value: '选项1',
                    label: '请自行修改1'
                },
                    {
                        value: '选项2',
                        label: '请自行修改2'
                    },
                    {
                        value: '选项3',
                        label: '请自行修改3'
                    },
                    {
                        value: '选项4',
                        label: '请自行修改4'
                    },
                    {
                        value: '选项5',
                        label: '请自行修改5'
                    },
                    {
                        value: '选项6',
                        label: '请自行修改6'
                    },
                    {
                        value: '选项7',
                        label: '请自行修改7'
                    },
                    {
                        value: '选项8',
                        label: '请自行修改8'
                    }],
                value1: '',
            }
        },
        methods: {
            dateChange(date) {
                console.log('日期为',date)
            },
            timeChange(time) {
                console.log('时间为',time)
            },
            cityChange(city) {
                console.log('城市',city)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .date-picker-icon {
        width: 100%;

        .el-input__inner {
            padding-left: 15px;
            padding-right: 30px;
        }

        .el-input__prefix {
            left: initial;
            right: 5px;
        }

        &.date-close {
            .el-icon-date {
                display: none;
            }
        }
    }
</style>
