import React,{ useState, useEffect, } from 'react'
import {
  Card,
  TreeSelect,
  Space,
  Button,
  Table,
  Input,
  Row, 
  Col
} from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import { connect } from 'react-redux';
import TestModal from './ModalComponent';
import ListCard from './ListCard';
import { get, post } from '../../services';
import { orgGet,orgTest } from '../../services/orgnazation/api'
import styles from './DefaultComponent.less'
const { Search } = Input
const { TreeNode } = TreeSelect;
// const treeData = [
//   {
//     title: 'Node1',
//     value: '0-0',
//     children: [
//       {
//         title: 'Child Node1',
//         value: '0-0-1',
//       },
//       {
//         title: 'Child Node2',
//         value: '0-0-2',
//       },
//     ],
//   },
//   {
//     title: 'Node2',
//     value: '0-1',
//   },
// ];


const DefaultComponent = ()=> {
  const [treeValue, setTreeValue] = useState(null)//树节点选中的值
  const [tableData, setTableData] = useState([]) //table的值
  const [selectedRowKeys, setSelectedRowKeys] = useState([]) //table表格checkbox配置
  const [modalVisible, setModalVisible] = useState(false) //展示Modal弹窗
  const [testPeoList, setTestPeoList] = useState([]) //测试card数组
  const [treeData, setTreeData] = useState([])
  //树节点选中的值
  const treeChange = (e) =>{
    setTreeValue(e)
  }
  //用户搜索
  const handleSearch = ()=>{
    console.log('handleSearch')
    setModalVisible(true)
  }
  //导入
  const handleImport = () =>{
    setModalVisible(true)
  }
  //搜索框时间
  const inputSearch = (e) =>{
    console.log(e,'inputSearch')
  }
  const columns = [
    {
      title:'用户ID',
      dataIndex:"userID",
      key:'userID'
    },
    {
      title:'登录名',
      dataIndex:'loginName',
      key:'loginName'
    },
    {
      title:'用户姓名',
      dataIndex:'userName',
      key:'userName',
    },
    {
      title:'手机号码',
      dataIndex:'phone',
      key:'phone'
    },
    {
      title:'钉钉账户',
      dataIndex:'ddid',
      key:'ddid',
    },
    {
      title:'微信账户',
      dataIndex:'wxid',
      key:'wxid',
      ellipsis: true,
    }
  ]
  useEffect( ()=>{
    orgGet().then(res =>{
      console.log(res,'orgGet')
      if(res){
      let arr = transTree(res)
        console.log(transTree(res),'arr')
        setTreeData(arr)
        
      }
    })
  },[])
  //处理返回的树形结构
  const transTree = (value,isChild=false) =>{
    let arr = value
    if(arr.length< 0){
      return
    }
    let obj = {}
  return  arr.map( item =>{
      // item.title = item.text
      // item.value = item.id
      // if( item.children && item.children.length > 0){
      //   transTree(item.children)
      //   return obj=item
      //  }else{
      //    return item
      //  }
      if(isChild){
        item.title = item.userName
        item.value = item.userID
      }else{
        item.title = item.text
        item.value = item.id
      }

      if( item.children && item.children.length > 0){
        transTree(item.children,false)
        return obj=item
       }else{
         return item
       }
    })
  }
  useEffect( () =>{
    get('/Cityinterface/rest/services/OMS.svc/U_GetOneOUUserListNew',{
      OUID:24,
      _version:9999,
      _dc:new Date().getTime()
    }).then(res =>{
      if(res.success){
        setTableData(res.root)
      }
    })
    const testData =[]
    const test2list = []
    for( let i=1; i<10 ; i++){
      testData.push({
        key:i,
        ID:i
      })
      test2list.push({
        label:i+"测试",
        value:i+"测试",
      })
    }
    console.log(test2list)

    setTestPeoList(test2list)
  },[])
   //table选中框的值
   const selectChange = (e) =>{
    console.log(e,'e')
    setSelectedRowKeys(e)
  }
  const confirmModal = () =>{
    setModalVisible(false)
  }
  //table复选的配置
  const rowSelection ={
    selectedRowKeys,
    onChange:selectChange,
  }
  const btnLable = [
    {label:'查找用户',handle:handleSearch ,config:{ type:'primary',danger:true} },
    {label:'用户导入',handle:handleImport,config:{ type:'info',}},
<<<<<<< Updated upstream
=======
    {label:'新建用户',handle:'newHandle'},
    {label:'批量关联',handle:'relHandle'}
>>>>>>> Stashed changes
  ]

  return (
    <>
      <PageContainer>
        <Card>
          <Row>
<<<<<<< Updated upstream
            <Col span ={1}>
=======
            <Col span ={2}>
>>>>>>> Stashed changes
             <div style={{height:"30px",lineHeight:"30px"}}>
              机构选择
             </div>
            </Col>
            <Col span={12}>
            <TreeSelect
              style={{"width":"50%"}}
              treeData={treeData}
              value={treeValue}
              onChange={ (e) => { treeChange(e)}}
            />
            </Col>
            <Col span={ 8}>
            {/* <Search 
            placeholder="请输入" 
            onSearch={(e) =>{inputSearch(e)}} 
            style={{ width: "50%" }} 
            enterButton 
            /> */}
            </Col>
          </Row>
<<<<<<< Updated upstream
          <div style={{marginTop:'20px',textAlign:'center'}}>
            <Space>
              {
                btnLable && btnLable.map( (item,index) => {
                  const { config} =item
                  return (
                    <Button key={index}  {...config} onClick ={  ()=>{ item.handle && typeof item.handle === 'function' && item.handle()}}>{item.label}</Button>
                  )
                })
              }
            </Space>
          </div>          
=======
        </Card>
        <Card>
          <Space>
            {
              btnLable && btnLable.map( (item,index) => {
                const { config} =item
                return (
                   <Button key={index}  {...config} onClick ={  ()=>{ item.handle && typeof item.handle === 'function' && item.handle()}}>{item.label}</Button>
                )
              })
            }
          </Space>
>>>>>>> Stashed changes
          <TestModal
            title='用户选择'
            visible = {modalVisible}
            maskClosable
            onOk={() => confirmModal()}
            onCancel={() => setModalVisible(false)}
            bodyStyle ={{width:"100%",height:"100%",}}
            style= {{top:20}}
            width="1000px"
            destroyOnClose={true}
            cancelText='取消'
            okText='确认选择'
          >
            <ListCard optionsList ={testPeoList}></ListCard>
          </TestModal>
        </Card>
        <Card className={styles.mgTop20}>
          <div classNam={styles.tableTitle}>一般用户的用户列表</div>
          <Table
          className={styles.mgTop20}
          rowSelection={rowSelection} 
          columns={columns} 
          dataSource ={tableData} 
          bordered
          rowKey='userID'
          scroll={{y:400}}
          ></Table>
        </Card>
      </PageContainer>
    </>
  )
}

export default connect()(DefaultComponent)