import { Component, OnInit, Input, Output, EventEmitter, TemplateRef, Optional } from '@angular/core';
import { tabListItem, ErrorListsItem, validatorListItem } from './verify-detail.interface';
import { LocaleService } from '@farris/ui-locale';
import { DomSanitizer } from '@angular/platform-browser';


@Component({
  selector: 'farris-verify-detail',
  templateUrl: './verify-detail.component.html',
  styleUrls: ['./verify-detail.component.scss']
})
export class VerifyDetailComponent implements OnInit {
  // 追加结果提示模板
  @Input() resultTipsTmpl: TemplateRef<any>=null;
  //@Input() maxHeight:number;
  //@Input() validatorList;
  //表单验证分组信息
  //@Input() tabList:tabListItem[];
  //表单验证默认显示的分组信息
  @Input() showType: string = '';
  //是否默认显示验证信息列表
  @Input() showList: boolean = false
  //验证信息点击
  @Output('validatorClick') validatorClick = new EventEmitter();
  //验证详情显示隐藏事件
  @Output('listshowChange') listshowChange = new EventEmitter();
  //showList = false;
  //处理后带分组的表单验证信息
  errorLists: ErrorListsItem[] = [];
  //默认传入的表单验证信息数组
  _validatorList: validatorListItem[] = [];
  //列表部分最大高度
  _maxHeight: number = 60;
  _tablist: tabListItem[];
  //最大高度
  @Input()
  set maxHeight(num) {
    if (num < 50) return;
    this._maxHeight = num - 50;
  }
  get maxHeight() {
    return this._maxHeight;
  }

  @Input()
  set tabList(item) {
    if (item) {
      this._tablist = item;
    }
    else {
      const allTitle = this.localeService.getValue('verifyDetail.vertifyTypeAll'),
        errorTitle = this.localeService.getValue('verifyDetail.vertifyTypeError'),
        emptyTitle = this.localeService.getValue('verifyDetail.vertifyTypeEmpty');
      this._tablist = [
        {
          id: 'vertifyType1',
          type: 'all',
          title: allTitle
        },
        {
          id: 'vertifyType2',
          type: 'error',
          title: errorTitle
        },
        {
          id: 'vertifyType3',
          type: 'empty',
          title: emptyTitle
        }
      ]
    }

  }
  get tabList() {
    return this._tablist;
  }

  @Input()
  set validatorList(obj) {
    this._validatorList = obj;
    this.errorLists = [];
    if (this.tabList && this.tabList.length) {

      this.tabList.forEach(item => {
        item.active = false;
      })
      //判断默认展示的类型
      let hasTab = this.tabList.find((tab) => {
        return tab.type === this.showType;
      })
      if (this.showType === '' || !hasTab) {
        this.showType = this.tabList[0].type;
      }
      this.tabList.forEach(tab => {
        const tabType = tab.type;
        if (tabType === 'all') {
          // 所有类型
          let listObj = {
            'list': obj,
            'show': false,
            'type': tabType
          };
          tab.length = listObj.list.length;
          this.errorLists.push(listObj);
        }
        else {
          let hasType = this.errorLists.find((item) => {
            return item.type === tabType;
          })
          if (hasType) {
            // 能找到类型
            let valList = obj.filter(error => {
              return error.type === tabType;
            })
            if (valList && valList.length) {
              hasType.list = valList;
            }
          }
          else {
            // 找不到类型
            let listObj = {
              'list': [],
              'show': false,
              'type': tabType
            }
            let valList = obj.filter(error => {
              return error.type === tabType;
            })
            if (valList && valList.length) {
              listObj.list = valList;
            }
            tab.length = listObj.list.length;
            this.errorLists.push(listObj);
          }
        }
      });
      let tabObj = this.tabList.find(item => {
        return item.type === this.showType;
      })
      if (tabObj) {
        tabObj.active = true;
      }
    }
    let showObj = this.errorLists.find(item => {
      return item.type === this.showType;
    })
    if (showObj) {
      showObj.show = true;
    }
  };
  get validatorList() {
    return this._validatorList;
  }

  constructor(public localeService: LocaleService,@Optional() private sanitizer: DomSanitizer) { }

  ngOnInit() { }
  //显示详情
  show() {
    this.showList = !this.showList;
    this.listshowChange.emit(this.showList);
  }
  /**点击分组切换
   * @param tab分组信息
   */
  showListContent(tab) {
    if (tab.length <= 0) {
      return;
    }
    this.tabList.forEach(item => {
      item.active = false;
    })
    tab.active = true;
    this.errorLists.forEach((item) => {
      if (item.type === tab.type) {
        item.show = true;
      }
      else {
        item.show = false;
      }
    })
  }
  /**点击关闭按钮 */
  close() {
    this.showList = false;
    this.listshowChange.emit(false);
  }
  /**点击表单验证列表事件 */
  errorClick(item) {
    this.validatorClick.emit(item);
  }
  /**
   * 样式安全化
   * @param typeInfo 
   */
  getStyle(typeInfo){
    if(this.sanitizer){
      if(typeInfo.hasOwnProperty('iconStyle')&&typeInfo['iconStyle']){
        return this.sanitizer.bypassSecurityTrustStyle(typeInfo['iconStyle']);
      }
    }    
    return null;
  }
  /**
   * 判断是否有新属性
   */
  hasSelfDefind(typeInfo){
    if(typeInfo){
      if(typeInfo.hasOwnProperty('iconCls')&&typeInfo['iconCls']){
        return true;
      }
      if(typeInfo.hasOwnProperty('iconStyle')&&typeInfo['iconStyle']){
        return true;
      }
    }
    return false;
  }
}