import { shortcut, Widget, createWidget } from "@/core";
import { SingleSlider, SingleSliderNormal } from "@/widget";

@shortcut()
export class Slider extends Widget {
    static xtype = "demo.slider";

    props = { baseCls: "demo-slider", width: 300, height: 50, min: 0, max: 100 };

    render() {
        const self = this,
            o = this.options;
        const singleSlider = createWidget({
            type: "bi.single_slider",
            digit: 0,
            width: o.width,
            height: o.height,
            cls: "layout-bg-white",
            value: 30,
            min: 10,
            max: 100,
        });
        singleSlider.on(SingleSlider.EVENT_CHANGE, function () {
            console.log(this.getValue());
        });

        const normalSingleSlider = createWidget({
            type: "bi.single_slider_normal",
            width: o.width,
            height: 30,
            cls: "layout-bg-white",
            min: o.min,
            max: o.max,
            value: 30,
        });
        normalSingleSlider.on(SingleSliderNormal.EVENT_DRAG, function () {
            console.log(this.getValue());
        });

        const singleSliderLabel = createWidget({
            type: "bi.single_slider_label",
            width: o.width,
            height: o.height,
            digit: 0,
            unit: "个",
            cls: "layout-bg-white",
            min: o.min,
            max: o.max,
            value: 10,
        });

        const intervalSlider = createWidget({
            type: "bi.interval_slider",
            width: o.width,
            digit: 0,
            cls: "layout-bg-white",
            min: o.min,
            max: o.max,
            value: {
                min: 10,
                max: 70,
            },
        });

        const intervalSliderLabel = createWidget({
            type: "bi.interval_slider",
            width: o.width,
            unit: "px",
            cls: "layout-bg-white",
            digit: 1,
            min: 0,
            max: 120,
            value: {
                min: 60,
                max: 120,
            },
        });

        return {
            type: "bi.vertical",
            element: this,
            items: [
                {
                    type: "bi.center_adapt",
                    items: [
                        {
                            el: singleSlider,
                        }
                    ],
                },
                {
                    type: "bi.center_adapt",
                    items: [
                        {
                            el: normalSingleSlider,
                        }
                    ],
                },
                {
                    type: "bi.center_adapt",
                    items: [
                        {
                            el: singleSliderLabel,
                        }
                    ],
                },
                {
                    type: "bi.center_adapt",
                    items: [
                        {
                            el: intervalSlider,
                        }
                    ],
                },
                {
                    type: "bi.center_adapt",
                    items: [
                        {
                            el: intervalSliderLabel,
                        }
                    ],
                }
            ],
            vgap: 20,
        };
    }
}