import React, { useEffect, useRef, useState } from 'react'
import { Button, Modal, Icon, Divider, Popconfirm } from 'antd'
import { fetchList, fetch, apis } from '@/utils/request'
import CommList from '@/components/CommList'
import BannerDetail from './detail'

const getData = fetchList(apis.shop.banner.list)
const deleteData = fetch(apis.shop.banner.delete)

export default props => {

  const refreshData = useRef()
  const [currentDetail, setCurrent] = useState(null)
  const [visible, setVisible] = useState(false)

  const handleAdd = () => {
    setCurrent(null)
    setVisible(true)
  }

  const handleDetail = (record) => {
    setCurrent(record)
    setVisible(true)
  }

  const handleDelete = (record) => {
    setCurrent(null)
    deleteData({ urlData: { id: record.serialNo } }).then(() => {
      
      if (refreshData.current) {
        refreshData.current((list = []) => {
          const newList = list.filter(item => item.serialNo !== record.serialNo)
          return newList
        })
      }
    })
  }

  const handleSuccess = (data) => {
    setVisible(false)

    if (refreshData.current) {
      refreshData.current((list = []) => {
        let found = false
        const newList = list.map(item => {
          if (item.serialNo === data.serialNo) {
            found = true
            return data
          } else {
            return item
          }
        })

        return found ? newList : [data, ...newList]
      })
    }
  }
  
  const columns = [
    {
      title: 'Banner',
      dataIndex: 'thumb',
      key: 'thumb',
      render: imgURL => (
        <span>
          {imgURL && <img src={imgURL} width={64} height={64} />}
        </span>
      )
    },
    {
      title: '排序',
      dataIndex: 'sortNo',
      key: 'sortNo'
    },
    {
      title: '创建时间',
      dataIndex: 'createDate',
      key: 'createDate',
      render: dt => (
        <span>
          {(dt || '').substring(0,10)}
        </span>
      )
    },
    {
      title: '操作',
      key: 'action',
      render: (text, record) => (
        <span>
          <Button type="link" onClick={() => handleDetail(record)}><Icon type="edit" />详情</Button>
          <Divider type="vertical" />
          <Popconfirm
            title="确认删除?"
            icon={<Icon type="question-circle-o" style={{ color: 'red' }} />}
            onConfirm={() => handleDelete(record)}
          >
            <Button type="link" style={{ color: 'red' }}><Icon type="delete" />删除</Button>
          </Popconfirm>
        </span>
      ),
    },
  ];

  const tableProps = {
    columns,
    rowKey: 'serialNo'
  }

  return (
    <>
      <CommList
        table={tableProps}
        showFilterForm={false}
        fetchList={getData}
        refreshData={x => (refreshData.current = x)}
        onAdd={handleAdd}
        title="Banner列表"
      />
      <Modal visible={visible} footer={null}>
        <BannerDetail
          record={currentDetail}
          onSuccess={handleSuccess}
          onCancel={() => setVisible(false)}
          mode="inner"
        />
      </Modal>
    </>
  )
}
