import { Component, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { SFComponent, SFSchema, SFSelectWidgetSchema, SFUISchema } from '@delon/form';
import { ModalHelper } from '@delon/theme';
import { GoodsService } from 'src/app/routes/cmc/services/goods.service';

@Component({
  selector: 'app-cmc-components-add',
  templateUrl: './add.component.html',
  styleUrls: ['./add.component.less'],
})
export class CmcComponentsTagsAddComponent implements OnInit {
  @ViewChild('sf', { static: false })
  sf!: SFComponent;
  i: any;
  schema!: SFSchema;
  ui!: SFUISchema;
  cateData: any = [];
  formTitle: any = '新增标签';
  formData: any = {
    // avatar:[
    //   {
    //     uid: -1,
    //     name: 'LOGO',
    //     status: 'done',
    //     url: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
    //     response: {
    //       url: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
    //     },
    //   },
    // ],
    // name:'西四'
  };

  constructor(public service: GoodsService, private modal: ModalHelper, private route: ActivatedRoute) {
    const { flag, type, id } = route.snapshot?.queryParams;
    Object.assign(this.formData, { flag, type, id });
  }

  ngOnInit() {
    this.initSF();
    if (this.formData.flag !== '3') {
      this.getCates();
    } else {
      this.getBusinessCates();
    }
    // console.log(this.formData, 'this.formData');
    if (this.formData.type === 'edit') {
      this.formTitle = '编辑标签';
    }
    if (this.formData.type === 'view') {
      this.formTitle = '查看标签';
    }
    if (this.formData.type !== 'add') {
      if (this.formData.flag !== '3') {
        this.getInfo();
      } else {
        this.getBusinessInfo();
      }
    }
  }
  initSF() {
    this.schema = {
      properties: {
        name: {
          title: '标签名称',
          type: 'string',
          maxLength: 8,
        },
        categoryId: {
          title: '关联分类',
          type: 'string',
          default: this.formData?.categoryId || [],
          enum: this.cateData,
          ui: {
            widget: 'tree-select',
            checkable: true, // 节点前添加 Checkbox 复选框
            allowClear: true, // 支持清除
            virtualHeight: '480px',
            // checkStrictly: true,  // checkable 状态下节点选择完全受控（父子节点选中状态不再关联）
            // defaultExpandAll: false, // 默认展开所有树节点
            // expandedKeys: this.formData?.categoryId || [], // 默认展开指定的树节点
            change: (e) => {
              console.log(e);
            },
            // valueProperty: 'key',
            // labelProperty: 'title',
            // asyncData: () =>
            //   this.service.request(this.service.$api_get_labelCategorys).pipe(
            //     map((data: any) => {
            //       return data.map((m: any) => {
            //         return { title: m.name, key: m.id };
            //       });
            //     }),
            //   ),
          } as SFSelectWidgetSchema,
        },
        remark: {
          title: '标签介绍',
          type: 'string',
          maxLength: 50,
          ui: {
            widget: 'textarea',
            placeholder: '请输入标签介绍',
            autosize: { minRows: 3, maxRows: 6 },
            errors: {
              required: '请输入标签介绍',
            },
          },
        },
      },
      required: ['name', 'categoryId', 'remark'],
    };
    this.ui = {
      '*': {
        spanLabel: 5,
        grid: { span: 24 },
      },
    };
  }
  getCates() {
    const params = {
      flag: this.formData.flag,
    };
    const cateApi = this.service.$api_get_category_treeList;
    this.service.request(cateApi, params).subscribe((res) => {
      // res.map((i: any) => {
      //   i.key = i.id;
      //   i.title = i.name;
      //   if (i.children) {
      //     i.children.map((j: any) => {
      //       j.key = j.id;
      //       j.title = j.name;
      //       if (j.children) {
      //         j.children.map((k: any) => {
      //           k.key = k.id;
      //           k.title = k.name;
      //         });
      //       }
      //     });
      //   }
      // });
      this.cateData = res;
      this.initSF();
    });
  }
  getBusinessCates() {
    const params = {
      flag: this.formData.flag,
    };
    const cateApi = this.service.$api_get_business_cateList;
    this.service.request(cateApi, params).subscribe((res) => {
      // res.map((i: any) => {
      //   i.key = i.id;
      //   i.title = i.name;
      //   if (i.children) {
      //     i.children.map((j: any) => {
      //       j.key = j.id;
      //       j.title = j.name;
      //       if (j.children) {
      //         j.children.map((k: any) => {
      //           k.key = k.id;
      //           k.title = k.name;
      //         });
      //       }
      //     });
      //   }
      // });
      this.cateData = res;
      this.initSF();
    });
  }
  getInfo() {
    const params = {
      labelId: this.formData.id,
    };
    this.service.http.post(this.service.$api_get_labelDetail, params).subscribe((res) => {
      const resData = res.data;
      if (res.data?.categoryIds) {
        resData.categoryId = res.data?.categoryIds.split(',');
      }
      delete resData.categoryIds;
      Object.assign(this.formData, resData);
      // console.log(this.formData, 'this.formData');
      this.initSF();
    });
  }
  getBusinessInfo() {
    const params = {
      id: this.formData.id,
    };
    this.service.http.post(this.service.$api_get_business_labelDetail, params).subscribe((res) => {
      const resData = res.data;
      if (res.data?.categoryIdList) {
        resData.categoryId = res.data?.categoryIdList;
      }
      delete resData.categoryIdList;
      Object.assign(this.formData, resData);
      this.initSF();
    });
  }
  formSubmit() {
    const cateIds: any[] = [];
    let saveApi = this.service.$api_label_save;
    if (this.formData.flag !== '3') {
      this.sf.value.categoryId.map((i: any) => {
        this.cateData.map((j: any) => {
          if (j.children) {
            if (i === j.key) {
              j.children.map((k: any) => {
                if (k.children) {
                  k.children.map((m: any) => {
                    cateIds.push(m.key);
                  });
                } else {
                  cateIds.push(k.key);
                }
              });
            } else if (i !== j.key) {
              j.children.map((k: any) => {
                if (i === k.key && k.children) {
                  k.children.map((m: any) => {
                    cateIds.push(m.key);
                  });
                } else {
                  cateIds.push(i);
                }
              });
            }
          } else {
            if (i === j.key) {
              cateIds.push(i);
            }
          }
        });
      });
    }
    const params: any = {
      ...this.sf.value,
    };
    if (this.formData.flag !== '3') {
      const uniqueArr = [...new Set(cateIds)];
      params.categoryId = uniqueArr.toString();
      saveApi = this.service.$api_label_save;
    } else {
      saveApi = this.service.$api_business_label_save;
      params.categoryIdList = this.sf.value.categoryId;
      delete params.categoryId;
    }
    this.service.http.post(saveApi, params).subscribe((res) => {
      if (res.data) {
        this.service.msgSrv.success('提交成功');
        this.goBack();
      }
    });
  }
  goBack() {
    history.go(-1);
  }
}