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 CommobilePadList from "./common/commobilePadList";
import CommobilePadBill from "./common/commobilePadBill";
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 Icon6 from "../../assets/mobile/6.png";
import Icon61 from "../../assets/mobile/61.png";
import Quotation from "./quotation/index";
import QuotationDetail from "./quotation/detail";
import * as commonFunc from '../../components/Common/commonFunc';
// import AppUtil from '../../utils/AppUtil';
import * as commonBusiness from "../../components/Common/commonBusiness";
import commonConfig from '@/utils/config';

// 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"); // 刷新时更新路由，避免底部按钮和返回按钮错乱显示
    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 message = commonFunc.showLocalMessage(this.props, 'message', '消息');
      const scene = commonFunc.showLocalMessage(this.props, 'Scene', '现场');
      const workbench = commonFunc.showLocalMessage(this.props, 'workbench', '工作台');
      const device = commonFunc.showLocalMessage(this.props, 'device', '设备');
      const quotation = commonFunc.showLocalMessage(this.props, 'quotation', '报价下单');
      const mine = commonFunc.showLocalMessage(this.props, 'mine', '我的');
      scene
      const originTitle = {
        message: message,
        scene: scene,
        workbench: workbench,
        device: device,
        quotation: quotation,
        myself: mine,
      }[this.state.selectedTab];

      try {
        const path = JSON.parse(this.props.location.state || "{}");
        this.setState({ title: path.title || originTitle });
      } catch (error) {
        this.setState({ title: originTitle });
      }
    }
  }
  componentDidMount() {
    // 监听系统返回键
    const bExitAgain = commonFunc.showLocalMessage(this.props, 'bExitAgain', '再按一次退出应用');
    const { plus } = window;
    plus?.key?.addEventListener('backbutton', () => {
      if (location.pathname === '/indexMobile') {
        // 首页双击返回
        if (this.backPressedOnce) {
          // 把应用切换到后台运行
          // plus.runtime.quit(); // 直接退出应用
          const main = plus?.android?.runtimeMainActivity();
          main?.moveTaskToBack(false);   // false：仅隐藏，不销毁
        } else {
          this.backPressedOnce = true;
          plus.nativeUI.toast(bExitAgain);
          setTimeout(() => { this.backPressedOnce = false; }, 2000);
        }
      } else {
        window.history.back(-1);
      }
    });
  }
  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 bExist = commonFunc.showLocalMessage(this.props, 'bExist', '确定退出吗');
    const BtnSure = commonFunc.showLocalMessage(this.props, 'BtnSure', '确定');
    const BtnCancel = commonFunc.showLocalMessage(this.props, 'BtnCancel', '取消');
    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 if (location.pathname === "/indexMobile/commobilePadBill") {
        return (
          <div className={styles.demoContainer}>
            <CommobilePadBill {...this.props} />
          </div>
        );
      } else if (location.pathname === "/indexMobile/commobilePadList") {
        return (
          <div className={styles.demoContainer}>
            <CommobilePadList {...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>
        );
      }
    } else if (pageText === "quotation") {
      if (location.pathname === '/indexMobile/quotationTree') {
        return (
          <div className={styles.demoContainer}>
            <Quotation {...this.props} sModelType={pageText} sModelsId="101251240115016076506222050" />
          </div>
        );
      } else  if (location.pathname === "/indexMobile/quotationDetail") {
        return (
          <QuotationDetail {...this.props} sModelType={pageText} sModelsId="101251240115016076506222050" />
        )
      } else {
        return (
          <CommobileList {...this.props} sModelsId="101251240115017633494461850" />
        );
      } 
    }
  }

  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) : {};
    const message = commonFunc.showLocalMessage(this.props, 'message', '消息');
    const scene = commonFunc.showLocalMessage(this.props, 'Scene', '现场');
    const workbench = commonFunc.showLocalMessage(this.props, 'workbench', '工作台');
    const device = commonFunc.showLocalMessage(this.props, 'device', '设备');
    const quotation = commonFunc.showLocalMessage(this.props, 'quotation', '报价下单');
    const mine = commonFunc.showLocalMessage(this.props, 'mine', '我的');
    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: "#fff",
              }
              : { 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={message}
              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 , userinfo} = app;
                const {sBrandsId,sSubsidiaryId,sUserName} = userinfo || {}
                commonBusiness.clearSocketData({ token, value: {}, sModelsId: 100 });
                this.setState({
                  selectedTab: "message",
                  title: message,
                });
                const url = `${commonConfig.server_host}/phone/phoneMsgFlowDingTalk/${sBrandsId}/${sSubsidiaryId}/${sUserName}`
                history.push(url);
              }}
              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={scene}
              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: scene,
                });
                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={workbench}
              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: workbench,
                });
                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(${Icon61}) center center /  21px 21px no-repeat`,
                  }}
                />
              }
              selectedIcon={
                <div
                  style={{
                    width: "22px",
                    height: "22px",
                    background: `url(${Icon6}) center center /  21px 21px no-repeat`,
                  }}
                />
              }
              title={quotation}
              key="quotation"
              // badge="2"
              selected={this.state.selectedTab === "quotation"}
              onPress={() => {
                const { app } = this.props;
                const { token } = app;
                commonBusiness.clearSocketData({ token, value: {}, sModelsId: 100 });
                this.setState({
                  selectedTab: "quotation",
                  title: quotation,
                });
                history.push("/indexMobile");
              }}
            >
              {this.state.selectedTab === "quotation" ? 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={mine}
              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: mine,
                });
                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);