xlyErp / xlyUmi

import React from 'react';
import 'antd-mobile/dist/antd-mobile.css';
import { Icon, NavBar, TabBar, Modal } from 'antd-mobile';
import { routerRedux } from 'dva/router';
import { connect } from 'dva';

import * as commonUtils from '@/utils/utils';
import styles from './IndexMobile.less';
import SceneMobile from './common/SceneMobile';
import MessageMobile from './common/MessageMobile';
import ContactsMobile from './common/ContactsMobile';
import WorkBenchMobile from './common/WorkBenchMobile';
import CommobileList from './commobileList/commobileList';
import ProcessReportMobile from './common/ProcessReportMobile';
import MyselfMobile from './common/MyselfMobile';
import ContactsInfoMobile from './common/ContactsInfoMobile';
import RevisePasswordMobile from './common/RevisePasswordMobile';
import CommobileBill from './common/commobileBill';
import CommobilePrintPdf from './common/commobilePrintPdf';
import ExamineMobile from './common/ExamineMobile';
import Icon1 from '../../assets/mobile/1.png';
import Icon11 from '../../assets/mobile/11.png';
import Icon2 from '../../assets/mobile/2.png';
import Icon21 from '../../assets/mobile/21.png';
import Icon3 from '../../assets/mobile/3.png';
import Icon31 from '../../assets/mobile/31.png';
// import Icon4 from '../../assets/mobile/4.png';
// import Icon41 from '../../assets/mobile/41.png';
import Icon5 from '../../assets/mobile/5.png';
import Icon51 from '../../assets/mobile/51.png';
// import AppUtil from '../../utils/AppUtil';
import * as commonBusiness from '../../components/Common/commonBusiness';

