import React from "react";
import Form from 'antd/lib/form';
import InputNumber from 'antd/lib/input-number';
import Select from 'antd/lib/select';
import Tabs from "antd/lib/tabs";
import Radio from "antd/lib/radio";
import Row from "antd/lib/row";
import Col from "antd/lib/col";
import Empty from "antd/lib/empty";
import Checkbox from "antd/lib/checkbox";
import Input from "antd/lib/input";
import message from "antd/lib/message";
import { Spinner } from "../../../../components";
import Button from '../../../../components/Button'
import { CloseIcon } from "../../../../components/icons";
import { Api, ApiObject } from '../../../../types';
import { RendererEnv } from '../../../../env';
import { sizeOptions, pageOptions, SettingValues, OptionValues, IFPTableValue } from '../types';
import { buildFormTemplate, buildTableHtml, } from "../../../../utils/print/util";
import { getHeadRows } from "../../../../store/utils/commonTableFunction";
import { formPrint } from "../../../../utils/print";
import { IColumn } from "../../../../store/table";
import { flatMap } from 'lodash';

const { Option } = Select;

const tableColumns = [
    {
        title: '标题',
        key: 'title',
        type: 'text',
        width: 70,
    },
    {
        title: '打印',
        key: 'printType',
        type: 'select',
        width: 40,
        options: [
            { label: '是', value: 'all' },
            { label: '否', value: 'none' },
        ]
    },
    {
        title: '宽度(mm)',
        key: 'width',
        type: 'input',
        width: 65
    },
    {
        title: '分组',
        key: 'grouping',
        type: 'select',
        width: 80,
        options: [
            { label: '否', value: 'none' },
            { label: '是', value: 'group' },
            { label: '分组并起栏', value: 'column' },
            { label: '分组并起页', value: 'page' }
        ]
    },
    {
        title: '排序',
        key: 'sort',
        type: 'select',
        width: 40,
        options: [
            { label: '否', value: 'none' },
            { label: '升序', value: 'asc' },
            { label: '降序', value: 'desc' }
        ]
    },
    {
        title: '统计',
        key: 'statistic',
        type: 'select',
        width: 45,
        options: [
            { label: '否', value: 'none' },
            { label: '是', value: 'Sum' }
        ]
    }
]

interface FormPrintProps {
    superRole: boolean
    env: RendererEnv
    columns: IColumn[]
    classnames: (...args: any[]) => string;
    onHide: (e?: any) => void; // modal关闭回调
    printers: string[]
    baseUrl: string
    api?: Api;//获取表格所有数据
    modifyApi?: ApiObject//打印设置默认值
    selectApi?: Api
    deleteApi?: Api
    detailTableField?: string
    [key: string]: any;
}

interface FormPrintState {
    previewLoading: boolean
    saveLoading: boolean
    showEmpty: boolean
    settingValues: SettingValues
    optionValues: OptionValues
    tableValues: IFPTableValue[]
    selectedRowKey: number
    isDynamicSubTitle: boolean
    dynamicSubTiltes: string[]
    btnDisabled: boolean
}

export default class FormPrint extends React.Component<FormPrintProps, FormPrintState> {
    cacheData?: any[]
    reportTitleSql?: string
    reportSubTitleSql?: string

