import { Component, OnInit, OnDestroy, Input } from '@angular/core';

@Component({
    selector: 'cm-gender',
    templateUrl: './gender.component.html',
    styleUrls: ['./gender.component.less']
})

export class GenderComponent implements OnInit, OnDestroy {
    _cmSize: Number = 1;
    currentStyles: any = {};
    _dataSet: any = [];
    isColumn: boolean = false;
    UNKNOW: string;
    _cmPercent: any = {
        man: '0%',
        woman: '0%'
    };
    options = [{
        value: 'horizontal',
        label: 'horizontal'
    }, {
        value: 'vertical',
        label: 'vertical'
    }];
    _cmOrient: string = 'vertical';

    @Input()
    set cmPercent(cmPercent: any) {
        this._cmPercent = cmPercent;
        this.UNKNOW = (100 - parseInt(this._cmPercent.man) - parseInt(this._cmPercent.woman)) + '%'
    };

    @Input()
    set cmOrient(cmOrient: any) {
        this._cmOrient = cmOrient;

    };

    @Input()
    set cmSize(cmSize: any) {
        this._cmSize = cmSize;
    };
    constructor() {
    }

    ngOnInit() {
        const MAN = parseInt(this._cmPercent.man)
        const WOMAN = parseInt(this._cmPercent.woman)
        const unknow = 100 - MAN - WOMAN;
        for (let i = 0; i < MAN; i++) {
            this._dataSet.push({
                key: i,
                ref: 'man'
            });
        }
        for (let i = 0; i < WOMAN; i++) {
            this._dataSet.push({
                key: i,
                ref: 'woman'
            });
        }
        for (let i = 0; i < unknow; i++) {
            this._dataSet.push({
                key: i,
                ref: 'unknow'
            });
        }

        this.selectedChange(this._cmOrient)
        this.sizeChange(this._cmSize)

        console.log(MAN, WOMAN, unknow)
    }

    selectedChange(value: any) {
        if (value == 'horizontal') {
            this.isColumn = false
        } else {
            this.isColumn = true
        }
        // console.log(value, this.isColumn)
    }


    sizeChange(value: Number) {
        // console.log(this._cmSize,value)
        this.currentStyles = {
            'transform': `scale(${value})`
        }
    }


    ngOnDestroy() { }

}