// eslint-disable-next-line prefer-destructuring
const alert = Modal.alert;
class IndexMobile extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: 'scene',
      title: '现场',
      hidden: false,
      fullScreen: true,
      touchStartPageX: 0, // 滑动开始的Y坐标
      touchStartPageY: 0,
    };
  }
  componentWillMount() {
    this.props.dispatch(routerRedux.push('/indexMobile')); // 刷新时更新路由，避免底部按钮和返回按钮错乱显示
    if (this.props.routing && this.props.routing) {
      const { state } = this.props.routing;
      if (state) {
        const { sId } = state;
        if (sId === 'myself') {
          this.setState({ selectedTab: 'myself' });
          // this.renderContent('contacts');
        }
      }
    }

    // AppUtil.addDrag();
  }

  componentDidUpdate(prevProps) {
    /* eslint-disable */
    if (prevProps?.location.state !== this.props.location.state) {
      const originTitle = ({
        message: '消息',
        scene: '现场',
        workbench: '工作台',
        device: '设备',
        myself: '我的',
       })[this.state.selectedTab];
       
      try {
        const path = JSON.parse(this.props.location.state || '{}');
        this.setState({ title: path.title || originTitle });
      } catch (error) {  
        this.setState({ title: originTitle });
      }
    }
  }

  handleTouchStart = (e) => {
    this.setState({
      touchStartPageX: e.changedTouches[0].pageX,
      touchStartPageY: e.changedTouches[0].pageY,
    });
  }

  handleTouchEnd = (e) => {
    const touchEndtPageX = e.changedTouches[0].pageX;
    const touchEndtPageY = e.changedTouches[0].pageY;
    const touchDireactionX = touchEndtPageX - this.state.touchStartPageX; // 滑动横向坐标
    const touchDireactionY = touchEndtPageY - this.state.touchStartPageY; // 滑动横向坐标
    if (touchDireactionX > 100 && touchDireactionY > -80) { // 滑动一定距离
      const { plus } = window;
      if (location.pathname === '/indexMobile') {
        alert('确定退出吗?', '', [
          { text: '取消', onPress: () => {} },
          { text: '是', onPress: () => plus.runtime.quit() }, // 关闭app
        ]);
      } else {
        window.history.back(-1);
      }
    }
  }
  renderContent(pageText) {
    if (pageText === 'message') {
      if (location.pathname === '/indexMobile/examine') {
        return (
          <div className={styles.demoContainer}>
            <ExamineMobile {...this.props} />
          </div>
        );
      } else {
        return (
          <div className={styles.demoContainer}>
            <MessageMobile sModelsId="15881420820002724305540568933000" />
          </div>
        );
      }
    } else if (pageText === 'scene') {
      if (location.pathname === '/indexMobile/commobileList') {
        return (
          <div className={styles.demoContainer}>
            <CommobileList {...this.props} />
          </div>
        );
      } else if (location.pathname === '/indexMobile/printPdf') {
        return (
          <div className={styles.demoContainer}>
            <CommobilePrintPdf {...this.props} />
          </div>
        );
      } else if (location.pathname === '/indexMobile/processReport') {
        return (
          <div className={styles.demoContainer}>
            <ProcessReportMobile {...this.props} />
          </div>
        );
      } else if (location.pathname === '/indexMobile/commobileBill') {
        return (
          <div className={styles.demoContainer}>
            <CommobileBill {...this.props} />
          </div>
        );
      } else {
        return (
          <div className={styles.demoContainer}>
            <SceneMobile {...this.props} sModelType={pageText} sModelsId="101251240115015916850901130" />
            {/* 15881422910005021526504105317000 */}
          </div>
        );
      }
    } else if (pageText === 'workbench') {
      if (location.pathname === '/indexMobile/commobileList') {
        return (
          <div className={styles.demoContainer}>
            <CommobileList {...this.props} />
          </div>
        );
      } else if (location.pathname === '/indexMobile/commobileBill') {
        return (
          <div className={styles.demoContainer}>
            <CommobileBill {...this.props} />
          </div>
        );
      } else {
        return (
          <div className={styles.demoContainer}>
            <WorkBenchMobile sModelsId="15881424880009660140992643529000" />
          </div>
        );
      }
    } else if (pageText === 'device') {
      return (
        <CommobileList {...this.props} sModelsId="101251240115015888433389260" />
      );
    } else if (pageText === 'myself') {
      if (location.pathname === '/indexMobile/contacts') {
        return (
          <div className={styles.demoContainer}>
            <ContactsMobile {...this.props} sModelType={pageText} sModelsId="101251240115015888435981690" />
          </div>
        );
      } else if (location.pathname === '/indexMobile/revisePassword') {
        return (
          <div className={styles.demoContainer}>
            <RevisePasswordMobile {...this.props} sModelsId="101251240115015888435981690" />
          </div>
        );
      } else if (location.pathname === '/indexMobile/contactsInfo') {
        return (
          <div className={styles.demoContainer}>
            <ContactsInfoMobile {...this.props} sModelsId="101251240115015892479567200" />
          </div>
        );
      } else {
        return (
          <div className={styles.demoContainer}>
            <MyselfMobile {...this.props} sModelType={pageText} sModelsId="101251240115015888435981690" />
          </div>
        );
      }
    }
  }

  render() {
    const { hidden } = this.state;
    const TabBarHidden = location.pathname === '/indexMobile' ? hidden : true;
    const navbarIconShow = !['/indexMobile/commobileBill'].includes(location.pathname);
    const msg = this.props.app.unRead;
    const msgObj = commonUtils.isJSON(msg) ? JSON.parse(msg) : {};
    return (
      <div id="tab-bar" className={styles.demo}>
        <div className="demoName">
          <NavBar
            // mode="light"
            style={{ background: '#f0f0f0', color: '#888' }}
            icon={TabBarHidden && navbarIconShow ? <Icon type="left" /> : null}
            onLeftClick={() => {
              if (TabBarHidden && navbarIconShow) {
                window.history.back(-1);
              }
            }
            }
            className={styles.iconColor}
          >
            {this.state.title}
          </NavBar>
        </div>
        <div
          className="demo-preview-item"
          style={this.state.fullScreen ? {
            position: 'fixed', width: '100%', top: '40px', bottom: 0, background: '#f0f0f0',
          } : { height: 400 }}
          onTouchStart={this.handleTouchStart.bind(this)}
          onTouchEnd={this.handleTouchEnd.bind(this)}
        >
          <TabBar
            tabBarPosition="bottom"
            unselectedTintColor="#949494"
            tintColor="#33A3F4"
            barTintColor="white"
            hidden={TabBarHidden}
            style={{ display: location.pathname === '/indexMobile' ? 'block' : 'none' }}
          >
            <TabBar.Item
              title="消息"
              key="message"
              icon={<div style={{
                width: '22px',
                height: '22px',
                background: `url(${Icon11}) center center /  21px 21px no-repeat`,
              }}
              />
              }
              selectedIcon={<div style={{
                width: '22px',
                height: '22px',
                background: `url(${Icon1}) center center /  21px 21px no-repeat`,
              }}
              />
              }
              selected={this.state.selectedTab === 'message'}
              badge={msgObj.iCount || 0}
              onPress={() => {
                const { app } = this.props;
                const { token } = app;
                commonBusiness.clearSocketData({ token, value: {}, sModelsId: 100 });
                this.setState({
                  selectedTab: 'message', title: '消息',
                });
                this.props.dispatch(routerRedux.push('/indexMobile'));
              }}
              data-seed="logId"
            >
              {this.state.selectedTab === 'message' ? this.renderContent(this.state.selectedTab) : ''}
            </TabBar.Item>
            <TabBar.Item
              icon={
                <div style={{
                  width: '22px',
                  height: '22px',
                  background: `url(${Icon21}) center center /  21px 21px no-repeat`,
                }}
                />
              }
              selectedIcon={
                <div style={{
                  width: '22px',
                  height: '22px',
                  background: `url(${Icon2}) center center /  21px 21px no-repeat`,
                }}
                />
              }
              title="现场"
              key="scene"
              // badge="new"
              selected={this.state.selectedTab === 'scene'}
              onPress={() => {
                const { app } = this.props;
                const { token } = app;
                commonBusiness.clearSocketData({ token, value: {}, sModelsId: 100 });
                this.setState({
                  selectedTab: 'scene', title: '现场',
                });
                this.props.dispatch(routerRedux.push('/indexMobile'));
              }}
              data-seed="logId1"
            >
              {this.state.selectedTab === 'scene' ? this.renderContent(this.state.selectedTab) : ''}
            </TabBar.Item>
            <TabBar.Item
              icon={
                <div style={{
                  width: '22px',
                  height: '22px',
                  background: `url(${Icon31}) center center /  21px 21px no-repeat`,
                }}
                />
              }
              selectedIcon={
                <div style={{
                  width: '22px',
                  height: '22px',
                  background: `url(${Icon3}) center center /  21px 21px no-repeat`,
                }}
                />
              }
              title="工作台"
              key="workbench"
              // badge="2"
              selected={this.state.selectedTab === 'workbench'}
              onPress={() => {
                const { app } = this.props;
                const { token } = app;
                commonBusiness.clearSocketData({ token, value: {}, sModelsId: 100 });
                this.setState({
                  selectedTab: 'workbench', title: '工作台',
                });
                this.props.dispatch(routerRedux.push('/indexMobile'));
              }}
            >
              {this.state.selectedTab === 'workbench' ? this.renderContent(this.state.selectedTab) : ''}
            </TabBar.Item>
            <TabBar.Item
              icon={
                <div style={{
                  width: '22px',
                  height: '22px',
                  background: `url(${Icon51}) center center /  21px 21px no-repeat`,
                }}
                />
              }
              selectedIcon={
                <div style={{
                  width: '22px',
                  height: '22px',
                  background: `url(${Icon5}) center center /  21px 21px no-repeat`,
                }}
                />
              }
              title="我的"
              key="contacts"
              // badge="4"
              selected={this.state.selectedTab === 'myself'}
              onPress={() => {
                const { app } = this.props;
                const { token } = app;
                commonBusiness.clearSocketData({ token, value: {}, sModelsId: 100 });
                this.setState({
                  selectedTab: 'myself', title: '我的',
                });
                this.props.dispatch(routerRedux.push('/indexMobile'));
              }}
            >
              {this.state.selectedTab === 'myself' ? this.renderContent(this.state.selectedTab) : ''}
            </TabBar.Item>
          </TabBar>
        </div>
      </div>
    );
  }
}
export default connect(({ app, routing }) =>
  ({ app, routing }))(IndexMobile);