import React, { Component } from 'react'
import { Button, Card, Checkbox, Col, Form, Input, 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 HistoryBody from './history'

const { Link } = Typography

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

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

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

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

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

    history = 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: {
                code: QueryType.Like,
                updateStatus: QueryType.Equal,
            },
        })
        const { data } = await this.props.api({
            ...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, code) {
        modal.current.open({ id, code })
    }

    //#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,
            code,
            name,
            creditCode,
            address,
            contacts,
            contactsPhone,
            legalPerson,
            orgTelephone,
            status,
            updateType,
            updateStatus,
            updateCount,
            updatedTime,
        } = 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>机构备案编号：{code}</span>
                                <span>{name}</span>
                            </Space>
                        </div>
                        {this.renderStatus(updateType, updateStatus)}
                    </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="calendar" />
                                        <b>备案资料更新日期</b>
                                        <span className="bs-list-text">{updatedTime}</span>
                                    </div>
                                </Col>
                                <Col span={6}>
                                    <div className="bs-list-content">
                                        <AntIcon className="bs-list-icon" type="environment" />
                                        <b>机构地址</b>
                                        <span className="bs-list-text">
                                            <Tooltip title={address}>{address}</Tooltip>
                                        </span>
                                    </div>
                                </Col>
                                <Col span={6}>
                                    <div className="bs-list-content">
                                        <AntIcon className="bs-list-icon" type="phone" />
                                        <b>联系人手机号</b>
                                        <span className="bs-list-text">{contactsPhone}</span>
                                    </div>
                                </Col>
                                <Col span={6}>
                                    <div className="bs-list-content">
                                        <AntIcon className="bs-list-icon" type="history" />
                                        <b>历史审核记录</b>
                                        <Link onClick={() => this.onOpen(this.history, id, code)}>
                                            查看记录({updateCount}条)
                                        </Link>
                                    </div>
                                </Col>
                            </Row>
                        </Col>
                        <Col flex="84px">
                            <Auth auth={{ inspectionOrg: ['reviewApproved', 'reviewNotApproved'] }}>
                                {updateStatus === 1 && (
                                    <Button
                                        type="primary"
                                        onClick={() =>
                                            window.openContentWindow({
                                                key: id,
                                                title: '机构备案审核',
                                                path: '/business/inspection/register',
                                                param: {
                                                    id,
                                                    action:
                                                        updateType === 1
                                                            ? 'review'
                                                            : 'updateReview',
                                                    list: this.list,
                                                },
                                            })
                                        }
                                    >
                                        查看详情
                                    </Button>
                                )}
                            </Auth>
                            {[-2, 2].includes(updateStatus) && (
                                <Button
                                    type="primary"
                                    onClick={() =>
                                        window.openContentWindow({
                                            key: id,
                                            title: '机构备案详情',
                                            path: '/business/inspection/register',
                                            param: {
                                                id,
                                            },
                                        })
                                    }
                                >
                                    查看详情
                                </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]: this.props.permissions }}>
                                <Form.Item label="机构备案号" name="code">
                                    <Input
                                        autoComplete="off"
                                        placeholder="请输入机构备案号"
                                        className="w-200"
                                    />
                                </Form.Item>
                                <Form.Item label="审核状态" name="updateStatus">
                                    <Checkbox.Group>
                                        <Checkbox value={-1}>未通过</Checkbox>
                                        <Checkbox value={1}>待审核</Checkbox>
                                        <Checkbox value={2}>已过审</Checkbox>
                                    </Checkbox.Group>
                                </Form.Item>
                            </Auth>
                        }
                        renderItem={record => this.renderItem(record)}
                    />
                </Card>

                <ModalForm title="机构历史记录" ref={this.history} width={1200} footer={false}>
                    <HistoryBody />
                </ModalForm>
            </Container>
        )
    }
}
