import { Card, Descriptions, Table, Tabs, Tag, Typography } from 'antd';
import React, { useContext, useEffect, useState } from 'react';
import { businessPlanData } from '../../../create/const';
import LookMsg from '@/pages/weComTask/components/previewMsg/lookMsg';
import { api_post_welcomeMsg_corpExternalUserList, api_post_welcomeMsg_welcomeMsgCorpUserList, WelcomeMsgCorpUserList } from '@/pages/weComTask/API/businessPlan/create';
import { useAjax } from '@/Hook/useAjax';
import { DispatchTaskDetails } from '../../log';
import { corpExternalUserListConfig, WelcomeMsgCorpUserListConfig } from './welcomeTableConfig';


interface Props {
    welcomeMsgTemplateVO: { [x: string]: any }
}
/**
 * 欢迎语任务详情
 * @returns 
 */
const WelcomeTask: React.FC<Props> = ({ welcomeMsgTemplateVO }) => {

    const { bookPlatForm, bookList } = useContext(DispatchTaskDetails)!;
    const [activeKey, setActiveKey] = useState('2');//下发企微号tab
    const { welcomeName, welcomeType, bookPlatform, templateProductId, welcomeMsgTagDTO, welcomeMsgContentList } = welcomeMsgTemplateVO
    const [listData] = useState<WelcomeMsgCorpUserList>({
        pageNum: 1,
        pageSize: 20,
        welcomeMsgId: welcomeMsgTemplateVO?.id
    })

    const [weListData] = useState<WelcomeMsgCorpUserList>({
        pageNum: 1,
        pageSize: 200,
        welcomeMsgId: welcomeMsgTemplateVO?.id
    })
    const [corpUserdata, setCorpUserdata] = useState<any[]>([])//配置企微号

    const ajax_api_post_welcomeMsg_corpExternalUserList = useAjax((params: WelcomeMsgCorpUserList) => api_post_welcomeMsg_corpExternalUserList(params))//获取送达客户列表
    const ajax_api_post_welcomeMsg_welcomeMsgCorpUserList = useAjax((params: WelcomeMsgCorpUserList) => api_post_welcomeMsg_welcomeMsgCorpUserList(params))//获取欢迎语应用的企微号列表

    useEffect(() => {
        getWelcomeMsgCorpUserList()
    }, [])

    //搜索事件
    const getList = (props?: any) => {
        ajax_api_post_welcomeMsg_corpExternalUserList.run({ ...listData, ...props, welcomeMsgId: welcomeMsgTemplateVO?.id })
    }

    //获取已配置企微列表
    const getWelcomeMsgCorpUserList = (props?: any) => {
        ajax_api_post_welcomeMsg_welcomeMsgCorpUserList.run({ ...weListData, welcomeMsgId: welcomeMsgTemplateVO?.id, ...props }).then(body => {
            if (body.data.records) {
                console.log('内部获取已配置企微列表===>', body.data.records)
                setCorpUserdata(body.data.records)
            }
        })
    }

    return <div style={{ display: 'flex', gap: 10 }}>
        <div style={{ width: 350, height: 650, overflow: 'hidden', overflowY: 'auto' }}>
            <h2>欢迎语内容</h2>
            {Object.keys(welcomeMsgContentList)?.map((key, index) => <div key={index} style={{ marginTop: 5, backgroundColor: '#f1f1f1', borderRadius: 6, padding: '5px 10px 16px' }}>
                <h3 style={{ textAlign: 'center' }}>内容{index + 1}</h3>
                <LookMsg data={welcomeMsgContentList[key] || []} />
            </div>)}
        </div>
        <div style={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column', gap: 10 }}>
            <Descriptions
                bordered
                items={[
                    {
                        key: 'welcomeName',
                        label: '欢迎语标题',
                        children: welcomeName || '--',
                    },
                    {
                        key: 'welcomeType',
                        label: '欢迎语类型',
                        children: <div>
                            <Typography.Paragraph style={{ margin: 0 }}>类型：{welcomeType || '--'}</Typography.Paragraph>
                            <Typography.Paragraph style={{ margin: 0 }}>书城：{bookPlatform || '--'}</Typography.Paragraph>
                            <Typography.Paragraph style={{ margin: 0 }}>适用产品：{templateProductId || '--'}</Typography.Paragraph>
                        </div>
                    },
                    {
                        key: 'welcomeMsgTagDTO',
                        label: '智能标签',
                        children: <div>
                            <Typography.Paragraph style={{ margin: 0 }}>业务（来源渠道）: {welcomeMsgTagDTO?.business ? businessPlanData.find(i => i.value === welcomeMsgTagDTO.business)?.label : '--'}</Typography.Paragraph>
                            <Typography.Paragraph style={{ margin: 0 }}>书城（来源渠道）：{welcomeMsgTagDTO?.bookCity ? bookPlatForm.find(i => i.id == welcomeMsgTagDTO.bookCity)?.platformName : '--'}</Typography.Paragraph>
                            <Typography.Paragraph style={{ margin: 0 }}>产品（来源渠道）：{welcomeMsgTagDTO?.business ? bookList.find(i => i.id == welcomeMsgTagDTO.product)?.bookName : '--'}</Typography.Paragraph>
                        </div>
                    },
                    {
                        key: 'createName',
                        label: '创建人',
                        children: <div>
                            <Typography.Paragraph style={{ margin: 0 }}>{welcomeMsgTagDTO?.createName || '--'}</Typography.Paragraph>
                        </div>
                    },
                    {
                        key: 'createName',
                        label: '创建时间',
                        children: <div>
                            <Typography.Paragraph style={{ margin: 0 }}>{welcomeMsgTagDTO?.createTime || '--'}</Typography.Paragraph>
                        </div>
                    }
                ]}
            />
            <Tabs
                onChange={(key) => {
                    setActiveKey(key)
                    if (key === '3') {
                        getList()
                    }
                }}
                type="card"
                activeKey={activeKey}
                items={[
                    {
                        key: '2',
                        label: '下发企微号',
                        children: <Card>
                            {/* 表 */}
                            <Table
                                style={{ marginBottom: 1 }}
                                dataSource={corpUserdata}
                                loading={ajax_api_post_welcomeMsg_welcomeMsgCorpUserList?.loading}
                                columns={WelcomeMsgCorpUserListConfig()}
                                scroll={{ x: 400, y: 500 }}
                                rowKey={(s) => {
                                    return s.id
                                }}
                                size='small'
                                pagination={{
                                    total: ajax_api_post_welcomeMsg_welcomeMsgCorpUserList?.data?.data?.total,
                                    showTotal: (total) => <Tag color="cyan">总共{total}数据</Tag>,
                                    showSizeChanger: true,
                                    showLessItems: true,
                                    defaultCurrent: 1,
                                    defaultPageSize: 200,//默认初始的每页条数
                                    current: ajax_api_post_welcomeMsg_welcomeMsgCorpUserList?.data?.data?.current || 1,
                                    pageSize: ajax_api_post_welcomeMsg_welcomeMsgCorpUserList?.data?.data?.size || 20,
                                    onChange: (page, pageSize) => {
                                        getWelcomeMsgCorpUserList({ ...weListData, pageNum: page, pageSize })
                                    }
                                }}
                            />
                        </Card>
                    },
                    {
                        key: '3',
                        label: '送达客户',
                        children: <Card>
                            <Table
                                style={{ marginBottom: 1 }}
                                dataSource={ajax_api_post_welcomeMsg_corpExternalUserList?.data?.data?.records}
                                loading={ajax_api_post_welcomeMsg_corpExternalUserList?.loading}
                                columns={corpExternalUserListConfig()}
                                scroll={{ x: 400, y: 500 }}
                                rowKey={(s) => {
                                    return s.id
                                }}
                                size='small'
                                pagination={{
                                    total: ajax_api_post_welcomeMsg_corpExternalUserList?.data?.data?.total,
                                    showTotal: (total) => <Tag color="cyan">总共{total}数据</Tag>,
                                    showSizeChanger: true,
                                    showLessItems: true,
                                    defaultCurrent: 1,
                                    defaultPageSize: 20,//默认初始的每页条数
                                    current: ajax_api_post_welcomeMsg_corpExternalUserList?.data?.data?.current || 1,
                                    pageSize: ajax_api_post_welcomeMsg_corpExternalUserList?.data?.data?.size || 20,
                                    onChange: (page, pageSize) => {
                                        getList({ ...listData, pageNum: page, pageSize })
                                    }
                                }}
                            />
                        </Card>
                    }
                ]}
            />
        </div>
    </div>
};

export default React.memo(WelcomeTask);