import { Drawer, Row, Col } from 'antd'
import React, { useState, useEffect } from 'react'
import '../index.scss'
import ContanctForm from '@/components/PopContent/Contacts/ContanctForm.jsx'
import ContanctTabList from '@/components/PopContent/Contacts/ContanctTabList.jsx'
import ContanctLowerList from '@/components/PopContent/Contacts/ContanctLowerList.jsx'
import { apiContactDetail } from '@/services/contact'
import useAutoTable from '@/hooks/useAutoTable'
import consts from '@/consts'

const Popcontent = props => {
  const { visible, onClose,collapsed, id = '' } = props
  const needSubtractHeight = 55 // 需要被裁掉的高度
  // const needSubtractWidth = (collapsed ? 208 : 48) + 48 + 48 + 48 // 需要被裁掉的高度
  const [x,y] = useAutoTable(collapsed, needSubtractHeight)


  // 浏览器实际宽度
  const [clientWidth, setClientWidth] = useState(document.body.clientWidth * 0.75)
  const [state, setState] = useState({
    client: {},
    log: []
  })

  const initData = async () => {
    const {
      data: { client = {} },
      code = -1
    } = await apiContactDetail(id)
    if (code === consts.RET_CODE.SUCCESS) {
      setState({ ...state, client })
    }
  }
  useEffect(() => {
    if (visible) {
      initData()
    }
    window.addEventListener('resize', () => {
      setClientWidth(document.body.clientWidth * 0.7)
    })
    return () => {
      window.removeEventListener('resize', () => {})
    }
  }, [visible])
  return (
    <div>
      <div className='sheet-box'>
        <Drawer
          title="联系人"
          placement="right"
          bodyStyle={{
            height:y,
            overflowY:'hidden'
          }}
          width={clientWidth}
          closable
          onClose={onClose}
          visible={visible}
          // mask={false}
        >
          <Row>
            <Col span={12} className="sheet-box-left" style={{ height:y-25,overflowY:'auto' }}>
              <div className="sheet-left-panel zh-pd-right-15">
                <ContanctForm client={state.client} />
              </div>
            </Col>
            <Col span={12}>
              <ContanctTabList />
              <ContanctLowerList />
            </Col>
          </Row>
        </Drawer>
      </div>
    </div>
  )
}

export default Popcontent

// export default connect(({ journallist, loading }) => ({
//   journalName: journallist,
//   getlist: loading.effects['journallist/fetch']
// }))(Popcontent)