import React, { useState, useMemo, useEffect } from 'react'
import { Button, Modal, Spin, Popover, Table, Descriptions, Tooltip } from 'antd'

import { dispatch } from '../../../../model'
import { highlightSearchContentByTerms } from '../../../../util'
import ServiceDetail from './ServiceDetail'

const FC = (props) => {
  const { visible, id, onClose, terms } = props

  const close = () => {
    onClose?.()
  }

  return (
    <Modal
      width={1200}
      visible={visible}
      destroyOnClose
      title='服务详情'
      bodyStyle={{ minHeight: 300 }}
      footer={<>
        <Button onClick={close}>取消</Button>
      </>}
      onCancel={close}
    >
    { visible && <ServiceDetail id={id} terms={terms} /> }
    </Modal>
  )

}

export default FC
