/* eslint-disable array-callback-return,no-undef */
import React, { Component } from 'react';
import { Form } from '@ant-design/compatible';
// import '@ant-design/compatible/assets/index.css';
import { Layout, Tabs, Spin, Avatar, message } from 'antd-v4';
import styles from '@/index.less';
import Toolbar from '@/components/Common/ToolBar/ToolBarNew';
import * as commonFunc from '@/components/Common/commonFunc';
import CommonBase from '@/components/Common/CommonBase';
import CommonElementEvent from '@/components/Common/CommonElementEvent';
import StaticEditTable from '@/components/Common/CommonTable';/* 可编辑表格 */
import CommonView from '@/components/Common/CommonView';
import * as commonBusiness from '@/components/Common/commonBusiness';/* 单据业务功能 */
import commonConfig from '@/utils/config';
import * as commonUtils from '@/utils/utils';/* 通用方法 */

const { Header, Content } = Layout;
const { TabPane } = Tabs;

class PrintInfoComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
    this.form = {}; /*   表单对象   */
  }
  onTabChange = (key) => {
    this.props.onSaveState({ activeKey: key });
  };
  /**   上传后执行函数    */
  handleBeforeUpload = () => {
    // if (!file.type.includes('image/')) {
    //   message.error('请上传正确的图片类型!');
    //   return false;
    // }
    // const isLt10M = file.size / 1024 / 1024 < 10;
    // if (!isLt10M) {
    //   message.error(commonFunc.showMessage(this.props.app.commonConst, 'picMax'));/* 图片大小需小于10MB! */
    // }
  };
  /**   上传后执行函数    */
  handleUploadChange = (info, name) => {
    const { file } = info;
    if (file.response && file.response.code === 1) {
      /* 图片类型验证 */
      // if (!file.type.includes('image/')) {
      //   return false;
      // }
      const sPicturePath = file.response.dataset.rows[0].savePathStr;
      const spicture = sPicturePath;
      const uploadInfo = {
        sPicturePath,
        sFileName: file.name,
        spicture,
      };
      const { [`${name}Column`]: tableColumn, masterData, [`${name}Data`]: tableData } = this.props;
      if (commonUtils.isNotEmptyArr(tableData) && commonUtils.isEmpty(tableData[tableData.length - 1].sPicturePath)) {
        tableData[tableData.length - 1].sPicturePath = uploadInfo.sPicturePath;
        tableData[tableData.length - 1].spicture = spicture;
        tableData[tableData.length - 1] = {
          ...tableData[tableData.length - 1], sPicturePath: uploadInfo.sPicturePath, sFileName: uploadInfo.sFileName, spicture, handleType: commonUtils.isEmpty(tableData[tableData.length - 1].handleType) ? 'update' : tableData[tableData.length - 1].handleType,
        };
      } else {
        const tableDataRow = this.props.onDataRowAdd(name, true);
        tableColumn.forEach((slaveChild) => {
          const ckey = slaveChild.dataIndex;
          if (ckey === 'sProductNo' || ckey === 'sProductName') {
            tableDataRow[ckey] = masterData[ckey] !== undefined ? masterData[ckey] : '';
          } else if (ckey === 'iOrder') {
            tableDataRow[ckey] = tableData.length + 1;
          } else if (file.response && file.response.code === 1) {
            if (uploadInfo[ckey] !== undefined) {
              tableDataRow[ckey] = uploadInfo[ckey];
            }
          }
        });
        tableData.push(tableDataRow);
      }
      this.props.onSaveState({ [`${name}Data`]: tableData, enabled: true });
    } else if (file.response && file.response.code === -1) {
      message.error(file.response.msg);
    }
  };
  /**   查看   */
  handleTableLook = (name) => {
    const { [`${name}SelectedRowKeys`]: selectedRowKeys, [`${name}Data`]: data, app } = this.props;
    if (selectedRowKeys === undefined || selectedRowKeys.length !== 1) {
      return message.warning(commonFunc.showMessage(app.commonConst, 'pleaseChooseDataLook'));/* 请选择一条数据进行查看 */
    } else {
      const dataSelect = data.filter(item => item.sId === selectedRowKeys[0]);
      const { currentId } = this.state;
      const { token } = this.props.app;
      const { sPicturePath } = dataSelect[0];
      const previewUrl = `${commonConfig.file_host}file/download?sModelsId=${currentId}&token=${token}&savePathStr=${sPicturePath}`;
      this.props.onSaveState({ previewImage: previewUrl, previewVisible: true });
    }
  };
  /**   删除   */
  handleTableDel= (name, isWait, tableSelectedRowKeys) => {
    this.props.onDataRowDel(name, isWait, tableSelectedRowKeys);
    this.props.onSaveState({ enabled: true });
  };
  /**   关闭弹窗    */
  handleModalCancel = () => {
    this.props.onSaveState({ previewVisible: false, previewImage: '' });
  };
  render() {
    const { pageLoading } = this.props;
    return (
      <div>
        <Spin spinning={pageLoading}>
          <div>
            <PrintComponent
              {...this.props}
              {...this.state}
              onUploadChange={this.handleUploadChange}
              onBeforeUpload={this.handleBeforeUpload}
              onModalCancel={this.handleModalCancel}
              onDataRowLook={this.handleTableLook}
              onDataRowDel={this.handleTableDel}
              onTabChange={this.onTabChange}
            />
          </div>
        </Spin>
      </div>
    );
  }
}
const PrintComponent = Form.create({
  mapPropsToFields(props) {
    const { masterData } = props;
    const obj = commonFunc.mapPropsToFields(masterData, Form);
    return obj;
  },
})((props) => {
  const {
    form, onReturnForm, masterData, AutoTableHeight, app,
  } = props;
  /*   回带表单   */
  onReturnForm(form);
  if (commonUtils.isNotEmptyObject(masterData)) {
    masterData.bCheck = true;
  }
  const tabPicFile = commonFunc.showMessage(app.commonConst, 'tabPicFile');/* 图片文件 */
  const tabStock = commonFunc.showMessage(app.commonConst, 'tabStock');/* 仓库 */
  const tabcustomerInfo = commonFunc.showMessage(app.commonConst, 'tabcustomerInfo');/* 客户信息功能 */
  return (
    <Form>
      <Layout>
        <Header className={styles.header}>
          <Toolbar {...props} />
        </Header>
        <Layout className={`${styles.clayout} ${styles.setHeight}`}>
          <Content className={styles.content}>
            <div className="bill-search-group" >
              <CommonView {...props} />
            </div>
            <div id="slaveTabs" className={`${styles.bShow} ${styles.slaveTabHight}`}>
              <div>
                <Avatar src={props.imgSrc} />
              </div>
              <Tabs
                onChange={props.onTabChange}
                activeKey={props.activeKey === undefined ? '2' : props.activeKey}
                className={`${styles.slaveTabs} basicInfo`}
                tabBarStyle={{ margin: '0 10px' }}
              >
                <TabPane tab={tabPicFile} key={2} className="xly-bill-list" style={{ height: `calc( ${AutoTableHeight} - 105px)` }}>
                  <div className="TabPaneStyle">
                    <StaticEditTable {...commonBusiness.getTableTypes('picFile', props)} footer="hidden" setOpterationColumn="Y" />
                  </div>
                </TabPane>
                <TabPane tab={tabStock} key={3} className="xly-bill-list" style={{ height: `calc( ${AutoTableHeight} - 105px)` }}>
                  <div className="TabPaneStyle">
                    <StaticEditTable {...commonBusiness.getTableTypes('stock', props)} footer="hidden" setOpterationColumn="Y" />
                  </div>
                </TabPane>
                <TabPane tab={tabcustomerInfo} key={4} className="xly-bill-list" style={{ height: `calc( ${AutoTableHeight} - 105px)` }}>
                  <div className="TabPaneStyle">
                    <StaticEditTable {...commonBusiness.getTableTypes('customerInfo', props)} footer="hidden" setOpterationColumn="Y" />
                  </div>
                </TabPane>
              </Tabs>
            </div>
          </Content>
        </Layout>
      </Layout>
    </Form>
  );
});

export default CommonBase(CommonElementEvent(PrintInfoComponent));