    constructor(props: FormPrintProps) {
        super(props)
        const setting = localStorage.getItem('SF_PrintFormSetting') ?? '{}'
        const settingObj = JSON.parse(setting)
        this.state = {
            previewLoading: false,
            saveLoading: false,
            btnDisabled: true,
            showEmpty: true,
            selectedRowKey: 0,
            isDynamicSubTitle: false,
            dynamicSubTiltes: [],
            settingValues: {
                printer: settingObj.printer ?? props.printers[0],
                direction: settingObj.direction ?? 'vertical',
                content: settingObj.content ?? 'current',
                page: settingObj.page ?? 'A4',
                width: settingObj.width ?? 210,
                height: settingObj.height ?? 297,
                top: settingObj.top ?? 10,
                bottom: settingObj.bottom ?? 10,
                left: settingObj.left ?? 10,
                right: settingObj.right ?? 10,
                copies: settingObj.copies ?? 1
            },
            optionValues: {
                showTitle: true,
                title: props.aliasTitle ?? '表格标题',
                titleAllPrint: true,
                showSubTitle: true,
                subTitle: [],
                subTitleAllPrint: true,
                showHeaderTitle: true,
                headerTitle: props.aliasTitle ?? '页眉标题',
                showHeaderLine: true,
                showFooterLine: true,
                showFooterTitle: false,
                footerTitle: '',
                showLogo: true,
                showPrinter: true,
                showDate: true,
                showPageNum: true,
                lineWidth: 1,
                borderWidth: 2,
                rowPadding: 0,
                colPadding: 0,
                countOfPage: false,
                countAllPage: false,
            },
            tableValues: flatMap(props.columns ?? [], column => {
                if (column.type !== 'lion-upload' && column.type != 'operation' && column.type != '__checkme' && column.type != '__pseudoColumn' && column.name) {
                    return {
                        ...column,
                        name: column.name!,
                        title: column.label,
                        printType: 'all',
                        width: 20,
                        grouping: 'none',
                        sort: 'none',
                        statistic: 'none',
                        group: column.groupName || column.label,
                    }
                }
                return []
            })
        }
    }

    componentDidMount() {
        this.getSetting()
    }

    componentWillUnmount() {
        this.cacheData = undefined
        localStorage.setItem('SF_PrintFormSetting', JSON.stringify(this.state.settingValues))
    }

    async getSetting() {
        const { env, selectApi } = this.props
        if (selectApi) {
            const payload = await env.fetcher(selectApi, this.props.data).finally(() => this.setState({ btnDisabled: false }))
            if (payload.ok && payload.data) {
                const { optionValues, tableValues, isDynamicTitle = false, isDynamicSubTitle = false, reportTitle, reportSubTitle = [], reportTitleSql, reportSubTitleSql } = payload.data
                this.reportTitleSql = reportTitleSql
                this.reportSubTitleSql = reportSubTitleSql
                const values = { ...(optionValues ?? this.state.optionValues) }
                if (isDynamicTitle) {
                    values.title = reportTitle
                }
                if (isDynamicSubTitle) {
                    values.subTitle = reportSubTitle.filter((val: string, index: number) => values.subTitle?.includes(index))
                }
                this.setState({ isDynamicSubTitle: !!isDynamicSubTitle, dynamicSubTiltes: isDynamicSubTitle ? reportSubTitle : [], optionValues: values })
                if (Array.isArray(tableValues)) {
                    this.setState(pre => {
                        return {
                            tableValues: pre.tableValues.map(data => {
                                const column = tableValues.find(column => column.name == data.name)
                                if (column) {
                                    return {
                                        ...data,
                                        printType: column.printType ?? data.printType,
                                        width: column.width ?? data.width,
                                        grouping: column.grouping ?? data.grouping,
                                        sort: column.sort ?? data.sort,
                                        statistic: column.statistic ?? data.statistic
                                    }
                                }
                                return data
                            })
                        }
                    })
                }
            }
        }
    }

    async saveDefaultSetting() {
        const { env, modifyApi } = this.props
        const { optionValues, tableValues, dynamicSubTiltes } = this.state
        const subTitle = optionValues.subTitle?.map(val => dynamicSubTiltes.findIndex(title => title == val)) ?? optionValues.subTitle
        const saveTableValue = tableValues.map(item => {
            return { name: item.name, printType: item.printType, width: item.width, grouping: item.grouping, sort: item.sort, statistic: item.statistic }
        })
        const data = { optionValues: { ...optionValues, subTitle: subTitle }, tableValues: saveTableValue }
        if (modifyApi) {
            const api = { ...modifyApi, data: { ...modifyApi.data, reportTitleSql: this.reportTitleSql, reportSubTitleSql: this.reportSubTitleSql } }
            this.setState({ saveLoading: true })
            env.fetcher(api, data).then(payload => {
                env.notify('success', payload.msg)
            }).catch(err => {
                env.notify('error', err)
            }).finally(() => {
                this.setState({ saveLoading: false })
            })
        }
    }

