import React, { useState, useEffect } from 'react'
import { Select, Spin, Table, Button, Form, Input, Divider, Modal,Popconfirm } from 'antd'
import NavLink from 'umi/navlink'
import { fetch, apis } from '@/utils/request'
import Search from '../components/Search'
import List from '../components/List'

const listAnnouncement = fetch(apis.announcement.listAnnouncement)
const deleteAnnouncement = fetch(apis.announcement.deleteAnnouncement)

const Condition = props => {
  return (
    <Search
      onSearch={props.onSearch}
      onReset={props.onReset}
      render={form => {
        const { getFieldDecorator } = form
        
        return (
          <>
            <Form.Item label="公告编号">
            {
              getFieldDecorator('announcementNumber')(<Input placeholder="公告编号" />)
            }
            </Form.Item>
            <Form.Item label="公告标题">
            {
              getFieldDecorator('announcementTitle')(<Input placeholder="公告标题" />)
            }
            </Form.Item>
          </>
        )
      }}
    />
  )
}

const StatusDict = {
  '0': '已作废',
  '1': '已发布',
  '2': '草稿'
}

export default props => {
  const [loading, setLoading] = useState(false)
  const [listData, setListData] = useState([])
  const [pagination, setPagination] = useState({})
  const [queryParams, setQueryParams] = useState({ pageNum: 1, pageSize: 10 })

  const handleSearch = vals => {
    setQueryParams({
      ...queryParams,
      ...vals,
      pageNum: 1,
    })
  }

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

  const handlePageChange = (pageNum, pageSize) => {
    setQueryParams({
      ...queryParams,      
      pageNum,
      pageSize,
    })
  }

  useEffect(() => {
    setLoading(true)
    listAnnouncement({ data: queryParams }).then(res => {
      console.log(res,"222")
      const { list, ...pageInfo } = res || {}
      setListData(list)
      setPagination(pageInfo)
      setLoading(false)
    }).catch(() => setLoading(false))
  }, [queryParams])

  return (
    <div>
      <Condition onSearch={handleSearch} onReset={handleSearch} />
      <div style={{ margin: '24px 0' }}>
        <NavLink to={`/property/notice/edit`}>
          <Button type="primary">添加</Button>
        </NavLink>
      </div>
      <List dataSource={listData} loading={loading} pagination={pagination} onPageChange={handlePageChange} rowKey="id">
        <Table.Column title="编号" dataIndex="id" key="id" />
        <Table.Column
          title="标题"
          dataIndex="announcementTitle"
          key="announcementTitle"
          render={(_, row) => {
            return (
              <NavLink to={`/property/notice/edit?id=${row.id}`}>
                <Button type="link">{row.announcementTitle}</Button>
              </NavLink>
            )
          }}
        />
        <Table.Column title="查看数量" dataIndex="viewCount" key="viewCount" />
        <Table.Column
          title="状态"
          dataIndex="status"
          key="status"
          render={(_, row) => {
            if (row.status === '1' && (row.updateDate > row.createDate)) {
              return '已修改'
            }

            return StatusDict[row.status]
          }}
        />
        <Table.Column title="发布时间" dataIndex="createDate" key="createDate" />
        <Table.Column title="发布人" dataIndex="createUserName" key="createUserName" />
        <Table.Column title="修改时间" dataIndex="updateDate" key="updateDate" />
        <Table.Column title="修改人" dataIndex="updateDateName" key="updateDateName" />
        <Table.Column
          title="操作"
          key="action"
          render={(_, row) => {
            return (
              <>
                <Popconfirm
                  title="确认进行作废操作?"
                  onConfirm={() => handleDeleteRow(row)}
                  okText="作废"
                  cancelText="取消"
                >
                  <Button type="link">删除</Button>
                </Popconfirm>
                <Divider type="vertical" />
                <NavLink to={`/property/notice/edit?id=${row.id}`}>
                  <Button type="link">编辑</Button>
                </NavLink>
              </>
            )
          }}
        />
      </List>

    </div>
  )
}
