import { Component, OnInit, ViewChild } from '@angular/core';
import { Propertiy } from 'src/app/interface/propertiy-interface';
import { Others } from 'src/app/interface/ohters-interface';
import { IDynamicBaseControl } from 'projects/dynamic-control-group/src/lib/interfaces/dynamic-control.interface';
import { FormGroup, Validators } from '@angular/forms';
import { DynamicControlGroupComponent } from 'projects/dynamic-control-group/src/public-api';
import { ServerSideToken } from '@farris/ui-lookup';
import { LookupHttpBeQueryService } from '../lookup/service/Lookup-http.service';
import { DynamiControlGroupHttpToken } from 'projects/dynamic-control-group/src/lib/interfaces/dynamic-control-group-http.interface';
import { DynamiControlGroupHttpSevice } from './dynamic-control-group-demo.service';

@Component({
  selector: 'app-dropdown-demo',
  templateUrl: './dynamic-control-group-demo.component.html',
  styleUrls: ['./dynamic-control-group-demo.component.css'],
  providers: [{ provide: ServerSideToken, useClass: LookupHttpBeQueryService }, {provide: DynamiControlGroupHttpToken, useClass: DynamiControlGroupHttpSevice}]
})
export class DynamicControlGroupDemoComponent implements OnInit {

  @ViewChild("formDataDemo") formDataDemo: DynamicControlGroupComponent;
  @ViewChild("baseDemo") baseDemo: DynamicControlGroupComponent;
  @ViewChild("uriDemo") uriDemo: DynamicControlGroupComponent;
  codePath = {
    baseDemo: 'assets/codes/dynamic-control-group/basedemo',
    uriDemo: 'assets/codes/dynamic-control-group/uriDemo',
    formDataDemo: 'assets/codes/dynamic-control-group/formDataDemo',
    cssDemo: 'assets/codes/dynamic-control-group/cssDemo',
    groupDemo: 'assets/codes/dynamic-control-group/groupDemo'
  };

  extraClassNames = "test";
  form = new FormGroup({});
  formData = {
    username : '1234'
  };

  controls = [
    {
      control: {
        controlType: "text",
        readonly: true
      },
      className: 'f-pretend-link',
      labelCode: "username",
      name: "用户名"
      // validations: [
      //   {
      //     name: "required",
      //     validator: Validators.required,
      //     message: "Name Required"
      //   },
      //   {
      //     name: "pattern",
      //     validator: Validators.pattern("^[a-zA-Z]+$"),
      //     message: "Accept only text"
      //   }
      // ]
    },
    {
      control: {
        controlType: "date-range",
        readonly: true
      },
      className: '',
      labelCode: "dateRange",
      name: "日期区间"
    },
    {
      control: {
        controlType: "single-date",
        format: "yyyy/MM/dd",
        readonly: true
      },
      className: '',
      labelCode: "singleDate",
      name: "日期"
    },
    {
      control: {
        controlType: "single-number",
        precision: 1,
        max: 100,
        min: 10,
        readonly: true
      },
      className: '',
      labelCode: "singleNumber",
      name: "数值"
    },
    {
      control: {
        controlType: "number-range",
        precision: 0,
        max: 100,
        min: 10,
        readonly: true
      },
      className: '',
      labelCode: "numberRange",
      name: "数值区间"
    },
    {
      control: {
        controlType: "base-dropdown",
        items: [{
          "id":"id01", "text": "test01"
        },{
          "id":"id02", "text": "test02"
        }],
        idField: "id",
        textField: "text",
        readonly: true
      },
      className: '',
      labelCode: "singleDropdown",
      name: "单选下拉"
    },
    {
      control: {
        controlType: "base-dropdown",
        items: [{
          "id":"id01", "text": "test01"
        },{
          "id":"id02", "text": "test02"
        }],
        idField: "id",
        textField: "text",
        multiSelect: true,
        readonly: true
      },
      className: '',
      labelCode: "multiDropdown",
      name: "多选下拉"
    },
    {
      control: {
        controlType: "help",
        uri: "assets/data/grid.json",
        idField: "id",
        textField: "name",
        valueField: "id",
        displayType: "list",
        mapFields: {"id":"testHelpValue", "name":"testHelp"},
        singleSelect: false,
        dialogTitle: "动态弹出窗口",
        hiddenInputName: "testHelpValue",
        readonly: true
      },
      className: '',
      labelCode: "testHelp",
      name: "单选帮助"
    }
  ];

