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 || {};
  // 路由
  const handleGridClick = item => () => {
    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}>
      {contentList.map(item => (
        <div key={item.key} className={styles.contentItem} onClick={handleGridClick(item)}>
          <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>
  );
};
export default QuotationAllprogress;