import { Component, OnInit, ViewEncapsulation } from '@angular/core';
@Component({
  selector: 'app-dropdownselect-page',
  templateUrl: './search-page.component.html',
  styleUrls: ['./search-page.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class SearchPageComponent implements OnInit {

  private demo = "#demo1";
  private baseurl = "/soft-update/roles?pageNum=1&limit=1000";
  private paramdata = {
    type: 'get',
    dataType: 'json',
    data: {
      pageNum: 1,
      limit: 1000
    },
    headers: {
      "Authorization": "DG1df5%$^@SD"
    }
  };
  private resdata;
  private multiple = true;
  private width = 400;

  


  constructor() { }

  ngOnInit() {
  }

  thead = ['属性', '说明', '类型', '示例'];
  tableValue = [
    {
      name: 'target',
      text: '需要綁定的节点，会动态生成下拉框',
      type: 'string',
      default: ` "#demo1" `
    },
    {
      name: 'multiple',
      text: '是否开启多选功能。可通过配置该值为 true ，或者设置 <select> 标签的 multiple 属性开启',
      type: 'boolean',
      default: `false(默认)`
    },
    {
      name: 'width',
      text: '	整体下拉结构宽度',
      type: 'number',
      default: ` 200(默认) `
    },
     {
      name: 'visCount',
      text: '	每页可视范围内的条目数，超出滚动显示',
      type: 'number',
      default: ` 5(默认) `
    },
    {
      name: 'pageSize',
      text: '	分页每页显示条目数量',
      type: 'number',
      default: ` 10(默认) `
    },
    {
      name: 'ajaxUrl',
      text: '点击 Enter 时执行 ajax 请求该路径，并且会同时以 keyword 提交当前搜索的关键字。',
      type: 'string',
      default: ` - `
    },
    {
      name: 'ajax',
      text: '同 jQuery 的 ajax 参数，__注意其中的 url 以下面 ajaxUrl 参数为准',
      type: 'object',
      default: ` 
        {type: 'post', dataType: 'json'}
       `
    },
    {
      name: 'selectData',
      text: `
        selectData是根据ajax成功后返回的数据拼接的数组。
        其中每个对象中的label属性为呈现在列表中的数据，其他均为自定义属性。
        配合事件render使用，详情参照render事件
      `,
      type: 'object',
      default:
      ` 
       [{label:aa},{xx:bb}]
      `
    }
  ];
  eventHeader = ['事件', '说明', "示例"];
  eventValue = [
    {
      name: 'render',
      text: "根据ajax请求成功返回的数据，拼接好数组，渲染下拉列表, $event为ajax请求成功返回的数据",
      cb:
      `
        countChange($event) { <br>
        &nbsp;&nbsp;var rebuildData = []; <br>
        &nbsp;&nbsp;$.map($event.data.list, function (row, i) { <br>
        &nbsp;&nbsp;&nbsp;&nbsp;     rebuildData.push({ <br>
        &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;       label: row.rolename, <br>
        &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;       roleid: row.roleid <br>
        &nbsp;&nbsp; &nbsp;&nbsp;     }) <br>
        &nbsp;&nbsp; }); <br>
        &nbsp;&nbsp; this.resdata = rebuildData;  <br>
        &nbsp;&nbsp;//这里的resdata对应上面的selectData <br>
        }
      `
    },
    {
      name: 'optionClick',
      text: '选中数据后的操作，$event返回选中的数据',
      cb:
      `
        opClick($event) {<br>
         &nbsp;&nbsp; console.log($event);<br>
        }<br>
      `
    }
  ];

  getKeys(item: any) {
    return [item.name, item.text, item.type, item.default]
  }

  getEventKeys(item: any) {
    return [item.name, item.text, item.cb]
  }

  countChange($event) {
    var rebuildData = [];
    $.map($event.data.list, function (row, i) {
      rebuildData.push({
        label: row.rolename,
        roleid: row.roleid
      })
    });
    this.resdata = rebuildData;
  }

  opClick($event) {
    console.log($event);
  }
}