import Header from '@/components/Header'
import { useAutoTable, useContractTree, useTableExpand } from '@/utils/common/customHooks'
import Slot from '@/components/Header/slot'
import SvgIcon from '@/components/SvgIcon'
import { tenderStore } from '@/store/mobx'
import { ContractListTree } from '@/types/contract'
import consts from '@/utils/consts'
import { CaretDownOutlined } from '@ant-design/icons'
import { Button, Dropdown, Menu, Table } from 'antd'
import { ColumnsType } from 'antd/lib/table'
import React, { useEffect, useState } from 'react'
import { RouteComponentProps, withRouter } from 'react-router-dom'
import styles from './index.module.scss'
import { apiContractList } from '@/utils/common/api'
import { handleIntoBidsection } from '@/utils/util'
const List: React.FC<RouteComponentProps> = () => {
  const [ y ] = useAutoTable(66)
  const [ loading, setLoading ] = useState<boolean>(false)
  useEffect(() => {
    // 清除所有的缓存页面
    getTree()
  }, [])

  const getTree = async () => {
    setLoading(true)
    const { data, code = -1 } = await apiContractList(consts.BIDSECTION_TYPE.SAFE)
    if (code === consts.RET_CODE.SUCCESS) {
      setTree(data)
      setLoading(false)
    }
  }
  const [ tree, setTree ] = useContractTree()
  const [ expandedRowKeys, setRowKeys ] = useTableExpand(tree.children)

  const handleLinkClick = (id: string, name: string) => {
    tenderStore.saveTenderInfo({ bidsectionId: id, name })
    handleIntoBidsection("safe", id, name)
  }
  const columns: ColumnsType<ContractListTree> = [
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      width: '40%',
      render: (text: string, record: ContractListTree) => {
        if (record.isfolder) {
          return (
            <div className="pi-vertical-baseline">
              <SvgIcon type={record.hasFolder ? 'xxh-folder-open' : 'xxh-folder'} />
              <span className="pi-mg-left-2">{text}</span>
            </div>
          )
        } else {
          return (
            <div>
              <span className="expandIcon">{record.isEnd ? '└' : '├'}</span>
              <span className="pi-link-blue" onClick={() => handleLinkClick(record.bidsectionId, record.name)}>
                {text}
              </span>
            </div>
          )
        }
      }
    },
    {
      title: '总数',
      dataIndex: 'safeTotal',
      key: 'safeTotal'
    },
    {
      title: '待整改',
      dataIndex: 'safeRectification',
      key: 'safeRectification'
    },
    {
      title: '整改中',
      dataIndex: 'safeRectificationIn',
      key: 'safeRectificationIn'
    },
    {
      title: '已整改',
      dataIndex: 'safeRectificationFinish',
      key: 'safeRectificationFinish'
    }
  ]
  const handleMenuClick = ({ key }: any) => {
    if (key === 'expanded') {
      setRowKeys(true)
    } else {
      setRowKeys(false)
    }
  }
  const menu = (
    <Menu onClick={handleMenuClick}>
      <Menu.Item key="expanded">展开所有</Menu.Item>
      <Menu.Item key="collapsed">收起所有</Menu.Item>
    </Menu>
  )

  return (
    <div className="wrap-contaniner hide-menu pi-bg-white">
      <Header>
        <Slot>
          <Dropdown overlay={menu}>
            <Button type="text" size="small" className={styles.textBtn}>
              展开/收起
              <CaretDownOutlined />
            </Button>
          </Dropdown>
        </Slot>
      </Header>
      <div className={[ styles.tableContent, 'wrap-content' ].join(' ')}>
        <Table<ContractListTree>
          columns={columns}
          loading={loading}
          dataSource={tree.children}
          pagination={false}
          rowKey={record => record.id}
          indentSize={20}
          scroll={{ y }}
          expandable={{ expandedRowKeys, onExpand: setRowKeys }}
          bordered />
      </div>
    </div>
  )
}
export default withRouter(List)