import React, { Component } from 'react'
import { Spin, Steps, Timeline } from 'antd'
import { AntIcon } from 'components'
import { api } from 'common/api'
import getDictData from 'util/dic'
import { toCamelCase } from 'util/format'

export default class houseLog extends Component {
    state = {
        loading: true,
        codes: {
            houseLogType: [],
        },
        data: [],
    }

    async componentDidMount() {
        const { id, infoId, taskId } = this.props
        const state = { loading: false }

        state.codes = await getDictData('house_log_type')

        if (id) {
        } else if (infoId) {
        } else if (taskId) {
            const { data } = await api.houseLogListByTaskId({ id: taskId })
            state.data = data
        }
        this.setState(state)
    }

    bindCodeValue(code, name) {
        name = toCamelCase(name)
        const codes = this.state.codes[name]
        if (codes) {
            const c = codes.find(p => p.code == code)
            if (c) {
                return c.value
            }
        }
        return null
    }

    render() {
        const { loading, codes, data } = this.state

        return (
            <Spin spinning={loading} indicator={<AntIcon type="loading" />}>
                <Timeline mode="left">
                    {data.map((item, i) => (
                        <Timeline.Item
                            key={i}
                            dot={
                                [
                                    ,
                                    <AntIcon type="clock-circle" />,
                                    <AntIcon type="check-circle" />,
                                ][item.status]
                            }
                        >
                            <h5 className="h5">
                                {this.bindCodeValue(item.type, 'house_log_type')}
                            </h5>
                            <p className="text-gray">{item.updatedTime}</p>
                            <p>{item.targetUserNames}</p>
                        </Timeline.Item>
                    ))}
                </Timeline>
            </Spin>
        )
    }
}