    async deleteDefaultSetting() {
        const { env, deleteApi } = this.props
        if (deleteApi) {
            env.fetcher(deleteApi).then(payload => {
                env.notify('success', payload.msg)
            }).catch(err => {
                env.notify('error', err)
            })
        }
    }

    async getTableData() {
        const { env, api } = this.props
        if (this.cacheData) {
            return this.cacheData
        } else {
            if (api) {
                const payload = await env.fetcher(api, { ...this.props.query, pageParam: { "size": "", "index": "", "topN": "" } })
                const items = payload.data.items
                if (payload.ok && Array.isArray(items)) {
                    this.cacheData = items
                    return items
                }
            }
            return []
        }
    }

    async handleFormPrint(preview: boolean) {
        this.setState({ previewLoading: true, showEmpty: false })
        const { settingValues, optionValues, tableValues: tableColumns } = this.state
        const { ctx, columns } = this.props
        const hideColums = tableColumns.filter(item => item.printType == 'none').map(item => item.name)
        const headRows = getHeadRows(columns.filter(column => column.name && column.name != 'SF_CHECK' && column.name != 'SF_PSEUDO' && !hideColums.includes(column.name ?? '')))
        const temp = buildFormTemplate(settingValues, optionValues)
        let tableData: any[] = []
        if (settingValues.content == 'all') {
            tableData = await this.getTableData()
        } else if (settingValues.content == 'current') {
            tableData = ctx.items ?? []
        } else if (settingValues.content == 'selected') {
            tableData = ctx.selectedItems ?? []
        }
        const lineHeight = 4.80377358490566
        const countOfPage = Math.round(temp.table.height / lineHeight)
        const countOfTask = countOfPage * 6 - 6 - (optionValues.countAllPage ? 6 : 0)
        const count = Math.ceil(tableData.length / countOfTask)
        const htmls: string[] = []
        for (let i = 0; i < count; i++) {
            const start = i * countOfTask
            const end = (i + 1) * countOfTask
            const html = buildTableHtml({ ...optionValues, tableWidth: temp.table.width }, tableColumns, headRows, tableData, [start, end], i == count - 1)
            htmls.push(html)
        }
        formPrint(preview, settingValues, temp, htmls, () => {
            if (!preview) message.success('打印任务发送成功')
            this.setState({ previewLoading: false })
        })
    }

    handleConfigTableChange(rowKey: number, columnKey: string, value: any) {
        this.setState({
            tableValues: this.state.tableValues.map((row, index) => {
                if (index == rowKey) {
                    const tempRow = row
                    tempRow[columnKey] = value
                    return tempRow
                }
                return row
            })
        })
    }

    handleMove(moveUp: boolean) {
        const swap = (rows: IFPTableValue[], currentIndex: number, targetIndex: number) => {
            const currentRow = rows[currentIndex]
            rows[currentIndex] = rows[targetIndex]
            rows[targetIndex] = currentRow
        }
        const { tableValues, selectedRowKey } = this.state
        const tempRows = tableValues.slice()
        const currentGroup = tempRows[selectedRowKey].group
        const currentLength = tempRows.filter(row => row.group == currentGroup).length

        const targetGroup = tempRows[selectedRowKey + (moveUp ? -1 : 1)].group
        const targetLength = tempRows.filter(row => row.group == targetGroup).length
        let targetRowKey
        if (currentGroup == targetGroup) {
            targetRowKey = selectedRowKey + (moveUp ? -1 : 1)
            swap(tempRows, selectedRowKey, targetRowKey)
        } else {
            targetRowKey = selectedRowKey + (moveUp ? (-targetLength) : targetLength)
            const currentStart = tempRows.findIndex(row => row.group == currentGroup)
            const currentEnd = tempRows.filter(row => row.group == currentGroup).length + currentStart - 1
            const targetStart = tempRows.findIndex(row => row.group == targetGroup)
            const targetEnd = tempRows.filter(row => row.group == targetGroup).length + targetStart - 1
            const start = moveUp ? currentStart : targetStart
            const end = moveUp ? currentEnd : targetEnd
            const length = moveUp ? targetLength : currentLength
            for (let i = start; i <= end; i++) {
                for (let j = i; i < j + length; j--) {
                    swap(tempRows, j, j - 1)
                }
            }
        }
        this.setState({ tableValues: tempRows, selectedRowKey: targetRowKey })
    }

