public function getHtmlTree($root = true, $model, $color = null,$backColor,$age=2018)
    {

    $html='';
        if ($root) {
            $html .= Html::beginTag('ul',['style'=>'width: 100px; height:20px;']);
        }

        $html .= Html::beginTag('li', ['id' => 'node-'.$this->id]);

        $childCount = $this->children(1)->count();

        $nodeName = $this->name;

        if ($this->date_of_birth) {
            $nodeName .= ' '.Html::tag('span', $this->date_of_birth, ['class' => 'label label-info']);
        }

        if ($this->date_of_death) {
            $nodeName .= ' '.Html::tag('span', $this->date_of_death, ['class' => 'label label-default']);
        }

        if ($childCount > 0 ) {
            $nodeName .= ' '.Html::tag('span', $childCount, ['class' => 'label label-success']);
        }

        $nodeName = Html::img($this->getImage()->getUrl('x50')).' '.$nodeName;

        $class = '';

        if ($model->isChildOf($this) || $this->isChildOf($model)) {
            $class = 'node-is-primary';
        }

        if ($this->id == $model->id) {
            $class = 'node-is-self';
        }

        if ($this->color) {
            $color = $this->color;
        }
        $birth=$this->date_of_birth;
        $birth=explode('-',$birth);
        $px=$birth[0]*2/40;
        $px=round($px);


        $html .= Html::a($nodeName, '#person-'.$this->id, [
            'data-toggle' => 'collapse',
            'data-target' => '#person-'.$this->id,
            'aria-expanded' => false,
            'class' => $class,
            'style' => $color ? 'background: '.$color.'; margin-top: 20px;' : '',
        ]);
//        $classLine=['class'=>'tree li::before tree li::after'];
//        $html.=Html::('li',$classLine,['style' => 'height: 100px;']);
//        Html::addCssClass($classLine, 'tree-height');
//        $html.=Html::($nodeName,$classLine,
//            [
//                'style' => 'height: 100px;'
//            ]);

        // start dair


        // end dair

        $html .= Html::tag('span', '', [
            'class' => 'glyphicon glyphicon-eye-open',
            'style' => 'cursor: pointer; cursor: hand;',
            'onclick' => "window.open('".Url::to(['/person/view', 'id' => $this->id])."', '_blank');",
        ]);

        $childs = $this->children(1)->orderBy(['date_of_birth' => SORT_ASC])->all();

        if ($childs) {
            $html .= Html::beginTag('ul', [
                'id' => 'person-'.$this->id,
                'class' => $model->isChildOf($this) ? 'collapse in' : 'collapse out',
                'style'=>'background-color:'.$this->getColor($backColor).';  width: 100%; height: 50px;',
                'title'=>$age
            ]);

            foreach ($childs as $child) {
                $backColor=++$backColor;
                if($backColor>3) $backColor=0;
                $age=$age+25;
                $html .= $child->getHtmlTree($root = false, $model, $color,$backColor,$age);
            }

            $html .= Html::endTag('ul');
        }

    $html .= Htm

l::endTag('li');

        if ($root) {
            $html .= Html::endTag('ul');
        }

        return $html;
    }