import { AtListItem } from 'taro-ui';
import repair from '@/assets/icons/MyTickets/repair.svg';
import finished from '@/assets/icons/MyTickets/finished.svg';
import tick from '@/assets/icons/MyTickets/tick.svg';
import fail from '@/assets/icons/MyTickets/fail.svg';
import pt from '@/plain-text';
import Taro from '@tarojs/taro';

type FixStatus = 1 | 2 | 3 | 4 | 5;

export class TicketListItem {
  id: number;
  brand: string;
  model: string;
  status: FixStatus;
  createAt: moment.Moment;
  iconMap: Map<FixStatus, string>;

  constructor(
    id: number,
    brand: string,
    model: string,
    status: FixStatus,
    createAt: moment.Moment,
  ) {
    this.id = id;
    this.brand = brand;
    this.model = model;
    this.status = status;
    this.createAt = createAt;
    this.iconMap = new Map<FixStatus, string>([
      [1, repair],
      [2, repair],
      [3, finished],
      [4, tick],
      [5, fail],
    ]);
  }

  render(): JSX.Element {
    const tl = pt.get().ticketList;
    return (
      <AtListItem
        title={this.brand + ' ' + this.model}
        note={tl.createdAt(this.createAt.format('YYYY-MM-DD HH:mm'))}
        extraText={tl.statusMap.get(this.status)}
        arrow='right'
        thumb={this.iconMap.get(this.status)}
        onClick={() => {
          Taro.navigateTo({
            url: '/pages/TicketDetail/TicketDetail?id=' + this.id,
          });
        }}
      />
    );
  }
}