<template>
    <div>

        <v-list dense>

            <v-list-item>
                <v-list-item-action> Scale</v-list-item-action>
                <v-list-item-content>
                    <v-select
                            class="vselect"
                            :items="configLists.scaleList"
                            v-model="configs.scaleSelected"
                            single-line
                            hide-details
                    ></v-select>
                </v-list-item-content>
            </v-list-item>


            <v-list-item>
                <v-list-item-action> Type</v-list-item-action>
                <v-list-item-content>
                    <v-select
                            class="vselect"
                            :items="configLists.typesList"
                            v-model="configs.typeSelected"
                            single-line
                            hide-details
                    ></v-select>
                </v-list-item-content>
            </v-list-item>


            <v-list-item>
                <v-list-item-action> DayStart</v-list-item-action>
                <v-list-item-content>
                    <Counter
                            v-model="configs.dayStart"
                            :input="configs.dayStart"
                            classname="themeGrey"
                            :max="100"
                    ></Counter>
                </v-list-item-content>
            </v-list-item>

            <v-list-item>
                <v-list-item-action> DayEnd</v-list-item-action>
                <v-list-item-content>
                    <Counter
                            v-model="configs.dayEnd"
                            :input="configs.dayEnd"
                            classname="themeGrey"
                            :max="100"
                    ></Counter>
                </v-list-item-content>
            </v-list-item>

            <v-list-item>
                <v-list-item-action> y Max</v-list-item-action>
                <v-list-item-content>
                    <v-text-field
                            class="ymax"
                            v-model="configs.ymax"
                            label="ymaxx"
                            solo
                            hide-details
                            single-line

                    />
                </v-list-item-content>
            </v-list-item>

        </v-list>
    </div>
</template>

<script>

    import Counter from './html/Counter'

    export default {
        name: "ChartConfig",
        props: ['configs', 'configLists'],
        components: {Counter},
        data() {
            return {}
        },
        watch: {
            config(prev,neww){
                if (prev.ymax !== neww.ymax){
                    console.log('new y',neww.ymax)
                }
            }
        },
        methods: {},
    }
</script>

<style scoped>

    .vselect {
        padding: 0px;
        margin: 0px;
    }

    .ymax{
        max-width:50%;
    }

</style>