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

const StatusDict = [
  {
    label: '未发布',
    value: 0,
  },
  {
    label: '已发布',
    value: 1,
  },
]

const getDictValue = (dict, val) => (dict.filter(x => x.value === val)[0] || {}).label

const getList = fetchList(apis.ticket.repairType.getList)
const deleteType = fetch(apis.ticket.repairType.deleteType)

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 handlePageChange = (pageNum, pageSize) => {
    setQueryParams({
      ...queryParams,      
      pageNum,
      pageSize,
    })
  }

  const handleDeleteRow = row => {
    deleteType({urlData: {id: row.typeId}}).then(res => {
      notification.success({message: '删除数据成功'})
      setQueryParams({...queryParams})
    })
  }

  useEffect(() => {
    setLoading(true)
    getList({params: queryParams}).then(res => {
      const [list, pagi] = res
      setListData(list)
      setPagination(pagi)
      setLoading(false)
    }).catch(e => setLoading(false))
  }, [queryParams])

  return (
    <div>
      <div style={{ margin: '24px 0' }}>
        <NavLink to={`/property/repair-type/edit`}>
          <Button type="primary">添加</Button>
        </NavLink>
      </div>
      <List dataSource={listData} loading={loading} pagination={pagination} onPageChange={handlePageChange} rowKey="typeId">
        <Table.Column title="名称" dataIndex="typeName" key="typeName" />
        <Table.Column
          title="图标"
          dataIndex="icon"
          key="icon"
          render={x => <img src={x} alt="" style={{width: '64px', height: '64px'}} />}
        />
        <Table.Column title="状态" dataIndex="status" key="status" render={x => getDictValue(StatusDict, x)} />
        <Table.Column title="创建时间" dataIndex="createdTime" key="createdTime" />
        <Table.Column title="最近操作时间" dataIndex="updatedTime" key="updatedTime" />
        <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/repair-type/edit?id=${row.typeId}`}>
                  <Button type="link">编辑</Button>
                </NavLink>
              </>
            )
          }}
        />
      </List>

    </div>
  )
}
