import { Row, Col, Spin } 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'
import { connect } from 'dva'

const PopContent = props => {
  const { dispatch, shouldUpdate, visible, id = '' } = props

  const [state, setState] = useState({
    loading: false,
    client: {},
    log: [],
    serviceLog: []
  })

  const initData = async () => {
    setState({ ...state, loading: true })
    const {
      data: { client = {}, log = [], serviceLog = [] },
      code = -1
    } = await apiContactDetail(id)
    if (code === consts.RET_CODE.SUCCESS) {
      if (shouldUpdate) {
        dispatch({
          type: 'refresh/commitAction',
          payload: 'contact'
        })
      }
      setState({ ...state, client, log, serviceLog, loading: false })
    }
  }
  useEffect(() => {
    if (shouldUpdate) {
      initData()
    }
  }, [shouldUpdate])
  useEffect(() => {
    visible && initData()
  }, [])
  return (
    <Spin spinning={state.loading}>
      <div className="sheet-box">
        <Row>
          <Col span={12} className="sheet-box-left">
            <div className="sheet-left-panel zh-pd-right-15">
              <ContanctForm client={state.client} />
            </div>
          </Col>
          <Col span={12}>
            <ContanctTabList />
            <ContanctLowerList log={state.log} servicelist={state.serviceLog} />
          </Col>
        </Row>
      </div>
    </Spin>
  )
}

export default connect(({ refresh, single }) => ({
  visible: single.drawer.visible,
  shouldUpdate: refresh.contact
}))(PopContent)