import React from 'react'
import useRequest from '@ahooksjs/use-request/es'

import { ColumnService, IColumnDetail } from './Column.service'
import ColumnContent from './components/ColumnContent'
import ValidateLogin2p from 'components/ValidateLogin2p'
import ValidateEmpty from 'components/ValidateEmpty'
import { VmpNoAuthority } from 'components/Empty'
import styles from './css/ColumnDetail.module.scss'

interface IColumnCheckProps {
  articleId: number // 专栏ID
}

/**审查笔记/观点 */
const ColumnCheck: React.FC<IColumnCheckProps> = props => {
  // 详情
  const { data, loading, refresh } = useRequest(ColumnService.getColumnDetail, {
    defaultParams: [props.articleId],
    formatResult: response => response.data.Data
  })
  const formatRender = (data: IColumnDetail) => {
    if (data.IsApprovalAdmin) {
      return (
        <div className={`${styles['columndetail-page']}`}>
          <ColumnContent detail={data as IColumnDetail} onCollect={refresh} type="check" />
        </div>
      )
    }
    return (
      <div className={`${styles['columndetail-page']}`}>
        <VmpNoAuthority />
      </div>
    )
  }

  return (
    <ValidateLogin2p>
      <ValidateEmpty loading={loading} data={data}>
        {data && formatRender(data)}
      </ValidateEmpty>
    </ValidateLogin2p>
  )
}

export default ColumnCheck
