import React, { useState, useEffect } from 'react'
import { Select, Spin, Table, Button, Form, Input, Divider, Typography } 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 TypeDict = [
  {
    label: '投诉',
    value: '1',
  },
  {
    label: '报修',
    value: '2',
  },
  {
    label: '联系物业',
    value: '3',
  },
]

const StatusDict = [
  {
    label: '待分配',
    value: '0',
  },
  {
    label: '拒绝处理',
    value: '1',
  },
  {
    label: '正在处理',
    value: '3',
  },
  {
    label: '待评价',
    value: '4',
  },
  {
    label: '已评价',
    value: '5',
  },
  {
    label: '已终止',
    value: '6',
  },
]

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

const listTicket = fetch(apis.ticket.listTicket)

const Condition = props => {
  return (
    <Search
      onSearch={props.onSearch}
      onReset={props.onReset}
      render={form => {
        const { getFieldDecorator, setFieldsValue } = form
        
        return (
          <>
            <Form.Item label="工单编号">
            {
              getFieldDecorator('id')(<Input placeholder="工单编号" />)
            }
            </Form.Item>
            <Form.Item label="类型">
            {
              getFieldDecorator('type')(
                <Select placeholder="选择类型" style={{ width: '120px' }}>
                  {
                    TypeDict.map(x => (<Select.Option key={x.value} value={x.value}>{x.label}</Select.Option>))
                  }
                </Select>
              )
            }
            </Form.Item>
            <Form.Item label="工单标题">
            {
              getFieldDecorator('ticketTitle')(<Input placeholder="工单标题" />)
            }
            </Form.Item>
            <Form.Item label="发起人">
            {
              getFieldDecorator('createUserNmae')(<Input placeholder="发起人" />)
            }
            </Form.Item>
            <Form.Item label="流转状态">
            {
              getFieldDecorator('status')(
                <Select placeholder="选择状态" style={{ width: '120px' }}>
                  {
                    TypeDict.map(x => (<Select.Option key={x.value} value={x.value}>{x.label}</Select.Option>))
                  }
                </Select>
              )
            }
            </Form.Item>
            <Form.Item label="处理人">
            {
              getFieldDecorator('updateUserNmae')(<Input placeholder="处理人" />)
            }
            </Form.Item>
          </>
        )
      }}
    />
  )
}

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

  useEffect(() => {
    setLoading(true)
    listTicket({data: queryParams}).then(res => {
      const {list, ...pagi} = res
      setListData(list)
      setPagination(pagi)
      setLoading(false)
    }).catch(e => 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="type" key="type" render={x => getDictValue(TypeDict, x)} />
        <Table.Column
          title="标题"
          dataIndex="ticketTitle"
          key="ticketTitle"
          render={(_, row) => {
            return (
              <NavLink to={`/property/bill/ticket/detail?id=${row.id}`}>
                <Button type="link">{row.ticketTitle}</Button>
              </NavLink>
            )
          }}
        />
        <Table.Column title="发起人" dataIndex="createUserNmae" key="createUserNmae" />
        <Table.Column title="发起时间" dataIndex="createDate" key="createDate" />
        <Table.Column title="流转状态" dataIndex="status" key="status" render={x => getDictValue(StatusDict, x)} />
        <Table.Column title="当前处理人" dataIndex="tpUserNmae" key="tpUserNmae" />
        <Table.Column title="最近操作时间" dataIndex="updateDate" key="updateDate" />
      </List>

    </div>
  )
}
