import { Component, ReactNode } from 'react';
import { AtTabBar } from 'taro-ui';
import Taro from '@tarojs/taro';
import 'taro-ui/dist/style/index.scss';
import './index.scss';
import pt from '@/plain-text';

const navList: Array<Taro.TabBarItem> = [
  {
    pagePath: '/pages/index/index',
    text: pt.get().tabBar.indexText,
  },
  {
    pagePath: '/pages/repair/repair',
    text: pt.get().tabBar.repairText,
  },
  {
    pagePath: '/pages/user/user',
    text: pt.get().tabBar.userText,
  },
];

export default class Index extends Component {
  state = {
    selected: 0,
    tabList: [
      {
        title: pt.get().tabBar.indexText,
        iconType: 'home',
      },
      {
        title: pt.get().tabBar.repairText,
        iconType: 'settings',
      },
      {
        title: pt.get().tabBar.userText,
        iconType: 'user',
      },
    ],
  };

  handleClick(idx: number) {
    this.switchTab(idx, navList[idx].pagePath);
  }

  switchTab(idx: number, url: string) {
    this.setSelected(idx);
    Taro.switchTab({ url });
  }

  setSelected(idx: number) {
    this.setState({
      selected: idx,
    });
  }

  render(): ReactNode {
    return (
      <AtTabBar
        fixed
        tabList={this.state.tabList}
        onClick={this.handleClick.bind(this)}
        current={this.state.selected}
      />
    );
  }
}