import Taro, { Component } from '@tarojs/taro';
import { ComponentClass } from 'react';
import { View, ScrollView, Image, Text, WebView } from '@tarojs/components';

import AnnIcon from '../../images/icon/ann_tongzhi_icon@2x.png';
import { fetchAllAnn, AnnItem } from '../../api/announcement';
import { connect } from '@tarojs/redux';

import './Announcement.scss';
import { Customer } from '@/types/Customer/Customer';
import { shareHandle } from '@/common/shareMethod';

type PageStateProps = {
  userinfo: Customer;
};
type PageOwnProps = {};
type PageState = {
  pageNum: number;
  pageSize: number;
  list: AnnItem[];
  linkUrl: string;
};

interface Announcement {
  props: PageStateProps & PageOwnProps;
  state: PageState;
}

@connect(({ userinfo }) => ({
  userinfo,
}))
class Announcement extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pageNum: 1,
      pageSize: 10,
      list: [],
      linkUrl: '',
    };
  }
  onShareAppMessage = shareHandle;

  componentWillMount() {
    const { userinfo } = this.props;
    const { sectionId } = this.$router.params;
    fetchAllAnn({
      campusId: userinfo.areaId,
      sectionId: sectionId,
    })
      .then(res => {
        const data = res.data;
        this.setState({
          ...data,
        });
      })
      .catch(err => {
        console.log(err);
      });
  }
  geAnnDetail(id: number) {
    Taro.navigateTo({
      url: `/pages/Content/Content?id=${id}`,
    });
  }
  render() {
    const { list, linkUrl } = this.state;
    return (
      <ScrollView className='Announcement' scroll-y>
        {linkUrl && <WebView src={linkUrl} />}
        {list.map(annItem => (
          <View
            key={annItem.id}
            className='Announcement-item'
            onClick={() => this.geAnnDetail(annItem.id)}>
            <Image
              className='Announcement-item-img'
              src={annItem.linkUrls[0]}
            />
            <View className='Announcement-item-Content'>
              <Image className='Announcement-item-icon' src={AnnIcon} />
              <Text className='Announcement-item-title'>{annItem.title}</Text>
              <Text className='Announcement-item-date'>
                {annItem.updateTime}
              </Text>
            </View>
          </View>
        ))}
      </ScrollView>
    );
  }
}

export default Announcement as ComponentClass;
