import React, { useRef, useState } from 'react'
import List from '@/components/Page/List'
import { Button, Tag, Image } from 'antd'
import { useNavigate } from 'react-router-dom'
import { getTaPost, deleteTaPost } from "@/services/taPost";

export default (props) => {
  const actionRef = useRef();
  const navigate = useNavigate();

  const columns = [
    {
      title: '标题',
      dataIndex: 'title',
      ellipsis: true,
    },
    {
      title: '描述',
      dataIndex: 'describe',
      ellipsis: true,
      search: false,
    },
    {
      title: '正文',
      dataIndex: 'content',
      render: (_, it) =>
        <div style={{ width: '9vw' }}>
          <div dangerouslySetInnerHTML={{ __html: it?.content }} style={{ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }} />
        </div>,
      search: false,
    },
    {
      title: '图片',
      dataIndex: 'images',
      render: (_, it) => it?.images ? <Image src={`${prefix}` + JSON.parse(it?.images)[0]} width={80} /> : null,
      search: false,
    },
    // {
    //   title: '横向封面',
    //   dataIndex: 'coverHorizontal',
    //   render: (_, it) => it?.coverHorizontal ? <Image src={`${prefix}` + it?.coverHorizontal} width={80} /> : null,
    //   search: false,
    // },
    // {
    //   title: '纵向封面',
    //   dataIndex: 'coverVertical',
    //   render: (_, it) => it?.coverVertical ? <Image src={`${prefix}` + it?.coverVertical} width={80} /> : null,
    //   search: false,
    // },
    {
      title: '标签',
      dataIndex: 'tags',
      search: false,
      render: (_, it) => it?.tags ? JSON.parse(it?.tags).map(it => <Tag color="red">{it}</Tag>) : null
    },
    {
      title: '作者',
      dataIndex: 'author'
    },
    {
      title: '链接',
      dataIndex: 'link',
      ellipsis: true,
      render: (_, it) =>
        <div style={{ width: '8vw' }}>
          <div style={{ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }}><a href="#">{it?.link}</a></div>
        </div>,
      search: false,
    },
    // {
    //   title: '附件',
    //   dataIndex: 'attachment',
    //   search: false,
    // }
  ]

  const onEdit = (it) => {
    navigate(`/article/edit?id=${it.postId}`)
  }

  const onDelete = (it) => {
    deleteTaPost(it.postId).then(res => {
      actionRef.current.reload();
    })
  }

  const onDetail = (it) => {
    navigate(`/article/detail?id=${it.postId}`)
  }

  return (
    <List
      rowKey="postId"
      columns={columns}
      actionRef={actionRef}
      onEdit={onEdit}
      onDelete={onDelete}
      // onDetail={onDetail}
      request={getTaPost}
      toolBarRender={() => [
        <Button
          key="2"
          type="primary"
          onClick={() => {
            navigate('/article/edit')
          }}
        >
          新增
        </Button>
      ]}
    />
  )
}