import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';

@Component({
  selector: 'app-dynamic-grid',
  templateUrl: './dynamic-grid.component.html',
  styleUrls: ['./dynamic-grid.component.scss']
})
export class DynamicGridComponent implements OnInit {
  // 表格的模板
  @ViewChild('cell1') cell1: TemplateRef<any>;
  //表格的按钮组数据
  btnGroupData = [
    {
      id: 'b1',
      text: '提交',
    },
    {
      id: 'b2',
      text: '编辑'
    },
    {
      id: 'b3',
      text: '保存',
    },
    {
      id: 'b4',
      text: '删除'
    },
    {
      id: 'b5',
      text: '按钮005',
    },
    {
      id: 'b6',
      text: '按钮006'
    },
    {
      id: 'b7',
      text: '按钮007',
    },
    {
      id: 'b8',
      text: '按钮008'
    }
  ];
  columns = [];
  orderListData = [];
  constructor() { }

  ngOnInit() {
    this.orderListData = [
      {

        "WLBH": "SQ201805010001",
        "WLMC": "大润发",
        "WLMS": "大润发描述信息",
        "WLTZ": "特征",
        "WLBM": "别名",
        "KHBH": "SQ20180501",
        "ZSL": "500",
        "ZDW": "kg",
        "ZHZDJ": "200",
        "ZDJ": "240",
        "FSL": "35",
        "FDW": "kg",
        "ZQFDJ": "211",
        "FDJ": "180"
      },
      {
        "WLBH": "SQ201805010002",
        "WLMC": "大润发",
        "WLMS": "大润发描述信息",
        "WLTZ": "特征",
        "WLBM": "别名",
        "KHBH": "SQ20180501",
        "ZSL": "500",
        "ZDW": "kg",
        "ZHZDJ": "200",
        "ZDJ": "240",
        "FSL": "35",
        "FDW": "kg",
        "ZQFDJ": "211",
        "FDJ": "180"
      },
      {
        "WLBH": "SQ201805010003",
        "WLMC": "大润发",
        "WLMS": "大润发描述信息",
        "WLTZ": "特征",
        "WLBM": "别名",
        "KHBH": "SQ20180501",
        "ZSL": "500",
        "ZDW": "kg",
        "ZHZDJ": "200",
        "ZDJ": "240",
        "FSL": "35",
        "FDW": "kg",
        "ZQFDJ": "211",
        "FDJ": "180"
      },
      {
        "WLBH": "SQ201805010004",
        "WLMC": "大润发",
        "WLMS": "大润发描述信息",
        "WLTZ": "特征",
        "WLBM": "别名",
        "KHBH": "SQ20180501",
        "ZSL": "500",
        "ZDW": "kg",
        "ZHZDJ": "200",
        "ZDJ": "240",
        "FSL": "35",
        "FDW": "kg",
        "ZQFDJ": "211",
        "FDJ": "180"
      },
      {
        "WLBH": "SQ201805010005",
        "WLMC": "大润发",
        "WLMS": "大润发描述信息",
        "WLTZ": "特征",
        "WLBM": "别名",
        "KHBH": "SQ20180501",
        "ZSL": "500",
        "ZDW": "kg",
        "ZHZDJ": "200",
        "ZDJ": "240",
        "FSL": "35",
        "FDW": "kg",
        "ZQFDJ": "211",
        "FDJ": "180"
      },
      {
        "WLBH": "SQ201805010006",
        "WLMC": "大润发",
        "WLMS": "大润发描述信息",
        "WLTZ": "特征",
        "WLBM": "别名",
        "KHBH": "SQ20180501",
        "ZSL": "500",
        "ZDW": "kg",
        "ZHZDJ": "200",
        "ZDJ": "240",
        "FSL": "35",
        "FDW": "kg",
        "ZQFDJ": "211",
        "FDJ": "180"
      },
      {
        "WLBH": "SQ201805010007",
        "WLMC": "大润发",
        "WLMS": "大润发描述信息",
        "WLTZ": "特征",
        "WLBM": "别名",
        "KHBH": "SQ20180501",
        "ZSL": "500",
        "ZDW": "kg",
        "ZHZDJ": "200",
        "ZDJ": "240",
        "FSL": "35",
        "FDW": "kg",
        "ZQFDJ": "211",
        "FDJ": "180"
      },
      {
        "WLBH": "SQ201805010002",
        "WLMC": "大润发",
        "WLMS": "大润发描述信息",
        "WLTZ": "特征",
        "WLBM": "别名",
        "KHBH": "SQ20180501",
        "ZSL": "500",
        "ZDW": "kg",
        "ZHZDJ": "200",
        "ZDJ": "240",
        "FSL": "35",
        "FDW": "kg",
        "ZQFDJ": "211",
        "FDJ": "180"
      }
    ];
    // 表格数据
    this.columns = [
      { field: 'WLBH', width: 180, title: '物料编号' },
      {
        title: '管理',
        width: 200,
        template: this.cell1,
        align: 'center',
        hAlign: 'center'
      },
      { field: 'WLMC', width: 180, title: '物料名称' },
      { field: 'WLMS', width: 180, title: '物料描述' },
      { field: 'WLTZ', width: 180, title: '物料特征' },
      { field: 'WLBM', width: 180, title: '物料别名' },
      { field: 'KHBH', width: 200, title: '客户物料编号' },
      { field: 'ZSL', width: 180, title: '主数量' },
      { field: 'ZDW', width: 180, title: '主单位' },

      { field: 'ZHZDJ', width: 200, title: '折前主单价' },
      { field: 'ZDJ', width: 200, title: '主单价' },
      { field: 'FSL', width: 200, title: '辅数量' },
      { field: 'FDW', width: 200, title: '辅单位' },
      { field: 'ZQFDJ', width: 200, title: '折前辅单价' },
      { field: 'FDJ', width: 180, title: '辅单价' }
    ];

  }
  /**表格按钮的点击 */
  btnGroupClickEvent(id: string, item) {
    console.log(id);
    console.log(item);
  }
}