import {Component, ElementRef, HostListener, Input, OnInit, ViewChild} from '@angular/core';

@Component({
  selector: 'dc-button',
  template: `
    <div class="dc-button-container">
      <div class="{{class}}" [ngClass]="{'disable':disable,'icon':icon?true:false, 'dcButton':type===1, 'cancelButton':type===2}"
           [ngStyle]="{'background-image':icon?'url('+icon+')':'none'}">{{text || '确定'}}
      </div>
    </div>
  `,
  styles: [
      `
      .dc-button-container {
        display: inline-table;
        width: auto;
        height: 26px;
      }

      .dcButton {
        padding: 0 20px;
        color: #fff;
        display: table-cell;
        min-width: 94px;
        font-size: 14px;
        height: 26px;
        line-height: 26px;
        background: #0081cc;
        border-radius: 15px;
        /*box-shadow: 0px 0px 4px 0.1px rgba(0, 0, 0, .2);*/
        cursor: pointer;
        vertical-align: top;
        text-align: center;
      }

      .dcButton:hover {
        background: #0067a3;
        /*box-shadow: 0px 0px 4px 0.8px rgba(0, 0, 0, .2);*/
      }

      .dcButton:active {
        box-shadow: none
      }

      .cancelButton {
        padding: 0 20px;
        color: #333;
        display: table-cell;
        min-width: 94px;
        font-size: 14px;
        height: 26px;
        line-height: 24px;
        background: #fff;
        border-radius: 15px;
        box-shadow: 0px 0px 4px 0.1px rgba(0, 0, 0, .2);
        cursor: pointer;
        vertical-align: top;
        text-align: center;
      }

      .cancelButton:hover {
        color: #0067a3;
        box-shadow: 0px 0px 4px 0.8px rgba(0, 0, 0, .2);
      }

      .cancelButton:active {
        color: #0067a3;
        box-shadow: 0px 0px 4px 0.8px rgba(0, 0, 0, .2);
      }

      .dcButton.disable, .cancelButton.disable {
        cursor: not-allowed;
        color: #999;
        background: #e2e2e2;
        box-shadow: none
      }

      .dcButton.icon, .cancelButton.icon {
        background-repeat: no-repeat;
        background-size: 16px;
        background-position: 10px 4px;
        padding-left: 36px;
      }
      .btn-info,.btn-save,.btn-file,.btn-cancel,.btn-search,.btn-refresh{
        border-radius: 5px;
        font-size:14px;
        line-height:40px;
        min-width: 120px;
      }
      .btn-info.disable,.btn-save.disable,
      .btn-cancel.disable{
        cursor: not-allowed;
        color: #999;
        background: #e2e2e2;
        box-shadow: none;
      }
      .btn-info.disable:hover,.btn-save.disable:hover,
      .btn-cancel.disable:hover{
        color: #999;
        background: #e2e2e2;
      }
      .btn-info{
        background-color:#2bb1ff;
      }
      .btn-info:hover{
        background-color:#279fe5;
      }
      .btn-save{
        background-color:#3fb992;
      }
      .btn-save:hover{
        background-color:#39a683;
      }
      .btn-file{
        border:1px #ff8636 solid;
        color:#ff8636;
        padding-left:40px;
        background-color: transparent;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAAC9JREFUKJFj/N9mxoAD/IfSjNgkmXDpIgRGgkYWBkTo4QJY5SmyEWs8MYzGI/kaATnYBdrstx3VAAAAAElFTkSuQmCC) !important;
        background-size: 14px 14px;
        background-repeat: no-repeat;
        background-position: 20px center;
        line-height: 38px;
      }
      .btn-file:hover{
        background-color:#ff8636;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAAC9JREFUKJFj/P//PwMOAJNgxCbJhEsXITASNLIwIEIPF8AqT5GNWOOJYTQeydcIACKDBxzke9pCAAAAAElFTkSuQmCC) !important;
        color: #fff;
        background-size: 14px 14px;
        background-repeat: no-repeat;
        background-position: 20px center;
      }
      .btn-cancel{
        border:1px #cccccc solid;
        color:#999999;
        background-color: transparent;
        line-height: 38px;
      }
      .btn-cancel:hover{
        background-color:#e1e3e5;
      }
      .btn-search{
        background-color:#3fb992;
        min-width: 80px;
      }
      .btn-search:hover{
        background-color:#39a683;
      }
      .btn-refresh{
        border:1px #2bb1ff solid;
        color:#2bb1ff;
        padding-left:35px;
        background-color: transparent;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAASFJREFUOI2l0ztKQ1EUBdD1YtRCHIGVlqZIkCBmBhEEe+uoiDaOwGQCIoKFGltLIfjBQntjpWC0ExvHIGg0Fu8mhIf5gBsOFw57b87vRplaSwKzKGER0yH3imtU8dxNjroMxrCLDaSSrgE/OMY2PgTiThBfYhNN7KOAyRCFkGtiHedBI8rUWi00kME7lvDQo4IcLjCFA2y1DeAL833EbWRRRxrZ7l5HsTxADI84wghKyWGVxTMZhNPwFtOIhhAkcdfW9VrX0EjhBS0sDMEvB24nUuILg5UhDSrJCk7wjTXxigbhTLzyjsETDjEuvsZcH3EWV+KVN9oGxLd9I76wOvaQx0SIfMjdB84t5lD592eK/vjOGayiiBl84i1UWA0td/ALqaZIRRIfuTEAAAAASUVORK5CYII=) !important;
        background-size: 14px 14px;
        background-repeat: no-repeat;
        background-position: 15px center;
        min-width: 80px;
        line-height: 38px;
        padding-right: 15px;
      }
      .btn-refresh:hover{
        background-color:#2bb1ff;
        color: #fff;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAAPBJREFUOI2tk01qAkEUhEvFQDAnUYkuZjG3yCVyD+cE/oQI4lWSSwTEyQFyhCxUlM9NjXaaSPfCB0XTj3rV768FKEIfmAI1sDO29vVjfnh5AN6BE7ftBKyAx1Bg4uAPk/bAAiiBJ6O0b2/Op2MkOzY+f4DxP2U1GJuDs70IABwSwQ1G7ssRGLR1ta6kF6XtS9JaUkfSa5hBY5OMLEpz6xaQ8ehta6cpaYFaEpLKDH5l7hXAzPW8ZdQuoAobJmDokew8opTAs0d+ERCwzFykUbBIm1AgXuU5UAA9o7AvXuXqLp8pxsCvfbvWX6c7d7/+8M9zY5ln4105gAAAAABJRU5ErkJggg==) !important;
        background-size: 14px 14px;
        background-repeat: no-repeat;
        background-position: 15px center;
      }
    `
  ]
})
export class ButtonComponent implements OnInit {
  @Input() icon: string;
  @Input() class: string;
  @Input() text: string;
  @Input() disable: boolean;
  @Input() type: number;
  @Input() hideTitle: boolean; // 根据业务需求，所有按钮不需要title，该配置无用，考虑到已用的，不移除

  constructor() {
    this.type = this.type || 1;
  }

  ngOnInit() {
  }
}