refactor DetailFramework and service/ticketsInfo; create currentTicket service

src/components/DetailFramework/DetailFramework.tsx

@@ -1,15 +1,36 @@
 import { View } from '@tarojs/components';
 import { Component, ReactNode } from 'react';
 import Taro from '@tarojs/taro';
-import { ShowElements } from '@/pages/TicketDetail/TicketNote';
-import PageFooter from '@/components/PageFooter/PageFooter';
+import {
+  ShowElements,
+  TicketInfo,
+  TicketNote,
+} from '@/pages/TicketDetail/TicketNote';
 import pt from '@/plain-text';
 import { RequestState } from '@/service';
 import { getTicketInfo } from '@/service/ticketsInfo';
+import { FixStatus } from '@/common';
+import { AtCard, AtSteps } from 'taro-ui';
+import NoteList from '../NoteList/NoteList';
+
+interface StepItemData {
+  title: string;
+}
+
+const mapStatusStep: Map<FixStatus, 0 | 1 | 2 | 3> = new Map([
+  [1, 0],
+  [2, 1],
+  [3, 2],
+  [4, 2],
+  [5, 3],
+]);
 
 interface DetailFrameworkState {
+  current: number;
+  items: Array<StepItemData>;
+  ticketInfo: TicketInfo;
+  notes: Array<TicketNote>;
   rs: RequestState;
-  elements: ShowElements;
 }
 
 interface DetailFrameworkProps {
@@ -23,8 +44,11 @@ export default class DetailFramework extends Component<
   DetailFrameworkState
 > {
   state = {
+    current: 0,
+    items: [],
+    ticketInfo: new TicketInfo(),
+    notes: [new TicketNote()],
     rs: new RequestState(),
-    elements: new ShowElements(),
   };
 
   componentDidMount(): void {
@@ -32,7 +56,7 @@ export default class DetailFramework extends Component<
     Taro.setNavigationBarTitle({
       title: navBar.ticketDetail,
     });
-    getTicketInfo(this, this.props.id, this.props.isInfoShow);
+    getTicketInfo(this, this.props.id);
   }
 
   props: Readonly<DetailFrameworkProps> = {
@@ -55,15 +79,74 @@ export default class DetailFramework extends Component<
       return <View>Request failed</View>;
     }
 
+    const status = this.state.ticketInfo.status;
+    this.setState({
+      current: mapStatusStep.get(status) || 0,
+      items: pt.get().ticketDetail.stepItems,
+    });
+
+    const elements: ShowElements = {
+      device: this.props.isInfoShow['device'] ? (
+        <View className='at-article__h1'>
+          {this.state.ticketInfo.device +
+            ' ' +
+            this.state.ticketInfo.deviceModel}
+        </View>
+      ) : (
+        <View></View>
+      ),
+      createdTime: this.props.isInfoShow['createdTime'] ? (
+        <View className='at-article__info'>
+          {pt.get().common.createdAtText(this.state.ticketInfo.createdTime)}
+        </View>
+      ) : (
+        <View></View>
+      ),
+      description: this.props.isInfoShow['description'] ? (
+        <View style={{ marginTop: 10, marginBottom: 10 }}>
+          <AtCard title={pt.get().ticketDetail.descTitle}>
+            <View className='at-article__h3'>
+              {this.state.ticketInfo.description}
+            </View>
+          </AtCard>
+        </View>
+      ) : (
+        <View></View>
+      ),
+      current: this.props.isInfoShow['current'] ? (
+        <View style={{ padding: 10 }}>
+          <AtSteps
+            items={this.state.items}
+            current={this.state.current}
+            onChange={() => {}}
+          />
+        </View>
+      ) : (
+        <View></View>
+      ),
+      notelist: this.props.isInfoShow['notelist'] ? (
+        this.props.isInfoShow['showAllNotes'] ? (
+          <View style={{ padding: 10 }}>
+            <NoteList noteList={this.state.notes} />
+          </View>
+        ) : (
+          <View style={{ padding: 10 }}>
+            <NoteList noteList={[this.state.notes[-1]]} />
+          </View>
+        )
+      ) : (
+        <View></View>
+      ),
+    };
+
     return (
       <View>
-        {this.state.elements.device}
-        {this.state.elements.createdTime}
-        {this.state.elements.description}
-        {this.state.elements.current}
+        {elements.device}
+        {elements.createdTime}
+        {elements.description}
+        {elements.current}
         {this.props.middleButton}
-        {this.state.elements.notelist}
-        <PageFooter />
+        {elements.notelist}
       </View>
     );
   }