import React from 'react';
import { Form, Input, Button, Select, Tabs, message, Radio, Checkbox, Row, Col, Card } from 'antd';
import LogoTitlte from '../../components/LogoTitlte/index';
import { Jsme } from 'jsme-react';
import qs from 'qs';
import request from '../../utils/request';
import './index.css';
const { TabPane } = Tabs;
const { Option } = Select;
const { Meta } = Card;

class Home extends React.Component {
  state = {
    // list: qs.parse(this.props.location.search.slice(1))
    list: [],
    permissionList: [],
  };
  componentDidMount() {
    if (qs.parse(this.props.location.search.slice(1))) {
      // debugger
      let list = qs.parse(this.props.location.search.slice(1));
      // const perList=[
      //   {name:'小分子数据',
      //   sublist:[
      //     {}
      //   ]
      // }
      // ]
      console.log('list', list);

      let arr = Array.from(Object.values(list), (x) => x);
      const newList = [
        {
          type: 1,
          typeNameCn: '小分子数据',
          typeName: 'Small Molecule Data Visualization',
          sublist: [],
        },
        {
          type: 2,
          typeNameCn: '小分子计算',
          typeName: 'Calculation Platform',
          sublist: [],
        },
        {
          type: 3,
          typeNameCn: '大分子数据',
          typeName: 'AntiBody Data Visualization',
          sublist: [],
        },
      ];
      arr.forEach((item) => {
        if (item.type == 1) {
          newList[0].sublist.push(item);
        } else if (item.type == 2) {
          newList[1].sublist.push(item);
        } else if (item.type == 3) {
          newList[2].sublist.push(item);
        }
      });
      console.log('newList', newList);
      this.setState({
        list: newList,
      });
    }
  }
  getList = (e) => {
    this.setState({
      list: e,
    });
  };
  getantibodyName = (e) => {
    const { value } = e.target;
    let searchData = this.state.searchData;
    searchData.antibodyName = value;
    this.setState(() => ({ searchData: searchData }));
  };
  getAntigenName = (e) => {
    const { value } = e.target;
    let searchData = this.state.searchData;
    searchData.antigenName = value;
    this.setState(() => ({ searchData: searchData }));
  };
  getClinicalIndication = (e) => {
    const { value } = e.target;
    let searchData = this.state.searchData;
    searchData.clinicalIndication = value;
    this.setState(() => ({ searchData: searchData }));
  };
  getCompanies = (e) => {
    const { value } = e.target;
    let searchData = this.state.searchData;
    searchData.companies = value;
    this.setState(() => ({ searchData: searchData }));
  };
  getSpecies = (e) => {
    let searchData = this.state.searchData;
    searchData.species = e;
    this.setState(() => ({ searchData: searchData }));
  };
  getAntibodyType = (e) => {
    let searchData = this.state.searchData;
    searchData.antibodyType = e;
    this.setState(() => ({ searchData: searchData }));
  };
  getStatus = (e) => {
    let searchData = this.state.searchData;
    searchData.status = e;
    this.setState(() => ({ searchData: searchData }));
  };
  getValue = (e) => {
    const { value } = e.target;
    let searchData = this.state.searchData;
    searchData.antibodyName = value;
    this.setState(() => ({ searchData: searchData }));
  };
  getClassList() {
    console.log(qs.parse(this.props.location.search.slice(1)));
    this.setState({ loading: true });
    request
      .get('/common/codes')
      .then((res) => {
        console.log(res);
        if (res.data.code === 0) {
          console.log(res.data.data);
          this.setState({ SelectList: res.data.data.species });
          this.setState({ AntibodyTypeList: res.data.data.antibodyType });
          this.setState({ StatusList: res.data.data.status });
          this.setState({ loading: false });
        } else {
          message.error(res.data.msg);
        }
      })
      .catch((err) => {
        console.error(err);
      });
  }
  getindication = (e) => {
    const { value } = e.target;
    let searchData = this.state.searchData;
    searchData.indication = value;
    this.setState(() => ({ searchData: searchData }));
  };
  getTargetData = (e) => {
    const { value } = e.target;
    let searchData = this.state.searchData;
    searchData.target_data = value;
    this.setState(() => ({ searchData: searchData }));
  };

