{"size": 6362, "ext": "js", "max_stars_repo_path": "public/js/main/componets/edit/EditTable.js", "max_stars_repo_name": "katy-tsai/cec_quantity", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "public/js/main/componets/edit/EditTable.js", "max_issues_repo_name": "katy-tsai/cec_quantity", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "public/js/main/componets/edit/EditTable.js", "max_forks_repo_name": "katy-tsai/cec_quantity", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 29.3179723502, "max_line_length": 221, "alphanum_fraction": 0.5723043068}
const React = require('react');
const ReactDOM = require('react-dom');

const ajaxApi = require('../../../../util/ajaxApi');
const  EditSecondTable = require('./EditSecondTable');

var EditTable = React.createClass({

 render_body(item,targetData,attrs){
    var tableTree = this.props.tableTree;
    var setData = this.props.setData;
    var obj_props = attrs.map(function(attr,i){
      var style = attr.style;
      var value = attr.code=="btn"?'':targetData[attr.code];
      var spanClass = attr.code;
      var index_key = item+"_td_"+i;
      if(attr.code=="firm"){
        return(
          <td key={index_key} style={style}>
            <select id="firm">
              <option value="01">abc廠商</option>
            </select>
          </td>
        )
      }else if(attr.code=='btn'){
        return(
          <td key={index_key} style={style} className=" edit-icon" title='新增細項' onClick={this._handleAddItem.bind(null,{type:'root',parent:''})}>
            <i className=" icon-add"></i>
          </td>
        )
      }else if(attr.code=='contractPrice'){
        if(tableTree._root){
           var nodes = tableTree._root.children;
          if(nodes.length>0){
            // value = treeData.calculate(nodes,'contractPrice');
            return (
              <td key={index_key} style={style}>
                    <span className={spanClass}>{value}</span>
              </td>
            )
          }
        }
        return (
          <td key={index_key} style={style}>
              <input type='text' value={value} />
          </td>
        )

      }else{
        return <td key={index_key} style={style}><span className={spanClass}>{value}</span></td>;
      }


    }.bind(this))
    return (
      <tr key={item+"_tr"} >
        {obj_props}
      </tr>
    )
 },
  render(){
    console.log("==========render editTable============")
    console.log(this.props.tableTree)
     var targetData = this.props.targetData;
     var tableTree = this.props.tableTree;
     var nodes =[];
     if(tableTree._root){
         nodes = tableTree._root.children;
     }
     console.log('render editTable nodes=s',nodes)

      var header = this.props.tableData.map(function(obj,i){
        var style = obj.style;
        return (
          <th key={"th_"+i} code={obj.code} style={style}>{obj.name}</th>
        )
      });

    var cumNumber =   header.length;
    return (
      <div>
        <table className="edit-table">
          <thead>
            <tr>
              {header}
            </tr>
          </thead>
          <tbody>
            {this.render_body('workItem',this.props.targetData,this.props.tableData)}
            <tr>
              <td colSpan={cumNumber}>
                <EditSecondTable nodes={nodes} removeItem={this.props.removeItem} addItem={this._handleAddItem} attrOnChange={this._handleAttrChange} codeOnBlur={this._handleCodeBlur} priceOnBlur={this._handlePriceBlur}/>
              </td>
            </tr>
          </tbody>
        </table>

      </div>
    )
  },
  _handlePriceBlur:function(obj,e){
     var index = obj.index;
    var targetData = this.props.targetData;
    var tableTree = this.props.tableTree;
    var nodes = tableTree._root.children;
    var price = e.target.value;
    var changeData ;
    if(obj.type=='node'){
      var indexs = index.split('-');
      var parent_index = Number(indexs[0])-1;
      var sub_index = Number(indexs[1])-1;
      changeData = nodes[parent_index].children[sub_index].data;

    }else{
      var sub_index = Number(index)-1;
      changeData = nodes[sub_index].data;
    }
    if(price){
      changeData.contractPrice=price;
      this.props.saveWorkmapping( changeData,index);
    }
  },
  _handleCodeBlur:function(obj,e){
     var index = obj.index;
     var targetData = this.props.targetData;
     var tableTree = this.props.tableTree;
     var nodes = tableTree._root.children;
     var changeData ;
     if(obj.type=='node'){
       var indexs = index.split('-');
       var parent_index = Number(indexs[0])-1;
       var sub_index = Number(indexs[1])-1;
       changeData = nodes[parent_index].children[sub_index].data;

     }else{
       var sub_index = Number(index)-1;
       changeData = nodes[sub_index].data;
     }
     var code = e.target.value;
     if(code){
       ajaxApi.categoriesDetaileDao('MaterialItem','getByCode',{code:code,state:'Y'},function(result){
         if(result[0]){
           var data = {
             code:code,
             item:result[0].item,
             unit:result[0].unit,
             contractPrice:result[0].contractPrice,
             WorkItemId:targetData.id
           }
           changeData=_.assign(changeData, data);
           this.props.saveWorkmapping(changeData,index);

         }else{
          // nodes[index].data =nodes[index].data.code;
          this.props.saveWorkmapping( null,index);
           alert('無此編號，請重新輸入');
         }

       }.bind(this))
     }
  },


  _handleAttrChange:function(obj,e){
    var index = obj.index;
    var attr = obj.attr;
    var tableTree = this.props.tableTree;
    var nodes = tableTree._root.children;
    var value = e.target.value;
    var changeData;
    console.log(obj.type);
    if(obj.type=='node'){
      var indexs = index.split('-');
      var parent_index = Number(indexs[0])-1;
      var sub_index = Number(indexs[1])-1;
      changeData = nodes[parent_index].children[sub_index].data;

    }else{
      var sub_index = Number(index)-1;
      changeData = nodes[sub_index].data;
    }
    changeData[attr]= value;
    this.props.setTabletree(tableTree);
  },
  _handleAddItem:function(obj,e){
    var parent = obj.parent;
    var type = obj.type;
    console.log("_handleAddItem parent = ",parent)
    console.log("_handleAddItem type = ",type)
    var targetData = this.props.targetData;
    var tableTree = this.props.tableTree;

    var order =0;
    if(tableTree._root){
      order = tableTree._root.children.length;
    }
    var newItem = {
      WorkItemId:targetData.id,
      order:order,
      hasChild:'N',
      type:type,
      parent:parent
    }

    if(type=='node'){
      if(parent){
        tableTree.add(newItem,parent,tableTree.traverseDF,"id");
      }
    }else{
      tableTree.add(newItem,"project",tableTree.traverseDF,"item");
    }

    this.props.setTabletree(tableTree);
  }
});
module.exports = EditTable;
