import React, { Component } from 'react'
import {
    Button,
    Card,
    Checkbox,
    Col,
    Form,
    Input,
    Modal,
    Row,
    Space,
    Tooltip,
    Typography,
} from 'antd'
import { AntIcon, Auth, Container, ModalForm, QueryList } from 'components'
import { isEqual } from 'lodash'
import getDictData from 'util/dic'
import { toCamelCase } from 'util/format'
import { getSearchInfo, QueryType } from 'util/query'
import { api } from 'common/api'
import moment from 'moment'

import PreviewBody from './preview'

/**
 * 注释段[\/**\/]为必须要改
 */

/**
 * 配置页面所需接口函数
 */
const apiAction = {
    page: api.inspectionOrgDirPage,
    publish: api.inspectionOrgDirPublish,
}

/**
 * 用于弹窗标题
 * [必要]
 */
const name = ''

/**
 * 统一配置权限标识
 * [必要]
 */
const authName = 'inspectionOrgDir'

export default class index extends Component {
    state = {
        codes: {},
    }

    // 表格实例
    list = React.createRef()

    preview = React.createRef()

    columns = []

    /**
     * 阻止外部组件引发的渲染,提升性能
     * 可自行添加渲染条件
     * [必要]
     * @param {*} props
     * @param {*} state
     * @returns
     */
    shouldComponentUpdate(props, state) {
        return !isEqual(this.state, state)
    }

    /**
     * 加载字典数据,之后开始加载表格数据
     * 如果必须要加载字典数据,可直接对表格设置autoLoad=true
     */
    componentDidMount() {
        const { onLoading, onLoadData } = this.list.current
        onLoading()
        getDictData(/**/).then(codes => {
            this.setState({ codes }, () => {
                onLoadData()
            })
        })
    }

    /**
     * 调用加载数据接口,可在调用前对query进行处理
     * [异步,必要]
     * @param {*} params
     * @param {*} query
     * @returns
     */
    loadData = async (params, query) => {
        const searchInfo = getSearchInfo({
            query,
            queryType: {
                no: QueryType.Like,
            },
        })
        const { data } = await apiAction.page({
            ...params,
            searchInfo,
        })
        return data
    }

    /**
     * 绑定字典数据
     * @param {*} code
     * @param {*} name
     * @returns
     */
    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
    }

    /**
     * 打开新增/编辑弹窗
     * @param {*} modal
     * @param {*} id
     */
    onOpen(modal, id) {
        modal.current.open({ id })
    }

    //#region 自定义方法
    renderStatus(type, status) {
        const STYLE = {
            success: {
                class: 'success',
                label: '已过审',
            },
            warning: {
                class: 'warning',
                label: '待审核',
            },
            error: {
                class: 'error',
                label: '未通过',
            },
        }
        let style
        switch (status) {
            case -2:
            case 2:
            default:
                style = STYLE.success
                break
            case 1:
                style = STYLE.warning
                break
            case -1:
                style = STYLE.error
                break
        }
        return <div className={['bs-list-status', style.class].join(' ')}>{style.label}</div>
    }

    renderItem(record) {
        const { id, no, orgAmount, removedOrgAmount, newOrgAmount, publishTime } = record
        return (
            <div className="bs-list-card mb-md">
                <div className="bs-list-header">
                    <Row justify="space-between">
                        <div className="bs-list-title">
                            <Space size={24}>
                                <span>名录发布期号：{no}</span>
                            </Space>
                        </div>
                    </Row>
                </div>
                <div className="bs-list-body">
                    <Row align="middle" gutter={16}>
                        <Col flex="1">
                            <Row align="middle" gutter={16}>
                                <Col span={6}>
                                    <div className="bs-list-content">
                                        <AntIcon className="bs-list-icon" type="home" />
                                        <b>包含机构数量</b>
                                        <span className="bs-list-text">{orgAmount}</span>
                                    </div>
                                </Col>
                                <Col span={6}>
                                    <div className="bs-list-content">
                                        <AntIcon className="bs-list-icon" type="minus-circle" />
                                        <b>被除名机构数量</b>
                                        <span className="bs-list-text">{removedOrgAmount}</span>
                                    </div>
                                </Col>
                                <Col span={6}>
                                    <div className="bs-list-content">
                                        <AntIcon className="bs-list-icon" type="plus-circle" />
                                        <b>同比上一年新入或回归机构数量</b>
                                        <span className="bs-list-text">{newOrgAmount}</span>
                                    </div>
                                </Col>
                                <Col span={6}>
                                    <div className="bs-list-content">
                                        <AntIcon className="bs-list-icon" type="calendar" />
                                        <b>发布日期</b>
                                        <span className="bs-list-text">
                                            {moment(publishTime).format('YYYY-MM-DD')}
                                        </span>
                                    </div>
                                </Col>
                            </Row>
                        </Col>
                        <Col flex="84px">
                            <Button type="primary">查看详情</Button>
                        </Col>
                    </Row>
                </div>
            </div>
        )
    }
    //#endregion

    render() {
        return (
            <Container mode="fluid">
                <br />
                <Card bordered={false}>
                    <QueryList
                        ref={this.list}
                        autoLoad={false}
                        loadData={this.loadData}
                        columns={this.columns}
                        query={
                            <Auth auth={{ [authName]: 'page' }}>
                                <Form.Item label="名录发布期号" name="no">
                                    <Input
                                        autoComplete="off"
                                        placeholder="请输入名录发布期号"
                                        className="w-200"
                                    />
                                </Form.Item>
                            </Auth>
                        }
                        operator={
                            <Button
                                type="primary"
                                icon={<AntIcon type="plus" />}
                                onClick={() => this.onOpen(this.preview)}
                            >
                                发布名录
                            </Button>
                        }
                        renderItem={record => this.renderItem(record)}
                    />
                </Card>

                <ModalForm
                    title="发布名录"
                    ref={this.preview}
                    width={1200}
                    action={apiAction.publish}
                    onSuccess={() => this.list.current.onReloadData()}
                >
                    <PreviewBody />
                </ModalForm>
            </Container>
        )
    }
}
