import React, { Component } from 'react'
import { Alert, Col, Empty, Row, Table, Tag } from 'antd'
import { AntIcon, Container } from 'components'
import { api } from 'common/api'

export default class preview extends Component {
    state = {
        loading: {
            indicator: <AntIcon type="loading" />,
        },
        data: [],
        stage: null,
        count: 0,
    }

    columns = [
        {
            align: 'center',
            width: 80,
            render: (text, record) => {
                switch (record.status) {
                    case 1:
                        return <Tag color="green">NEW</Tag>
                    case 0:
                    default:
                        return null
                    case -1:
                        return <AntIcon type="WarningFilled" className="h5 text-danger" />
                }
            },
        },
        {
            dataIndex: 'code',
            title: '机构备案编号',
            render: (text, record) => {
                switch (record.status) {
                    case 1:
                    case 0:
                    default:
                        return text
                    case -1:
                        return <s className="text-danger">{text}</s>
                }
            },
        },
        {
            dataIndex: 'name',
            title: '机构名称',
        },
        {
            dataIndex: 'address',
            title: '地址',
        },
    ]

    componentDidMount() {
        this.props.created && this.props.created(this)
    }

    async fillData() {
        const state = {
            loading: false,
        }
        const { data } = await api.inspectionOrgDirPreview()

        if (data) {
            const { stage, count, list } = data
            Object.assign(state, {
                data: list,
                stage,
                count,
            })
        }

        this.setState(state)
    }

    async getData() {
        return null
    }

    render() {
        const { loading, data, stage, count, publishing } = this.state

        if (stage) {
            return (
                <>
                    <br />
                    <Container mode="fluid">
                        <Row justify="space-between">
                            <h5>
                                新名录发布期号<span className="h3 text-primary">{stage.no}</span>
                                ，机构合计
                                <span className="h3 text-primary">{count}</span>个
                            </h5>
                            <Alert
                                type="info"
                                showIcon
                                message="名录发布前请完成今年的机构信用评分"
                            />
                        </Row>
                    </Container>
                    <br />
                    <Table
                        loading={loading}
                        dataSource={data}
                        columns={this.columns}
                        size="middle"
                        pagination={false}
                        rowKey={record => record.id}
                    />
                    <br />
                    <Container mode="fluid">
                        <Row gutter={24}>
                            <Col>
                                <AntIcon type="WarningFilled" className="h5 text-danger mr-xs" />
                                红牌将除名机构在名录发布时会删除
                            </Col>
                            <Col>
                                <Tag color="green">NEW</Tag>
                                今年新增或回归机构
                            </Col>
                        </Row>
                    </Container>
                    <br />
                </>
            )
        } else {
            return (
                <>
                    <br />
                    <Empty
                        image={Empty.PRESENTED_IMAGE_SIMPLE}
                        description="没有找到待发布的名录，请进行信用评分"
                    />
                    <br />
                </>
            )
        }
    }
}
