GHHub/src/views/products/Detail.jsx

import React, { useState, useEffect } from 'react';
import { message, Divider, Empty, Flex } from 'antd';
import { useNavigate } from 'react-router-dom';
import Extras from './Detail/Extras';
import { isEmpty } from '@/utils/commons';
import SecondHeaderWrapper from '@/components/SecondHeaderWrapper';
import Header from './Detail/Header';
import { useParams } from 'react-router-dom';
import useProductsStore from '@/stores/Products/Index';
import dayjs from 'dayjs';
import { HT_HOST } from '@/config';
import { postJSON, postForm } from '@/utils/request';
import { PERM_PRODUCTS_OFFER_AUDIT, PERM_PRODUCTS_OFFER_PUT } from '@/config';
import { usingStorage } from '@/hooks/usingStorage';
import ProductsTree from './Detail/ProductsTree';
import ProductInfo from './Detail/ProductInfo';
import useAuthStore from '@/stores/Auth';
import NewProductModal from './Detail/NewProductModal';

function Detail() {
  // const { t } = useTranslation();
  const navigate = useNavigate();
  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 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((state) => [state.getAgencyProducts, state.activeAgency]);
  const [switchParams, setSwitchParams] = useProductsStore((state) => [state.switchParams, state.setSwitchParams]);
  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 { 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;
    const param = { travel_agency_id: agency, use_year: year, audit_state: state };
    setSwitchParams(param);
    // setEditingProduct({});
    getAgencyProducts(param);
    // console.log("AgencyProducts",agencyProducts);
    // navigate(`/products/${agency}/${year}/${audit_state}/edit`);
  };

  // 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;
  //       }
  //     }
  //   }
  // };

  const isPermitted = useAuthStore((state) => state.isPermitted);
  const [editable, setEditable] = useState(true);
  useEffect(() => {
    const notAudit = activeAgency.audit_state_id < 0 || activeAgency.audit_state_id === 3;
    const hasAuditPer = isPermitted(PERM_PRODUCTS_OFFER_AUDIT);
    const hasEditPer = isPermitted(PERM_PRODUCTS_OFFER_PUT);
    setEditable(hasAuditPer ? true : notAudit && hasEditPer);
    // setEditable(true); // debug: 0
    // console.log('editable', hasAuditPer, (notAudit && hasEditPer));
    return () => {};
  }, [activeAgency, editingProduct]);

  //保存产品
  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('保存成功');
      } 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('保存成功');
    } 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('提交审核请求失败');
    }
  };

  return (
    <SecondHeaderWrapper
      loading={loading}
      backTo={false}
      header={
        <Header
          title={activeAgency.travel_agency_name}
          refresh={handleGetAgencyProducts}
          handleNewProduct={() => setAddProductVisible(true)}
          handleSubmitForAudit={submitReview}
          editable={editable}
        />
      }>
      {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 editable={editable} />
              {!isEmpty(editingProduct) && <Extras productId={editingProduct?.info?.id} />}
            </div>
          </Flex>

          <NewProductModal open={addProductVisible} onSubmit={() => setAddProductVisible(false)} onCancel={() => setAddProductVisible(false)} />
        </>
      )}
    </SecondHeaderWrapper>
  );
}
export default Detail;