import React from 'react';
import styles from './index.less'
import {connect} from 'umi'
import {printProps} from '../models/index'
import {cloneDeep, isFunction} from 'lodash'
import Style from './components/panel/style'
import FunctionArea from './components/FunctionArea';
import Panel from './components/panel/index'
import Viewport from './components/viewport'
import {OutStockOptions} from '../utils/options'
interface propsTypes extends printProps {
  dispatch?: any,
  printer?: printProps
  save?: Function
  addTemp?: Function
  showTmpList?: Function
  widgetOptions?: Array<any>
  tempValue?: any
}
const outStockTemp = {
  title: "demo",
  width: 770,
    height: 500,
    pageWidth: 215,
    pageHeight: 140,
  tempItems: [],
  printerName: "",
  operatorPrinterName: "",
  direction: "2",
  topMargin: 0,
  leftMargin: 0,
  copies: 1,
}
@connect(({ printer }) => ({
  printer,
}))
export default class TfPrintDesigner extends React.Component<propsTypes> {
  pannelRef:any = null
  constructor(props) {
    super(props)
  }
  componentDidMount() {
    let {widgetOptions, tempValue} = this.props
    if (!tempValue) {
      const options = OutStockOptions
      this.initTemp(outStockTemp, options)
    }
  }
  setBackground(url) {
    let {dispatch} = this.props;
    dispatch({
      type: 'printer/updateState',
      payload: {
        backgroundUrl: url,
      }
    })
    this.pannelRef.addBg()
  }
  // 初始化设计器
  initTemp(tempValue, widgetOptions) {
    let {dispatch} = this.props;
    dispatch({
      type: 'printer/initOptionItems',
      payload: {
        options: cloneDeep(widgetOptions),
      }
    })
    dispatch({
      type: 'printer/initPage',
      payload: {
        pageInfo: cloneDeep(tempValue),
      }
    })
  }
  render() {
    return (
      <div className={styles.tfDesigner}>
        <div className={styles.dsHeader}>
          <Style {...this.props}></Style>
          <FunctionArea {...this.props}></FunctionArea>
        </div>
        <div className={styles.dsMain}>
            <Viewport {...this.props}></Viewport>
            <Panel ref={this.pannelRef} {...this.props}></Panel>
        </div>
      </div>
    );
  }
  
}