  onChangeRadio = (e) => {
    console.log(e.target.value);
    let value = e.target.value;
    let searchData = this.state.searchData;
    searchData.pdb_status = value;
    this.setState({
      searchData: searchData,
    });
  };
  SearchIndication = () => {
    let data = {
      clinicalIndication: this.state.searchData.clinicalIndication,
    };
    this.props.history.push({
      pathname: '/home/AutoimmuneDiseases',
      search: qs.stringify(data),
    });
  };

  getList = () => {
    let data = this.state.searchData;
    this.props.history.push({
      pathname: '/home/StructureSearch',
      search: qs.stringify(data),
    });
  };
  getDraw = () => {
    this.setState(() => ({ draw: !this.state.draw }));
  };
  compoundChange = (e) => {
    console.log(e);
    let searchData = this.state.searchData;
    searchData.drugs_type = e;
    this.setState(() => ({ searchData: searchData }));
    console.log(this.state.searchData);
  };
  callback = (e) => {
    console.log(e);
    let searchData = this.state.searchData;
    searchData.name = e;
    this.setState(() => ({ searchData: searchData }));
    console.log(this.state.searchData);
  };
  getJsme = () => {
    console.log(1);
  };
  getListOne = (e) => {
    console.log(1111);
    let newList = this.state.list;
    console.log(e);
    newList.forEach((item, index) => {
      item.state = false;
      if (e === index) {
        item.state = true;
      }
    });
    this.setState({
      list: newList,
    });
  };
  getOne = (e) => {
    console.log('token=========', e + `?token=${localStorage.getItem('token')}`);
    window.open(e + `?token=${localStorage.getItem('token')}`);
  };

  render() {
    const { list } = this.state;

    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 12 },
    };
    const formTailLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 12, offset: 8 },
    };
    const formTailLayout2 = {
      labelCol: { span: 8 },
      wrapperCol: { span: 13, offset: 8 },
    };
    return (
      <div className='Docking-div'>
        <div className='Docking-center'>
          <div className='logo-topdiv'>
            <img alt='example' style={{ height: '100%', padding: '0px' }} src={require('../../assets/img/logo.png')} />
          </div>
          <div className='top-div'>
            <Card
              style={{
                width: '100%',
                // backgroundColor: "#00FF00",
                textAlign: 'center',
                fontSize: '30px',
                fontWeight: 600,
                height: '150px',
                lineHeight: '100px',
              }}
            >
              <div className='Computational-div'>
                <div>Welcome To Yashen Platform</div>
              </div>
            </Card>
          </div>

          <div className='home-center'>
            <div className='left-div'>
              <div className='mol-png'>
                <img alt='example' style={{ height: '100%', padding: '0px' }} src={require('../../assets/img/mol.png')} />
              </div>
              <div className='antibody-png'>
                <img alt='example' style={{ height: '100%', padding: '0px' }} src={require('../../assets/img/antibody.png')} />
              </div>
            </div>
            <div className='center-div'>
              {list &&
                list.length > 0 &&
                list.map((item, index) => {
                  return (
                    <div className='item-type' onClick={() => this.getListOne(index, item.name)} key={index}>
                      <div className='type-name'>{item.sublist.length > 0 && item.typeName}</div>
                      <div className='link-btn'>
                        {item.sublist &&
                          item.sublist.length > 0 &&
                          item.sublist.map((ele, index) => {
                            return (
                              <Button size='large' onClick={() => this.getOne(ele.url)} key={index}>
                                {ele.name}
                              </Button>
                            );
                          })}
                      </div>
                    </div>
                  );
                })}
            </div>
            <div className='right-div'>
              <div className='gene-png'>
                <img alt='example' style={{ height: '100%', padding: '0px' }} src={require('../../assets/img/gene.png')} />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Home;
