import React, { useState, useEffect, useContext, componentWillReceiveProps } from 'react';
import { Form, Input, Button, Table, Select, Pagination, Space, TreeSelect, Tag } from 'antd';
import { DownOutlined, PlusOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import apiObj from '@api/index';
import { useSelector } from 'react-redux'
import utils from '@utils/index'
import { getOverflowOptions } from 'antd/lib/tooltip/placements';
const { post, api, xPost } = apiObj;
const { Option } = Select;
const { SHOW_PARENT } = TreeSelect;
const { organizationData } = utils;
function DoctorList(props) {
  useEffect(() => {
    getDoctorPage();
    getHospitalTree()
  }, []);
  
  const { checkeds,checkDoct } = props;
  const [form] = Form.useForm();
  const [doctorList, setDoctorList] = useState([]);
  const [name, setName] = useState("");
  const [phone, setPhone] = useState("");
  const [pages, setPages] = useState("1");
  const [current, setCurrent] = useState("5");
  const [treeData, setTreeData] = useState([]);
  // const [selectedRowKeys, setSelectedRowKeys] = useState();
  const [addHospitalTreeVO, setAddHospitalTreeVO] = useState({
    depts: [],
    hospitals: []
  });
  const selectedRowKeys = checkeds.selectedRowKeys ? checkeds.selectedRowKeys.slice() : []
  console.log(selectedRowKeys)
  //获取可看医生列表
  function getDoctorPage() {
    const param = {
      pages: pages,
      current: current,
      mobilePhone: phone,
      name: name,
      depts: addHospitalTreeVO.depts,
      hospitals: unique(addHospitalTreeVO.hospitals)
    }
    post(api.getDoctorPage, param).then((res) => {
      if (res.data.code === 200) {
        const data = res.data.data;
        setDoctorList(data.records);
      }
    })
  }
  //获取当前用户组织
  function getHospitalTree() {
    post(api.getHospitalTree).then((res) => {
      if (res.data.code === 200) {
        const data = res.data.data;
        let arr = data ? data : []
        arr = organizationData(arr)
        setTreeData(arr)
      }
    })
  }
  // 去重
  function unique(arr) {
    return arr.filter(function (item, index, arr) {
      return arr.indexOf(item, 0) === index;
    });
  }
  const onFinish = (value) => {
    getDoctorPage(value);
  };
  const onReset = () => {
    form.resetFields();
    getDoctorPage();
  };
  const handleName = (event) => {
    setName(event.target.value)
  }
  const handlePhone = (event) => {
    setPhone(event.target.value)
  }

  const columns = [
    { title: '姓名', dataIndex: 'name', key: 'index' },
    { title: '电话号码', dataIndex: 'mobilePhone', key: 'index' },
    { title: '所属组织', dataIndex: 'hospitalName', key: 'index' },
  ]
  const onChange = value => {
    let addHospitalTreeVO = {
      depts: [],
      hospitals: []
    }
    value.forEach(it => {
      let arr = it.split('-')
      let len = arr.length
      if (len == 3) {
        addHospitalTreeVO.depts.push(arr[2])
      } else {
        addHospitalTreeVO.hospitals.push(arr[1])
        treeData.forEach(item => {
          if (item.value.split('-')[1] == arr[1]) {
            item.children.forEach(its => {
              addHospitalTreeVO.depts.push(its.value.split('-')[2])
            })
          }
        })
      }
    })
    setAddHospitalTreeVO(addHospitalTreeVO)
  };
  function onSelectChange(selectedRowKeys) {
    checkDoct(selectedRowKeys)
  }
  function submit() {
    getDoctorPage()
  }
  return (
    <div className="wrapper">
      <div className="doctor_header">
        <div className="doctor_header_left">
          <div className="left_item">
            姓名：<Input placeholder="用户名" onChange={e => handleName(e)} style={{ width: 160 }} />
          </div>
          <div className="left_item">
            手机号码：<Input placeholder="用户名" onChange={e => handlePhone(e)} style={{ width: 160 }} />
          </div>
          <div className="left_item">
            所属组织：
            <TreeSelect
              showSearch={false}
              treeData={treeData}
              onChange={onChange}
              treeCheckable
              maxTagCount={1}
              showCheckedStrategy={SHOW_PARENT}
              placeholder="请选择组织"
              style={{ width: 160 }}
            />
          </div>
          <div className="left_item">
            <Space size="middle">
              <Button onClick={onReset}>
                重置
              </Button>
              <Button type="primary" onClick={submit}>
                查询
              </Button>
            </Space>
          </div>
        </div>
      </div>

      <div className="table">
        <div className="table-header">
          <span className="table-header-title">医生列表</span>
        </div>

        <Table
          rowSelection={{
            selectedRowKeys,
            onChange: onSelectChange,
          }}
          columns={columns}
          dataSource={doctorList}
          rowKey={record => record.id + '-' + record.name}
          pagination={{
            showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条数据`,
            pageSizeOptions: ['15', '30', '60', '120'],
            pageSize: 5,
          }} />
      </div>
    </div>
  )
}
export default DoctorList;