import { Component, ReactNode } from 'react';
import { View } from '@tarojs/components';
import { AtList } from 'taro-ui';
import Taro from '@tarojs/taro';
import moment from 'moment';
import pt from '@/plain-text';
import { RequestState } from '@/service';
import { getMyTicketList } from '@/service/myTicket';
import { TicketListItem } from '@/components/TicketListItem/TicketListItem';
import './myTicket.scss';

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

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

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

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