import React, { useEffect, useState } from 'react'
import { PageHeader, Descriptions, List, Steps, Row, Col, Rate  } from 'antd'
import { fetch, fetchList, apis } from '@/utils/request'

const TicketTypeDict = {
  '0': '投诉',
  '1': '报修',
  '2': '联系物业',
}

const RepairTypeDict = {
  '0': '公共区域',
  '1': '房屋质量',
  '2': '户内设施',
}

const imgGrid = {
  gutter: 16,
  xs: 1,
  sm: 2,
  md: 6,
  lg: 6,
  xl: 6,
  xxl: 10,
}

const getTicketDetail = fetch(apis.ticket.ticketEdit)

export default props => {
  const [loading, setLoading] = useState(false)
  const [ticketData, setTicketData] = useState({})
  const [approvalProcessList, setApprovalProcessList] = useState([])

  const ticketType = [
    TicketTypeDict[ticketData.type] || '',
    ticketData.type === '2' ? (RepairTypeDict[ticketData.repairType] || '') : ''
  ].join('-')

  const { id } = props.location.query

  useEffect(() => {
    getTicketDetail({data: {id}}).then(res => {
      const { recordList } = res || {}
      setTicketData(res)
      setApprovalProcessList(res)
    })
  }, [])

  return (
    <div>
      <PageHeader
        title={ticketData.ticketTitle}
        subTitle="工单详情"
        backIcon={false}
        style={{ borderBottom: '1px solid rgb(235, 237, 240)' }}
      >
        <Descriptions column={3}>
          <Descriptions.Item label="工单号">{ticketData.id}</Descriptions.Item>
          <Descriptions.Item label="工单类型">{ticketType}</Descriptions.Item>
          <Descriptions.Item label="发起时间">{ticketData.createDate}</Descriptions.Item>
          <Descriptions.Item label="发起人">{ticketData.createUserNmae}</Descriptions.Item>
          <Descriptions.Item label="联系方式">{ticketData.loginName}</Descriptions.Item>
          <Descriptions.Item label="负责人">{ticketData.tpUserNmae || '暂无'}</Descriptions.Item>
          <Descriptions.Item label="工单内容">{ticketData.ticketContent}</Descriptions.Item>
        </Descriptions>
        {
          ticketData.contentImageUrl && ticketData.contentImageUrl.length && (
            <List dataSource={ticketData.contentImageUrl} grid={imgGrid} renderItem={it => {
              <img src={it} alt="" style="width: 100%" />
            }} />
          )
        }
      </PageHeader>

      <div>
        <h4 style={{marginTop: '24px'}}>沟通记录</h4>
        <Steps progressDot direction="vertical" current={1}>
        {
          (approvalProcessList || {}).map(item => {
            return (
              <Steps.Step key={item.id} title={item.statusName} subTitle={item.createDate} description={(
                <div>
                  {
                    item.status - 0 === 5 && (
                      <Descriptions column={2}>
                        <Descriptions.Item label="评分"><Rate value={item.score}/></Descriptions.Item>
                        <Descriptions.Item label="时间"><Rate value={item.createDate}/></Descriptions.Item>
                        <Descriptions.Item label="评语">{item.comment}</Descriptions.Item>
                      </Descriptions>
                    )
                  }
                  {
                    item.statusContent && item.statusContent.length && (
                      item.statusContent.map(ctt => {
                        return (
                          <div>
                            <div>{ `${ctt.userName} : ${ctt.content}` }</div>
                            {
                              ctt.imgURL && ctt.imgURL.length && (
                                <List dataSource={ctt.imgURL} grid={imgGrid} renderItem={it => {
                                  <img src={it.imageUrl} alt="" style="width: 100%" />
                                }} />
                              )
                            }
                          </div>
                        )
                      })
                    )
                  }
                </div>
              )}/>
            )
          })
        }
        </Steps>
      </div>
    </div>
  )
}
