import React, { Component } from 'react'
import {
    Button,
    Card,
    Descriptions,
    Divider,
    Form,
    Input,
    List,
    message as Message,
    Popconfirm,
    Select,
    Switch,
    Tag,
} from 'antd'
import { AntIcon, Auth, Container, Image, ModalForm, QueryList, QueryTreeLayout } from 'components'
import { api } from 'common/api'
import { toCamelCase } from 'util/format'
import { isEqual } from 'lodash'
import getDictData from 'util/dic'
import FormBody from './form'
import Selector from './selector'
import DataForm from './data'

// 配置页面所需接口函数
const apiAction = {
    tree: api.getOrgTree,
    page: api.houseMemberPage,
    add: api.houseMemberAdd,
    edit: api.houseMemberEdit,
    delete: api.houseMemberDelete,

    changeStatus: api.houseMemberChangeStatus,
    resetPwd: api.sysUserResetPwd,

    grantData: api.houseMemberGrantData,
}

// 用于弹窗标题
const name = '人员'

export default class index extends Component {
    state = {
        codes: {
            sex: [],
            commonStatus: [],
        },
    }

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

    // 新增窗口实例
    addForm = React.createRef()
    // 编辑窗口实例
    editForm = React.createRef()

    dataForm = React.createRef()
    // 树选中节点
    selectId = undefined

    selectorModal = React.createRef()

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

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

    /**
     * 调用加载数据接口,可在调用前对query进行处理
     * [异步,必要]
     * @param {*} params
     * @param {*} query
     * @returns
     */
    loadData = async (params, query) => {
        query = {
            ...query,
            sysEmpParam: {
                orgId: this.selectId,
            },
        }

        const { data } = await apiAction.page({
            ...params,
            ...query,
        })
        return data
    }

    /**
     * 调用树结构数据接口
     * [异步,必要]
     * @returns
     */
    loadTreeData = async () => {
        const { data } = await apiAction.tree()
        return data
    }

    /**
     * 树节点选中事件
     * [必要]
     * @param {*} id
     */
    onSelectTree(id) {
        this.selectId = id
        this.list.current.onReloadData()
    }

    /**
     * 绑定字典数据
     * @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 {*} record
     */
    onOpen(modal, record) {
        modal.current.open({
            orgId: this.selectId,
            record,
        })
    }

    /**
     * 对表格上的操作进行统一处理
     * [异步]
     * @param {*} action
     * @param {*} successMessage
     */
    async onAction(action, successMessage) {
        this.list.current.onLoading()
        try {
            await action
            Message.success(successMessage)
            this.list.current.onReloadData()
        } catch {
            this.list.current.onLoaded()
        }
    }

    /**
     * 删除
     * @param {*} record
     */
    onDelete(record) {
        this.onAction(apiAction.delete(record), '删除成功')
    }