    renderTable(superRole: boolean) {
        const { selectedRowKey, tableValues } = this.state
        const groupName = tableValues[selectedRowKey].groupName

        return (
            <div style={{ flex: 1, marginTop: 8, overflow: 'auto' }}>
                <table id="report-print-column-config-table" className="column-config-table" width={350} cellSpacing={0} >
                    <thead>
                        <tr>
                            {tableColumns.map(column => (
                                <th key={column.key} style={{ width: column.width }} >{column.title}</th>
                            ))}
                        </tr>
                    </thead>
                    <tbody>
                        {tableValues.map((row, index) => (
                            <tr key={index}>
                                {tableColumns.map(column => {
                                    const value = row[column.key]
                                    const isSelectedCell = column.key == 'title' && index == selectedRowKey
                                    const isGroupCell = column.key == 'title' && (groupName ? groupName === row.groupName : index == selectedRowKey)
                                    return (
                                        <td
                                            key={column.key}
                                            title={column.key == 'title' ? value : undefined}
                                            onClick={column.key == 'title' ? () => this.setState({ selectedRowKey: index }) : undefined}
                                            style={{ backgroundColor: isGroupCell ? '#1890ff' : isSelectedCell ? 'black' : undefined, color: isSelectedCell ? 'white' : undefined }}
                                        >
                                            {column.type == 'text' && <>{value}</>}
                                            {column.type == 'select' &&
                                                <Select
                                                    disabled={!superRole}
                                                    size='small'
                                                    showArrow={false}
                                                    value={value}
                                                    getPopupContainer={() => document.getElementById('report-print-column-config-table')!}
                                                    dropdownClassName='column-config-table-select-dropdown'
                                                    onChange={value => this.handleConfigTableChange(index, column.key, value)}
                                                >
                                                    {column.options!.map((option, index) => (
                                                        <Option key={index} value={option.value}>
                                                            {option.label}
                                                        </Option>
                                                    ))}
                                                </Select>
                                            }
                                            {column.type == 'input' &&
                                                <InputNumber disabled={!superRole} onChange={value => this.handleConfigTableChange(index, column.key, value)} size="small" controls={false} value={value} min={0} max={200} style={{ width: '100%', border: 'none' }} />
                                            }
                                        </td>
                                    )
                                })}
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
        )
    }

    render() {
        const { env, classnames: cx, translate: __, popupContainer, printers, superRole, onHide } = this.props
        const { previewLoading, saveLoading, showEmpty, settingValues, optionValues, selectedRowKey, tableValues, isDynamicSubTitle, dynamicSubTiltes } = this.state
        return (
            <>
                <div className={cx('Modal-header')}>
                    <div className={cx('Modal-title')}>
                        {'报表打印'}
                        <a
                            data-tooltip={__('Dialog.close')}
                            onClick={(e) => onHide(e)}
                            className={cx('Modal-close')}
                        >
                            <CloseIcon />
                        </a>
                    </div>
                </div>
                <div className={cx('Modal-body')}>
                    <div className='print-form-container'>
                        <div className='preview-container'>
                            <Spinner size="md" overlay show={previewLoading} />
                            {showEmpty && <Empty description='暂无预览效果' className='preview-empty' />}
                            <iframe id='report-preview' width='100%' height='100%'></iframe>
                        </div>
                        <Tabs tabBarStyle={{ marginBottom: 8, paddingLeft: 24, paddingRight: 24 }} style={{ width: 350 }}>
                            <Tabs.TabPane key={1} tab='设置'>
                                <div className="print-setting">
                                    <div className="print-setting-label">打印设备</div>
                                    <div className="print-setting-content">
                                        <Row gutter={10}>
                                            <Col span={12}>
                                                <Form.Item colon={false} label={__('CRUD.printer')} >
                                                    <Select
                                                        style={{ width: 170 }}
                                                        getPopupContainer={popupContainer}
                                                        dropdownClassName='label-print-selector'
                                                        value={settingValues.printer}
                                                        onChange={value => this.setState({ settingValues: { ...settingValues, printer: value } })}
                                                    >
                                                        {printers.map(item => <Option key={item} value={item}>{item}</Option>)}
                                                    </Select>
                                                </Form.Item>
                                            </Col>
                                            <Col span={12}>
                                                <Form.Item colon={false} label={__('CRUD.pageSize')}  >
                                                    <Select
                                                        getPopupContainer={popupContainer}
                                                        dropdownClassName='label-print-selector'
                                                        value={settingValues.page}
                                                        onChange={value => this.setState({ settingValues: { ...settingValues, page: value, width: sizeOptions[value][0], height: sizeOptions[value][1] } })}
                                                    >
                                                        {pageOptions.map(item => <Option key={item.value} value={item.value}>{item.label}</Option>)}
                                                    </Select>
                                                </Form.Item>
                                            </Col>
                                        </Row>
                                        <Row gutter={10}>
                                            <Col span={12}>
                                                <Form.Item colon={false} label={__('width')}  >
                                                    <InputNumber style={{ width: 170 }} min={0} max={1000} value={settingValues.width} onChange={value => value != null && this.setState({ settingValues: { ...settingValues, width: value } })} />
                                                </Form.Item>
                                            </Col>
                                            <Col span={12}>
                                                <Form.Item colon={false} label={__('height')}  >
                                                    <InputNumber style={{ width: 170 }} min={0} max={1000} value={settingValues.height} onChange={value => value != null && this.setState({ settingValues: { ...settingValues, height: value } })} />
                                                </Form.Item>
                                            </Col>
                                        </Row>
                                    </div>
                                    <div className="print-setting-label">纸张设置</div>
                                    <div className="print-setting-content">
                                        <Row gutter={10}>
                                            <Col span={12}>
                                                <Form.Item colon={false} label={__('up')} >
                                                    <InputNumber style={{ width: 170 }} min={0} max={100} value={settingValues.top} onChange={value => value != null && this.setState({ settingValues: { ...settingValues, top: value } })} />
                                                </Form.Item>
                                            </Col>
                                            <Col span={12}>
                                                <Form.Item colon={false} label={__('below')} >
                                                    <InputNumber style={{ width: 170 }} min={0} max={100} value={settingValues.bottom} onChange={value => value != null && this.setState({ settingValues: { ...settingValues, bottom: value } })} />
                                                </Form.Item>
                                            </Col>
                                        </Row>
                                        <Row gutter={10}>
                                            <Col span={12}>
                                                <Form.Item colon={false} label={__('left')} >
                                                    <InputNumber style={{ width: 170 }} min={0} max={100} value={settingValues.left} onChange={value => value != null && this.setState({ settingValues: { ...settingValues, left: value } })} />
                                                </Form.Item>
                                            </Col>
                                            <Col span={12}>
                                                <Form.Item colon={false} label={__('right')} >
                                                    <InputNumber style={{ width: 170 }} min={0} max={100} value={settingValues.right} onChange={value => value != null && this.setState({ settingValues: { ...settingValues, right: value } })} />
                                                </Form.Item>
                                            </Col>
                                        </Row>
                                        <Row >
                                            <Col span={24}>
                                                <Form.Item colon={false} label={__('direction')} >
                                                    <Radio.Group
                                                        value={settingValues.direction}
                                                        onChange={value => this.setState({ settingValues: { ...settingValues, direction: value.target.value } })}
                                                    >
                                                        <Radio value={'vertical'}>{__('vertical')}</Radio>
                                                        <Radio value={'horizontal'}>{__('horizontal')}</Radio>
                                                    </Radio.Group>
                                                </Form.Item>
                                            </Col>
                                        </Row>
                                    </div>
                                    <div className="print-setting-label">数据范围</div>
                                    <div className="print-setting-content">
                                        <Row>
                                            <Col span={24}>
                                                <Form.Item colon={false} label={__('content')} >
                                                    <Radio.Group
                                                        value={settingValues.content}
                                                        onChange={value => this.setState({ settingValues: { ...settingValues, content: value.target.value } })}
                                                    >
                                                        <Radio style={{ marginRight: 0 }} value={'current'}>当前数据</Radio>
                                                        <Radio style={{ marginRight: 0 }} value={'selected'}>{__('selectedData')}</Radio>
                                                        <Radio style={{ marginRight: 0 }} value={'all'}>{__('allData')}</Radio>
                                                    </Radio.Group>
                                                </Form.Item>
                                            </Col>
                                        </Row>
                                        <Row>
                                            <Col span={24}>
                                                <Form.Item colon={false} label={__('CRUD.copies')} >
                                                    <InputNumber style={{ width: 160 }} min={1} max={10} value={settingValues.copies} onChange={value => value != null && this.setState({ settingValues: { ...settingValues, copies: value } })} />
                                                </Form.Item>
                                            </Col>
                                        </Row>
                                    </div>
                                </div>
                            </Tabs.TabPane>
                            <Tabs.TabPane key={2} tab='选项'>
                                <div className="print-setting">
                                    <div className="print-setting-label">格式设置</div>
                                    <div className="print-setting-content">
                                        <Row align="middle" style={{ height: 32, marginBottom: 12 }} >
                                            <Col span={8}>
                                                <Checkbox disabled={!superRole} checked={optionValues.showHeaderTitle} onChange={e => this.setState({ optionValues: { ...optionValues, showHeaderTitle: e.target.checked } })}>打印页眉</Checkbox>
                                            </Col>
                                            <Col span={16}>
                                                <Input disabled={!superRole} value={optionValues.headerTitle} onChange={e => this.setState({ optionValues: { ...optionValues, headerTitle: e.target.value } })} maxLength={50} placeholder={__('CRUD.fillIn')} />
                                            </Col>
                                        </Row>
                                        <Row align="middle" style={{ height: 32, marginBottom: 12 }} >
                                            <Col span={8}>
                                                <Checkbox disabled={!superRole} checked={optionValues.showTitle} onChange={e => this.setState({ optionValues: { ...optionValues, showTitle: e.target.checked } })}>打印标题</Checkbox>
                                            </Col>
                                            <Col span={16}>
                                                <Input disabled={!superRole} value={optionValues.title} onChange={e => this.setState({ optionValues: { ...optionValues, title: e.target.value } })} maxLength={50} placeholder={__('CRUD.fillIn')} />
                                            </Col>
                                        </Row>
                                        <Row align="middle" style={{ height: 32, marginBottom: 12 }} >
                                            <Col span={8}>
                                                <Checkbox disabled={!superRole} checked={optionValues.showSubTitle} onChange={e => this.setState({ optionValues: { ...optionValues, showSubTitle: e.target.checked } })}>打印子标题</Checkbox>
                                            </Col>
                                            <Col span={16}>
                                                {isDynamicSubTitle ?
                                                    <Select
                                                        disabled={!superRole}
                                                        style={{ width: '100%' }}
                                                        getPopupContainer={popupContainer}
                                                        dropdownClassName='label-print-selector'
                                                        mode="multiple"
                                                        placeholder={__('Select.placeholder')}
                                                        maxTagCount='responsive'
                                                        value={optionValues.subTitle}
                                                        onChange={value => {
                                                            if (value.length <= 3) {
                                                                this.setState({ optionValues: { ...optionValues, subTitle: value } })
                                                            } else {
                                                                env.notify('error', '最多选择3项')
                                                            }
                                                        }}
                                                    >
                                                        {dynamicSubTiltes.map((item, index) => <Option key={index} value={item}>{item}</Option>)}
                                                    </Select> :
                                                    <Input disabled={!superRole} value={optionValues.subTitle?.[0]} onChange={e => this.setState({ optionValues: { ...optionValues, subTitle: [e.target.value] } })} maxLength={50} placeholder={__('CRUD.fillIn')} />
                                                }
                                            </Col>
                                        </Row>
                                        <Row align="middle" style={{ height: 32, marginBottom: 12 }} >
                                            <Col span={8}>
                                                <Checkbox disabled={!superRole} checked={optionValues.showFooterTitle} onChange={e => this.setState({ optionValues: { ...optionValues, showFooterTitle: e.target.checked } })}>打印页脚</Checkbox>
                                            </Col>
                                            <Col span={16}>
                                                <Input disabled={!superRole} value={optionValues.footerTitle} onChange={e => this.setState({ optionValues: { ...optionValues, footerTitle: e.target.value } })} maxLength={50} placeholder={__('CRUD.fillIn')} />
                                            </Col>
                                        </Row>
                                        <Row align="middle" style={{ height: 32, marginBottom: 12 }}>
                                            <Col span={12}>
                                                <Checkbox disabled={!superRole} checked={optionValues.titleAllPrint} onChange={e => this.setState({ optionValues: { ...optionValues, titleAllPrint: e.target.checked } })}>标题每页打印</Checkbox>
                                            </Col>
                                            <Col span={12}>
                                                <Checkbox disabled={!superRole} checked={optionValues.subTitleAllPrint} onChange={e => this.setState({ optionValues: { ...optionValues, subTitleAllPrint: e.target.checked } })}>子标题每页打印</Checkbox>
                                            </Col>
                                        </Row>
                                    </div>
                                    <div className="print-setting-label">内容设置</div>
                                    <div className="print-setting-content">
                                        <Row align="middle" style={{ height: 32, marginBottom: 8 }}>
                                            <Col span={12}><Checkbox disabled={!superRole} checked={optionValues.showHeaderLine} onChange={e => this.setState({ optionValues: { ...optionValues, showHeaderLine: e.target.checked } })}>页眉横线</Checkbox></Col>
                                            <Col span={12}><Checkbox disabled={!superRole} checked={optionValues.showFooterLine} onChange={e => this.setState({ optionValues: { ...optionValues, showFooterLine: e.target.checked } })}>页脚横线</Checkbox></Col>
                                        </Row>
                                        <Row align="middle" style={{ height: 32, marginBottom: 8 }}>
                                            <Col span={12}><Checkbox disabled={!superRole} checked={optionValues.showLogo} onChange={e => this.setState({ optionValues: { ...optionValues, showLogo: e.target.checked } })}>公司logo</Checkbox></Col>
                                            <Col span={12}><Checkbox disabled={!superRole} checked={optionValues.showPrinter} onChange={e => this.setState({ optionValues: { ...optionValues, showPrinter: e.target.checked } })}>打印者</Checkbox></Col>
                                        </Row>
                                        <Row align="middle" style={{ height: 32, marginBottom: 8 }}>
                                            <Col span={12}><Checkbox disabled={!superRole} checked={optionValues.showDate} onChange={e => this.setState({ optionValues: { ...optionValues, showDate: e.target.checked } })}>时间</Checkbox></Col>
                                            <Col span={12}><Checkbox disabled={!superRole} checked={optionValues.showPageNum} onChange={e => this.setState({ optionValues: { ...optionValues, showPageNum: e.target.checked } })}>页码</Checkbox></Col>
                                        </Row>
                                    </div>
                                    <div className="print-setting-label">样式设置</div>
                                    <div className="print-setting-content">
                                        <Row align="middle" style={{ height: 32, marginBottom: 8 }} >
                                            <Col span={12}>
                                                <Form.Item colon={false} label={'线条宽度'} >
                                                    <InputNumber disabled={!superRole} value={optionValues.lineWidth} onChange={value => value && this.setState({ optionValues: { ...optionValues, lineWidth: value } })} min={0} max={1} />
                                                </Form.Item>
                                            </Col>
                                            <Col span={12}>
                                                <Form.Item colon={false} label={'边框宽度'}>
                                                    <InputNumber disabled={!superRole} value={optionValues.borderWidth} onChange={value => value && this.setState({ optionValues: { ...optionValues, borderWidth: value } })} min={0} max={5} />
                                                </Form.Item>
                                            </Col>
                                        </Row>
                                        <Row>
                                            <Col span={12}>
                                                <Form.Item colon={false} label={'行内边距'}>
                                                    <InputNumber disabled={!superRole} value={optionValues.rowPadding} onChange={value => value != null && this.setState({ optionValues: { ...optionValues, rowPadding: value } })} min={0} max={20} />
                                                </Form.Item>
                                            </Col>
                                            <Col span={12}>
                                                <Form.Item colon={false} label={'列内边距'}>
                                                    <InputNumber disabled={!superRole} value={optionValues.colPadding} onChange={value => value != null && this.setState({ optionValues: { ...optionValues, colPadding: value } })} min={0} max={20} />
                                                </Form.Item>
                                            </Col>
                                        </Row>
                                    </div>
                                    <div className="print-setting-label">打印格式</div>
                                    <div className="print-setting-content">
                                        <Row align="middle" style={{ height: 32, marginBottom: 8 }}>
                                            {/* <Col span={12}><Checkbox disabled={!superRole} checked={optionValues.countOfPage} onChange={e => this.setState({ optionValues: { ...optionValues, countOfPage: e.target.checked } })}>每页打印小计</Checkbox></Col> */}
                                            <Col span={24}><Checkbox disabled={!superRole} checked={optionValues.countAllPage} onChange={e => this.setState({ optionValues: { ...optionValues, countAllPage: e.target.checked } })}>每页打印合计</Checkbox></Col>
                                        </Row>
                                    </div>
                                </div>
                            </Tabs.TabPane>
                            <Tabs.TabPane key={3} tab='数据'>
                                <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
                                    <Row style={{ height: 30 }}>
                                        <Col><Button onClick={() => this.handleMove(true)} disabled={selectedRowKey == 0 || !superRole} level="link">上移</Button></Col>
                                        <Col><Button onClick={() => this.handleMove(false)} disabled={selectedRowKey == tableValues.length - 1 || !superRole} level="link">下移</Button></Col>
                                    </Row>
                                    {this.renderTable(superRole)}
                                </div>
                            </Tabs.TabPane>
                        </Tabs>
                    </div>
                </div>
                <div className={cx('Modal-footer')} >
                    {superRole && <Button onClick={this.deleteDefaultSetting.bind(this)} >清空默认值</Button>}
                    {superRole && <Button onClick={this.saveDefaultSetting.bind(this)} loading={saveLoading}>设置默认值</Button>}
                    <Button level="primary" onClick={this.handleFormPrint.bind(this, true)} >{__('preview')}</Button>
                    <Button disabled={this.state.btnDisabled} level="primary" onClick={this.handleFormPrint.bind(this, false)} >{__('print')}</Button>
                    <Button onClick={(e: any) => onHide(e)}>{__('cancel')}</Button>
                </div >
            </>
        )
    }

}