import React, { useEffect, useRef, useState } from 'react'
import { fetchList, fetch, apis } from '@/utils/request'
import moment from 'moment'
import { Icon, Table, Button, Popconfirm, Divider, notification } from 'antd'
import Prompt from '@/components/Prompt'

const getList = fetchList(apis.community.list)
const updateCommunity = fetch(apis.community.update)
const saveCommunity = fetch(apis.community.save)
const deleteCommunity = fetch(apis.community.delete)

export default props => {
  const [loading, setLoading] = useState(false)
  const [showPrompt, setShowPrompt] = useState(false)
  const [listData, setListData] = useState([])
  const [queryParams, setQueryParams] = useState({ pageNum: 1, pageSize: 100 })
  const selectedRow = useRef()

  const handleRowPrepare = row => {
    selectedRow.current = row
    setShowPrompt(true)
  }

  const handleStatusTrigger = row => {
    // 发布 -> 取消发布
    // 取消发布 -> 发布
    const status = Math.abs(row.status - 1)
    const data = { ...row, status }
    updateCommunity({data, urlData: {id: row.id}}).then(res => {
      notification.success({message: "操作成功"})
      // 触发数据刷新
      setQueryParams({...queryParams})
    })
  }

  const handleRowEdit = v => {
    if (!selectedRow.current) {
      // 新增
      const data = {name: v}
      saveCommunity({data}).then(res => {
        // 刷新页面
        setQueryParams({...queryParams})
      })
    } else {
      // 修改
      const data = {
        ...selectedRow.current,
        name: v
      }
      updateCommunity({data, urlData: {id: data.id}}).then(res => {
        // 刷新页面
        setQueryParams({...queryParams})
      })
    }

    setShowPrompt(false)
  }

  const handleDeleteRow = row => {
    deleteCommunity({ urlData: {id: row.id} }).then(res => {
      Modal.success({
        content: '删除内容成功',
        onOk: () => {
          // 触发数据刷新
          setQueryParams({...queryParams})
        }
      })
    })
  }

  useEffect(() => {
    setLoading(true)
    getList(queryParams).then(res => {
      const [list] = res
      setListData(list)
      setLoading(false)
    }).catch(e => console.error(e) || setLoading(false))
  }, [queryParams])

  return (
    <div>
      <div style={{marginBottom: 16}}>
        <Button type="primary" onClick={() => handleRowPrepare()}><Icon type="plug" />新增社区</Button>
      </div>
      <Table loading={loading} dataSource={listData} rowKey="id">
        <Table.Column title="名称" dataIndex="name" key="name" width={480} />
        {/* <Table.Column title="状态" dataIndex="status" key="status" render={t => t === 1 ? '正常' : '未发布'} /> */}
        <Table.Column title="创建时间" dataIndex="createDate" key="createDate" render={t => moment(t).format('YYYY-MM-DD HH:mm')} />
        <Table.Column
          title="操作"
          key="action"
          align="center"
          render={(_, row) => {
            return (
              <>
                <Popconfirm
                  title="确认进行删除操作?"
                  onConfirm={() => handleDeleteRow(row)}
                  okText="删除"
                  cancelText="取消"
                >
                  <Button type="link">删除</Button>
                </Popconfirm>
                <Divider type="vertical" />
                {/* <Popconfirm
                  title={`确认进行${row.status === 1? '取消发布' : '发布'}操作`}
                  onConfirm={() => handleStatusTrigger(row)}
                  okText={row.status === 1? '取消发布' : '发布'}
                  cancelText="取消"
                >
                  <Button type="link">{row.status === 1? '取消发布' : '发布'}</Button>
                </Popconfirm>
                <Divider type="vertical" /> */}
                <Button type="link" onClick={() => handleRowPrepare(row) }>编辑</Button>
              </>
            )
          }}
        />
      </Table>
      <Prompt visible={showPrompt} onOk={handleRowEdit} onCancel={() => setShowPrompt(false)} placeholder="请输入小区名称" />
    </div>
  )
}
