import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import InteractingTable from 'jun_materials-interacting-table';
import {Select,Input} from '@alifd/next';

const SelectArray1 = [
  {label:'option1',value:'option1'},
  {label:'option2',value:'option2'},
  {label:'option3',value:'option3'}
]

const SelectArray2 = [
  {label:'>',value:'1'},
  {label:'>=',value:'2'},
  {label:'=',value:'3'},
  {label:'<',value:'4'},
  {label:'<=',value:'5'}
]

class App extends Component {
  state= {
    tableHead : [
      {title:'标题',key:'col1',style:{width:160}},
      {title:'字段',key:'col2',style:{width:200}},
      {title:'关系',key:'col3',style:{width:180}},
      {title:'值',key:'col4'},
    ],
    tableBody: [
    {
      col1:{
        inputType:'self',
        render:'我的数据一'
      },
      col2:{
        inputType:'select',
        groups:SelectArray1,
        onChange:(value,pos_arr)=>this.onChangeTableItem(value,pos_arr),
      },
      col3:{
        inputType:'select',
        groups:SelectArray2,
        onChange:(value,pos_arr)=>this.onChangeTableItem(value,pos_arr)
      },
      col4:{
        inputType:'input',
        onChange:(value,pos_arr)=>this.onChangeTableItem(value,pos_arr)
      }
    },
    {
      col1:{
        inputType:'self',
        render:'我的数据二'
      },
      col2:{
        inputType:'select',
        groups:SelectArray1,
        onChange:(value,pos_arr)=>this.onChangeTableItem(value,pos_arr),
      },
      col3:{
        inputType:'select',
        groups:SelectArray2,
        onChange:(value,pos_arr)=>this.onChangeTableItem(value,pos_arr)
      },
      col4:{
        inputType:'input',
        onChange:(value,pos_arr)=>this.onChangeTableItem(value,pos_arr)
      }
    }     
    ],
  }
  render() {
    const { tableHead,tableBody} = this.state
    return (
      <div>
        <InteractingTable 
            tableHead={tableHead} 
            tableBody={tableBody} 
            isControl  
            addRow={this.addRow}
            deleteRow={this.deleteRow}
        />
      </div>
    );
  }
  onChangeTableItem = (value,pos_arr) => {
    const {tableBody} = this.state
    tableBody[pos_arr[0]][pos_arr[1]].value = value
    this.setState({tableBody})
  }
  addRow = (index) => {
      const {tableBody} = this.state
      const obj = {
          col1:{
            inputType:'self',
            render:'新增数据'
          },
          col2:{
            inputType:'select',
            groups:SelectArray1,
            onChange:(value,pos_arr)=>this.onChangeTableItem(value,pos_arr),
          },
          col3:{
            inputType:'select',
            groups:SelectArray2,
            onChange:(value,pos_arr)=>this.onChangeTableItem(value,pos_arr)
          },
          col4:{
            inputType:'input',
            onChange:(value,pos_arr)=>this.onChangeTableItem(value,pos_arr)
          }
      }
      tableBody.splice(index+1,0,obj)
      this.setState({tableBody})
    }
  deleteRow = (index) => {
    const {tableBody} = this.state
    tableBody.splice(index,1)
    this.setState({tableBody})
  }
  
}

ReactDOM.render((
  <App />
), mountNode);