import React, { useState, useEffect } from 'react';
import { Tooltip, Button, Card, Col, Row, Breadcrumb, Table, Popconfirm, Form, Input, InputNumber, Tag, Modal, Select, Tree, FloatButton, DatePicker, Spin, message, Divider,Empty, Flex } from 'antd';
import { Link, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { useProductsTypes, useProductsAuditStatesMapVal, useProductsTypesMapVal, useNewProductRecord } from '@/hooks/useProductsSets';
import Extras from './Detail/Extras';
import { isEmpty } from '@/utils/commons';
import SecondHeaderWrapper from '@/components/SecondHeaderWrapper';
import Header from './Detail/Header';
import YearSelector from './Detail/YearSelector'
import { useParams } from 'react-router-dom';
import useProductsStore from '@/stores/Products/Index';
import postProductsSave from '@/stores/Products/Index';
import { useHTLanguageSets } from '@/hooks/useHTLanguageSets';
import { useDefaultLgc } from '@/i18n/LanguageSwitcher';
import BatchImportPrice from './Detail/BatchImportPrice';
import dayjs from 'dayjs';
import { PlusCircleFilled, FileAddOutlined, ExportOutlined } from '@ant-design/icons';
import { DeptSelector } from '@/components/DeptSelector';
import { useDatePresets } from '@/hooks/useDatePresets';
import CitySelector from '@/components/CitySelector';
import { HT_HOST } from '@/config';
import { postJSON, postForm } from '@/utils/request';
import RequireAuth from '@/components/RequireAuth'
import { PERM_ROLE_NEW } from '@/config'
import { create } from 'zustand';
import { PERM_PRODUCTS_MANAGEMENT } from '@/config';
import { usingStorage } from '@/hooks/usingStorage';
import ProductsTree from './Detail/ProductsTree';
import ProductInfo from './Detail/ProductInfo';
function Detail() {
  const { t } = useTranslation();
  const productsTypesMapVal = useProductsTypesMapVal();
  const [form] = Form.useForm();
  const navigate = useNavigate()
  const { RangePicker } = DatePicker;
  const [tags, setTags] = useState([]);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [selectedTag, setSelectedTag] = useState(null);
  const [batchImportPriceVisible, setBatchImportPriceVisible] = useState(false);
  const [quotationTableVisible, setQuotationTableVisible] = useState(false)
  const [languageStatus, setLanguageStatus] = useState(null);
  const [selectedNodeid, setSelectedNodeid] = useState(null);
  const [remainderLanguage, setRemainderLanguage] = useState([])
  const [treeData, setTreeData] = useState([]);
  const productsTypes = useProductsTypes();
  const [productsData, setProductsData] = useState(null);
  const [quotation, setQuotation] = useState(null);
  const [lgc_details, setLgc_details] = useState(null);
  const [languageLabel, setLanguageLabel] = useState(null);
  const { travel_agency_id, audit_state, use_year } = useParams();
  const { language } = useDefaultLgc();
  const HTLanguageSets = useHTLanguageSets();
  const { Search } = Input;
  const [addProductVisible, setAddProductVisible] = useState(false);
  const [editingProduct, setEditingProduct] = useProductsStore((state) => [state.editingProduct, state.setEditingProduct]);
  const [agencyProducts, setAgencyProducts,loading] = useProductsStore((state) => [state.agencyProducts, state.setAgencyProducts, state.loading]);
  const { getAgencyProducts, activeAgency } = useProductsStore();
  const [expandedKeys, setExpandedKeys] = useState([]);
  const [searchValue, setSearchValue] = useState('');
  const [autoExpandParent, setAutoExpandParent] = useState(true);
  const [dataList, setDataList] = useState([]);
  const [defaultData, setDefaultData] = useState([]);
  const [batchImportData, setBatchImportData] = useState([]);
  const [addProductType, setAddProductType] = useState('');
  const [addproductName, setAddProductName] = useState('');
  const [dataFetched, setDataFetched] = useState(false); // 添加一个标志位
  const [selectedDays, setSelectedDays] = useState([]);
  const [weekdays, setWeekdays] = useState([]);
  const [info, setInfo] = useState();
  const yearOptions = [];
  const currentYear = dayjs().year();
  const baseYear = Number(use_year === 'all' ? currentYear : use_year);
  for (let i = baseYear - 3; i <= baseYear + 3; i++) {
    yearOptions.push({ label: i, value: i, });
  }
  const [param, setParam] = useState({ pick_year: baseYear, pick_agency: travel_agency_id });
  const [pickYear, setPickYear] = useState(baseYear);
  const handleYearChange = (value) => {
    setPickYear(value);
    setParam((pre) => ({ ...pre, ...{ pick_year: value } }));
  };

  const { travelAgencyId } = usingStorage();
  const handleGetAgencyProducts = ({pick_year, pick_agency, pick_state}={}) => {
    const year = pick_year || use_year || dayjs().year();
    const agency = pick_agency || travel_agency_id || travelAgencyId;
    const state = pick_state ?? audit_state;
    console.log("loading",loading);
    getAgencyProducts({ travel_agency_id: agency, use_year: year, audit_state: state });
    console.log("loading",loading);
    console.log("AgencyProducts",agencyProducts);
    // navigate(`/products/${agency}/${year}/${audit_state}/edit`);

  };
  const travel_agency_name = activeAgency.travel_agency_name;
  const audit_state_id = activeAgency.audit_state_id;
  let isCanEditable = !(audit_state_id === 1 || audit_state_id === 3 || audit_state_id === -1)
  const [currentQuotationRecord, setCurrentQuotationRecord] = useState({
    use_dates_start: null,
    use_dates_end: null
  });
  const formatDate = (date) => (date ? dayjs(date) : null);
  const stateMapVal = useProductsAuditStatesMapVal();

  const startDate = currentQuotationRecord.use_dates_start && dayjs(currentQuotationRecord.use_dates_start).isValid()
    ? formatDate(currentQuotationRecord.use_dates_start)
    : null;
  const endDate = currentQuotationRecord.use_dates_end && dayjs(currentQuotationRecord.use_dates_end).isValid()
    ? formatDate(currentQuotationRecord.use_dates_end)
    : null;


  const [editIndex, setEditIndex] = useState(null);
  const presets = useDatePresets();
  const handleBatchImportData = (data) => {
    setBatchImportData(data);
  };
  const days = [
    'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
  ];
  const productProject = {
    "6": [
      { code: "code", name: t('products:Code'), nameKey: 'products:Code' },
      { code: "city_name", name: t('products:City'), nameKey: 'products:City' },
    ],
    "B": [
      { code: "code", name: t('products:Code'), nameKey: 'products:Code' },
      { code: "city_name", name: t('products:City'), nameKey: 'products:City' },
      { code: "km", name: t('products:KM'), nameKey: 'products:KM' },
      {
        code: "remarks",
        name: (
          <RequireAuth subject={PERM_PRODUCTS_MANAGEMENT}>
            {t('products:Remarks')}
          </RequireAuth>
        ),
        nameKey: 'products:Remarks',
      },
    ],
    "J": [
      { code: "code", name: t('products:Code'), nameKey: 'products:Code' },
      { code: "city_name", name: t('products:City'), nameKey: 'products:City' },
      {
        code: "recommends_rate",
        name: (
          <RequireAuth subject={PERM_PRODUCTS_MANAGEMENT}>
            {t('products:recommendationRate')}
          </RequireAuth>
        ),
        nameKey: 'products:recommendationRate',
      },
      { code: "duration", name: t('products:Duration'), nameKey: 'products:Duration' },
      {
        code: "dept_name",
        name: (
          <RequireAuth subject={PERM_PRODUCTS_MANAGEMENT}>
            {t('products:Dept')}
          </RequireAuth>
        ),
        nameKey: 'products:Dept',
      },
      {
        code: "display_to_c",
        name: (
          <RequireAuth subject={PERM_PRODUCTS_MANAGEMENT}>
            {t('products:DisplayToC')}
          </RequireAuth>
        ),
        nameKey: 'products:DisplayToC',
      },
      {
        code: "remarks",
        name: (
          <RequireAuth subject={PERM_PRODUCTS_MANAGEMENT}>
            {t('products:Remarks')}
          </RequireAuth>
        ),
        nameKey: 'products:Remarks',
      },
    ],
    "Q": [
      { code: "code", name: t('products:Code'), nameKey: 'products:Code' },
      { code: "city_name", name: t('products:City'), nameKey: 'products:City' },
      {
        code: "recommends_rate",
        name: (
          <RequireAuth subject={PERM_PRODUCTS_MANAGEMENT}>
            {t('products:recommendationRate')}
          </RequireAuth>
        ),
        nameKey: 'products:recommendationRate',
      },
      { code: "duration", name: t('products:Duration'), nameKey: 'products:Duration' },
      {
        code: "dept_name",
        name: (
          <RequireAuth subject={PERM_PRODUCTS_MANAGEMENT}>
            {t('products:Dept')}
          </RequireAuth>
        ),
        nameKey: 'products:Dept',
      },
      {
        code: "display_to_c",
        name: (
          <RequireAuth subject={PERM_PRODUCTS_MANAGEMENT}>
            {t('products:DisplayToC')}
          </RequireAuth>
        ),
        nameKey: 'products:DisplayToC',
      },
      {
        code: "remarks",
        name: (
          <RequireAuth subject={PERM_PRODUCTS_MANAGEMENT}>
            {t('products:Remarks')}
          </RequireAuth>
        ),
        nameKey: 'products:Remarks',
      },
    ],
    "D": [
      { code: "code", name: t('products:Code'), nameKey: 'products:Code' },
      { code: "city_name", name: t('products:City'), nameKey: 'products:City' },
      {
        code: "recommends_rate",
        name: (
          <RequireAuth subject={PERM_PRODUCTS_MANAGEMENT}>
            {t('products:recommendationRate')}
          </RequireAuth>
        ),
        nameKey: 'products:recommendationRate',
      },
      { code: "duration", name: t('products:Duration'), nameKey: 'products:Duration' },
      {
        code: "dept_name",
        name: (
          <RequireAuth subject={PERM_PRODUCTS_MANAGEMENT}>
            {t('products:Dept')}
          </RequireAuth>
        ),
        nameKey: 'products:Dept',
      },
      {
        code: "display_to_c",
        name: (
          <RequireAuth subject={PERM_PRODUCTS_MANAGEMENT}>
            {t('products:DisplayToC')}
          </RequireAuth>
        ),
        nameKey: 'products:DisplayToC',
      },
      {
        code: "remarks",
        name: (
          <RequireAuth subject={PERM_PRODUCTS_MANAGEMENT}>
            {t('products:Remarks')}
          </RequireAuth>
        ),
        nameKey: 'products:Remarks',
      },
    ],
    "7": [
      { code: "code", name: t('products:Code'), nameKey: 'products:Code' },
      { code: "city_name", name: t('products:City'), nameKey: 'products:City' },
      {
        code: "recommends_rate",
        name: (
          <RequireAuth subject={PERM_PRODUCTS_MANAGEMENT}>
            {t('products:recommendationRate')}
          </RequireAuth>
        ),
        nameKey: 'products:recommendationRate',
      },
      { code: "duration", name: t('products:Duration'), nameKey: 'products:Duration' },
      { code: "open_weekdays", name: t('products:OpenWeekdays'), nameKey: 'products:OpenWeekdays' },
      {
        code: "remarks",
        name: (
          <RequireAuth subject={PERM_PRODUCTS_MANAGEMENT}>
            {t('products:Remarks')}
          </RequireAuth>
        ),
        nameKey: 'products:Remarks',
      },
    ],
    "8": [
      { code: "code", name: t('products:Code') },
      { code: "city_name", name: t('products:City') },
    ],
    "R": [
      { code: "code", name: t('products:Code'), nameKey: 'products:Code' },
      { code: "city_name", name: t('products:City'), nameKey: 'products:City' },
    ]
  }
  const [selectedCategory, setSelectedCategory] = useState([]);

  useEffect(() => {
    setLanguageStatus(language);
    const matchedLanguage = HTLanguageSets.find(HTLanguage => HTLanguage.key === language.toString());
    const languageLabel = matchedLanguage.label
    setLanguageLabel(languageLabel)
    setSelectedTag(languageLabel)
    // setRemainderLanguage(HTLanguageSets.filter(item => item.key !== language.toString()))

  }, []);

  useEffect(()=>{
    handleGetAgencyProducts(param);
  },[param]);



  useEffect(() => {
    editingProductQuotation();
  }, [treeData, editingProduct])

  const editingProductQuotation = () => {
    console.log("editingProduct", editingProduct)
    const editingProductID = editingProduct.id;
    console.log("editingProductID", editingProductID)
    let stopProgram = false;
    for (const element of treeData) {
      if (stopProgram) {
        return;
      }
      const childList = element.children;
      for (const product of childList) {
        const childrenID = product.key.split('-')[1];
        if (editingProductID == childrenID) {
          const fatherKey = product.key.split('-')[0];
          setSelectedCategory(productProject[fatherKey]);
          stopProgram = true;
          const tempInfo = product._raw.info;
          const tempLgc_details = product._raw.lgc_details.find(record => record.lgc === 2);
          console.log("tempLgc_details", tempLgc_details);
          const tempQuotation = product._raw.quotation;
          console.log({
            info: tempInfo,
            lgc_details: {
              title: tempLgc_details.title,
              description: tempLgc_details.descriptions
            },
          })
          setQuotation(tempQuotation);
          setTags([languageLabel]);
          setRemainderLanguage(HTLanguageSets.filter(item => item.key !== language.toString()));

          form.setFieldsValue({
            info: tempInfo,
            lgc_details: {
              title: tempLgc_details.title,
              description: tempLgc_details.descriptions
            },
          })
          break;
        }
      }

    }
  }
  // useEffect(() => {
  //   const fetchData = async () => {
  //     if (productsTypes.length > 0 && travel_agency_id && Object.keys(agencyProducts).length > 0) {
  //       const generateTreeData = (productsTypes, productsData) => {
  //         return productsTypes.map(type => ({
  //           title: type.label,
  //           key: type.value,
  //           selectable: false,
  //           children: (productsData[type.value] || []).map(product => ({
  //             title: product.info.title,
  //             key: `${type.value}-${product.info.id}`,
  //             _raw: product,
  //           })),
  //         }));
  //       };
  //       const tempExpandedKeys = productsTypes.map(item => item.key);
  //       const treeData = generateTreeData(productsTypes, agencyProducts);
  //       setTreeData(treeData);
  //       setExpandedKeys(tempExpandedKeys);
  //       setProductsData(agencyProducts);
  //       setDefaultData(treeData);
  //       setDataList(flattenTreeData(treeData));
  //       setDataFetched(true);
  //     }
  //   };
  //   fetchData();
  // }, [productsTypes, travel_agency_id, use_year, audit_state, agencyProducts]);

  // const flattenTreeData = (tree) => {
  //   let flatList = [];
  //   const flatten = (nodes) => {
  //     nodes.forEach((node) => {
  //       flatList.push({ title: node.title, key: node.key });
  //       if (node.children) {
  //         flatten(node.children);
  //       }
  //     });
  //   };
  //   flatten(tree);
  //   return flatList;
  // };

  // const getParentKey = (key, tree) => {
  //   let parentKey;
  //   for (let i = 0; i < tree.length; i++) {
  //     const node = tree[i];
  //     if (node.children) {
  //       if (node.children.some((item) => item.key === key)) {
  //         parentKey = node.key;
  //       } else {
  //         const pKey = getParentKey(key, node.children);
  //         if (pKey) {
  //           parentKey = pKey;
  //         }
  //       }
  //     }
  //   }
  //   return parentKey;
  // };

  // const titleRender = (node) => {
  //   const index = node.title.indexOf(searchValue);
  //   const beforeStr = node.title.substr(0, index);
  //   const afterStr = node.title.substr(index + searchValue.length);
  //   const highlighted = (
  //     <span style={{ color: 'red' }}>{searchValue}</span>
  //   );

  //   return index > -1 ? (
  //     <span>
  //       {beforeStr}
  //       {highlighted}
  //       {afterStr}
  //     </span>
  //   ) : (
  //     <span>{node.title}</span>
  //   );
  // };


  // const onChange = (e) => {
  //   const { value } = e.target;
  //   const newExpandedKeys = dataList
  //     .filter(item => item.title.includes(value))
  //     .map(item => getParentKey(item.key, defaultData))
  //     .filter((item, i, self) => item && self.indexOf(item) === i);
  //   setExpandedKeys(newExpandedKeys);
  //   setSearchValue(value);
  //   setAutoExpandParent(true);
  // };

  // const onExpand = (keys) => {
  //   setExpandedKeys(keys);
  //   setAutoExpandParent(false);
  // };

  const edit = (record, index) => {
    setQuotationTableVisible(true);
    setEditIndex(index);
    setCurrentQuotationRecord(record);
  };


  const handleDelete = (index) => {
    const newData = [...quotation];
    newData.splice(index, 1);
    const sortedData = [...newData].sort((a, b) => {
      const aValidPeriod = dayjs(a.use_dates_end).diff(dayjs(a.use_dates_start));
      const bValidPeriod = dayjs(b.use_dates_end).diff(dayjs(b.use_dates_start));
      if (aValidPeriod !== bValidPeriod) {
        return aValidPeriod - bValidPeriod;
      }
      const aGroupSize = a.group_size_max - a.group_size_min;
      const bGroupSize = b.group_size_max - b.group_size_min;

      return aGroupSize - bGroupSize;
    });
    setQuotation(sortedData);
  };

  const handleAdd = () => {
    const newData = {
      adult_cost: 0,
      child_cost: 0,
      currency: '',
      group_size_min: 0,
      group_size_max: 0,
      id: '',
      lastedit_changed: '',
      use_dates_start: '',
      use_dates_end: '',
      weekdays: '',
      tempKey: Math.random()
    };
    setQuotation([...quotation, newData]);
    const index = [...quotation, newData].length - 1
    edit(newData, index);
  };

  const handleBatchImport = () => {
    setBatchImportPriceVisible(true);
  }

  const quotationTableVisibleOK = () => {
    currentQuotationRecord.use_dates_start = dayjs(currentQuotationRecord.use_dates_start).format('YYYY-MM-DD')
    currentQuotationRecord.use_dates_end = dayjs(currentQuotationRecord.use_dates_end).format('YYYY-MM-DD')
    const tempQuotation = [...quotation];
    tempQuotation[editIndex] = { ...currentQuotationRecord, weekdays: weekdays };
    const sortedData = [...tempQuotation].sort((a, b) => {
      const aValidPeriod = dayjs(a.use_dates_end).diff(dayjs(a.use_dates_start));
      const bValidPeriod = dayjs(b.use_dates_end).diff(dayjs(b.use_dates_start));

      if (aValidPeriod !== bValidPeriod) {
        return aValidPeriod - bValidPeriod;
      }
      const aGroupSize = a.group_size_max - a.group_size_min;
      const bGroupSize = b.group_size_max - b.group_size_min;

      return aGroupSize - bGroupSize;
    });
    setQuotation(sortedData);
    setQuotationTableVisible(false);
  }
  const quotationTableVisibleCancel = () => {
    setQuotationTableVisible(false);
  }


  const handleBatchImportOK = () => {
    const tempBatchImportData = batchImportData.map(item => {
      const { tag, validPeriod, ...rest } = item;
      return rest;
    });
    const newData = [...quotation, ...tempBatchImportData];
    const sortedData = [...newData].sort((a, b) => {
      if (a.group_size_min !== b.group_size_min) {
        return a.group_size_min - b.group_size_min;
      }

      return a.group_size_max - b.group_size_max;
    });


    setQuotation(sortedData);
    setBatchImportPriceVisible(false);
  }



  const columns = [
    { title: t('products:adultPrice'), dataIndex: 'adult_cost', width: '10%', editable: true },
    { title: t('products:childrenPrice'), dataIndex: 'child_cost', width: '10%', editable: true },
    { title: t('products:currency'), dataIndex: 'currency', width: '10%', editable: true },
    {
      title: t('products:Types'),
      dataIndex: 'unit',
      width: '10%',
      editable: true,
      render: (text) => (text === '0' ? '每人' : text === '1' ? '每团' : text),
    },
    {
      title: t('products:number'),
      dataIndex: 'group_size',
      width: '20%',
      editable: true,
      render: (_, record) => `${record.group_size_min}-${record.group_size_max}`
    },

    {
      title: t('products:validityPeriod'),
      dataIndex: 'validityPeriod',
      width: '20%',
      editable: true,
      render: (_, record) => `${record.use_dates_start}-${record.use_dates_end}`
    },

    { title: t('products:Weekdays'), dataIndex: 'weekdays', width: '10%' },

  ];

  // 根据条件判断是否要添加操作列
  if (!isCanEditable) {
    columns.push({
      title: t('products:operation'),
      dataIndex: 'operation',
      render: (_, record, index) => {
        const canEdit = record.audit_state_id === -1;
        return (
          <span>
            {canEdit ? (
              <a onClick={() => edit(record, index)} style={{ marginRight: 8 }}>{t('Edit')}</a>
            ) : (
              <span style={{ color: 'gray', marginRight: 8 }}>{t('Edit')}</span>
            )}
            {canEdit ? (
              <Popconfirm title={t('sureDelete')} onConfirm={() => handleDelete(index)}>
                <a>{t('Delete')}</a>
              </Popconfirm>
            ) : (
              <span style={{ color: 'gray' }}>{t('Delete')}</span>
            )}
          </span>
        );
      }
    });
  }

  const handleTagClick = (tag) => {
    setSelectedTag(tag);
    const matchedLanguage = HTLanguageSets.find(language => language.label === tag);
    const key = matchedLanguage ? matchedLanguage.key : null;
    form.setFieldsValue({
      lgc_details: {
        title: lgc_details[key] ? lgc_details[key].title : '',
        description: lgc_details[key] ? lgc_details[key].description : ''
      }
    });
    setLanguageStatus(key)

  };

  const showModal = () => setIsModalVisible(true);

  const handleOk = () => {
    if (!selectedTag) return;
    if (!remainderLanguage.some(item => item.label === selectedTag)) return;
    if (remainderLanguage.includes(selectedTag)) return;
    let tempRemainderLanguage = remainderLanguage.filter((item) => {
      return item.label !== selectedTag;
    })


    const matchedLanguage = HTLanguageSets.find(HTLanguage => HTLanguage.label === selectedTag);
    const languageKey = parseInt(matchedLanguage.key)
    if (!(languageKey in lgc_details)) {
      const tempLgc_details = {
        ...lgc_details, [languageKey]: {
          title: "",
          lgc: languageKey,
          description: "",
          id: ""
        }
      }
      setLgc_details(tempLgc_details)
    }

    setRemainderLanguage(tempRemainderLanguage)
    setTags([...tags, selectedTag])

    setSelectedTag(null);
    setIsModalVisible(false);
  }

  const handleCancel = () => setIsModalVisible(false);


  const handleTagChange = (value) => {
    setSelectedTag(value);
  };

  const handleChange = (field, value) => {
    // 更新整个 lgc_details 对象
    const updatedLgcDetails = {
      ...lgc_details,
      [languageStatus]: {
        ...lgc_details[languageStatus],
        [field]: value,
        lgc: languageStatus.toString(),
        id: lgc_details[languageStatus]?.id || ''
      }
    };
    setLgc_details(updatedLgcDetails)

  };

  const handleDayClick = (dayIndex) => {
    const dayOfWeek = (dayIndex % 7) + 1;

    setSelectedDays((prevSelectedDays) => {
      const updatedDays = prevSelectedDays.includes(dayOfWeek)
        ? prevSelectedDays.filter((d) => d !== dayOfWeek)
        : [...prevSelectedDays, dayOfWeek];
      const weekdaysString = updatedDays.sort().join(',');
      setWeekdays(weekdaysString);
      return updatedDays;
    });
  };

  //树组件方法
  const handleNodeSelect = (_, { node }) => {
    setSelectedNodeid(node.key);
    // const fatherKey = node.key.split('-')[0];
    const fatherKey = node._raw.info.product_type_id;
    setSelectedCategory(productProject[fatherKey]);
    setTags([languageLabel]);
    // 如果点击的是同一个节点，不做任何操作
    if (selectedNodeid === node.key) return;
    setLanguageStatus(language);
    const matchedLanguage = HTLanguageSets.find(HTLanguage => HTLanguage.key === language.toString());
    const languageLabelRefresh = matchedLanguage.label;
    setLanguageLabel(languageLabelRefresh);
    setSelectedTag(languageLabelRefresh);
    setRemainderLanguage(HTLanguageSets.filter(item => item.key !== language.toString()));
    // setEditingProduct(node._raw);
    if (!node._raw.info.id) {
      let infoData = node._raw.info;
      setInfo(node._raw.info);
      const newLgcDetails = node._raw.lgc_details
      setSelectedNodeid(node.key);
      form.setFieldsValue({
        info: {
          id: infoData.id || "",
          title: infoData.title || "",
          code: infoData.code || "",
          type: infoData.product_type_id || "",
          audit_state: "-1",
          create_date: infoData.create_date || "",
          created_by: infoData.created_by || "",
          travel_agency_id: travel_agency_id || "",
          travel_agency_name: activeAgency.travel_agency_name || "",
          lastedit_changed: infoData.lastedit_changed || "",
          remarks: infoData.remarks || "",
          duration: infoData.duration || "",
          duration_unit: infoData.duration_unit || "",
          open_weekdays: infoData.open_weekdays || "",
          recommends_rate: infoData.recommends_rate || "",
          dept: infoData.dept_id || "",
          display_to_c: infoData.display_to_c || "",
          km: infoData.km || "",
          city_name: infoData.city_name || "",
          city_id: infoData.city_id || "",
          // product_type_name: infoData.product_type_name || "",
          // dept_name: infoData.dept_name || "",

        },
        lgc_details: {
          lgc: language,
          title: newLgcDetails[language]?.title || '',
          description: newLgcDetails[language]?.description || ''
        }
      })
      setLgc_details([])
      setQuotation([{
        adult_cost: 0,
        child_cost: 0,
        currency: '',
        group_size_min: 0,
        group_size_max: 0,
        id: '',
        lastedit_changed: '',
        use_dates_start: '',
        use_dates_end: '',
        weekdays: '',
        tempKey: Math.random()
      }])
      return
    } else {
      let initialQuotationData = null;
      let infoData = null;
      let lgcDetailsData = null;
      console.log("")
      // productsData[fatherKey].forEach(element => {
      //   if (element.info.id === node._raw.info.id) {
      //     initialQuotationData = element.quotation;
      //     infoData = element.info;
      //     lgcDetailsData = element.lgc_details.map(item => {
      //       const newItem = {
      //         ...item,
      //         description: item.descriptions,
      //       };
      //       delete newItem.descriptions;
      //       return newItem;
      //     });
      //   }
      // });
      // const quotationData = initialQuotationData.map(element => {
      //   const updatedObject = {
      //     ...element,
      //     unit: element.unit_id,
      //     tempKey: Math.random()
      //   };
      //   delete updatedObject.unit_name;
      //   delete updatedObject.unit_id;
      //   // delete updatedObject.audit_state_id;
      //   delete updatedObject.audit_state_name;
      //   return updatedObject;
      // });


      // if (!node._raw.info.id) {

      // }
      // // 累积 lgc_details 数据
      // let newLgcDetails = {};
      // if (lgcDetailsData) {
      //   lgcDetailsData.forEach(element => {
      //     newLgcDetails[element.lgc] = element;
      //   });
      // }

      // setLgc_details(newLgcDetails);


      // let sortedData = [...quotationData].sort((a, b) => {
      //   // 计算有效期范围大小
      //   const aValidPeriod = dayjs(a.use_dates_end).diff(dayjs(a.use_dates_start));
      //   const bValidPeriod = dayjs(b.use_dates_end).diff(dayjs(b.use_dates_start));

      //   // 按照有效期范围大小升序排序
      //   if (aValidPeriod !== bValidPeriod) {
      //     return aValidPeriod - bValidPeriod;
      //   }

      //   // 如果有效期范围相同，则按照人数范围大小升序排序
      //   const aGroupSize = a.group_size_max - a.group_size_min;
      //   const bGroupSize = b.group_size_max - b.group_size_min;

      //   return aGroupSize - bGroupSize;
      // });

      // const tempInfo = {
      //   id: infoData.id || "",
      //   title: infoData.title || "",
      //   code: infoData.code || "",
      //   type: infoData.product_type_id || "",
      //   create_date: infoData.create_date || "",
      //   created_by: infoData.created_by || "",
      //   travel_agency_id: travel_agency_id || "",
      //   travel_agency_name: activeAgency.travel_agency_name || "",
      //   lastedit_changed: infoData.lastedit_changed || "",
      //   remarks: infoData.remarks || "",
      //   duration: infoData.duration || "",
      //   duration_unit: infoData.duration_unit || "",
      //   open_weekdays: infoData.open_weekdays || "",
      //   recommends_rate: infoData.recommends_rate || "",
      //   dept: infoData.dept_id || "",
      //   display_to_c: infoData.display_to_c || "",
      //   km: infoData.km || "",
      //   city_name: infoData.city_name || "",
      //   city_id: infoData.city_id || "",
      //   product_type_name: infoData.product_type_name || "",
      //   dept_name: infoData.dept_name || "",
      // };
      // setInfo(tempInfo);
      // setQuotation(sortedData);
      // if (node._raw.info.id) {
      //   form.setFieldsValue({
      //     info: tempInfo,
      //     lgc_details: {
      //       lgc: language,
      //       title: newLgcDetails[language]?.title || '',
      //       description: newLgcDetails[language]?.description || ''
      //     }
      //   });
      // }
    }

  };

  //新增产品
    const newProduct = useNewProductRecord();
    // const { language } = useDefaultLgc();
    const handelAddProduct = () => {
    // 找到对应的产品类型节点
    // const productTypeNode = treeData.find(item => item.key === addProductType);
    const copyNewProduct = structuredClone(newProduct);
    copyNewProduct.info.title = addproductName;
    copyNewProduct.info.product_type_id = productsTypesMapVal[addProductType].value;
    copyNewProduct.info.product_type_name = productsTypesMapVal[addProductType].label;
    copyNewProduct.lgc_details[0].lgc = language;
    setEditingProduct(copyNewProduct);
    setAddProductVisible(false);
    // todo: 树, active 类型节点
    return false;
    const tempAddData = {
      info: {
        id: "",
        title: addproductName,
        code: "",
        type: addProductType,
        create_date: "",
        created_by: "",
        travel_agency_id: "",
        travel_agency_name: "",
        lastedit_changed: "",
        remarks: "",
        duration: "",
        duration_unit: "",
        open_weekdays: "",
        recommends_rate: "",
        dept: "",
        display_to_c: "",
        km: "",
        city_name: "",
        city_id: "",
        product_type_name: "",
        dept_name: "",
      },
      lgc_details: [
      ],
      quotation: []
    }
    const newChildren = [
      ...productTypeNode.children,
      {
        title: addproductName,
        key: `${addProductType}-${Date.now()}`,
        _raw: tempAddData
      }

    ];
    //   // 创建新的 treeData 数组，确保 React 能够检测到更改
    const newTreeData = treeData.map(item => {
      if (item.key === addProductType) {
        return {
          ...item,
          children: newChildren,
        };
      }
      return item;
    });
    // 更新 treeData
    // setEditingProduct(null);
    setTreeData(newTreeData);

    let tempProductDataList = productsData[addProductType];
    tempProductDataList.push(tempAddData);
    const newProductsData = {
      ...productsData,  // 假设使用了展开运算符来复制现有数组
      [addProductType]: tempProductDataList
    };
    setProductsData(newProductsData);
    setAddProductVisible(false);
  }

  const renderFormItem = (item) => {
    switch (item.code) {
      case "duration":
        return <Input suffix="H" disabled={isCanEditable} />;
      case "display_to_c":
        return (
          <Select disabled={isCanEditable}>
            <Select.Option value={0}>在计划显示，不在报价信显示</Select.Option>
            <Select.Option value={1}>计划和报价信都要显示</Select.Option>
            <Select.Option value={2}>计划和报价信都不用显示</Select.Option>
          </Select>
        );
      case "dept_name":
        return <DeptSelector disabled={isCanEditable} />;
      case "city_name":
        return <CitySelector disabled={isCanEditable} />;
      default:
        return <Input disabled={isCanEditable} />;
    }
  };

  //保存产品
  const onSave = async (values) => {
    let tempInfo
    if (info.id === "") {
      tempInfo = {
        ...info,
        ...values.info,
        city_name: values.info.city_name.label,
        audit_state: "-1"
      }
      delete tempInfo.product_type_name;
      delete tempInfo.dept_name;

      let tempQuotation = quotation.map(element => {
        const updateData = {
          ...element,
          audit_state: "-1"
        }
        delete updateData.tempKey
        return updateData
      })
      let tempLgc_details = [{ ...lgc_details }]
      const tempData = {
        travel_agency_id,
        info: tempInfo,
        quotation: tempQuotation,
        lgc_details: Object.values(lgc_details)
      };
      console.log("tempData", tempData);

      const { errcode, result } = await postJSON(`${HT_HOST}/Service_BaseInfoWeb/agency_product_save`, tempData);
      console.log("result", result);
      if (errcode === 0) {
        message.success("保存成功");
        setDataFetched(false);
      } else {
        message.error(`保存失败: ${result}`);
      }
      return
    }

    tempInfo = {
      ...info,
      ...values.info,
      audit_state: "-1"
    }

    console.log("tempInfo", tempInfo)

    let tempQuotation = quotation.map(element => {
      const updateData = {
        ...element,
        audit_state: "-1"
      }
      return updateData
    })


    const tempData = {
      travel_agency_id,
      info: tempInfo,
      quotation: tempQuotation,
      lgc_details: Object.values(lgc_details)
    };

    console.log("tempData", tempData)
    // const { errcode, result } = await postProductsSave(tempData);
    const { errcode, result } = await postJSON(`${HT_HOST}/Service_BaseInfoWeb/agency_product_save`, tempData);
    if (errcode === 0) {
      message.success("保存成功");
      setDataFetched(false);
    } else {
      message.error(`保存失败: ${result}`);
    }

    return

  };

  //提交审核方法
  const submitReview = async () => {
    const formData = new FormData();
    formData.append('use_year', use_year);
    formData.append('travel_agency_id', travel_agency_id);
    try {
      const { errcode, result } = await postForm(`${HT_HOST}/Service_BaseInfoWeb/agency_submit`, formData);
      console.log("errcode", errcode);
      if (errcode === 0) {
        message.success("提交审核成功");
        navigate(`/products/${travel_agency_id}/${use_year}/${audit_state}/audit`);
      } else {
        message.error("提交审核失败");
      }
      console.log("result", result);
    } catch (error) {
      console.error("提交审核请求失败", error);
      message.error("提交审核请求失败");
    }
  };

  // const handleStateChange = (newState) => {
  //   console.log("newState",newState)
  //   if(newState === 'addProducts'){
  //     setAddProductVisible(true);
  //   }
  //   if(newState === 'submitReview'){
  //     submitReview();
  //   }
  // };

  return (

      <SecondHeaderWrapper loading={loading} backTo={false} header={
        <Header title={activeAgency.travel_agency_name} refresh={handleGetAgencyProducts} handleNewProduct={() => setAddProductVisible(true)} handleSubmitForAudit={submitReview} />
      // <YearSelector title={activeAgency.travel_agency_name} refresh={handleGetAgencyProducts} onStateChange={handleStateChange}/>
      }>
      {isEmpty(agencyProducts) ? <Empty /> :
      <>
        <Flex gap={10}>
          {/* onNodeSelect={handleNodeSelect} */}
          <ProductsTree className='basis-64 sticky top-16 overflow-y-auto shrink-0' style={{ height: 'calc(100vh - 150px)' }} />
      <Divider type={'vertical'} className='mx-1 h-auto' />
      <div className=' flex-auto grow-0 min-w-[800px]'>
            <ProductInfo />
        {/* <Row> */}
          {/* <Col span={6} className=' relative'> */}
            {/* <Card className='w-[inherit] fixed overflow-y-auto max-h-[80%] max-w-[22%] overflow-x-auto'>
              <Row>
                  <Search placeholder="Search" onChange={onChange} />
              </Row>
              <Tree
                style={{ overflowX: 'auto' }}
                onSelect={handleNodeSelect}
                treeData={treeData}
                expandedKeys={expandedKeys}
                autoExpandParent={autoExpandParent}
                onExpand={onExpand}
                titleRender={titleRender}
              />
            </Card> */}
          {/* </Col> */}

          {/* <Col span={18}> */}
            <Form form={form} name="control-hooks" onFinish={onSave}>
              {/* <Card
                title={
                  <Breadcrumb items={[
                    { title: productsTypesMapVal[editingProduct?.info?.product_type_id]?.label || editingProduct?.info?.product_type_name },
                    { title: editingProduct?.info?.title || t('New') }
                  ]} />
                }
              > */}
                {/* <h2>{t('products:EditComponents.info')}</h2>
                <Row gutter={16}>
                  {selectedCategory.map((item, index) => {
                    return (
                      <Col span={8} id={index} key={`${item.code}-${index}`}>
                        <Form.Item name={['info', item.code]} label={item.name}>
                          {renderFormItem(item)}
                        </Form.Item>
                      </Col>
                    );
                  })}
                </Row> */}

                {/* <div style={{ marginBottom: "1%", marginLeft: "3%" }}>
                  {tags.map(tag => (
                    <Tag
                      key={tag}
                      id={tag}
                      onClick={() => handleTagClick(tag)}
                      color={tag === selectedTag ? 'blue' : undefined}
                      style={{ cursor: 'pointer' }}
                    >
                      {tag}
                    </Tag>
                  ))}
                  <Tag onClick={showModal} style={{ cursor: 'pointer' }}>+</Tag>
                </div>
                <Modal title="选择语言" open={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                  <Select
                    showSearch
                    style={{ width: "80%" }}
                    placeholder="选择语言"
                    optionFilterProp="children"
                    onChange={handleTagChange}
                    value={remainderLanguage.some((item) => item.label === selectedTag) ? selectedTag : undefined}
                  >

                    {
                      remainderLanguage.map((value, label) => (
                        <Select.Option key={value.label} value={value.label}>
                          {value.label}
                        </Select.Option>
                      ))
                    }
                  </Select>
                </Modal> */}

                {/* <Form.Item label={t('products:Name')} name={['lgc_details', 'title']}>
                  <Input
                    style={{ width: "30%" }}
                    onChange={(e) => handleChange('title', e.target.value)}
                    disabled={isCanEditable}
                  />
                </Form.Item>
                <Form.Item label={t('products:Description')} name={['lgc_details', 'description']}>
                  <Input.TextArea
                    rows={4}
                    onChange={(e) => handleChange('description', e.target.value)}
                    disabled={isCanEditable}
                  />
                </Form.Item> */}
                {/* </Card> */}
                {/* </Card> */}

                {/* <Card style={{ width: "80%" }}> */}
                {/* <h2>{t('products:supplierQuotation')}</h2> */}
                {/* <Form.Item name="quotation">
                  <Table rowKey={'tempKey'}
                    bordered
                    dataSource={quotation}
                    columns={columns}
                    rowClassName="editable-row"
                  // pagination={{ onChange: cancel }}
                  />
                  {
                    // !isCanEditable &&
                    <Button onClick={handleAdd} type="primary" style={{ marginTop: 16 }}>
                      {t('products:addQuotation')}
                    </Button>
                  }

                  {
                    <Button onClick={handleBatchImport} type="primary" style={{ marginTop: 16, marginLeft: 16 }}>批量添加</Button>
                  }
                </Form.Item> */}

                {/* <Button type="primary" htmlType="submit" style={{ marginTop: 16, float: "right", marginRight: "20%" }}>
                  {t('Save')}
                </Button> */}
              {/* </Card> */}
            </Form>

            {/* <Card style={{ width: "80%" }}> */}
            <Extras productId={editingProduct?.info?.id} />
            {/* </Card> */}

            {/* <FloatButton icon={<PlusCircleFilled />} onClick={() => setAddProductVisible(true)} /> */}
{/*
            <FloatButton.Group
              trigger="hover"
              type="primary"
              style={{ right: 80 }}
              icon={<PlusCircleFilled />}
            >
              <Tooltip title="增加产品">
                <FloatButton icon={<FileAddOutlined />} onClick={() => setAddProductVisible(true)} />
              </Tooltip>
              <Tooltip title="提交审核">
                <FloatButton icon={<ExportOutlined />} onClick={async () => {
                  const formData = new FormData();
                  formData.append('use_year', use_year);
                  formData.append('travel_agency_id', travel_agency_id);
                  const { errcode, result } = await postForm(`${HT_HOST}/Service_BaseInfoWeb/agency_submit`, formData);
                  console.log("errcode", errcode);
                  if (errcode === 0) {
                    message.success("提交审核成功");
                    navigate(`/products/${travel_agency_id}/${use_year}/${audit_state}/audit`);
                  }
                  console.log("result", result);
                }} />
              </Tooltip>
            </FloatButton.Group> */}
          {/* </Col> */}
        {/* </Row> */}
        </div>
        </Flex>

        {/* <Modal
          title='批量设置价格'
          open={batchImportPriceVisible}
          onOk={handleBatchImportOK}
          onCancel={() => setBatchImportPriceVisible(false)}
          width={'90%'}
        >
          <BatchImportPrice onBatchImportData={handleBatchImportData} />
        </Modal> */}

        <Modal
          title="增加新产品"
          open={addProductVisible}
          onOk={handelAddProduct}
          onCancel={() => setAddProductVisible(false)}
        >
          <h4>选择产品类别</h4>

          <Select style={{ width: "50%" }}
            value={addProductType}
            onChange={(value) => setAddProductType(value)}
          >
            {productsTypes.map((item) => (
              <Select.Option key={item.key} value={item.value}>
                {item.label}
              </Select.Option>
            ))}
          </Select>

          <h4>新增产品名称</h4>
          <Input
            value={addproductName}
            onChange={(e) => setAddProductName(e.target.value)}
          />
        </Modal>
{/*
        <Modal
          title="编辑供应商报价"
          visible={quotationTableVisible}
          onOk={quotationTableVisibleOK}
          onCancel={quotationTableVisibleCancel}
        >
          <h3>成人价</h3>
          <InputNumber value={currentQuotationRecord.adult_cost} onChange={(e) => setCurrentQuotationRecord({ ...currentQuotationRecord, adult_cost: e })} />
          <h3>儿童价</h3>
          <InputNumber value={currentQuotationRecord.child_cost} onChange={(e) => setCurrentQuotationRecord({ ...currentQuotationRecord, child_cost: e })} />
          <h3>币种</h3>
          <Select style={{ width: "30%" }} value={currentQuotationRecord.currency} onChange={(e) => setCurrentQuotationRecord({ ...currentQuotationRecord, currency: e })}>
            <Select.Option value="rmb">rmb</Select.Option>
            <Select.Option value="usd">usd</Select.Option>
          </Select >
          <h3>类型</h3>
          <Select style={{ width: "30%" }} value={currentQuotationRecord.unit} onChange={(e) => setCurrentQuotationRecord({ ...currentQuotationRecord, unit: e })}>
            <Select.Option value="0">每人</Select.Option>
            <Select.Option value="1">每团</Select.Option>
          </Select>

          <h3>人等</h3>
          <td style={{ display: 'flex', alignItems: 'center' }}>
            <InputNumber
              min={0}
              value={currentQuotationRecord.group_size_min}
              onChange={(e) => setCurrentQuotationRecord({ ...currentQuotationRecord, group_size_min: e })}
              style={{ width: '50%', marginRight: '10px' }}
            />
            <span>-</span>
            <InputNumber
              min={0}
              value={currentQuotationRecord.group_size_max}
              onChange={(e) => setCurrentQuotationRecord({ ...currentQuotationRecord, group_size_max: e })}
              style={{ width: '50%', marginLeft: '10px' }}
            />
          </td>
          <h3>有效期</h3>
          <RangePicker
            allowClear={true}
            inputReadOnly={true}
            presets={presets}
            placeholder={['From', 'Thru']}
            value={startDate && endDate ? [startDate, endDate] : null}
            onChange={(dates) => {
              setCurrentQuotationRecord({
                ...currentQuotationRecord,
                use_dates_start: dates[0],
                use_dates_end: dates[1]
              });
            }}
          />
          <h3>周末</h3>
          {days.map((day, index) => (
            <Button
              key={index}
              type={selectedDays.includes((index % 7) + 1) ? 'primary' : 'default'}
              onClick={() => handleDayClick(index)}
              style={{ margin: '5px' }}
            >
              {day}
            </Button>
          ))}
        </Modal> */}
      </>}
      </SecondHeaderWrapper>
  );
}
export default Detail;