cldV2react/src/components/PopContent/Contacts/index.jsx

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 consts from '@/consts'

const Popcontent = props => {
  const { visible, onClose, id = '' } = props

  console.log(props)
  // 浏览器实际宽度
  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"
          width={clientWidth}
          closable
          onClose={onClose}
          visible={visible}
          // mask={false}
        >
          <Row>
            <Col span={12} className="sheet-box-left">
              <div className="sheet-left-panel zh-pd-right-15">
                <ContanctForm data={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)