

import { Descriptions, Drawer, Space, Image, Form, Input, Button, Card, Tabs, Badge } from "antd"
import React, { useCallback, useEffect } from "react"
import { useState } from "react"
import Tables from "@/components/Tables"
import { useAjax } from "@/Hook/useAjax"
import WidthEllipsis from "@/components/widthEllipsis"
import { getUserAddressListApi, getUserGameRoleListApi, getUserLoginListApi, getUserOrderListApi, getUserWeChatApi } from "@/services/gameData/player"
import './index.less'

interface Props {
    visible?: boolean,
    onChange?: (params: any) => void,
    onClose?: () => void,
    userInfo?: any
}
/**
 * 查看详情
 * @param props 
 * @returns 
 */
const Look: React.FC<Props> = (props) => {

    /** ----------变量开始------- */
    const { visible, onClose, userInfo, onChange } = props
    const [title] = useState<string>('查看详情')
    const [form] = Form.useForm()
    /** ----------变量结束------- */

    /** ----------API方法------- */
    const getUserAddressList = useAjax((id: number) => getUserAddressListApi(id))
    const getUserGameRoleList = useAjax((id: number) => getUserGameRoleListApi(id))
    const getUserLoginList = useAjax((params: { userId: number, pageNum: number, pageSize: number }) => getUserLoginListApi(params))
    const getUserOrderList = useAjax((params: { userId: number, pageNum: number, pageSize: number }) => getUserOrderListApi(params))
    const getUserWeChat = useAjax((userId) => getUserWeChatApi(userId))

    /** ----------初始请求请求------- */
    useEffect(() => {
        if (userInfo?.id) {
            getUserAddressList.run(userInfo?.id)
            getUserGameRoleList.run(userInfo?.id)
            getLogin({ pageSize: 20, pageNum: 1 })
            getOrder({ pageSize: 20, pageNum: 1 })
        }
        form.setFields([{ name: 'mobile', value: userInfo?.mobile }, { name: 'aliPay', value: userInfo?.aliPay }])
    }, [userInfo?.id])
    /**登录记录 */
    const getLogin = useCallback((page: any) => {
        getUserLoginList.run({ ...page, userId: userInfo?.id })
    }, [userInfo?.id])
    /**下单记录 */
    const getOrder = useCallback((page: any) => {
        getUserOrderList.run({ ...page, userId: userInfo?.id })
    }, [userInfo?.id])
    /**提交编辑*/
    const submit = useCallback(async () => {
        let values = await form.validateFields()
        onChange && onChange({ ...values, username: userInfo?.username, userId: userInfo?.id })
    }, [userInfo])

    return <Drawer
        title={title}
        width={1180}
        placement="right"
        onClose={() => {
            onClose && onClose()
            getUserLoginList.mutate([])
            getUserGameRoleList.mutate([])
            getUserOrderList.mutate([])
            getUserAddressList.mutate([])
        }}
        visible={visible}
    >
        <Card hoverable className="lookCard">
            <Space align="start">
                <div style={{ width: 250 }} className="info">
                    <div className="playerInfo">
                        <Image
                            width={100}
                            height={100}
                            src={userInfo?.nickname?.includes('枫') ? "https://zx-oss-dev.oss-cn-hangzhou.aliyuncs.com/file/B9B6AEB034044B5E9A7FC05227060789.jpg" : "error"}
                            fallback="data:image/png;base64,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"
                        />
                        <div className="name">{userInfo?.nickname}</div>
                        <div className="vip">VIP{userInfo?.vipMax}</div>
                    </div>
                    <div className="playerEdit">
                        <Form name="basic"
                            labelCol={{ span: 8 }}
                            wrapperCol={{ span: 18 }}
                            autoComplete="off"
                            className="playerPayInfo"
                            form={form}
                            initialValues={{
                                mobile: userInfo?.mobile,
                                aliPay: userInfo?.aliPay,
                                password: ''
                            }}
                        >
                            <Form.Item label="绑定手机" name='mobile'>
                                <Input placeholder="请输入手机号" />
                            </Form.Item>
                            <Form.Item label="绑定支付宝" name='aliPay'>
                                <Input placeholder="请输入绑定支付宝账号" />
                            </Form.Item>
                            <Form.Item label="登录密码" name='password'>
                                <Input placeholder="请输入密码" />
                            </Form.Item>
                            <Form.Item wrapperCol={{ offset: 5, span: 19 }}>
                                <Button htmlType="button" style={{ marginRight: 20 }} onClick={() => { form.resetFields() }}>
                                    撤销
                                </Button>
                                <Button htmlType="submit" type="primary" onClick={submit}>保存</Button>
                            </Form.Item>
                        </Form>
                    </div>
                </div>
                <Descriptions title="" bordered column={2} size="middle">
                    <Descriptions.Item label="玩家ID" contentStyle={{ width: 300 }}>{userInfo?.id}</Descriptions.Item>
                    <Descriptions.Item label="玩家账号" contentStyle={{ width: 300 }}>{userInfo?.username || '--'}</Descriptions.Item>
                    <Descriptions.Item label="玩家昵称" contentStyle={{ width: 300 }}>{userInfo?.nickname || '--'}</Descriptions.Item>
                    <Descriptions.Item label="真实姓名" contentStyle={{ width: 300 }}>{userInfo?.realName || '--'}</Descriptions.Item>
                    <Descriptions.Item label="生日" contentStyle={{ width: 300 }}>{userInfo?.birthday}</Descriptions.Item>
                    <Descriptions.Item label="性别" contentStyle={{ width: 300 }}>{({ '0': '未知', '1': '男', '2': '女' } as any)[userInfo?.sex]}</Descriptions.Item>
                    <Descriptions.Item label="证件号" contentStyle={{ width: 300 }}>{userInfo?.idCard || '--'}</Descriptions.Item>
                    <Descriptions.Item label="注册手机" contentStyle={{ width: 300 }}>{userInfo?.regMobile || '--'}</Descriptions.Item>
                    <Descriptions.Item label="注册邮箱" contentStyle={{ width: 300 }}>{userInfo?.regEmail || '--'}</Descriptions.Item>
                    <Descriptions.Item label="绑定支付宝" contentStyle={{ width: 300 }}>{userInfo?.aliPay || '--'}</Descriptions.Item>
                    <Descriptions.Item label="地址" contentStyle={{ width: 300 }}>{userInfo?.address || '--'}</Descriptions.Item>
                    {/* <Descriptions.Item label="注册来源" contentStyle={{ width: 300 }}>{userInfo?.regFrom}</Descriptions.Item> */}
                    <Descriptions.Item labelStyle={{ padding: '2px 24px' }} contentStyle={{ padding: '2px 24px', width: 300 }} label={<div>
                        <div style={{ fontSize: 13 }}>注册游戏</div>
                        <div style={{ fontSize: 12 }}>(游戏应用类型)</div>
                    </div>}>
                        <div>
                            <div style={{ fontSize: 13 }}>{userInfo?.regGame || '--'}</div>
                            <div style={{ fontSize: 12 }}>{userInfo?.categoryName ? `(${userInfo?.categoryName})` : '--'}</div>
                        </div>
                    </Descriptions.Item>
                    <Descriptions.Item label="注册渠道" contentStyle={{ width: 300 }}>{userInfo?.agentName || '--'}</Descriptions.Item>

                    <Descriptions.Item label="状态" contentStyle={{ width: 300 }}>{({ '1': <Badge status="error" text="封禁" />, '0': <Badge status="success" text="正常" /> } as any)[userInfo?.status]}</Descriptions.Item>
                    <Descriptions.Item label="设备码" contentStyle={{ width: 300 }}>{userInfo?.deviceId || '--'}</Descriptions.Item>
                    <Descriptions.Item label="注册IP" contentStyle={{ width: 300 }}>{userInfo?.regIp || '--'}</Descriptions.Item>
                    <Descriptions.Item label="注册时间" contentStyle={{ width: 300 }}>{userInfo?.createTime || '--'}</Descriptions.Item>
                </Descriptions>
            </Space>
        </Card>
        <Card hoverable className="lookCard" style={{ marginTop: 10 }}>
            <Tabs defaultActiveKey="1" type="card" onChange={(value)=>{
                if(value == '5'){
                    getUserWeChat.run(userInfo?.id)
                }
            }}>
                <Tabs.TabPane tab="游戏角色" key="1">
                    <Tables
                        columns={gameRoleTableColumns}
                        dataSource={getUserGameRoleList?.data}
                        loading={getUserGameRoleList?.loading}
                        size="small"
                        scroll={{ x: 2000 }}
                        bordered
                    />
                </Tabs.TabPane>
                <Tabs.TabPane tab="登录记录" key="2">
                    <Tables
                        columns={loginTableColumns}
                        dataSource={getUserLoginList?.data?.records}
                        loading={getUserLoginList?.loading}
                        size="small"
                        scroll={{ x: 900 }}
                        pageSize={getUserLoginList?.data?.size}
                        current={getUserLoginList?.data?.current}
                        total={getUserLoginList?.data?.total}
                        onChange={(pagination) => {
                            getLogin({ pageNum: pagination.current, pageSize: pagination.pageSize })
                        }}
                        bordered
                    />
                </Tabs.TabPane>
                <Tabs.TabPane tab="下单记录" key="3">
                    <Tables
                        columns={orderTableColumns}
                        dataSource={getUserOrderList?.data?.records}
                        loading={getUserOrderList?.loading}
                        total={getUserOrderList?.data?.total}
                        size="small"
                        pageSize={getUserOrderList?.data?.size}
                        current={getUserOrderList?.data?.current}
                        scroll={{ x: 1000 }}
                        onChange={(pagination) => {
                            getOrder({ pageNum: pagination.current, pageSize: pagination.pageSize })
                        }}
                        bordered
                    />
                </Tabs.TabPane>
                <Tabs.TabPane tab="收货地址" key="4">
                    <Tables
                        size="small"
                        columns={addressTableColumns}
                        dataSource={getUserAddressList?.data}
                        loading={getUserAddressList?.loading}
                    />
                </Tabs.TabPane>
                <Tabs.TabPane tab="微信信息" key="5">
                    {
                        !getUserWeChat?.data ? "获取不到用户信息" :<>
                            <Image src={getUserWeChat?.data?.avatar} style={{width:50}}/>
                            <span>{getUserWeChat?.data?.name}</span>
                        </>
                    }
                </Tabs.TabPane>
            </Tabs>
        </Card>
    </Drawer >
}
/**收货地址table字段*/
let addressTableColumns: any = [
    {
        title: 'ID',
        dataIndex: 'id',
        key: 'id',
        align: 'center',
        width: 20,
    },
    {
        title: '收货人',
        dataIndex: 'receiver',
        key: 'receiver',
        align: 'center',
        width: 70,
        ellipsis: true,
    },
    {
        title: '手机号',
        dataIndex: 'mobile',
        key: 'mobile',
        align: 'center',
        width: 75,
        ellipsis: true,
    },
    {
        title: '邮箱',
        dataIndex: 'email',
        key: 'email',
        align: 'center',
        width: 100,
        ellipsis: true,
    },
    {
        title: '地址',
        dataIndex: 'address',
        key: 'address',
        align: 'center',
        ellipsis: true,
        width: 180,
    },
    {
        title: '默认地址',
        dataIndex: 'isDefault',
        key: 'isDefault',
        align: 'center',
        width: 50,
        ellipsis: true,
        render: (a: any) => {
            return a ? '是' : ' 否'
        }
    },
    {
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
        align: 'center',
        width: 100,
        ellipsis: true,
    },
    {
        title: '更新时间',
        dataIndex: 'updateTime',
        key: 'updateTime',
        align: 'center',
        width: 100,
        ellipsis: true,
    },
]
/**游戏角色table字段*/
export const gameRoleTableColumns: any = [
    // {
    //     title: 'ID',
    //     dataIndex: 'id',
    //     key: 'id',
    //     align: 'center',
    //     width: 20,
    // },
    {
        title: '游戏角色名称',
        dataIndex: 'roleName',
        key: 'roleName',
        align: 'center',
        fixed: 'left',
        width: 100,
        ellipsis: true
    },
    {
        title: '游戏角色ID',
        dataIndex: 'roleId',
        key: 'roleId',
        align: 'center',
        width: 120,
        fixed: 'left',
        render: (a: string, b: any) => (<WidthEllipsis value={a} />)
    },
    {
        title: '战力',
        dataIndex: 'rolePower',
        key: 'rolePower',
        align: 'center',
        width: 90
    },
    {
        title: '操作系统',
        dataIndex: 'os',
        key: 'os',
        align: 'center',
        width: 90
    },
    {
        title: '充值金额',
        dataIndex: 'rechargeMoney',
        key: 'rechargeMoney',
        align: 'center',
        width: 90
    },
    {
        title: '游戏名称',
        dataIndex: 'gameName',
        key: 'gameName',
        align: 'center',
        width: 100,
        ellipsis: true,
    },
    {
        title: '游戏应用类型',
        dataIndex: 'gameCategoryName',
        key: 'gameCategoryName',
        align: 'center',
        width: 100,
        ellipsis: true,
    },
    {
        title: '注册渠道',
        dataIndex: 'agentName',
        key: 'agentName',
        align: 'center',
        width: 100,
        render: (a: string, b: any) => (<WidthEllipsis value={a} />)
    },
    {
        title: '游戏区服',
        dataIndex: 'serverName',
        key: 'serverName',
        align: 'center',
        width: 100
    },
    {
        title: '角色等级',
        dataIndex: 'roleLevel',
        key: 'roleLevel',
        align: 'center',
        width: 90
    },
    
    {
        title: '角色创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
        align: 'center',
        width: 160,
        render: (a: string, b: any) => (<WidthEllipsis value={a} />)
    },
    {
        title: '角色更新时间',
        dataIndex: 'updateTime',
        key: 'updateTime',
        align: 'center',
        width: 160,
        render: (a: string, b: any) => (<WidthEllipsis value={a} />)
    },
    {
        title: '角色最近登陆时间',
        dataIndex: 'lastLoginTime',
        key: 'lastLoginTime',
        align: 'center',
        width: 160,
        render: (a: string, b: any) => (<WidthEllipsis value={a} />)
    },
    {
        title: '角色最近充值时间',
        dataIndex: 'lastRechargeTime',
        key: 'lastRechargeTime',
        align: 'center',
        width: 160,
        render: (a: string, b: any) => (<WidthEllipsis value={a} />)
    },
]
/**登录记录table字段*/
let loginTableColumns: any = [
    {
        title: 'ID',
        dataIndex: 'id',
        key: 'id',
        align: 'center',
        width: 20,
    },
    {
        title: '登陆时间',
        dataIndex: 'loginTime',
        key: 'loginTime',
        align: 'center',
    },
    {
        title: '登陆游戏名称',
        dataIndex: 'gameName',
        key: 'gameName',
        align: 'center',
    },
    {
        title: '登陆游戏应用类型',
        dataIndex: 'gameCategoryName',
        key: 'gameCategoryName',
        align: 'center',
    },
    {
        title: '登陆游戏角色名称',
        dataIndex: 'roleName',
        key: 'roleName',
        align: 'center',
    },
    {
        title: '登陆ip',
        dataIndex: 'loginIp',
        key: 'loginIp',
        align: 'center',
    },
    {
        title: '操作系统',
        dataIndex: 'os',
        key: 'os',
        align: 'center',
    },
]
/**订单table字段*/
let orderTableColumns: any = [
    {
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
        align: 'center',
    },
    {
        title: '商户订单号',
        dataIndex: 'id',
        key: 'id',
        align: 'center',
    },
    {
        title: '产品名称',
        dataIndex: 'productName',
        key: 'productName',
        align: 'center',
    },
    {
        title: '订单金额',
        dataIndex: 'amount',
        key: 'amount',
        align: 'center',
    },
    {
        title: '支付状态',
        dataIndex: 'status',
        key: 'status',
        align: 'center',
        render: (a: number, b: any) => ({ '0': <Badge status="default" text="预下单" />, '1': <Badge status="processing" text="待支付" />, '2': <Badge status="success" text="支付成功" />, '-1': <Badge status="error" text="已取消" /> }[a])
    },
    {
        title: '充值游戏',
        dataIndex: 'gameName',
        key: 'gameName',
        align: 'center',
    },
    {
        title: '充值游戏应用类型',
        dataIndex: 'gameCategoryName',
        key: 'gameCategoryName',
        align: 'center',
    },
    {
        title: '充值游戏角色名称',
        dataIndex: 'roleName',
        key: 'roleName',
        align: 'center',
    },
]
export default React.memo(Look)