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

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() {
    history.push("/indexMobile"); // 刷新时更新路由，避免底部按钮和返回按钮错乱显示
      console.log("🚀 ~ IndexMobile ~ componentWillMount ~ this.props:", this.props)

    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 (this.props.location && 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);
        setTimeout(() => {
          this.props.dispatch({ type: "app/refreshPage" });
        }, 100);
      }
    }
  };
  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);
                setTimeout(() => {
                  this.props.dispatch({ type: "app/refreshPage" });
                  // history.push(location.pathname);
                }, 100);
              }
            }}
            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: "消息",
                });
                history.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: "现场",
                });
                history.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: "工作台",
                });
                history.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: "我的",
                });
                history.push("/indexMobile");
              }}
            >
              {this.state.selectedTab === "myself" ? this.renderContent(this.state.selectedTab) : ""}
            </TabBar.Item>
          </TabBar>
        </div>
      </div>
    );
  }
}
export default connect(({ app, routing }) => ({ app, routing, ...history }))(IndexMobile);