import React, { useEffect, useState } from "react";
import { Drawer, Button, Radio, Card, Image, Tooltip, Space, Form, Divider, Row, Col } from 'antd';
import './index.less'
import Box from '../box/Box'
import Tables from '@/components/Tables'
import columns from './tableConfig'
import useEcharts from '@/Hook/useEcharts'

type Props = {
    visible: boolean,
    hideModal: () => void,
    editData?: any,
}
const testData = [
    {name: "消耗", num: 10, rate: 0},
    {name: "曝光量", num: 20, rate: 0},
    {name: "点击量", num: 40, rate: 0},
    {name: "点击率", num: 20, rate: 0},
    {name: "下单率", num: 50, rate: 0},
    {name: "下单成本", num: 170, rate: 0}
]
function Details(props: Props) {
    let { visible, hideModal, editData } = props

    const [fansArea, setFansArea] = useState<any>([{name: '浙江省', value: 7}])//地图数据
    const [fansCount, setFansCount] = useState<any[]>([{name: '男', value: 7}, {name: '女', value: 9}])//统计数据
    const [ageDis, setAgeDis] = useState<any[]>([
        {name: '45-49岁', value: 20}, {name: '50-54岁', value: 18}, 
        {name: '35-39岁', value: 16}, {name: '40-44岁', value: 18},
        {name: '55-59岁', value: 26}, {name: '14-17岁', value: 8},
        {name: '60岁以上', value: 5}, {name: '60-64岁', value: 48}
    ])//年龄分布
    const { Map, PieFocus, Bar } = useEcharts()
    useEffect(() => {
        console.log(editData);
        
    }, [editData])

    return <Drawer
        title="详情"
        placement="right"
        closable={false}
        width='90%'
        onClose={hideModal}
        visible={visible}
        className="drawer"
    >  
        <div className='detail'>
            <div className="days">
                <Radio.Group defaultValue="7">
                    <Radio.Button value="7">7日</Radio.Button>
                    <Radio.Button value="15">15日</Radio.Button>
                    <Radio.Button value="30">30日</Radio.Button>
                </Radio.Group>
            </div>
            <div className="con">
                <div className="left">
                    <div className="leftCon">
                        <Space direction="vertical" style={{width: '100%'}}>
                            <Row className="rowWhile">
                                <Col flex='1 1 250px'>
                                    {
                                        editData?.type === 1 ? <div className='covercc1'>
                                            <Image.PreviewGroup>
                                                {editData?.media?.split(',').map((editData: string, index: number) => (<Image key={index} src={editData} placeholder />))}
                                            </Image.PreviewGroup>
                                        </div>
                                        : editData?.type === 2 ? <video style={{width: 250}} src={editData?.media} loop={true} autoPlay={false} controls></video> : null
                                    }
                                </Col>
                                <Col flex="auto">
                                    <Form labelCol={{span: 9}}>
                                        <Form.Item label="上传者">
                                            123123
                                        </Form.Item>
                                        <Form.Item label="尺寸">
                                            123123
                                        </Form.Item>
                                        <Form.Item label="大小">
                                            123123
                                        </Form.Item>
                                        <Form.Item label="格式">
                                            123123
                                        </Form.Item>
                                        <Form.Item label="上传时间">
                                            123123
                                        </Form.Item>
                                    </Form>
                                </Col>
                            </Row>
                            <Row className="rowWhile">
                                <Col flex={'250px'}><div className="title">{editData?.title}</div></Col>
                                <Col flex="auto">
                                    <Form labelCol={{span: 9}}>
                                        <Form.Item label="上传者">
                                            123123
                                        </Form.Item>
                                        <Form.Item label="上传时间">
                                            123123
                                        </Form.Item>
                                    </Form>
                                </Col>
                            </Row>
                            <Row className="rowWhile">
                                <Col flex={'250px'}><div className="title">{editData?.article}</div></Col>
                                <Col flex="auto">
                                    <Form labelCol={{span: 9}}>
                                        <Form.Item label="上传者">
                                            123123
                                        </Form.Item>
                                        <Form.Item label="上传时间">
                                            123123
                                        </Form.Item>
                                    </Form>
                                </Col>
                            </Row>
                        </Space>
                    </div>
                </div>
                <div className="right">
                    <Space direction='vertical'>
                        <Card title='数据概览' >
                            <Box data={testData} />
                        </Card>
                        <Tables
                            columns={columns()}
                            dataSource={[]}
                            size="small"
                            bordered
                        />
                        <div className="chat">
                            <Radio.Group defaultValue="1">
                                <Radio.Button value="1">观看广告人群分布</Radio.Button>
                                <Radio.Button value="2">点击广告人群分布</Radio.Button>
                                <Radio.Button value="3">转化人群分布</Radio.Button>
                                <Radio.Button value="4">完成人群分布</Radio.Button>
                            </Radio.Group>
                            <Row gutter={20} style={{marginTop: 20}}>
                                <Col span={12}>
                                    <Divider orientation="left" plain style={{ marginTop: 0 }}><strong>性别分布</strong></Divider>
                                    <PieFocus style={{ width: 600, height: 300 }} data={fansCount} name='新增粉丝性别统计' centerName='总关注' />
                                </Col>
                                <Col span={12}>
                                    <Divider orientation="left" plain style={{ marginTop: 0 }}><strong>年龄分布</strong></Divider>
                                    <Bar style={{ width: 550, height: 400 }} data={ageDis} />
                                </Col>
                            </Row>
                            <Row gutter={20} style={{marginTop: 20}}>
                                <Col span={12}>
                                    <Divider orientation="left" plain style={{ marginTop: 0 }}><strong>地域分布</strong></Divider>
                                    <Map data={fansArea} style={{ width: 600, height: 700 }} />
                                </Col>
                                <Col span={12}></Col>
                            </Row>
                        </div>
                    </Space>
                    
                </div>
            </div>
        </div>
    </Drawer>
}

export default React.memo(Details)