import Header from '@/components/Header'
import Slot from '@/components/Header/slot'
import SvgIcon from '@/components/SvgIcon'
import { tenderStore } from '@/store/mobx'
import { ContractTree } from '@/types/contract'
import consts from '@/utils/consts'
import { CaretDownOutlined } from '@ant-design/icons'
import { Button, Dropdown, Menu, message, Table } from 'antd'
import { ColumnsType } from 'antd/lib/table'
import React, { useEffect, useState } from 'react'
import { useAliveController } from 'react-activation'
import { RouteComponentProps, withRouter } from 'react-router-dom'
import { apiContractList } from './api'
import styles from './index.module.scss'
import './index.scss'
const List: React.FC<RouteComponentProps> = (props) => {
  const { clear } = useAliveController()
  useEffect(() => {
    // 清除所有的缓存页面
    clear()
    getTree()
  }, [])
  const [ tree, setTree ] = useState({
    bidsectionId: '',
    children: [],
    childsTotal: 0,
    contracts: 0,
    contractsIncome: '',
    contractsIncomeProgress: '',
    contractsPaid: '',
    contractsPay: '',
    contractsPayProgress: '',
    contractsReturned: '',
    csrf: '',
    hasFolder: false,
    id: '',
    isBid: false,
    isEnd: false,
    isfolder: 0,
    name: '',
    parentId: '',
    projectId: '',
    qualityRectificationIn: 0,
    qualityTotal: 0,
    safeRectification: 0,
    safeRectificationIn: 0,
    safeTotal: 0,
    qualityRectification: 0
  })
  const getTree = async () => {
    const { data, code = -1 } = await apiContractList()
    if (code === consts.RET_CODE.SUCCESS) {
      setTree(data)
    }
  }

  const linkHandler = (id: string, name: string) => {
    tenderStore.saveTenderInfo({ bidsectionId: id, name })
    props.history.push('/console/safe/content/summary')
  }
  const columns:ColumnsType<ContractTree> = [
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      width: '40%',
      render: (text: string, record: ContractTree) => {
        if (record.isfolder) {
          return <div style={{ verticalAlign: "baseline" }}><SvgIcon type={record.hasFolder ? "xxh-folder-open" : "xxh-folder"} /><span className="pi-mg-left-2">{text}</span></div>
        } else {
        return <div><span style={{ color: '#6c757d', marginRight: '.5rem' }}>{record.isEnd ? '└' : '├'}</span>
          {/* <Link to={{ pathname: '/console/safe/content/summary', search: `?bid=${record.id}` }}>{text}</Link> */}
          <span className="pi-link-blue" onClick={() => linkHandler(record.bidsectionId, record.name)}>{text}</span>
        </div>
        }
      }
    },
    {
      title: '总数',
      dataIndex: 'safeTotal',
      key: 'safeTotal'
    },
    {
      title: '待整改',
      dataIndex: 'safe_rectification',
      key: 'safe_rectification'
    },
    {
      title: '整改中',
      dataIndex: 'safe_rectification_in',
      key: 'safe_rectification_in'
    },
    {
      title: '已整改',
      dataIndex: 'safe_rectification_finish',
      key: 'safe_rectification_finish'
    }
  ]
  const handleMenuClick = ({ key }: any) => {
    message.info(`Click on item ${key}`)
  }
  const menu = (
    <Menu onClick={handleMenuClick}>
      <Menu.Item key="1">展开所有</Menu.Item>
      <Menu.Item key="2">收起所有</Menu.Item>
    </Menu>
  )

  return (
    <div className="list-content">
      <Header>
        <Slot>
          <Dropdown overlay={menu}>
            <Button type="text" size="small" className={styles.textBtn}>展开/收起<CaretDownOutlined /></Button>
          </Dropdown>
        </Slot>
      </Header>
      <div className={styles.tableContent}>
        <Table<ContractTree>
          columns={columns}
          dataSource={tree.children}
          pagination={false}
          rowKey={record => record.id}
          indentSize={20}
          bordered
        >
        </Table>
      </div>
    </div>
  )
}
export default withRouter(List)