    //#region 自定义方法
    renderItem(record) {
        return (
            <List.Item
                key={record.id}
                actions={[
                    <Auth auth="houseMember:edit">
                        <a onClick={() => this.onOpen(this.editForm, record)}>编辑</a>
                    </Auth>,
                    <Auth auth="houseMember:delete">
                        <Popconfirm
                            placement="topRight"
                            title="是否确认删除"
                            onConfirm={() => this.onDelete(record)}
                        >
                            <a>删除</a>
                        </Popconfirm>
                    </Auth>,
                    <Auth auth="sysUser:resetPwd">
                        <a onClick={() => this.onResetPassword(record)}>重置密码</a>
                    </Auth>,
                    // <Auth auth="houseMember:grantData">
                    //     <a onClick={() => this.onOpen(this.dataForm, record)}>授权额外数据</a>
                    // </Auth>,
                ]}
            >
                <List.Item.Meta
                    avatar={
                        <>
                            <Image
                                type="avatar"
                                shape="square"
                                size={48}
                                id={record.avatar}
                                icon={<AntIcon type="user" />}
                            />
                            {record.roleCode && record.roleCode.includes('house_security_manager') && (
                                <Button
                                    size="small"
                                    type="primary"
                                    className="block w-100-p mt-xxs"
                                    onClick={() => this.onOpen(this.selectorModal, record)}
                                >
                                    选房
                                </Button>
                            )}
                        </>
                    }
                    title={
                        <>
                            {record.nickName || record.name}
                            {record.roleName &&
                                record.roleName.split(',').map((item, i) => (
                                    <span key={i}>
                                        <Divider type="vertical" />
                                        <Tag color="pink">{item}</Tag>
                                    </span>
                                ))}
                        </>
                    }
                    description={record.account}
                />
                <Descriptions className="flex-1" column={2}>
                    <Descriptions.Item label="部门">{record.orgName}</Descriptions.Item>
                    <Descriptions.Item label="性别">
                        {this.bindCodeValue(record.sex, 'sex')}
                    </Descriptions.Item>
                    <Descriptions.Item label="手机">{record.phone || '未设置'}</Descriptions.Item>
                    <Descriptions.Item label="邮箱">{record.email || '未设置'}</Descriptions.Item>
                </Descriptions>
                <div className="yo-list-content--h">
                    <Auth auth="houseMember:changeStatus">
                        <div className="yo-list-content--h--item text-center">
                            <Switch
                                checked={!record.status}
                                loading={record.statusChanging}
                                checkedChildren={this.bindCodeValue(0, 'common_status')}
                                unCheckedChildren={this.bindCodeValue(1, 'common_status')}
                                onChange={checked => this.onSetUserStatus(record, checked)}
                            />
                        </div>
                    </Auth>
                </div>
            </List.Item>
        )
    }

    onSetUserStatus(record, checked) {
        this.onAction(
            apiAction.changeStatus({
                id: record.id,
                status: +!checked,
            }),
            '设置成功'
        )
    }

    onResetPassword(record) {
        this.onAction(apiAction.resetPwd(record), '重置成功')
    }
    //#endregion

    render() {
        return (
            <QueryTreeLayout
                loadData={this.loadTreeData}
                defaultExpanded={true}
                onSelect={key => this.onSelectTree(key)}
            >
                <Container mode="fluid">
                    <Card bordered={false}>
                        <QueryList
                            ref={this.list}
                            autoLoad={false}
                            loadData={this.loadData}
                            query={
                                <Auth auth="houseMember:page">
                                    <Form.Item label="关键词" name="searchValue">
                                        <Input
                                            autoComplete="off"
                                            placeholder="请输入姓名、账号、手机号"
                                            className="w-200"
                                        />
                                    </Form.Item>
                                    <Form.Item label="状态" name="searchStatus">
                                        <Select
                                            allowClear
                                            placeholder="请选择状态"
                                            className="w-200"
                                        >
                                            {this.state.codes.commonStatus.map(item => {
                                                return (
                                                    <Select.Option key={item.code} item={item.code}>
                                                        {item.value}
                                                    </Select.Option>
                                                )
                                            })}
                                        </Select>
                                    </Form.Item>
                                </Auth>
                            }
                            operator={
                                <Button
                                    icon={<AntIcon type="plus" />}
                                    onClick={() => this.onOpen(this.addForm)}
                                >
                                    新增
                                    {name}
                                </Button>
                            }
                            renderItem={record => this.renderItem(record)}
                        />
                    </Card>
                </Container>

                <ModalForm
                    title={`新增${name}`}
                    action={apiAction.add}
                    ref={this.addForm}
                    onSuccess={() => this.list.current.onReloadData()}
                >
                    <FormBody mode="add" />
                </ModalForm>

                <ModalForm
                    title={`编辑${name}`}
                    action={apiAction.edit}
                    ref={this.editForm}
                    onSuccess={() => this.list.current.onReloadData()}
                >
                    <FormBody mode="edit" />
                </ModalForm>

                <ModalForm
                    title="数据授权"
                    action={apiAction.grantData}
                    ref={this.dataForm}
                    onSuccess={() => this.list.current.onReloadData()}
                >
                    <DataForm />
                </ModalForm>

                <ModalForm
                    bodyStyle={{ padding: 0 }}
                    footer={false}
                    width="80%"
                    ref={this.selectorModal}
                >
                    <Selector />
                </ModalForm>
            </QueryTreeLayout>
        )
    }
}