import { Component, OnInit, ViewChild } from '@angular/core';
import { STColumn, STComponent } from '@delon/abc/st';
import { SFComponent, SFDateWidgetSchema, SFSchema, SFUISchema } from '@delon/form';
import { DatePipe, _HttpClient } from '@delon/theme';
import { differenceInCalendarDays } from 'date-fns';
import { DataService } from '../../../services/data.service';

@Component({
  selector: 'app-datatable-mancustomtable',
  templateUrl: './mancustomtable.component.html',
  styleUrls: ['./mancustomtable.component.less'],
  providers: [DatePipe]
})
export class DatatableMancustomtableComponent implements OnInit {
  @ViewChild('st', { static: false }) st!: STComponent;
  @ViewChild('sf', { static: false }) sf!: SFComponent;
  _$expand = false;
  type = 1;
  mode = 'year';
  date: any = null;
  defineDate = [];
  columns: STColumn[] = [];
  resourceStatus: number = 1;
  time: any = ['2022-01-01 00:00:00'];
  dateFormat = 'yyyy';
  today = new Date();
  ui: SFUISchema = {};
  schema: SFSchema = {};
  isLoading: boolean = false;
  searchSchema: SFSchema = {
    properties: {
      customerName: {
        type: 'string',
        title: '',
        ui: {
          placeholder: '请输入客户名称',
          change: (value: any) => {
            console.log(value);
            this.st.reload({ ...this.reqParams });
          }
        }
      },
      salesmanName: {
        type: 'string',
        title: '',
        ui: {
          placeholder: '请输入业务员',
          change: (value: any) => {
            this.st.reload({ ...this.reqParams });
          }
        }
      },
      no4: {
        type: 'string',
        title: '',
        ui: {
          class: 'custom',
          widget: 'custom',
          grid: { xxl: 12, xl: 12, lg: 24, md: 24, sm: 24, xs: 24 }
        }
      }
    }
  };
  initST() {
    this.columns = [
      { title: '部门', index: 'department', className: 'text-center', width: '150px' },
      { title: '业务员', index: 'salesmen', className: 'text-center', width: '150px' },
      {
        title: '已认证货主数',
        index: 'certifiedCount',
        className: 'text-center',
        width: '150px',
        iif: () => {
          return this?.resourceStatus !== 1 ? false : true;
        }
      },
      {
        title: '已认证合伙人',
        index: 'certifiedCount',
        className: 'text-center',
        width: '150px',
        iif: () => {
          return this?.resourceStatus !== 2 ? false : true;
        }
      },
      {
        title: '新增合伙人数',
        index: 'addCount',
        className: 'text-center',
        width: '150px',
        iif: () => {
          return this?.resourceStatus !== 2 ? false : true;
        }
      },
      {
        title: '合伙人活跃率',
        index: 'alivePer',
        className: 'text-center',
        width: '150px',
        iif: () => {
          return this?.resourceStatus !== 2 ? false : true;
        }
      },
      {
        title: '活跃合伙人数',
        index: 'aliveCount',
        className: 'text-center',
        width: '150px',
        iif: () => {
          return this?.resourceStatus !== 2 ? false : true;
        }
      },
      {
        title: '沉默合伙人数',
        index: 'silentCount',
        className: 'text-center',
        width: '150px',
        iif: () => {
          return this?.resourceStatus !== 2 ? false : true;
        }
      },
      {
        title: '流失合伙人数',
        index: 'drainCount',
        className: 'text-center',
        width: '150px',
        iif: () => {
          return this?.resourceStatus !== 2 ? false : true;
        }
      },
      {
        title: '未激活合伙人数',
        index: 'notActiveCount',
        className: 'text-center',
        width: '150px',
        iif: () => {
          return this?.resourceStatus !== 2 ? false : true;
        }
      },

      {
        title: '新增货主数',
        index: 'addCount',
        className: 'text-center',
        width: '150px',
        iif: () => {
          return this?.resourceStatus !== 1 ? false : true;
        }
      },
      {
        title: '货主活跃率',
        index: 'alivePer',
        className: 'text-center',
        width: '150px',
        iif: () => {
          return this?.resourceStatus !== 1 ? false : true;
        }
      },
      {
        title: '活跃货主数',
        index: 'aliveCount',
        className: 'text-center',
        width: '150px',
        iif: () => {
          return this?.resourceStatus !== 1 ? false : true;
        }
      },
      {
        title: '沉默货主数',
        index: 'silentCount',
        className: 'text-center',
        width: '150px',
        iif: () => {
          return this?.resourceStatus !== 1 ? false : true;
        }
      },
      {
        title: '流失货主数',
        index: 'drainCount',
        className: 'text-right',
        width: '150px',
        iif: () => {
          return this?.resourceStatus !== 1 ? false : true;
        }
      },
      {
        title: '未激活货主数',
        index: 'notActiveCount',
        className: 'text-center',
        width: '150px',
        iif: () => {
          return this?.resourceStatus !== 1 ? false : true;
        }
      }
    ];
  }
  /**
   * 查询参数
   */
  get reqParams() {
    if (this.mode === 'year') {
      this.type = 1;
    } else if (this.mode === 'month') {
      this.type = 2;
    } else if (this.mode === 'date') {
      this.type = 3;
    } else {
      this.type = 4;
    }
    let params: any = {
      time: this.time,
      type: this.type,
      parType: this.resourceStatus,
      ...this.sf?.value
    };

    delete params._$expand;
    delete params.sort;
    return { ...params };
  }
  constructor(public service: DataService, private datePipe: DatePipe) {}
  ngOnInit(): void {
    this.initSF();
    this.initST();
  }
  /**
   * 初始化查询表单
   */
  initSF() {
    this.schema = {
      properties: {
        _$expand: { type: 'boolean', ui: { hidden: true } },
        enterpriseName: {
          type: 'string',
          title: '货主名称',
          ui: {
            placeholder: '请输入'
          }
        },
        customerType: {
          type: 'string',
          title: '客户类型',
          ui: {
            widget: 'select',
            placeholder: '请选择'
          },
          enum: [
            { label: '直客', value: 2 },
            { label: '渠道客户', value: 3 },
            { label: '平台客户', value: 1 }
          ]
        },
        customerStatus: {
          type: 'string',
          title: '客户状态',
          ui: {
            widget: 'select',
            placeholder: '请选择'
          },
          enum: [
            { label: '未激活', value: 1 },
            { label: '沉默', value: 2 },
            { label: '流失', value: 3 },
            { label: '活跃', value: 4 }
          ]
        },
        registerTime: {
          title: '注册时间',
          type: 'string',
          ui: {
            widget: 'sl-from-to',
            type: 'date',
            format: 'yyyy-MM-dd',
            visibleIf: {
              _$expand: (value: boolean) => value
            }
          } as SFDateWidgetSchema
        }
      },
      type: 'object'
    };
    this.ui = { '*': { spanLabelFixed: 110, grid: { span: 8, gutter: 4 } } };
  }
  changeData() {
    if (this.mode === 'year') {
      this.dateFormat = 'yyyy';
    } else if (this.mode === 'month') {
      this.dateFormat = 'yyyy-MM';
    } else {
      this.dateFormat = 'yyyy-MM-dd';
    }
  }
  onChange(result: any) {
    if (result === null) {
      return;
    }
    if (this.mode === 'year') {
      this.time = [this.datePipe.transform(this.date, 'yyyy') + '-01-01 00:00:00'];
    } else if (this.mode === 'month') {
      this.time = [this.datePipe.transform(this.date, 'yyyy-MM') + '-01 00:00:00'];
    } else if (this.mode === 'date') {
      this.time = [this.datePipe.transform(this.date, 'yyyy-MM-dd') + ' 00:00:00'];
    } else {
      this.time = [
        this.datePipe.transform(this.defineDate[0], 'yyyy-MM-dd') + '00:00:00',
        this.datePipe.transform(this.defineDate[1], 'yyyy-MM-dd') + ' 00:00:00'
      ];
    }
    this.st.reload({ ...this.reqParams });
  }
  disabledDate = (current: Date): boolean =>
    // Can not select days before today and today
    differenceInCalendarDays(current, this.today) > 0;

  export() {
    // this.service.downloadFile(this.service.$api_exportUploadBill, this.sf.value, {});
  }
  search() {
    this.st?.load(1);
  }
  /**
   * 伸缩查询条件
   */
  expandToggle() {
    this._$expand = !this._$expand;
    this.sf?.setValue('/_$expand', this._$expand);
  }

  /**
   * 重置表单
   */
  resetSF() {
    this.sf.reset();
    this._$expand = false;
    this.isLoading = true;
  }
  selectChange(e: number) {
    console.log(e);
    this.resourceStatus = e + 1;
    setTimeout(() => {
      this.st?.resetColumns();
      this.st?.load(1);
    }, 500);
  }
}