import React from "react";
import { Form, InputNumber, Select, Tabs, Radio, Row, Col, Empty, Checkbox, Input, message, Divider, Popover } from 'antd';
import { FontColorsOutlined } from "@ant-design/icons";
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, fontSizeOptions, fontFamilyOptions, duplexPrintOptions } from '../../types';
import { buildFormTemplate } from "../../../../../utils/print/util";
import { getColumnShowLabel, getHeadRows } from "../../../../../store/utils/commonTableFunction";
import { formPrint } from "../../../../../utils/print";
import { IColumn } from "../../../../../store/table";
import { flatMap } from 'lodash';
import { ReportOptionValues, ReportSettingValues, ReportTableValues } from "./types";
import TableSetting from "./TableSetting";
import { createHtml, getCountOfPage } from "./utils";

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
  isDynamicSubTitle: boolean
  dynamicSubTiltes: string[]
  btnDisabled: boolean
  settingValues: ReportSettingValues
  optionValues: ReportOptionValues
  tableValues: ReportTableValues[]
}

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,
      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,
        duplex: settingObj.duplex ?? 0
      },
      optionValues: {
        showTitle: true,
        title: '',
        titleFontSize: 16,
        titleFontFamily: '宋体',
        showSubTitle: true,
        subTitle: [],
        subTitleFontSize: 13,
        subTitleFontFamily: '宋体',
        titleAllPrint: true,
        subTitleAllPrint: true,
        showHeaderTitle: true,
        headerTitle: '',
        headerFontSize: 16,
        headerFontFamily: '宋体',
        showHeaderLine: true,
        showLogo: true,
        showFooterTitle: false,
        footerTitle: '',
        footerFontSize: 13,
        footerFontFamily: '宋体',
        showPrinter: true,
        showPageNum: true,
        showDate: true,
        showFooterLine: true,
        countAllPage: false,
        lineWidth: 1,
        borderWidth: 2,
        rowPadding: 0,
        colPadding: 0,
        contentFontSize: 13,
        contentFontFamily: '宋体',
      },
      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: getColumnShowLabel(column),
            printType: 'all',
            width: 20,
            grouping: 'none',
            sort: 'none',
            statistic: 'none',
            group: column.groupName || column.label,
          }
        }
        return []
      })
    }
  }

  componentDidMount() {
    this.getSetting()
  }

  componentWillUnmount() {
    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 { isGlobalSetting, optionValues, tableValues, top, bottom, left, right,
          isDynamicTitle = false, isDynamicSubTitle = false, reportTitle, reportSubTitle = [], reportTitleSql, reportSubTitleSql } = payload.data
        this.reportTitleSql = reportTitleSql
        this.reportSubTitleSql = reportSubTitleSql
        const values = { ...(isGlobalSetting ? payload.data : optionValues) }
        if (isDynamicTitle) {
          values.title = reportTitle
        }
        if (isDynamicSubTitle) {
          values.subTitle = reportSubTitle.filter((val: string, index: number) => values.subTitle?.includes(index))
        }
        this.setState(pre => {
          return {
            isDynamicSubTitle: !!isDynamicSubTitle,
            dynamicSubTiltes: isDynamicSubTitle ? reportSubTitle : [],
            settingValues: isGlobalSetting ?
              {
                ...pre.settingValues,
                top: top ?? pre.settingValues.top,
                bottom: bottom ?? pre.settingValues.bottom,
                left: left ?? pre.settingValues.left,
                right: right ?? pre.settingValues.right
              }
              : pre.settingValues,
            optionValues: { ...pre.optionValues, ...values },
            tableValues: Array.isArray(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
            }) : pre.tableValues
          }
        })
      }
    }
  }

  async saveDefaultSetting() {
    const { env, modifyApi } = this.props
    const { optionValues, tableValues, dynamicSubTiltes, isDynamicSubTitle } = this.state
    const subTitle = isDynamicSubTitle ? 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(): Promise<any[]> {
    const { env, api, ctx } = this.props
    const { settingValues } = this.state

    if (settingValues.content == 'all') {
      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 []
      }
    } else if (settingValues.content == 'current') {
      return ctx.items ?? []
    } else if (settingValues.content == 'selected') {
      return ctx.selectedItems ?? []
    }
    return []
  }

  async handleFormPrint(preview: boolean) {
    this.setState({ previewLoading: true, showEmpty: false })
    const { settingValues, optionValues, tableValues: tableColumns } = this.state
    const { columns } = this.props
    const hideColums = tableColumns.filter(item => item.printType == 'none').map(item => item.name)

    const headRows = getHeadRows(columns.filter(column => {
      return column.name && column.name != 'operation' && column.type != 'lion-upload' && column.name != 'SF_CHECK' && column.name != 'SF_PSEUDO' && !hideColums.includes(column.name ?? '')
    }).map(column => {
      const index = tableColumns.findIndex(item => item.name == column.name)
      return index > -1 ? { ...column, index } : column
    }).sort((a, b) => a.index - b.index))

    const template = buildFormTemplate(settingValues, optionValues)
    const tableData = await this.getTableData()

    const taskCount = 6
    const countOfPage = getCountOfPage(template.table.height, optionValues.contentFontSize, optionValues.rowPadding)
    const countOfTask = countOfPage * taskCount - taskCount - (optionValues.countAllPage ? taskCount : 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 = createHtml({ ...optionValues, tableWidth: template.table.width }, tableColumns, headRows, tableData, [start, end], i == count - 1)
      htmls.push(html)
    }
    formPrint(preview, settingValues, template, htmls, () => {
      if (!preview) message.success('打印任务发送成功')
      this.setState({ previewLoading: false })
    })
  }

  render() {
    const { env, classnames: cx, translate: __, popupContainer, printers, superRole, onHide } = this.props
    const { previewLoading, saveLoading, showEmpty, settingValues, optionValues, 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 => <Select.Option key={item} value={item}>{item}</Select.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 => <Select.Option key={item.value} value={item.value}>{item.label}</Select.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">纸张设置(单位：mm)</div>
                  <div className="print-setting-content">
                    <Row gutter={10}>
                      <Col span={12}>
                        <Form.Item colon={false} label={__('up')} >
                          <InputNumber style={{ width: 120 }} 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: 120 }} 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: 120 }} 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: 120 }} 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='双面'>
                          <Select
                            style={{ width: 160 }}
                            value={settingValues.duplex}
                            options={duplexPrintOptions}
                            onChange={value => this.setState({ settingValues: { ...settingValues, duplex: 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 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" >
                      <Col span={6}>
                        <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>
                      <Col span={2}>
                        <Popover
                          trigger={'click'}
                          placement='bottom'
                          getPopupContainer={env.getModalContainer}
                          showArrow={false}
                          content={
                            <div style={{ display: 'flex', flexDirection: 'column' }}>
                              <span>字体</span>
                              <Select
                                disabled={!superRole}
                                style={{ width: 100 }}
                                value={optionValues.titleFontFamily}
                                options={fontFamilyOptions}
                                onChange={val => this.setState({ optionValues: { ...optionValues, titleFontFamily: val } })}
                              />
                              <span style={{ marginTop: 4 }}>字号</span>
                              <Select
                                disabled={!superRole}
                                style={{ width: 100 }}
                                value={optionValues.titleFontSize}
                                options={fontSizeOptions}
                                onChange={val => this.setState({ optionValues: { ...optionValues, titleFontSize: val } })}
                              />
                            </div>
                          }>
                          <FontColorsOutlined style={{ fontSize: 20, paddingLeft: 8, paddingTop: 3, color: '#00000065' }} />
                        </Popover>
                      </Col>
                    </Row>
                    <Row align="middle">
                      <Col span={6}>
                        <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) => <Select.Option key={index} value={item}>{item}</Select.Option>)}
                          </Select> :
                          <Input disabled={!superRole} value={optionValues.subTitle?.[0]} onChange={e => this.setState({ optionValues: { ...optionValues, subTitle: e.target.value.length ? [e.target.value] : [] } })} maxLength={50} placeholder={__('CRUD.fillIn')} />
                        }
                      </Col>
                      <Col span={2}>
                        <Popover
                          trigger={'click'}
                          placement='bottom'
                          getPopupContainer={env.getModalContainer}
                          showArrow={false}
                          content={
                            <div style={{ display: 'flex', flexDirection: 'column' }}>
                              <span>字体</span>
                              <Select
                                disabled={!superRole}
                                style={{ width: 100 }}
                                value={optionValues.subTitleFontFamily}
                                options={fontFamilyOptions}
                                onChange={val => this.setState({ optionValues: { ...optionValues, subTitleFontFamily: val } })}
                              />
                              <span style={{ marginTop: 4 }}>字号</span>
                              <Select
                                disabled={!superRole}
                                style={{ width: 100 }}
                                value={optionValues.subTitleFontSize}
                                options={fontSizeOptions}
                                onChange={val => this.setState({ optionValues: { ...optionValues, subTitleFontSize: val } })}
                              />
                            </div>
                          }>
                          <FontColorsOutlined style={{ fontSize: 20, paddingLeft: 8, paddingTop: 3, color: '#00000065' }} />
                        </Popover>
                      </Col>
                    </Row>
                    <Row align='middle'>
                      <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>
                    <Divider />
                    <Row align='middle'>
                      <Col span={6}>
                        <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>
                      <Col span={2}>
                        <Popover
                          trigger={'click'}
                          placement='bottom'
                          getPopupContainer={env.getModalContainer}
                          showArrow={false}
                          content={
                            <div style={{ display: 'flex', flexDirection: 'column' }}>
                              <span>字体</span>
                              <Select
                                disabled={!superRole}
                                style={{ width: 100 }}
                                value={optionValues.headerFontFamily}
                                options={fontFamilyOptions}
                                onChange={val => this.setState({ optionValues: { ...optionValues, headerFontFamily: val } })}
                              />
                              <span style={{ marginTop: 4 }}>字号</span>
                              <Select
                                disabled={!superRole}
                                style={{ width: 100 }}
                                value={optionValues.headerFontSize}
                                options={fontSizeOptions}
                                onChange={val => this.setState({ optionValues: { ...optionValues, headerFontSize: val } })}
                              />
                            </div>
                          }>
                          <FontColorsOutlined style={{ fontSize: 20, paddingLeft: 8, paddingTop: 3, color: '#00000065' }} />
                        </Popover>
                      </Col>
                    </Row>
                    <Row align='middle'>
                      <Col span={6} />
                      <Col span={9}>
                        <Checkbox disabled={!superRole} checked={optionValues.showHeaderLine} onChange={e => this.setState({ optionValues: { ...optionValues, showHeaderLine: e.target.checked } })}>页眉横线</Checkbox>
                      </Col>
                      <Col span={9}>
                        <Checkbox disabled={!superRole} checked={optionValues.showLogo} onChange={e => this.setState({ optionValues: { ...optionValues, showLogo: e.target.checked } })}>公司logo</Checkbox>
                      </Col>
                    </Row>
                    <Divider />
                    <Row align='middle'>
                      <Col span={6}>
                        <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>
                      <Col span={2}>
                        <Popover
                          trigger={'click'}
                          placement='bottom'
                          getPopupContainer={env.getModalContainer}
                          showArrow={false}
                          content={
                            <div style={{ display: 'flex', flexDirection: 'column' }}>
                              <span>字体</span>
                              <Select
                                disabled={!superRole}
                                style={{ width: 100 }}
                                value={optionValues.footerFontFamily}
                                options={fontFamilyOptions}
                                onChange={val => this.setState({ optionValues: { ...optionValues, footerFontFamily: val } })}
                              />
                              <span style={{ marginTop: 4 }}>字号</span>
                              <Select
                                disabled={!superRole}
                                style={{ width: 100 }}
                                value={optionValues.footerFontSize}
                                options={fontSizeOptions}
                                onChange={val => this.setState({ optionValues: { ...optionValues, footerFontSize: val } })}
                              />
                            </div>
                          }>
                          <FontColorsOutlined style={{ fontSize: 20, paddingLeft: 8, paddingTop: 3, color: '#00000065' }} />
                        </Popover>
                      </Col>
                    </Row>
                    <Row align="middle">
                      <Col span={6} />
                      <Col span={9}>
                        <Checkbox disabled={!superRole} checked={optionValues.showPrinter} onChange={e => this.setState({ optionValues: { ...optionValues, showPrinter: e.target.checked } })}>打印者</Checkbox>
                      </Col>
                      <Col span={9}>
                        <Checkbox disabled={!superRole} checked={optionValues.showPageNum} onChange={e => this.setState({ optionValues: { ...optionValues, showPageNum: e.target.checked } })}>页码</Checkbox>
                      </Col>
                    </Row>
                    <Row align='middle'>
                      <Col span={6} />
                      <Col span={9}>
                        <Checkbox disabled={!superRole} checked={optionValues.showDate} onChange={e => this.setState({ optionValues: { ...optionValues, showDate: e.target.checked } })}>打印时间</Checkbox>
                      </Col>
                      <Col span={9}>
                        <Checkbox disabled={!superRole} checked={optionValues.showFooterLine} onChange={e => this.setState({ optionValues: { ...optionValues, showFooterLine: e.target.checked } })}>页脚横线</Checkbox>
                      </Col>
                    </Row>
                    <Divider />
                    <Row align='middle'>
                      {/* <Col span={12}><Checkbox disabled={!superRole} checked={optionValues.countOfPage} onChange={e => this.setState({ optionValues: { ...optionValues, countOfPage: e.target.checked } })}>每页打印小计</Checkbox></Col> */}
                      <Col span={12}><Checkbox disabled={!superRole} checked={optionValues.countAllPage} onChange={e => this.setState({ optionValues: { ...optionValues, countAllPage: e.target.checked } })}>每页打印合计</Checkbox></Col>
                    </Row>
                  </div>
                  <div className="print-setting-label">表格样式</div>
                  <div className="print-setting-content">
                    <Row align="middle">
                      <Col span={12}>
                        线条宽度&nbsp;&nbsp;
                        <InputNumber disabled={!superRole} value={optionValues.lineWidth} onChange={value => value && this.setState({ optionValues: { ...optionValues, lineWidth: value } })} min={0} max={5} />
                      </Col>
                      <Col span={12}>
                        边框宽度&nbsp;&nbsp;
                        <InputNumber disabled={!superRole} value={optionValues.borderWidth} onChange={value => value && this.setState({ optionValues: { ...optionValues, borderWidth: value } })} min={0} max={5} />
                      </Col>
                    </Row>
                    <Row align="middle">
                      <Col span={12}>
                        行内边距&nbsp;&nbsp;
                        <InputNumber disabled={!superRole} value={optionValues.rowPadding} onChange={value => value != null && this.setState({ optionValues: { ...optionValues, rowPadding: value } })} min={0} max={20} />
                      </Col>
                      <Col span={12}>
                        列内边距&nbsp;&nbsp;
                        <InputNumber disabled={!superRole} value={optionValues.colPadding} onChange={value => value != null && this.setState({ optionValues: { ...optionValues, colPadding: value } })} min={0} max={20} />
                      </Col>
                    </Row>
                    <Row align="middle">
                      <Col span={12}>
                        表格字体&nbsp;&nbsp;
                        <Select
                          style={{ width: 90 }}
                          disabled={!superRole}
                          value={optionValues.contentFontFamily}
                          onChange={value => this.setState({ optionValues: { ...optionValues, contentFontFamily: value } })}
                          options={fontFamilyOptions}
                        />
                      </Col>
                      <Col span={12}>
                        表格字号&nbsp;&nbsp;
                        <Select
                          style={{ width: 90 }}
                          disabled={!superRole}
                          value={optionValues.contentFontSize}
                          onChange={value => this.setState({ optionValues: { ...optionValues, contentFontSize: value } })}
                          options={fontSizeOptions}
                        />
                      </Col>
                    </Row>
                  </div>
                </div>
              </Tabs.TabPane>
              <Tabs.TabPane key={3} tab='数据'>
                <TableSetting superRole={superRole} tableValues={tableValues} onTableValuesChange={values => this.setState({ tableValues: values })} />
              </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 >
      </>
    )
  }

}