import React, { useEffect, useState } from 'react'
import useRequest from '@ahooksjs/use-request/es'

import { Button, Drawer, Modal, Tabs, TabsProps, message } from 'antd'
import { ReactComponent as Close } from 'assets/close.svg'

import { ColumnService, IColumnDetail } from 'Column/Column.service'
import styles from '../css/ColumnIndex.module.scss'
// 1:未发布，2:审核中 3:已发布 4:驳回
export enum ColumnStatus {
  Draft = 1, // 草稿
  Auditing = 2, // 审核中
  Published = 3, // 已发布
  Rejected = 4 // 已驳回
}
interface IColumnCenterProps {
  open: boolean // 是否打开
  onClose: (type: 'editInfo' | 'openCenter') => void // 关闭
}

/**研选专栏 */
const ColumnCenter: React.FC<IColumnCenterProps> = props => {
  const [isModalOpen, setIsModalOpen] = useState<boolean>(false) // 打开驳回理由
  const [reasonText, setReasonText] = useState<string>('') // 驳回理由
  const [centerList, setCenterList] = useState<IColumnDetail[]>([]) // 列表

  useEffect(() => {
    getColumnCenterList(1)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  // 列表
  const { run: getColumnCenterList, refresh } = useRequest(ColumnService.getColumnCenterList, {
    manual: true,
    formatResult: response => response.data.Data,
    onSuccess: res => {
      setCenterList(res)
    }
  })
  const { run: applyDelete } = useRequest(ColumnService.postDeleteNote, {
    manual: true,
    onSuccess: res => {
      res.data.Success ? message.success('删除成功') : message.error('删除失败')
      res.data.Success && refresh()
    }
  })
  const { run: applyCancel } = useRequest(ColumnService.postCancelNote, {
    manual: true,
    onSuccess: res => {
      res.data.Success ? message.success('取消成功') : message.error('取消失败')
      res.data.Success && refresh()
    }
  })
  const handleDelete = (id: number) => {
    Modal.confirm({
      title: '提醒',
      content: '确定要删除此内容吗?',
      okText: '确定',
      cancelText: '取消',
      centered: true,
      closable: true,
      onOk: () => {
        applyDelete(id)
      }
    })
  }
  const handleCancel = (id: number) => {
    Modal.confirm({
      title: '提醒',
      content: '取消发布后，内容将进入草稿箱，想要重新发布需重新提交审核，确定要取消发布吗?',
      okText: '确定',
      cancelText: '取消',
      centered: true,
      closable: true,
      onOk: () => {
        applyCancel(id)
      }
    })
  }
  const handleToUpdate = (columnId: number, id: number) => {
    window.open(`/column/editor/${columnId}/${id}`)
  }
  const handleOpenReason = (reason: string) => {
    setReasonText(reason)
    setIsModalOpen(true)
  }
  const handleToDetail = (id: number) => {
    window.open(`/column/detail/${id}`)
  }
  // 按钮render
  const renderBtn = (item: IColumnDetail) => {
    const btns: { [key: number]: React.ReactNode } = {
      [ColumnStatus.Draft]: (
        <div className="columncenter-operate g-flex g-flex-v-center">
          <div className="columncenter-operate-btn detele-btn" onClick={handleDelete.bind(this, item.Id)}>
            删除
          </div>
          <div
            className="columncenter-operate-btn update-btn m-l-sm"
            onClick={handleToUpdate.bind(this, item.SpecialColumnId, item.Id)}
          >
            修改
          </div>
        </div>
      ),
      [ColumnStatus.Auditing]: <></>,
      [ColumnStatus.Published]: (
        <div className="columncenter-operate g-flex g-flex-v-center">
          <div className="columncenter-operate-btn cancel-btn" onClick={handleCancel.bind(this, item.Id)}>
            取消发布
          </div>
        </div>
      ),
      [ColumnStatus.Rejected]: (
        <div className="columncenter-operate g-flex g-flex-v-center">
          <div className="columncenter-operate-btn detele-btn" onClick={handleOpenReason.bind(this, item.Reason)}>
            驳回理由
          </div>
          <div
            className="columncenter-operate-btn update-btn m-l-sm"
            onClick={handleToUpdate.bind(this, item.SpecialColumnId, item.Id)}
          >
            修改
          </div>
        </div>
      )
    }
    return btns[item.Status]
  }

  const items: TabsProps['items'] = [
    {
      key: '1',
      label: <span className="column-tabs">草稿箱</span>,
      children: (
        <div className="columncenter-content">
          {centerList?.map((item: IColumnDetail) => (
            <div key={item.Id} className="columncenter-content-item">
              <div className="columncenter-title" onClick={handleToDetail.bind(this, item.Id)}>
                {item.Title}
              </div>
              <div className="g-flex g-flex-between g-flex-v-center">
                <div className="columncenter-time">{item.ModifyTime}</div>
                {renderBtn(item)}
              </div>
            </div>
          ))}
        </div>
      )
    },
    {
      key: '3',
      label: <span className="column-tabs">已发布</span>,
      children: (
        <div className="columncenter-content">
          {centerList?.map((item: IColumnDetail) => (
            <div key={item.Id} className="columncenter-content-item">
              <div className="columncenter-tag">审核通过</div>
              <div className="columncenter-title" onClick={handleToDetail.bind(this, item.Id)}>
                {item.Title}
              </div>
              <div className="g-flex g-flex-between g-flex-v-center">
                <div className="columncenter-time">{item.PublishTime}</div>
                {renderBtn(item)}
              </div>
            </div>
          ))}
        </div>
      )
    },
    {
      key: '2',
      label: <span className="column-tabs">审核中</span>,
      children: (
        <div className="columncenter-content">
          {centerList?.map((item: IColumnDetail) => (
            <div key={item.Id} className="columncenter-content-item">
              <div className="m-b-xs columncenter-title" onClick={handleToDetail.bind(this, item.Id)}>
                {item.Title}
              </div>
              <div className="g-flex g-flex-between g-flex-v-center">
                <div className="columncenter-time">{item.PublishTime}</div>
                {renderBtn(item)}
              </div>
            </div>
          ))}
        </div>
      )
    },
    {
      key: '4',
      label: <span className="column-tabs">已驳回</span>,
      children: (
        <div className="columncenter-content">
          {centerList?.map((item: IColumnDetail) => (
            <div key={item.Id} className="columncenter-content-item">
              <div className="columncenter-title" onClick={handleToDetail.bind(this, item.Id)}>
                {item.Title}
              </div>
              <div className="g-flex g-flex-between g-flex-v-center">
                <div className="columncenter-time">{item.PublishTime}</div>
                {renderBtn(item)}
              </div>
            </div>
          ))}
        </div>
      )
    }
  ]

  const onChange = (key: string) => {
    setCenterList([])
    getColumnCenterList(Number(key))
  }
  const handleOnClose = () => {
    props.onClose('openCenter')
  }

  const handleCancelReject = () => {
    setIsModalOpen(false)
  }
  return (
    <Drawer
      title="内容中心"
      placement="right"
      width="625px"
      closable={false}
      onClose={handleOnClose}
      open={props.open}
      extra={<Close className="com-cursor-p" onClick={handleOnClose} />}
      className={styles['columnindex-drawer']}
    >
      <Modal
        title="驳回理由"
        open={isModalOpen}
        onCancel={handleCancelReject}
        footer={
          <Button type="primary" onClick={handleCancelReject}>
            知道了
          </Button>
        }
      >
        <div>{reasonText}</div>
      </Modal>
      <Tabs defaultActiveKey={'1'} items={items} onChange={onChange} className="columnindex-tab-wrapper" />
    </Drawer>
  )
}

export default ColumnCenter
