import React, { useState, useEffect } from 'react'
import '../index.scss'
import { Drawer, Row, Col } from 'antd'
import useAutoTable from '@/hooks/useAutoTable'
import consts from '@/consts'
import { apiSoftwareDetail } from '@/services/lock'
import LockForm from '@/components/PopContent/Locks/LockForm'
import LockLowerList from '@/components/PopContent/Locks/LockLowerList'
import LockTabList from '@/components/PopContent/Locks/LockTabList'

const Index = 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({
    longle: {},
    log: [],
    total: 0,
    longleLog: []
  })
  const initData = async () => {
    const {
      data: { longle = {}, log = [], longleLog = [] } = { longle: {}, longleLog: [] },
      code = -1
    } = await apiSoftwareDetail(id)
    if (code === consts.RET_CODE.SUCCESS) {
      setState({ ...state, longle, log, longleLog })
    }
  }
  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">
              <div className="sheet-left-panel zh-pd-right-15">
                <LockForm longle={state.longle} />
              </div>
            </Col>
            <Col span={12}>
              <LockTabList longleLog={state.longleLog} />
              <LockLowerList log={state.log} />
            </Col>
          </Row>
        </Drawer>
      </div>
    </div>
  )
}

export default Index