/*
 * @Description  :
 * @Version      : 1.0
 * @Author       : Shiming
 * @Date         : 2022-01-25 16:03:45
 * @LastEditors  : Shiming
 * @LastEditTime : 2022-03-30 16:50:00
 * @FilePath     : \\tms-obc-web\\src\\app\\shared\\components\\dynamic-setting\\dynamic-setting-h5\\dynamic-setting-h5.component.ts
 * Copyright (C) 2022 huzhenhong. All rights reserved.
 */
import { Component, OnInit, EventEmitter, Input, Output } from '@angular/core';
import { BaseService } from '@shared';
import { NzImageService } from 'ng-zorro-antd/image';
import { NzUploadFile } from 'ng-zorro-antd/upload';
import { of } from 'rxjs';

const JSONTYPE = new Set([5, 6, 9, 999]);
@Component({
  selector: 'app-dynamic-setting-h5',
  templateUrl: './dynamic-setting-h5.component.html',
  styleUrls: ['./dynamic-setting-h5.component.less']
})
export class DynamicSettingH5Component implements OnInit {
  @Input()
  tabs: any[] = [];
  @Input()
  selectedTab: any = null;

  @Input()
  configList: any = [];
  @Input()
  isCanSave = true;
  @Output()
  selectedEvent = new EventEmitter<any>();
  @Output()
  saveEvent = new EventEmitter<any>();

  @Input()
  tabSpan = 4;
  @Input()
  labelWidth = 250;
  @Input()
  itemValue = 'itemValue';
  listUrls: any;
  constructor(public service: BaseService, private nzImageService: NzImageService) {}

  ngOnInit() {}

  changeType(type: any): void {
    this.selectedTab = type;
    this.selectedEvent.emit(this.selectedTab);
  }

  saveAction() {
    if (this.configList?.length < 0) {
      return;
    }
    // 配置校验
    for (let index = 0; index < this.configList.length; index++) {
      const config = this.configList[index];
      if (!config.itemValue && config.requiredField) {
        this.service.msgSrv.warning(`${config.name}不能为${config.itemValue}！`);
        return;
      }
    }
    // if (this.configList.find((config: any) => !config.itemValue && config.requiredField)) {
    //   this.service.msgSrv.warning('请填写必填项');
    //   return;
    // }
    let params = [...this.configList];
    params = params.map((item: any) => {
      if (item.itemType == 9) {
        const files = item.itemValue?.map(({ response, name }: any) => ({ url: response?.data?.fullFilePath, name }));
        return {
          ...item,
          remark: item.remark ? JSON.stringify(item.remark) : null,
          itemData: item.itemData ? JSON.stringify(item.itemData) : null,
          itemValue: item.itemValue ? JSON.stringify(files) : null
        };
      }
      if (JSONTYPE.has(item.itemType)) {
        item.itemValue = item.itemValue ? JSON.stringify(item.itemValue) : null;
      }
      return {
        ...item,
        remark: item.remark ? JSON.stringify(item.remark) : null,
        itemData: item.itemData ? JSON.stringify(item.itemData) : null
      };
    });
    this.saveEvent.emit(params);
  }

  uploadChange(info: { file: NzUploadFile; type?: string }, item: any): void {
    switch (info.type) {
      case 'success':
        item.itemValue = info.file.response.data.fullFilePath;
        break;
    }
  }

  nzPreview = (file: NzUploadFile) => {
    this.showImg(file.url);
  };
  nzRemove = (file: NzUploadFile) => {
    const config = this.configList.find((c: any) => c.id === file.uid);
    if (config) {
      config.itemValue = '';
    }
    return true;
  };

  showImg(url: any) {
    this.nzImageService.preview([{ src: url }]);
  }
}
// [0]?.response?.data.fullFilePath