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

const ellipsisType = [3, 4, 6]

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

    ellipsisFlag = []

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

        state.codes = await getDictData('house_log_type')

        if (id) {
            const { data } = await api.houseLogList({ id })
            state.data = data
        } else if (infoId) {
            const { data } = await api.houseLogListByInfoId({ id: infoId })
            state.data = data
        } 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, data, ellipsis } = this.state

        let button = false

        return (
            <Spin spinning={loading} indicator={<AntIcon type="loading" />}>
                <Timeline mode="left">
                    {data.map((item, i) => {
                        let show = true
                        if (
                            ellipsisType.includes(item.type) &&
                            !this.ellipsisFlag.includes(item.type)
                        ) {
                            this.ellipsisFlag.push(item.type)
                        } else if (
                            ellipsisType.includes(item.type) &&
                            this.ellipsisFlag.includes(item.type)
                        ) {
                            show = false
                        }
                        if (show || !ellipsis) {
                            return (
                                <Timeline.Item
                                    key={i}
                                    dot={
                                        item.type === 6 ? (
                                            <AntIcon type="close-circle" className="text-error" />
                                        ) : (
                                            [
                                                ,
                                                <AntIcon type="clock-circle" />,
                                                <AntIcon
                                                    type="check-circle"
                                                    className="text-success"
                                                />,
                                            ][item.status]
                                        )
                                    }
                                >
                                    <h6 className="h6">
                                        <b>
                                            {['等待', '正在', ''][item.status] +
                                                this.bindCodeValue(item.type, 'house_log_type')}
                                        </b>
                                    </h6>
                                    <p className="text-gray">{item.finishedTime}</p>
                                    <Descriptions
                                        column={1}
                                        colon={false}
                                        labelStyle={{ opacity: 0.5 }}
                                    >
                                        {item.remark && (
                                            <Descriptions.Item>{item.remark}</Descriptions.Item>
                                        )}
                                        <Descriptions.Item label="操作人">
                                            {item.targetUserNames.split(',').join(' / ')}
                                        </Descriptions.Item>
                                        {item.finishedUserName && (
                                            <Descriptions.Item label="实际操作人">
                                                {item.finishedUserName}
                                            </Descriptions.Item>
                                        )}
                                    </Descriptions>
                                </Timeline.Item>
                            )
                        } else if (!button) {
                            button = true
                            return (
                                <Button
                                    size="large"
                                    type="text"
                                    icon={<AntIcon type="ellipsis" />}
                                    className="mt-md mb-md"
                                    onClick={() => this.setState({ ellipsis: false })}
                                />
                            )
                        }

                        return <></>
                    })}
                </Timeline>
            </Spin>
        )
    }
}