import { Component, OnInit, ViewChild, ViewContainerRef, OnDestroy, TemplateRef } from '@angular/core';
import { VerifyDetailService } from 'projects/verify-detail/src/public-api';
import { Propertiy } from 'src/app/interface/propertiy-interface';
import { Others } from 'src/app/interface/ohters-interface';

@Component({
  selector: 'app-validator-demo',
  templateUrl: './validator-demo.component.html',
  styleUrls: ['./validator-demo.component.scss']
})
export class ValidatorDemoComponent implements OnInit, OnDestroy {
  @ViewChild('tipsTmpl') tipsTmpl: TemplateRef<any>;
  codePath = {
    baseDemo: 'assets/codes/verify-detail/basedemo',
  };

  properties: Array<Propertiy> = [
    {
      name: 'parent',
      value: '',
      type: '@Input()',
      description: '表单验证在哪个标签内显示，默认为body'
    },
    {
      name: 'verifyList',
      value: 'validatorListItem',
      type: '@Input()',
      description: '表单验证列表'
    },
    {
      name: 'verifyType',
      value: 'tabListItem',
      type: '@Input()',
      description: '表单验证信息分类，默认为all error empty 三种'
    },
    {
      name: 'showType',
      value: 'string',
      type: '@Input()',
      description: '默认现在是的表单验证分类'
    },
    {
      name: 'showList',
      value: 'boolean',
      type: '@Input()',
      description: '是否默认显示验证信息列表 默认false'
    },
    {
      name: 'validatorClick',
      value: ``,
      type: '@Output()',
      description: `验证信息点击`
    },
    {
      name: 'listshowChange',
      value: ``,
      type: '@Output()',
      description: `验证详情显示隐藏事件`
    }
  ];

  others2: Array<Others> = [
    {
      name: 'validatorListItem',
      description: 'id?:验证信息id；title：验证信息标题；msg?：验证信息描述；type：验证表单对应类型'
    },
    {
      name: 'tabListItem',
      description: 'id?：验证信息分类id；type：验证信息分类；title：验证信息分类名称；active?：是否默认显示；length?：当前验证信息分类下长度'
    }
  ];

  errorList = [
    {
      id: '111',
      title: '单据信息[销售组织]',
      msg: '字段值不能为空',
      type: 'empty'
    },
    {
      id: '222',
      title: '单据信息[销售组织]',
      msg: '字段值不能为空',
      type: 'empty'
    },
    {
      id: '333',
      title: '单据信息[销售组织]',
      msg: '字段值填写错误',
      type: 'error'
    },
    {
      id: '444',
      title: '单据信息[销售组织]',
      msg: '字段值填写问题',
      type: 'test'
    },
    {
      id: '11101',
      title: '单据信息[销售组织]',
      msg: '字段值不能为空',
      type: 'empty'
    },
    {
      id: '22201',
      title: '单据信息[销售组织]',
      msg: '字段值不能为空',
      type: 'empty'
    },
    {
      id: '33301',
      title: '单据信息[销售组织]',
      msg: '字段值填写错误',
      type: 'error'
    },
    {
      id: '44401',
      title: 'test单据信息[销售组织]',
      msg: '字段值填写问题',
      type: 'test'
    },
    {
      id: '11102',
      title: '单据信息[销售组织]',
      msg: '字段值不能为空',
      type: 'empty'
    },
    {
      id: '22202',
      title: '单据信息[销售组织]',
      msg: '字段值不能为空',
      type: 'empty'
    },
    {
      id: '33302',
      title: 'error单据信息[销售组织]',
      msg: '字段值填写错误',
      type: 'error'
    },
    {
      id: '44402',
      title: 'test单据信息[销售组织]',
      msg: '字段值填写问题',
      type: 'test'
    }
  ]

  tabTypeList = [
    {
      id: '111',
      type: 'all',
      title: '全部'
    },
    {
      id: '222',
      type: 'error',
      title: '错填',
      iconCls: 'f-icon-default',
      iconStyle: 'color:pink;'
    },
    {
      id: '333',
      type: 'empty',
      title: '漏填',
      iconStyle: 'color:pink;'
    },
    {
      id: '444',
      type: 'test',
      title: '特殊'
    }
  ]

  @ViewChild('content') contentEl;
  verifyContainer;
  listclick;
  showchange;

  constructor(private verifySer: VerifyDetailService) {

  }

  ngOnInit() {

  }

  // listclick(item){
  //   console.log(item);
  // }

  // showchange($event){
  //   console.log('当前显示状态为:'+ $event);
  // }

  create(withIcon=false) {
    //this.verifySer.createVerify(this.container,this.errorList,this.tabTypeList);
    let verifySetting=
      {
        'parent': this.contentEl,
        'verifyList': this.errorList,
        'showType': 'empty',
        'showList': true
      };
      if(withIcon){
        verifySetting['verifyType']=this.tabTypeList;
        verifySetting['verifyResultTipsTmpl']=this.tipsTmpl;
      }
    this.verifyContainer = this.verifySer.createVerify(verifySetting);
    this.listclick = this.verifyContainer.validatorClick.subscribe(e => {
      console.log(e);
    });
    this.showchange = this.verifyContainer.listshowChange.subscribe(e => {
      console.log(e);
    })
  }

  clear() {
    this.verifySer.clear();
  }

  ngOnDestroy() {
    //debugger
    //this.verifySer.clear();
  }



}