import { Component, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { STChange, STColumn, STComponent, STData, STRequestOptions } from '@delon/abc/st';
import { SFComponent, SFSchema, SFSelectWidgetSchema, SFUISchema } from '@delon/form';
import { processSingleSort } from '@shared';
import { NzDrawerRef, NzDrawerService } from 'ng-zorro-antd/drawer';
import { NzModalService } from 'ng-zorro-antd/modal';
import { map } from 'rxjs/operators';

import { SupplyManagementService } from '../../services/supply-management.service';
import { PublishchooseFamifiarAddComponent } from './add/add.component';
import { PublishchooseFamifiarSetCaptainComponent } from './set-captain/set-captain.component';

@Component({
  selector: 'app-publish-goods-choose-famifiar',
  templateUrl: './choose-famifiar.component.html'
})
export class PublishGoodsChooseFamifiarComponent implements OnInit {
  schema: SFSchema = {};
  columns!: STColumn[];
  ui!: SFUISchema;
  sfExpand = false;
  @ViewChild('st', { static: false })
  st!: STComponent;
  @ViewChild('sf', { static: false })
  sf!: SFComponent;

  @ViewChild('st2', { static: false })
  st2!: STComponent;
  columns2!: STColumn[];
  st2Data: STData[] = [];

  constructor(
    private modal: NzModalService,
    public router: Router,
    public ar: ActivatedRoute,
    private drawerService: NzDrawerService,
    public service: SupplyManagementService,
    private modalService: NzModalService
  ) {}

  dataInfo: STData[] = [
    {
      id: '1',
      name1: '1111',
      name2: '2222',
      name3: '3333',
      name4: '4444',
      name5: '5555',
      name6: '6666',
      name7: '7777',
      name8: '8888',
      name9: '9999',
      name10: '1010',
      name11: '1012',
      name12: '1013'
    },
    {
      id: '2',
      name1: '9999',
      name2: '8888',
      name3: '7777',
      name4: '6666',
      name5: '5555',
      name6: '4444',
      name7: '3333',
      name8: '2222',
      name9: '1111'
    }
  ];

  /**
   * 查询参数
   */
  get reqParams() {
    return {
      ...this.sf?.value,
      isManage: 0
    };
  }

  get selectedRows() {
    return this.st?.list.filter(item => item.checked) || [];
  }
  ngOnInit() {
    this.initSF();
    this.initST();
    this.initST2();
  }

  initSF() {
    this.schema = {
      properties: {
        name: {
          type: 'string',
          title: '',
          ui: {
            placeholder: '请输入司机姓名/手机号'
          }
        },
        name2: {
          type: 'string',
          title: '',
          ui: {
            placeholder: '请输入车牌号'
          }
        }
      }
    };
    this.ui = {
      '*': {
        grid: { span: 12, gutter: 4 }
      }
    };
  }

  initST() {
    this.columns = [
      {
        title: '司机姓名',
        index: 'name1'
      },
      {
        title: '手机号',
        index: 'name2'
      },
      {
        title: '指定车辆',
        index: 'name3',
        render: 'name3',
        width: '180px'
      },
      {
        title: '状态',
        index: 'name4'
      },
      {
        title: '操作',
        className: 'text-center',
        buttons: [
          {
            text: '选择',
            iif: item => item.showChoose !== 'false',
            click: (_record, _modal, _instance) => this.choose(_record)
          }
        ]
      }
    ];
  }

  initST2() {
    this.columns2 = [
      {
        title: '司机姓名',
        index: 'name1'
      },
      {
        title: '手机号',
        index: 'name2'
      },
      {
        title: '车队长',
        index: 'name3',
        render: 'name3',
        width: '180px'
      },
      {
        title: '指定车辆',
        index: 'name4'
      },
      {
        title: '操作',
        className: 'text-center',
        buttons: [
          {
            text: '移除',
            click: (_record, _modal, _instance) => this.remove(_record, _modal, _instance)
          }
        ]
      }
    ];
  }

  // 选择
  choose(record: STData) {
    this.st2Data.push({ ...record });
    this.st2.load();
    this.st.setRow(record, { showChoose: 'false' });
  }
  // 移除
  remove(record: STData, value1: any, value2: any) {
    this.st.setRow(record, { showChoose: 'true' });
    let index = (this.st2Data || []).findIndex(obj => obj.id === record.id);
    this.st2Data.splice(index, 1);
    this.st2.load();

    const stData = this.st.data;
    let index2 = (stData as any).findIndex((obj: any) => obj.id === record.id);
    this.st.setRow(index2, { showChoose: 'true' });
  }

  //添加司机
  add() {
    this.modalService.create({
      nzTitle: '添加司机',
      nzContent: PublishchooseFamifiarAddComponent
    });
  }

  //设置车队长
  setCaptain(record: STData) {
    this.modalService.create({
      nzTitle: '设置车队长',
      nzContent: PublishchooseFamifiarSetCaptainComponent
    });
  }

  /**
   * 重置表单
   */
  resetSF() {
    this.sf.reset();
    this.sfExpand = false;
    this.st.load(1);
  }

  expandToggle() {
    this.sfExpand = !this.sfExpand;
    this.sf?.setValue('/_expand', this.sfExpand);
  }

  // 排序
  reqProcess(requestOptions: STRequestOptions): STRequestOptions {
    return processSingleSort(requestOptions);
  }

  cancel() {}

  ok() {}

  carChange(event: any, item: STData) {
    this.st.setRow(item, { name3: event });
  }
}
