import { Row, Col, Spin, Tooltip, Drawer } from 'antd'
import React, { useState, useEffect } from 'react'
import ClientForm from './Form.jsx'
import ClientTabList from './TabList.jsx'
import ClientLowerList from './LowerList.jsx'
import { apiClientDetail } from '@/services/customer'
import consts from '@/consts'
import { connect } from 'umi'
import { Up, Down } from '@icon-park/react'
import { FlipOverEnum, useFlipOver } from '@/hooks/web/useFlipOver'

const ClientDetail = props => {
  const { refresh, visible, dispatch, updateKey = 'client', dataId, orderIds = [], ...resetDrawerProps } = props
  const shouldUpdate = refresh?.[dataId ?? updateKey] || false
  const [state, setState] = useState({
    loading: false,
    client: {},
    log: [],
    serviceLog: [],
    software: {}
  })

  const initData = async id => {
    setState({ ...state, loading: true })
    const {
      data: { client = {}, log = [], serviceLog = [], software = {} },
      code = -1
    } = await apiClientDetail(id)
    if (code === consts.RET_CODE.SUCCESS) {
      if (shouldUpdate) {
        dispatch({
          type: 'refresh/commitAction',
          payload: {
            main: updateKey,
            target: dataId
          }
        })
      }
      setState({ ...state, client, log, serviceLog, software, loading: false })
    }
  }

  const { flipFn, flipConsts } = useFlipOver(initData, dataId, orderIds)

  useEffect(() => {
    shouldUpdate && initData(dataId)
  }, [shouldUpdate])

  useEffect(() => {
    visible && initData(dataId)
  }, [visible])

  return (
    <Drawer {...resetDrawerProps} visible={visible} className="zh-drawer" contentWrapperStyle={{ width: 'unset' }}>
      <Spin spinning={state.loading}>
        <div className="sheet-box">
          <Row>
            <Col span={9} className="sheet-box-left">
              {orderIds.length ? (
                <div className="mb-3">
                  <Tooltip title="上一条记录">
                    <Up
                      fill={flipConsts.disableUpBtn ? '#BDBDBE' : '#886ab5'}
                      size="20"
                      onClick={() => flipFn(FlipOverEnum.UP)}
                      className={[flipConsts.disableUpBtn ? 'cursor-not-allowed' : 'cursor-pointer'].join(' ')}
                    />
                  </Tooltip>
                  <Tooltip title="下一条记录">
                    <Down
                      fill={flipConsts.disableDownBtn ? '#BDBDBE' : '#886ab5'}
                      size="20"
                      onClick={() => flipFn(FlipOverEnum.DOWN)}
                      className={[flipConsts.disableDownBtn ? 'cursor-not-allowed' : 'cursor-pointer', 'ml-1'].join(
                        ' '
                      )}
                    />
                  </Tooltip>
                </div>
              ) : null}
              <div className="sheet-left-panel pr-4">
                <ClientForm client={state.client} updatePayload={{ main: updateKey, target: dataId }} />
              </div>
            </Col>
            <Col
              span={15}
              // sm={{ span: 24 }}
              // md={{ span: 24 }}
              // lg={{ span: 15 }}
              // xl={{ span: 15 }}
              className="sheet-box-right">
              <ClientTabList
                clientId={state.client.id}
                software={state.software}
                updatePayload={{ main: updateKey, target: dataId }}
              />
              <ClientLowerList log={state.log} servicelist={state.serviceLog} />
            </Col>
          </Row>
        </div>
      </Spin>
    </Drawer>
  )
}

export default connect(({ refresh }) => ({
  refresh
}))(ClientDetail)