import { View } from '@tarojs/components';
import { Component, ReactNode } from 'react';
import Taro from '@tarojs/taro';
import type CustomTabBar from '../../custom-tab-bar';
import './user.scss';
import { AtList, AtListItem } from 'taro-ui';

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

  myTicketPage() {
    Taro.navigateTo({
      url: '/pages/user/myTicket/myTicket',
    });
  }

  informPage() {
    Taro.navigateTo({
      url: '/pages/user/inform/inform',
    });
  }

  settingsPage() {
    Taro.navigateTo({
      url: '/pages/user/settings/settings',
    });
  }

  reportPage() {
    Taro.navigateTo({
      url: '/pages/user/report/report',
    });
  }

  render(): ReactNode {
    return (
      <View>
        <AtList>
          <AtListItem
            title='我的工单'
            note='在这里查看历史工单！'
            arrow='right'
            iconInfo={{ size: 25, color: '#E69966', value: 'clock' }}
            onClick={this.myTicketPage}
          />
          <AtListItem
            title='我的信息'
            note='能帮助亦可更好地找到你哦！'
            arrow='right'
            iconInfo={{ size: 25, color: '#78A4FA', value: 'user' }}
            onClick={this.informPage}
          />
          <AtListItem
            title='设置'
            note='配置小程序'
            extraText=''
            arrow='right'
            iconInfo={{ size: 25, color: '#808080', value: 'filter' }}
            onClick={this.settingsPage}
          />
          <AtListItem
            title='意见反馈'
            note='有什么想说的都可以告诉我们哦！'
            extraText=''
            arrow='right'
            iconInfo={{ size: 25, color: '#9ACD32', value: 'message' }}
            onClick={this.reportPage}
          />
        </AtList>
      </View>
    );
  }
}