From 5772d61a85aa8d9ce67cfde2b76daf89d9f0ef96 Mon Sep 17 00:00:00 2001
From: Lei OT <lyt@hainatravel.com>
Date: Thu, 23 May 2024 16:03:01 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E9=9A=90=E8=97=8F=E6=97=B6?=
 =?UTF-8?q?=E6=9A=82=E5=81=9C=E6=97=B6=E9=92=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Conversations/Online/ExpireTimeClock.jsx  | 19 +++++---
 .../Conversations/Online/LocalTimeClock.jsx   | 43 +++++++++++--------
 2 files changed, 39 insertions(+), 23 deletions(-)

diff --git a/src/views/Conversations/Online/ExpireTimeClock.jsx b/src/views/Conversations/Online/ExpireTimeClock.jsx
index da3f2a3..fe9955a 100644
--- a/src/views/Conversations/Online/ExpireTimeClock.jsx
+++ b/src/views/Conversations/Online/ExpireTimeClock.jsx
@@ -6,23 +6,30 @@ import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
 import relativeTime from 'dayjs/plugin/relativeTime';
+import { useVisibilityState } from '@/hooks/useVisibilityState';
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
 dayjs.extend(relativeTime);
 
 const ExpireTimeClock = ({ expireTime }) => {
+  const isVisible = useVisibilityState();
 
   const [customerDateTime, setCustomerDateTime] = useState('');
   const [isExpired, setIsExpired] = useState(false);
 
   useEffect(() => {
-    const intervalId = setInterval(() => {
-      // .tz('Asia/Shanghai') UTC 时间转换成 Asia/Shanghai 时区时间 GMT+8
-      setCustomerDateTime(dayjs(expireTime).add(8, 'hours').fromNow());
-    }, 1000);
-    return () => clearInterval(intervalId);
-  }, [expireTime]);
+    let interval;
+    if (isVisible) {
+      interval = setInterval(() => {
+        // .tz('Asia/Shanghai') UTC 时间转换成 Asia/Shanghai 时区时间 GMT+8
+        setCustomerDateTime(dayjs(expireTime).add(8, 'hours').fromNow());
+      }, 1000);
+    } else {
+      clearInterval(interval);
+    }
+    return () => clearInterval(interval);
+  }, [isVisible, expireTime]);
 
   useEffect(() => {
     const _ago = customerDateTime.slice(-3) === 'ago';
diff --git a/src/views/Conversations/Online/LocalTimeClock.jsx b/src/views/Conversations/Online/LocalTimeClock.jsx
index ab493c4..881b716 100644
--- a/src/views/Conversations/Online/LocalTimeClock.jsx
+++ b/src/views/Conversations/Online/LocalTimeClock.jsx
@@ -1,12 +1,15 @@
 import { useEffect, useState } from 'react';
 import { Typography, Select } from 'antd';
 import ct from 'countries-and-timezones';
+import { useVisibilityState } from '@/hooks/useVisibilityState';
 
 const LocalTimeClock = ({ region, timezone, ...props }) => {
+  const isVisible = useVisibilityState();
+
   const [countryTimezones, setCountryTimezones] = useState([]);
   const [timezoneP, setTimezoneP] = useState(timezone);
   const [customerDateTime, setCustomerDateTime] = useState();
-  console.log(timezone, timezoneP);
+  // console.log(timezone, timezoneP);
 
   useEffect(() => {
     if (timezone) {
@@ -26,23 +29,29 @@ const LocalTimeClock = ({ region, timezone, ...props }) => {
   }, [region, timezone]);
 
   useEffect(() => {
-    const interval = setInterval(() => {
-      // const date = new Date();
-      const options = {
-        timeZone: timezoneP,
-        timeZoneName: 'short',
-        hour12: false,
-        month: '2-digit',
-        day: '2-digit',
-        hour: '2-digit',
-        minute: '2-digit',
-      };
-      // const formatter = new Intl.DateTimeFormat('en-US', options);
-      // setCustomerDateTime(formatter.format(date));
-      setCustomerDateTime(new Date().toLocaleTimeString('cn-ZH', options));
-    }, 1000);
+    let interval;
+    if (isVisible) {
+      interval = setInterval(() => {
+        const options = {
+          timeZone: timezoneP,
+          timeZoneName: 'short',
+          hour12: false,
+          month: '2-digit',
+          day: '2-digit',
+          hour: '2-digit',
+          minute: '2-digit',
+          // second: '2-digit',
+        };
+        // const date = new Date();
+        // const formatter = new Intl.DateTimeFormat('en-US', options);
+        // setCustomerDateTime(formatter.format(date));
+        setCustomerDateTime(new Date().toLocaleTimeString('cn-ZH', options));
+      }, 1000);
+    } else {
+      clearInterval(interval);
+    }
     return () => clearInterval(interval);
-  }, [timezoneP]);
+  }, [isVisible, timezoneP]);
 
   return region ? (
     <>