import { View } from '@tarojs/components';
import { Component, ReactNode } from 'react';
import { AtButton, AtCard, AtList } from 'taro-ui';
import Taro from '@tarojs/taro';
import pt from '@/plain-text';
import { getUncompletedTicketList } from '@/service/uncompletedTicket';
import type CustomTabBar from '@/custom-tab-bar';
import { TicketListItem } from '@/components/TicketListItem/TicketListItem';
import { RequestState } from '@/service';
import moment from 'moment';
import './member.scss';

interface UncompletedTicketState {
  fixList: Array<TicketListItem>;
  rs: RequestState;
}

export default class MemberPage extends Component<{}, UncompletedTicketState> {
  state = {
    fixList: [new TicketListItem(0, '', '', 1, moment(), false)],
    rs: new RequestState(),
  };

  componentDidMount(): void {
    Taro.setNavigationBarTitle({
      title: pt.get().navBar.user.member,
    });
    getUncompletedTicketList(this);
  }

  // 以下是TabBar相关
  pageCtx = Taro.getCurrentInstance().page;
  componentDidShow() {
    const tabbar = Taro.getTabBar<CustomTabBar>(this.pageCtx);
    tabbar?.setSelected(2);
  }
  // 以上是TabBar相关

  render(): ReactNode {
    if (this.state.rs.loading) {
      return <View>loading</View>;
    }
    if (!this.state.rs.success) {
      return <View>Failed</View>;
    }
    const fixListRenderer = this.state.fixList.map((item) => item.render());
    return (
      <View>
        <AtList>{fixListRenderer}</AtList>
      </View>
    );
  }
}