import { Component, OnInit, ElementRef } from '@angular/core'
import { SideBarService } from '../../services/side-bar.service'

@Component({
    selector: 'farris-doc-switch',
    templateUrl: './switch-demo.component.html',
    styleUrls: ['./switch-demo.component.scss']
})
export class SwitchDemoComponent implements OnInit {

    codePath = {
        baseDemo: 'assets/codes/switch/base',
        checkDemo: 'assets/codes/switch/checkd',
        squareDemo: 'assets/codes/switch/square',
        disableDemo: 'assets/codes/switch/disabled',
        readonlyDemo: 'assets/codes/switch/readonly',
        sizeDemo: 'assets/codes/switch/size',
        colorDemo: 'assets/codes/switch/color',
        switchcolorDemo: 'assets/codes/switch/switchcolor',
        switchoffcolorDemo: 'assets/codes/switch/switchoffcolor',
        defaultbgcolorDemo: 'assets/codes/switch/defaultbgcolor',
        defaultbocolorDemo: 'assets/codes/switch/defaultbocolor',
        reverseDemo: 'assets/codes/switch/reverse',
        checkedlabelDemo: 'assets/codes/switch/checkedlabel',
        changeDemo: 'assets/codes/switch/change',
        changeeventDemo: 'assets/codes/switch/changeevent',
        valuechangeDemo: 'assets/codes/switch/valuechange',
        ngmodelDemo: 'assets/codes/switch/ngmodel',
        switchcontentDemo: 'assets/codes/switch/switchcontent',
      };

    anchorBallTopArr: number[] = [];
    IndexOfTab = 0;
    isChecked = false;
    isChecked2 = 1;
    constructor(
        private el: ElementRef,
        private sideBarService: SideBarService
    ) {}

    ngOnInit() {}

    ngAfterViewInit() {
        this.onScroll()
    }
    scrollTo(offsetTop) {
        this.sideBarService.setTitleOffsetTop(offsetTop)
    }
    onScroll() {
        this.sideBarService.titleOffsetTopUpdated.subscribe(val => {
            this.anchorBallTopArr[
                this.IndexOfTab
            ] = this.sideBarService.getTitleOffsetTop()
        })
    }

    tabChange(index) {
        this.IndexOfTab = index
    }
    onChange(event) {
        console.log(event)
    }
    onchangeEvent(event) {
        console.log(event)
    }
    onvalueChange(event) {
        console.log(event)
    }
    comboListData= [
        {
            propertiy: '[disabled]',
            default: 'false',
            type: 'boolean',
            description: '设置是否禁用组件'
        },
        {
            propertiy: '[readonly]',
            default: 'false',
            type: 'boolean',
            description: '设置是否组件只读'
        },
        {
            propertiy: '[square]',
            default: 'false',
            type: 'boolean',
            description: '外形为矩形还是半圆'
        },
        {
            propertiy: '[size]',
            default: 'medium',
            type: 'string',
            description: '开关尺寸， small, medium, large'
        },
        {
            propertiy: '[checkedLabel]',
            default: '',
            type: 'string',
            description: '打开时得标签名'
        },
        {
            propertiy: '[uncheckedLabel]',
            default: '',
            type: 'string',
            description: '关闭时得标签名'
        },
        {
            propertiy: '[color]',
            default: '',
            type: 'string',
            description: '打开时得背景色'
        },
        {
            propertiy: '[switchColor]',
            default: '',
            type: 'string',
            description: '打开时得按钮颜色'
        },
        {
            propertiy: '[switchOffColor]',
            default: '',
            type: 'string',
            description: '关闭时得按钮颜色'
        },
        {
            propertiy: '(valueChange)',
            default: '',
            type: 'EventEmitter<boolean>',
            description: '值变化事件回调'
        }
    ]
}