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 { connect } from '@tarojs/redux';

import './Announcement.scss';
import { Customer } from '@/types/Customer/Customer';
import { shareHandle } from '@/common/shareMethod';
import {
  fetchNoticesData,
  PublishClient,
  AppHomeNoticeAppVo,
} from '@/api/home';

type PageStateProps = {
  userinfo: Customer;
};
type PageOwnProps = {};
type PageState = {
  pageNum: number;
  pageSize: number;
  list: AppHomeNoticeAppVo[];
  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;
    fetchNoticesData({
      customerId: userinfo.customerId,
      publishClient: PublishClient.wx,
    })
      .then(res => {
        const data = res.data;
        this.setState({
          list: data,
        });
      })
      .catch(err => {
        console.log(err);
      });
  }
  geAnnDetail(id: string) {
    const { userinfo } = this.props;

    Taro.navigateTo({
      url: `/pages/Content/Content?id=${id}&customerId=${userinfo.customerId}`,
    });
  }
  render() {
    const { list, linkUrl } = this.state;
    return (
      <ScrollView className='Announcement' scroll-y>
        {linkUrl && <WebView src={linkUrl} />}
        {list.map(annItem => (
          <View
            key={annItem.noticeCode}
            className='Announcement-item'
            onClick={() => this.geAnnDetail(annItem.noticeCode)}>
            <Image className='Announcement-item-img' src={annItem.noticeImgs} />
            <View className='Announcement-item-Content'>
              <Image className='Announcement-item-icon' src={AnnIcon} />
              <Text className='Announcement-item-title'>
                {annItem.noticeTitle}
              </Text>
              <Text className='Announcement-item-date'>{annItem.updateAt}</Text>
            </View>
          </View>
        ))}
      </ScrollView>
    );
  }
}

export default Announcement as ComponentClass;
