import React from "react"
import Lazyimg from "react-lazyimg-component"
import style from './index.less'
import { Statistic, Typography } from "antd";
import { formatBytes, formatSecondsToTime } from "@/utils/utils";
import PlayVideo from "../cloudNew/playVideo";
const { Text } = Typography;

function columns12(): { label: string, fieldSHow?: { label: string, saveField: string, defaultValue: any[], data: any[] }, data: any[] }[] {

    return [
        {
            label: '自定义指标',
            data: [
                {
                    title: '素材预览', dataIndex: 'preview', label: '自定义指标', width: 320, default: 1,
                    render: (a: any, records: any) => {
                        if (a === '总计')
                            return <Text ellipsis strong>总计</Text>
                        return <div className={style.preview_table}>
                            <div className={style.preview_content}>
                                {records.source === 'video' && <div className={style.playr}>
                                    <PlayVideo videoUrl={records.preview_url}>{(onPlay) => <img onClick={(e) => {
                                        e.stopPropagation(); e.preventDefault()
                                        onPlay()
                                    }} src={require('../../../../../public/image/play.png')} alt="" />}</PlayVideo>
                                </div>}
                                <Lazyimg
                                    animateType="transition"
                                    src={records.source === 'image' ? records.preview_url : records?.key_frame_image_url}
                                    className={`${style.coverImg} lazy`}
                                    animateClassName={['transition-enter', 'transition-enter-active']}
                                />
                            </div>
                            <div className={style.body}>
                                <Text ellipsis strong>{records?.description}</Text>
                                <div>
                                    <div>尺寸：{records.width}*{records.height}</div>
                                    {records.source === 'video' && records.image_duration_millisecond && <div>时长：{formatSecondsToTime(Math.floor(records.image_duration_millisecond / 1000))}</div>}
                                </div>
                                <div>
                                    <Text style={{ fontSize: 12 }}>{formatBytes(records?.file_size)}</Text>
                                    <div>设计师：{records?.create_name || '--'}</div>
                                </div>
                            </div>
                        </div>
                    }
                },
                {
                    title: '投手', dataIndex: 'pitcher_name', label: '自定义指标', width: 80, align: 'center', default: 2,
                    render: (a: string) => a || '--'
                },
                {
                    title: '创建时间', dataIndex: 'created_time', label: '自定义指标', width: 135, align: 'center', ellipsis: true,
                    render: (a: string) => a || '--'
                },
                {
                    title: '消耗', dataIndex: 'cost', label: '自定义指标', width: 110, default: 3, align: 'right', sorter: true,
                    render: (a: string) => <Statistic value={a || 0} precision={2} />
                },
                {
                    title: '曝光量', dataIndex: 'view_count', label: '自定义指标', width: 110, default: 4, align: 'center', sorter: true,
                    render: (a: string) => <Statistic value={a || 0} />
                },
                {
                    title: '点击量', dataIndex: 'valid_click_count', label: '自定义指标', width: 100, default: 5, align: 'center', sorter: true,
                    render: (a: string) => <Statistic value={a || 0} />
                },
                {
                    title: '公众号关注人数(点击归因)', dataIndex: 'from_follow_by_click_uv', label: '自定义指标', width: 85, default: 6, align: 'center', sorter: true,
                    render: (a: string) => <Statistic value={a || 0} />
                },
                {
                    title: '公众号关注成本(点击归因)', dataIndex: 'from_follow_by_click_cost', label: '自定义指标', width: 85, default: 7, align: 'right', sorter: true,
                    render: (a: string) => <Statistic value={a || 0} precision={2} />
                },
                {
                    title: '公众号关注人数(平台上报)', dataIndex: 'biz_follow_uv', label: '自定义指标', width: 85, default: 8, align: 'center', sorter: true,
                    render: (a: string) => <Statistic value={a || 0} />
                },
                {
                    title: '目标转化量', dataIndex: 'conversions_count', label: '自定义指标', width: 65, default: 9, align: 'center', sorter: true,
                    render: (a: string) => <Statistic value={a || 0} />
                },
                {
                    title: '目标转化成本', dataIndex: 'conversions_cost', label: '自定义指标', width: 65, default: 10, align: 'right', sorter: true,
                    render: (a: string) => <Statistic value={a || 0} precision={2} />
                },
                {
                    title: '深度目标转化量', dataIndex: 'deep_conversions_count', label: '自定义指标', width: 65, default: 11, align: 'center', sorter: true,
                    render: (a: string) => <Statistic value={a || 0} />
                },
                {
                    title: '加企业微信客服次数', dataIndex: 'scan_follow_count', label: '自定义指标', width: 70, default: 12, align: 'center', sorter: true,
                    render: (a: string) => <Statistic value={a || 0} />
                },
                {
                    title: '加企业微信客服人数', dataIndex: 'scan_follow_user_count', label: '自定义指标', width: 70, default: 13, align: 'center', sorter: true,
                    render: (a: string) => <Statistic value={a || 0} />
                },
                {
                    title: '下单次数', dataIndex: 'order_pv', label: '自定义指标', width: 60, default: 14, align: 'center', sorter: true,
                    render: (a: string) => <Statistic value={a || 0} />
                },
                {
                    title: '下单金额', dataIndex: 'order_amount', label: '自定义指标', width: 80, default: 15, align: 'right', sorter: true,
                    render: (a: string) => <Statistic value={a || 0} precision={2} />
                },
                {
                    title: '下单次数(点击归因)', dataIndex: 'order_by_click_count', label: '自定义指标', width: 75, default: 16, align: 'center', sorter: true,
                    render: (a: string) => <Statistic value={a || 0} />
                },
                {
                    title: '下单金额(点击归因)', dataIndex: 'order_by_click_amount', label: '自定义指标', width: 75, default: 17, align: 'right', sorter: true,
                    render: (a: string) => <Statistic value={a || 0} precision={2} />
                },
                {
                    title: '点击广告当天内，下单次数', dataIndex: 'first_day_order_by_click_count', label: '自定义指标', width: 80, default: 18, align: 'center', sorter: true,
                    render: (a: string) => <Statistic value={a || 0} />
                },
                {
                    title: '点击首日下单次数(首日新增下单量)', dataIndex: 'first_day_order_count', label: '自定义指标', width: 100, default: 19, align: 'center', sorter: true,
                    render: (a: string) => <Statistic value={a || 0} />
                },
                {
                    title: '首日新增下单金额(点击归因)', dataIndex: 'first_day_order_by_click_amount', label: '自定义指标', width: 95, default: 20, align: 'right', sorter: true,
                    render: (a: string) => <Statistic value={a || 0} precision={2} />
                },
                {
                    title: '点击首日下单金额', dataIndex: 'first_day_order_amount', label: '自定义指标', width: 110, default: 21, align: 'right', sorter: true,
                    render: (a: string) => <Statistic value={a || 0} precision={2} />
                },
                {
                    title: '点击均价', dataIndex: 'cpc', label: '自定义指标', width: 60, default: 22, align: 'right', sorter: true,
                    render: (a: string) => <Statistic value={a || 0} precision={2} />
                },
                {
                    title: '千次曝光成本', dataIndex: 'thousand_display_price', label: '自定义指标', width: 65, default: 23, align: 'right', sorter: true,
                    render: (a: string) => <Statistic value={a || 0} precision={2} />
                },
                {
                    title: '点击率', dataIndex: 'ctr', label: '自定义指标', width: 75, default: 24, align: 'center', sorter: true,
                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 50 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                },
                {
                    title: '公众号关注成本(平台上报)', dataIndex: 'biz_follow_cost', label: '自定义指标', width: 85, default: 25, align: 'right', sorter: true,
                    render: (a: string) => <Statistic value={a || 0} precision={2} />
                },
                {
                    title: '公众号关注率(平台上报)', dataIndex: 'biz_follow_rate', label: '自定义指标', width: 80, default: 26, align: 'center', sorter: true,
                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 50 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                },
                {
                    title: '目标转化率', dataIndex: 'conversions_rate', label: '自定义指标', width: 75, default: 27, align: 'center', sorter: true,
                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 50 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                },
                {
                    title: '深度目标转化率', dataIndex: 'deep_conversions_rate', label: '自定义指标', width: 75, default: 28, align: 'center', sorter: true,
                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 50 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                },
                {
                    title: '加企业微信客服成本', dataIndex: 'scan_follow_user_cost', label: '自定义指标', width: 75, default: 29, align: 'right', sorter: true,
                    render: (a: string) => <Statistic value={a || 0} precision={2} />
                },
                {
                    title: '加企业微信客服率', dataIndex: 'scan_follow_user_rate', label: '自定义指标', width: 75, default: 30, align: 'center', sorter: true,
                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 50 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                },
                {
                    title: '下单单价', dataIndex: 'order_unit_price', label: '自定义指标', width: 60, default: 31, align: 'right', sorter: true,
                    render: (a: string) => <Statistic value={a || 0} precision={2} />
                },
                {
                    title: '下单率', dataIndex: 'order_rate', label: '自定义指标', width: 70, default: 32, align: 'center', sorter: true,
                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 50 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                },
                {
                    title: '下单成本', dataIndex: 'order_by_display_cost', label: '自定义指标', width: 75, default: 33, align: 'right', sorter: true,
                    render: (a: string) => <Statistic value={a || 0} precision={2} />
                },
                {
                    title: '下单ROI', dataIndex: 'order_roi', label: '自定义指标', width: 75, default: 34, align: 'center', sorter: true,
                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 50 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                },
                {
                    title: '下单率(点击归因)', dataIndex: 'order_by_click_rate', label: '自定义指标', width: 75, default: 35, align: 'center', sorter: true,
                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 50 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                },
                {
                    title: '下单成本(点击归因)', dataIndex: 'order_by_click_cost', label: '自定义指标', width: 75, default: 36, align: 'right', sorter: true,
                    render: (a: string) => <Statistic value={a || 0} precision={2} />
                },
                {
                    title: '首日新增下单ROI', dataIndex: 'first_day_order_roi', label: '自定义指标', width: 75, default: 37, align: 'center', sorter: true,
                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 50 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                }
            ]
        },
    ]
}

export default columns12