
import { Row, Col, Card, Tree, Form, Tabs, TreeSelect, Input, InputNumber, Modal, Button, message } from 'antd'
import React, { useState, useEffect } from 'react';
import request from '@/utils/request';
import apis from '@/services/apis';
import moment from 'moment';
import TreedataFrom from './form';
import TreedataAdd from './addForm';
import { values } from 'lodash';
const { TreeNode, DirectoryTree } = Tree;
const FormItem = Form.Item;
const { Search } = Input;
const { TabPane } = Tabs;

const treeData = []
const updateTreeData = fetch(apis.Institution.instiAlert); //接口



// const item = this.info.node.key 

class TreeDemo extends React.Component {
  formRef = React.createRef();

  constructor(props) {
    super(props)
    this.state = {
      // autoExpandParent: false,
      // treeTitle: [info.node.props],
      // checkedKeys: ['0-0-0'],
      expandedKeys: [],//展开的key
      checkedKeys: [],//选中的key
      autoExpandParent: true,
      searchValue: '',
      selectedKeys: [],//搜索得key
      checked: true,
      treeData: [],
      testarr: []
    };
  }


  // onExpand = expandedKeys => {
  //   this.setState({
  //     expandedKeys,
  //     autoExpandParent: false,
  //   });
  // };



  // --------标签页
  callback = (key) => {
    console.log(key);
  }


  onExpand = expandedKeys => {
    console.log('onExpand', expandedKeys);

    // 如果没有将 autoExpandParent 设置为 false，如果子项展开，父项不能折叠。
    // 或者，您可以删除所有扩展的子键。
    this.setState({
      expandedKeys,
      autoExpandParent: false,
    });
  };

  handelSex = e => {
    this.setState({
      sex: e.target.value
    });
    console.log(value);
  };

  //修改

  onChangethis = async (value) => {
    //获取tree的修改前数据
    const testarr = this.state.treeData
    //把tree的修改前数据赋修改代存数据
    // let Data1 = this.state.treeData
    console.log('value*********>>', value)
    // console.log('Data1------------>', Data1)
    // urlData: { id: value.institutionId }
    // //修改树的数据存在Data1 
    // for (var i = 0; i < testarr.length; i++) {
    //   // console.log('ID------------>', Data1[i].key);
    //   if (testarr[i].key == value.institutionId) {
    //     Data1[i] = value
    //     const res = request(`/api/admin/institution/${Data1[i].institutionId}`, {
    //       method: 'PUT',
    //       data: value,
    //     })
    //     console.log('*************', value)
    //     // console.log('*institutionName*****', institutionName)

    //     if (res.success) {
    //       message.success("成功")
    //     } else {
    //       message.error("失败")
    //     }
    //   }
    // }
    // this.setState({
    //   treeData1: Data1
    // }, () => {
    //   message.success('修改成功！')
    // })

  }


  //单击赋值
  onSelect = (values, info) => {
    this.setState({ values }, () => {
      this.formRef.current.setFieldsValue({
        ...info.node.props,
        // institutionId: info.node.props.institutionId,//event
        // day: moment(info.node.props.day)
      })
      console.log(info.node.props);
    })
  }

  //首次加载
  async institutionTree(params) {
    let arr = []
    return request('/api/admin/institution/list', {
      method: 'GET',
      data: params,
    }).then((testarr2) => {
      this.setState({ testarr: testarr2 }, () => {
        // console.log("testarr2")
        // console.log(this.state.testarr)
        // title: 'institutionId',
        // name: 'institutionName',
        // key: '0-0-0',
        const arr2 = this.state.testarr
        for (var i = 0; i < this.state.testarr.length; i++) {
          let list = {
            title: '',
            institutionName: 'institutionName',
            // name: 'institutionId',
            institutionId: 'institutionId',
            key: '0-0-0',
          }
          list.institutionName = arr2[i].institutionName
          list.title = arr2[i].institutionName
          list.institutionId = arr2[i].institutionId
          list.key = arr2[i].institutionId
          // '0' + i.toString
          arr.push(list)
        }
        // console.log("arr")
        // console.log(arr)
        this.setState({
          treeData: arr
        })

      })
      // console.log(this.getTreeData)
    })
  }




  UNSAFE_componentWillMount() {
    this.institutionTree([])

  }


  renderTreeNodes = data =>
    (data || []).map(item => {//初始化data
      if (item.children) {
        return (
          <TreeNode title={item.title} key={item.key} dataRef={item}  >
            {this.renderTreeNodes(item.children)}
          </TreeNode >
        );
      }
      return <TreeNode key={item.key} {...item} />;
    });





  render() {
    const { searchValue, autoExpandParent, expandedKeys, checkedKeys } = this.state;
    return (
      <Card>
        <Row >
          <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 0 }}>
            <Card>
              <FormItem
                label="管辖部门"
              >
                <Search style={{ marginBottom: 8 }} placeholder="Search" onChange={this.onChange} />
                <Tree
                  // api={apis.Institution.instIist}
                  // checkable
                  onExpand={this.onExpand}
                  expandedKeys={expandedKeys}
                  autoExpandParent={autoExpandParent}
                  // checkedKeys={checkedKeys}

                  showLine
                  // defaultExpandedKeys={['0-0']}
                  onSelect={this.onSelect}
                  treeData={this.state.treeData}
                // treeData={loop(gData)}
                // api={apis.Institution.instIist} 
                >
                  {this.renderTreeNodes(this.state.treeData)}
                  {/* 动态渲染 */}
                </Tree >
              </FormItem>
            </Card>
          </Col>
          <Col xs={{ span: 10, offset: 10 }} lg={{ span: 10, offset: 4 }}>
            <Card>
              <Tabs defaultActiveKey='1' onChange={this.callback}  >
                <TabPane tab='编辑' key='1'>
                  <TreedataFrom
                    ref={this.formRef}
                    api={apis.Institution.instiAlert}
                    triggerRef={this.bindRef}
                    onChangethis={this.onChangethis}
                    onSubmit={this.onChangethis}
                  />
                </TabPane>
                {/* <TabPane tab='新增' key='2'>
                  <TreedataAdd
                  >
                  </TreedataAdd>
                </TabPane> */}

              </Tabs>
            </Card>
          </Col>
        </Row>
      </Card>
    );
  }

}

export default TreeDemo