import { Component, ReactNode } from 'react';
import { Image, View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import pt from '@/plain-text';
import PageFooter from '@/components/PageFooter/PageFooter';
import './about.scss';

export default class AboutPage extends Component {
  componentDidMount(): void {
    Taro.setNavigationBarTitle({
      title: pt.get().navBar.user.about,
    });
  }
  render(): ReactNode {
    return (
      <View>
        <View
          style={{
            marginTop: '200rpx',
            marginBottom: '60rpx',
          }}
          className='at-row at-row__align--start'
        >
          <View className='at-col at-col-1 at-col--auto'>
            <Image
              style='width: 240rpx; height: 240rpx; margin-left: 60rpx; margin-right: 30rpx; margin-top: 30rpx; border-radius: 120rpx'
              src='https://wiki.zjueva.net/images/1/10/%E5%A4%B4%E5%83%8F.jpg?20240319171222'
              mode='aspectFit'
            />
          </View>
          <View
            className='at-article at-col at-col--wrap'
            style={{ wordBreak: 'normal' }}
          >
            <View className='at-article__h1'>
              {pt.get().aboutPage.dean.nickname}
            </View>
            <View className='at-article__h3'>
              {pt.get().aboutPage.dean.username}
            </View>
            <View className='at-article__p'>
              {pt.get().aboutPage.dean.status}
            </View>
            <View className='at-article__info'>
              {pt.get().aboutPage.dean.note}
            </View>
          </View>
        </View>
        <View
          style={{ marginTop: '100rpx', marginBottom: '60rpx' }}
          className='at-row at-row__align--start'
        >
          <View className='at-col at-col-1 at-col--auto'>
            <Image
              style='width: 240rpx; height: 240rpx; margin-left: 60rpx; margin-right: 30rpx; margin-top: 30rpx; border-radius: 120rpx'
              src='https://static.fracher21.top/head.jpg'
              mode='aspectFit'
            />
          </View>
          <View
            className='at-article at-col at-col--wrap'
            style={{ wordBreak: 'normal' }}
          >
            <View className='at-article__h1'>
              {pt.get().aboutPage.fracher.nickname}
            </View>
            <View className='at-article__h3'>
              {pt.get().aboutPage.fracher.username}
            </View>
            <View className='at-article__p'>
              {pt.get().aboutPage.fracher.status}
            </View>
            <View className='at-article__info'>
              {pt.get().aboutPage.fracher.note}
            </View>
          </View>
        </View>
        <View style={{ height: '200rpx' }}></View>
        <PageFooter />
      </View>
    );
  }
}