import React, { Component } from 'react'
import { Card, Form, Input, Select } from 'antd'
import { Auth, Container, NoticeDetail, QueryTable } from 'components'
import { api } from 'common/api'
import auth from 'components/authorized/handler'
import { isEqual } from 'lodash'
import getDictData from 'util/dic'
import { toCamelCase } from 'util/format'
import { getSearchInfo, QueryType } from 'util/query'

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

export default class index extends Component {
    state = {
        codes: {
            noticeStatus: [],
            noticeType: [],
            readStatus: [],
        },
    }

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

    detail = React.createRef()

    columns = [
        {
            title: '标题',
            dataIndex: 'title',
            width: 300,
            sorter: true,
        },
        {
            title: '发布人',
            dataIndex: 'publicUserName',
            width: 150,
            sorter: true,
        },
        {
            title: '发布时间',
            dataIndex: 'createdTime',
            width: 200,
            sorter: true,
        },
        {
            title: '发布单位',
            dataIndex: 'publicOrgName',
            width: 200,
            sorter: true,
        },
        {
            title: '类型',
            dataIndex: 'type',
            width: 120,
            render: text => this.bindCodeValue(text, 'notice_type'),
        },
        {
            title: '已读未读',
            dataIndex: 'readStatus',
            width: 120,
            render: text => this.bindCodeValue(text, 'read_status'),
        },
    ]

    /**
     * 构造函数,在渲染前动态添加操作字段等
     * @param {*} props
     */
    constructor(props) {
        super(props)
        const flag = auth({ [authName]: 'received' })
        if (flag) {
            this.columns.push({
                title: '操作',
                width: 150,
                dataIndex: 'actions',
                render: (text, record) => (
                    <Auth auth={{ [authName]: 'received' }}>
                        <a onClick={() => this.detail.current.onOpenDetail(record.id)}>查看</a>
                    </Auth>
                ),
            })
        }
    }

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

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

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

        const { data } = await api.sysNoticeReceived({
            ...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.onOpenDetail(id)
    }

    render() {
        const { codes } = this.state
        return (
            <Container mode="fluid">
                <br />
                <Card bordered={false}>
                    <QueryTable
                        ref={this.table}
                        autoLoad={false}
                        loadData={this.loadData}
                        columns={this.columns}
                        query={
                            <Auth auth={{ [authName]: 'received' }}>
                                <Form.Item label="关键字" name="title">
                                    <Input
                                        autoComplete="off"
                                        placeholder="请输入标题"
                                        className="w-200"
                                    />
                                </Form.Item>
                                <Form.Item label="类型" name="type">
                                    <Select placeholder="请选择类型" className="w-200" allowClear>
                                        {codes.noticeType.map(item => (
                                            <Select.Option key={item.code} value={item.code}>
                                                {item.value}
                                            </Select.Option>
                                        ))}
                                    </Select>
                                </Form.Item>
                                <Form.Item label="已读未读" name="readStatus">
                                    <Select
                                        placeholder="请选择是否已读"
                                        className="w-200"
                                        allowClear
                                    >
                                        {codes.readStatus.map(item => (
                                            <Select.Option key={item.code} value={item.code}>
                                                {item.value}
                                            </Select.Option>
                                        ))}
                                    </Select>
                                </Form.Item>
                            </Auth>
                        }
                    />
                </Card>
                <NoticeDetail ref={this.detail} />
            </Container>
        )
    }
}
