import { Component, OnInit, ComponentFactoryResolver, Injector, ViewChild, TemplateRef } from '@angular/core';
import { Propertiy } from 'src/app/interface/propertiy-interface';
import { Others } from 'src/app/interface/ohters-interface';
import { ImageCropperDialogComponent } from '../image-cropper-dialog/image-cropper-dialog.component';
import { BsModalService, BsModalRef } from '@farris/ui-modal';

@Component({
  selector: 'app-image-cropper-demo',
  templateUrl: './image-cropper-demo.component.html',
  styleUrls: ['./image-cropper-demo.component.scss']
})
export class ImageCropperDemoComponent implements OnInit {

  properties: Array<Propertiy> = [
      {
          name: 'imageChangedEvent',
          value: 'FileEvent',
          type: '@Input()',
          description: 'input file文件上传后的值'
      },
      {
        name: 'imageFile',
        value: 'Blob(File)',
        type: '@Input()',
        description: '文件'
      },
      {
        name: 'imageBase64',
        value: 'string',
        type: '@Input()',
        description: 'base64格式的图片值'
      },
      {
        name: 'imageURL',
        value: 'string',
        type: '@Input()',
        description: '图片路径'
      },
      {
        name: 'format',
        value: 'string',
        type: '@Input()',
        description: '生成的图片格式 (png, jpeg, webp, bmp, ico) 默认png'
      },
      {
        name: 'aspectRatio',
        value: 'number',
        type: '@Input()',
        description: '裁剪长宽比例 width / height  默认1/1'
      },
      {
        name: 'maintainAspectRatio',
        value: 'boolean',
        type: '@Input()',
        description: '是否保持默认比例 默认true'
      },
      {
        name: 'containWithinAspectRatio',
        value: `boolean`,
        type: '@Input()',
        description: `是否在没填满周围填充 默认false`
      },
      {
        name: 'resizeToWidth',
        value: `number`,
        type: '@Input()',
        description: `裁切后的宽`
      },
      {
        name: 'resizeToHeight',
        value: `number`,
        type: '@Input()',
        description: `裁切后的高 (如果宽设定了 不生效)`
      },

      {
        name: 'cropperMinWidth',
        value: `number`,
        type: '@Input()',
        description: `裁剪器的宽度`
      },
      {
        name: 'cropperMinHeight',
        value: `number`,
        type: '@Input()',
        description: `裁剪器的高度 (保持比例为true 不生效)`
      },
      {
        name: 'roundCropper',
        value: `boolean`,
        type: '@Input()',
        description: `裁剪器展示形状是否为圆形 默认true`
      },
      {
        name: 'imageQuality',
        value: `number`,
        type: '@Input()',
        description: `图片质量(jpeg,webp生效) 默认92`
      },
      {
        name: 'autoCrop',
        value: `boolean`,
        type: '@Input()',
        description: `是否每次裁剪都发出一个图像 默认true`
      },
      {
        name: 'alignImage',
        value: `'left' or 'center'`,
        type: '@Input()',
        description: `图片对齐方式 默认center`
      },
      {
        name: 'backgroundColor',
        value: `string`,
        type: '@Input()',
        description: `设置背景色`
      },
      {
        name: 'disabled',
        value: `boolean`,
        type: '@Input()',
        description: `是否禁用 默认false`
      },
      {
        name: 'canvasRotation',
        value: `number`,
        type: '@Input()',
        description: `旋转画布角度 (1 = 90deg, 2 = 180deg...) 默认0`
      },
      {
        name: 'transform',
        value: `ImageTransform`,
        type: '@Input()',
        description: `翻转，旋转和缩放图像`
      },
      {
        name: 'loadImageErrorText',
        value: `string`,
        type: '@Input()',
        description: `图片加载错误提示内容 默认 图片加载错误`
      },

      {
        name: 'imageCropped',
        value: `ImageCroppedEvent`,
        type: '@Output()',
        description: `裁剪结果`
      },
      {
        name: 'imageLoaded',
        value: `void`,
        type: '@Output()',
        description: `图片加载完成`
      },
      {
        name: 'cropperReady',
        value: `Dimensions`,
        type: '@Output()',
        description: `裁剪区域初始化完成`
      },
      {
        name: 'startCropImage',
        value: `void`,
        type: '@Output()',
        description: `开始裁剪`
      },
      {
        name: 'loadImageFailed',
        value: `void`,
        type: '@Output()',
        description: `图片加载失败`
      }
  ];
  others: Array<Others> = [
    {
      name:'crop',
      description: '裁剪(autoCrop:false时使用)'
    }
  ];
  others2: Array<Others> = [
    {
      name:'CropperPosition',
      description: 'x1,y1,x2,y2 分别对应x轴第一个坐标，y轴第一个坐标，x轴第二个坐标，y轴第二个坐标'
    },
    {
      name:'ImageTransform',
      description: 'scale,rotate,flipH,flipV 分别对应缩放比例，旋转角度 1 = 90deg，水平翻转，垂直翻转'
    },
    {
      name:'ImageCroppedEvent',
      description: 'base64:裁剪后图片的base64值;width:裁剪后图片宽度;height:裁剪后图片高度;cropperPosition:裁剪后裁剪区相对于图片位置;imagePosition:裁剪后相对于原图片位置;offsetImagePosition:containWithinAspectRatio为真时，裁剪器相对于原始图像的位置'
    }
  ];

  codePath = {
    baseDemo: 'assets/codes/image-cropper/basedemo'
  };
  dlg: BsModalRef;
  @ViewChild('avatarDialogButton') avatarDialogButton: TemplateRef<any>;

  constructor(private cfr: ComponentFactoryResolver,
    private modalService: BsModalService,
        private injector: Injector,) { }

  ngOnInit() {
  }

    showDialog(){
        const cmpF = this.cfr.resolveComponentFactory(ImageCropperDialogComponent);
        const cmpR = cmpF.create(this.injector);
        this.dlg = this.modalService.show(cmpR, {
            title: '修改头像',
            width: 570, height: 520,
            buttons: [
                { text: '确定', cls: 'btn btn-primary',handle: () => {
                    console.log(this.dlg.content.croppedImage);

                } },
                { text: '取消', cls: 'btn btn-secondary', handle: () => {
                    this.dlg.close();
                } },
            ],
            
            showButtons: true
        });
    }

}