import React, { useState } from 'react';
import { Tabs } from 'antd';
import { connect, history } from 'umi';

import ProvinceSelect from '@/components/ProvinceSelect';

import { secondTabName } from '@/utils/utils';
import { UserLevel, processTab } from '@/utils/constants';

import TableList from './TableList';

const { TabPane } = Tabs;

const Progress = (props) => {
  const { user, isLocationInBu, locationType } = props;
  const tabList = processTab(locationType);
  const [activeKey, setActiveKey] = useState('department');
  const [selectdProvince, setSelectdProvince] = useState('');
  const [selectdCity, setSelectdCity] = useState('');
  const [showProvinceSelect, setShowProvinceSelect] = useState(isLocationInBu);
  const [departmentMsg, setDepartmentMsg] = useState(null);
  const [provinceMsg, setProvinceMsg] = useState(null);
  const [cityMsg, setCityMsg] = useState(null);
  const [ifReload, setIfReload] = useState(null); // 页面是否要重新加载 为从待办跳转过来准备

  const changeTab = (key) => {
    setActiveKey(key);
    setShowProvinceSelect(isLocationInBu);
    setDepartmentMsg(null);
    setProvinceMsg(null);
    setCityMsg(null);
  };

  if (props.location.params) {
    // 监控路由参数 点击消息跳转过来的会带params参数
    const { type, msg, reload } = props.location.params; // type: 展示tab类型 msg: 消息带过来的查询条件
    if (reload === ifReload) {
      // 防止不断循环
      return false;
    }
    setIfReload(reload);
    if (type === 'department') {
      // 跳转到部级下发
      setActiveKey(type);
      setDepartmentMsg(msg);
    } else if (type === 'province') {
      // 跳转到省级下发
      setShowProvinceSelect(false);
      setActiveKey(type);
      setProvinceMsg(msg);
    } else if (type === 'city') { // 跳转到市级下发
      setShowProvinceSelect(false);
      setActiveKey(type);
      setCityMsg(msg);
    }
    history.push('/progresssearch'); // 清空参数 防止误判
  }

  const onSelectProvince = (key) => {
    setSelectdProvince(key);
    setActiveKey('province');
    setShowProvinceSelect(false);
  };

  const onSelectCity = (key) => {
    setSelectdCity(key);
    setActiveKey('city');
    setShowProvinceSelect(false);
  }

  const renderContent = () => {
    console.log(props.dispatch);
    if (activeKey === 'department') {
      return (
        <TableList
          refesh={Math.random()}
          msg={departmentMsg}
          isLocationInBu={isLocationInBu}
          locationType={locationType}
          type="bu"
          sysToken={isLocationInBu ? '' : 'bu'}
        />
      );
    }
    if (activeKey === 'province') {
      if (showProvinceSelect) {
        return (
          <ProvinceSelect
            onSelectProvince={onSelectProvince}
            sysToken={isLocationInBu ? selectdProvince : ''}
          />
        );
      } else {
        return (
          <TableList
            msg={provinceMsg}
            refesh={Math.random()}
            isLocationInBu={isLocationInBu}
            locationType={locationType}
            type='sheng'
            sysToken={isLocationInBu ? selectdProvince :  'sheng'}
          />
        );
      }
    }
     if (activeKey === 'city'){
      return <TableList
        msg={cityMsg}
        refesh={Math.random()}
        isLocationInBu={isLocationInBu}
        locationType={locationType}
        type='shi'
        sysToken={'shi'}
      />
     }

    // return (
    //   <TableList
    //     msg={provinceMsg}
    //     refesh={Math.random()}
    //     isLocationInBu={isLocationInBu}
    //     type="sheng"
    //     sysToken={isLocationInBu ? selectdProvince : ''}
    //     // sysToken={isLocationInBu ? '' : 'sheng'}
    //   />
    // );
  };

  return (
    <div>
      <Tabs activeKey={activeKey} onChange={changeTab}>
        {/* <TabPane tab="部级平台" key="department"></TabPane>
        <TabPane tab={secondTabName(user.departmentOrgLevel)} key="province"></TabPane>
        <TabPane tab='省级平台' key='province'></TabPane>
        <TabPane tab='市级平台' key='city' forceRender={true} hidden={locationType}></TabPane> */}
        {
          tabList.map((item) => {
            return (
              <TabPane  key={item.key}></TabPane>
            );
          })
        }
      </Tabs>
      {renderContent()}
    </div>
  );
};

export default connect(({ user }) => ({
  user: user.currentUser,
  isLocationInBu: user.isLocationInBu,
  locationType: user.locationType
}))(Progress);