  controls1=[
    {
      control: {
        controlType: "text"
      },
      className: 'input-test',
      labelCode: "username",
      name: "用户名"
    }
  ];

  controls2=[
    {
      control: {
        controlType: "help",
        uri: "assets/data/grid.json",
        idField: "id",
        textField: "name",
        valueField: "id",
        displayType: "list",
        mapFields: {"id":"testHelpValue", "name":"testHelp"},
        singleSelect: false,
        dialogTitle: "动态弹出窗口",
        hiddenInputName: "testHelpValue"
      },
      "className": "",
      labelCode: "testHelp",
      name: "帮助"
    }
  ];

  controlsWithGroupName=[
    {
      control: {
        controlType: "text"
      },
      className: '',
      labelCode: "username",
      name: "用户名",
      groupName: "分组一"
    },
    {
      control: {
        controlType: "date-range"
      },
      className: '',
      labelCode: "dateRange",
      name: "日期区间",
      groupName: "分组一"
    },
    {
      control: {
        controlType: "single-date",
        format: "yyyy/MM/dd"
      },
      className: '',
      labelCode: "singleDate",
      name: "日期",
      groupName: "分组一"
    },
    {
      control: {
        controlType: "single-number",
        precision: 1,
        max: 100,
        min: 10
      },
      className: '',
      labelCode: "singleNumber",
      name: "数值",
      groupName: "分组一"
    },
    {
      control: {
        controlType: "number-range",
        precision: 0,
        max: 100,
        min: 10
      },
      className: '',
      labelCode: "numberRange",
      name: "数值区间",
      groupName: "分组一"
    },
    {
      control: {
        controlType: "base-dropdown",
        items: [{
          "id":"id01", "text": "test01"
        },{
          "id":"id02", "text": "test02"
        }],
        idField: "id",
        textField: "text"
      },
      className: '',
      labelCode: "singleDropdown",
      name: "单选下拉",
      groupName: "分组二"
    },
    {
      control: {
        controlType: "base-dropdown",
        items: [{
          "id":"id01", "text": "test01"
        },{
          "id":"id02", "text": "test02"
        }],
        idField: "id",
        textField: "text",
        multiSelect: true,
      },
      className: '',
      labelCode: "multiDropdown",
      name: "多选下拉",
      groupName: "分组二"
    },
    {
      control: {
        controlType: "help",
        uri: "assets/data/grid.json",
        idField: "id",
        textField: "name",
        valueField: "id",
        displayType: "list",
        mapFields: {"id":"testHelpValue", "name":"testHelp"},
        singleSelect: false,
        dialogTitle: "动态弹出窗口",
        hiddenInputName: "testHelpValue"
      },
      className: '',
      labelCode: "testHelp",
      name: "单选帮助",
      groupName: "分组二"
    }
  ];

  allControlsValue: string;
  allControlsValue1: string;
  allControlsValue2: string;

  onClickSubmit(data) {
    // TODO: Use EventEmitter with form value
    this.allControlsValue = JSON.stringify(this.baseDemo.form.value);
    console.log(this.baseDemo.form, this.baseDemo.form.value);
  }

  onClickSubmit1(data) {
    // TODO: Use EventEmitter with form value
    this.allControlsValue1 = JSON.stringify(this.uriDemo.form.value);
    console.log(this.uriDemo.form, this.uriDemo.form.value);
  }
  
  onClickSubmit2(data) {
    // TODO: Use EventEmitter with form value
    this.allControlsValue2 = JSON.stringify(this.formDataDemo.form.value);
    console.log(this.formDataDemo.form, this.formDataDemo.form.value);
  }
  constructor() { }

  ngOnInit() {
  }

}