import React, { useEffect, useState } from "react";
import { history } from "umi";
import { SideBar } from "antd-mobile";
import styles from "./index.less";
import Icon5 from "@/assets/mobile/20.png";
import commonConfig from "@/utils/config";
import * as commonServices from "@/services/services";
import quotation from "@/routes/mobile/quotation";
const QuotationAllprogress = baseProps => {
  const { sModelsId } = baseProps;
  const { token } = baseProps.app;
  const [state, setState] = useState(null);
  const [selectedKey, setSelectedKey] = useState(null);
  const { treeDataList } = baseProps.state || {};
  const getQuotationList = async () => {
    const configDataId = "172129113112117428019180410";
    const formSrcRoute = "";
    const condition = {
      bFilter: [],
      pageNum: 1,
      pageSize: 1000,
    };
    const dataUrl = `${commonConfig.server_host}filterTree/getFilterTree/${configDataId}?sModelsId=${sModelsId}&sName=${formSrcRoute}`;
    const dataReturn = (await commonServices.postValueService(token, condition, dataUrl)).data;
    // if (dataReturn.dataset.rows) return
    const treeDataList = dataReturn.dataset.rows[0].children.map(item => {
      return item;
    });
    setState(pre => ({ ...pre, treeDataList }));
    // setSelectedKey(treeDataList[0].sId); // 默认选中第一条
  };
  // 172129113112117428019180410
  useEffect(() => {
    getQuotationList();
  }, [sModelsId]);
  const treeProps = {
    ...baseProps,
    state,
    selectedKey,
    setState,
  };
  return (
    <div className={styles.quotationBox}>
      <div className={styles.quotationNavigation}>
        <TreeComponent {...treeProps} />
      </div>
      <div className={styles.quotationContent}>
        <ContentComponent {...treeProps} />
      </div>
    </div>
  );
};
// 侧边导航
const TreeComponent = props => {
  const { treeDataList, selectedKey } = props.state || {};
  const { setState } = props;
  useEffect(() => {
    if (treeDataList && treeDataList.length) {
      const list = treeDataList.find(item => item.sId === treeDataList[0].sId);
      if (list && list.children && list.children.length) {
        // 如果有子节点，则取子节点的名称
        setState(pre => ({
          ...pre,
          selectedKey: treeDataList[0].sId,
          contentList: list.children.map(child => {
            return child;
          }),
        }));
      }
    }
  }, [treeDataList]);
  return treeDataList && treeDataList.length ? (
    <SideBar
      selectedKeys={[selectedKey]} // 设置默认选中项
      onChange={key => {
        const list = treeDataList.find(item => item.sId === key);
        if (list && list.children && list.children.length) {
          // 如果有子节点，则取子节点的名称
          setState(pre => ({
            ...pre,
            selectedKey: key,
            contentList: list.children.map(child => {
              return child;
            }),
          }));
        }
      }}
    >
      {treeDataList && treeDataList.length
        ? treeDataList.map(item => <SideBar.Item key={item.sId} title={item.showName} style={{ background: "#EBF2FD" }} />)
        : "-"}
    </SideBar>
  ) : (
    ""
  );
};
// 内容
const ContentComponent = props => {
  const { contentList = [], selectedKey } = props.state || {};
  console.log("🚀 ~ contentList:", contentList);
  // 路由
  const handleGridClick = item => () => {
    if (item.children && item.children.length > 0) return;
    props.dispatch({
      type: "content/onRouterMobile",
      payload: {
        url: "/indexMobile/quotationDetail" /*   接口地址   */,
        urlKey: undefined,
        sModelsId: props.sModelsId,
        sModelType: props.sModelType,
        quotationData: {
          ...item,
          sProductClassifyId: selectedKey,
        },
      },
    });
  };

  return (
    <div className={styles.content}>
      <RecursiveItemList items={contentList} handleGridClick={handleGridClick} />
    </div>
  );
};
const RecursiveItemList = ({ items, handleGridClick }) => {
  const renderItems = (list, level = 0) => {
    return list.map(item => (
      <div
        key={item.key}
      
        onClick={handleGridClick(item)}
        style={{ marginLeft: level * 20 }} // 根据层级添加缩进
      >
        {/* {
        item.children && item.children.length > 0 ? 
        <div style={{width:'2rem',}}>{item.showName}</div>
        :
        <div>
           <img
          src={'http://8.130.144.93:8088/xlyEntry/file/downloadLogo?sLogoName=logosPackPath%E9%A3%9E%E6%9C%BA%E7%9B%92&date=1747049329258'}
          alt=""
            className={styles.contentItemImg}
          />
          <span className={styles.contentItemTitle}>{item.showName}</span>
        </div>
       } */}
        <div   className={styles.contentItem}>
          <img
            src={"http://8.130.144.93:8088/xlyEntry/file/downloadLogo?sLogoName=logosPackPath%E9%A3%9E%E6%9C%BA%E7%9B%92&date=1747049329258"}
            alt=""
            className={styles.contentItemImg}
          />
          <span className={styles.contentItemTitle}>{item.showName}</span>
        </div>
        {item.children && item.children.length > 0 ? <div className={styles.nestedItems}>{renderItems(item.children, level + 1)}</div> : null}
      </div>
    ));
  };

  return <div>{renderItems(items)}</div>;
};
export default QuotationAllprogress;