import React from 'react';
import Switch from 'components/switch';
import Button from 'components/button';
import Line from 'components/line-ellipsis';
import LineEllipsis from 'components/line-ellipsis';
export default [
    {
        title: '开关',
        align: 'left',
        key: 'isOpen',
        width: 80,
        render({
            value,
            index,
            row,
            onChange,
            key,
        }: {
            value: any;
            index: number;
            row: any;
            onChange: any;
            key: string;
        }) {
            return (
                <Switch
                    checked={value}
                    onChange={isChecked => {
                        const data = { ...row };
                        data[key] = isChecked;
                        onChange && onChange({ changedRow: { data, index } });
                    }}
                />
            );
        },
    },
    {
        title: '计划名称',
        align: 'left',
        width: 280,
        key: 'name',
        //render({
        //    value,
        //    index,
        //    row,
        //    onChange,
        //    key,
        //}: {
        //    value: any;
        //    index: number;
        //    row: any;
        //    onChange: any;
        //    key: string;
        //}) {
        //    return <LineEllipsis>{value}</LineEllipsis>;
        //},
    },
    {
        title: '出价',
        align: 'left',
        key: 'bid',
        render({
            value,
            index,
            row,
            onChange,
            key,
        }: {
            value: any;
            index: number;
            row: any;
            onChange: any;
            key: string;
        }): any {
            return <span>点击计费：{value}</span>;
        },
    },
    { title: '预算', align: 'right', key: 'budget' },
    { title: '曝光数', align: 'right', key: 'impression' },
];

export const fixed = [
    {
        title: '开关',
        align: 'left',
        key: 'isOpen',
        width: 80,
        fixed: 'left',
        render({
            value,
            index,
            row,
            onChange,
            key,
        }: {
            value: any;
            index: number;
            row: any;
            onChange: any;
            key: string;
        }) {
            return (
                <Switch
                    checked={value}
                    onChange={isChecked => {
                        const data = { ...row };
                        data[key] = isChecked;
                        onChange && onChange({ changedRow: { data, index } });
                    }}
                />
            );
        },
    },
    {
        title: '计划名称',
        align: 'left',
        fixed: 'left',
        width: 280,
        key: 'name',
    },
    { title: '状态', align: 'left', key: 'status', width: 400 },
    {
        title: '出价',
        align: 'left',
        key: 'bid',
        render({
            value,
            index,
            row,
            onChange,
            key,
        }: {
            value: any;
            index: number;
            row: any;
            onChange: any;
            key: string;
        }): any {
            return <span>点击计费：{value}</span>;
        },
    },
    { title: '预算', align: 'right', key: 'budget' },
    { title: '曝光数', align: 'right', key: 'impression', fixed: 'right', width: 80 },
];

export const filter = [
    {
        title: '开关',
        align: 'left',
        key: 'isOpen',
        width: 80,
        render({
            value,
            index,
            row,
            onChange,
            key,
        }: {
            value: any;
            index: number;
            row: any;
            onChange: any;
            key: string;
        }) {
            return (
                <Switch
                    checked={value}
                    onChange={isChecked => {
                        const data = { ...row };
                        data[key] = isChecked;
                        onChange && onChange({ changedRow: { data, index } });
                    }}
                />
            );
        },
    },
    {
        title: '计划名称',
        align: 'left',
        width: 280,
        filter: [
            { label: '包含"是"', value: '是' },
            { label: '包含"小"', value: '小' },
            { label: '包含"月"', value: '月' },
        ],
        defaultFiltered: '月',
        filterLocal: (filtered: number | string | (number | string)[], row: any, index: number) => {
            return !filtered || row.name.includes(filtered);
        },
        key: 'name',
    },
    { title: '状态', align: 'left', key: 'status' },
    //{
    //    title: '出价',
    //    align: 'left',
    //    key: 'bid',
    //    render({
    //        value,
    //        index,
    //        row,
    //        onChange,
    //        key,
    //    }: {
    //        value: any;
    //        index: number;
    //        row: any;
    //        onChange: any;
    //        key: string;
    //    }): any {
    //        return <span>点击计费：{value}</span>;
    //    },
    //},
    {
        title: '预算',
        align: 'right',
        key: 'budget',
        filter: [{ label: '包含"0"', value: '0' }, { label: '包含"1"', value: '1' }, { label: '包含"2"', value: '2' }],
        filterLocal: (filtered: string, row: any, index: number) => {
            return String(row.budget).includes(filtered);
        },
    },
    {
        title: '曝光数',
        align: 'right',
        key: 'impression',
        width: 100,
        sorter: (a: any, b: any) => a.impression - b.impression,
        defaultSortDirection: 'ascend',
    },
];