import React, { Component } from 'react'
import { Form, Space, Spin, Table, Tabs, Typography } from 'antd'
import { AntIcon, Container } from 'components'
import { api } from 'common/api'

const columns = [
    {
        dataIndex: 'type',
        title: '备案类型',
        width: 120,
        render: text => (text === 1 ? '登记备案' : '修改备案'),
    },
    {
        dataIndex: 'createdTime',
        title: '提交时间',
        width: 200,
    },
    {
        dataIndex: 'updatedTime',
        title: '审核时间',
        width: 200,
    },
    {
        dataIndex: 'status',
        title: '审核结果',
        width: 200,
        render: text =>
            text === 2 ? (
                <span className="text-success">
                    <AntIcon type="CheckCircleFilled" /> 通过
                </span>
            ) : (
                <span className="text-error">
                    <AntIcon type="CloseCircleFilled" /> 未通过
                </span>
            ),
    },
    {
        dataIndex: 'remark',
        title: '未通过理由',
    },
]

export default class history extends Component {
    state = {
        // 加载状态
        loading: {
            indicator: <AntIcon type="loading" />,
        },
        code: '',
        data: [],
    }

    // 表单实例
    form = React.createRef()

    // 初始化数据
    record = {}

    /**
     * mount后回调
     */
    componentDidMount() {
        this.props.created && this.props.created(this)
    }

    /**
     * 填充数据
     * 可以在设置this.record之后对其作出数据结构调整
     * [异步,必要]
     * @param {*} params
     */
    async fillData(params) {
        const state = { loading: false }
        //#region 从后端转换成前段所需格式,也可以在此处调用获取详细数据接口
        if (params.id) {
            const { data } = await api.inspectionOrgHistory({ id: params.id })
            state.data = data

            state.code = params.code
        }
        //#endregion

        this.setState(state)
    }

    /**
     * 获取数据
     * 可以对postData进行数据结构调整
     * [异步,必要]
     * @returns
     */
    async getData() {}

    //#region 自定义方法
    //#endregion

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

        const props = {
            loading,
            pagination: false,
            columns,
            dataSource: data,
            bordered: true,
            size: 'middle',
            rowKey: record => record.id,
        }

        return (
            <>
                <br />
                <Container mode="fluid">
                    <b>机构备案编号：{code}</b>
                </Container>
                <br />
                <Table {...props} />
            </>
        )
    }
}
