import React, { Component } from 'react';
import { Spin } from 'antd';
import { Link } from 'react-router-dom'

import Empty from '../Empty';
import './myExchange.css';

import box1 from '../images/box1.png';
import box2 from '../images/box2.png';
import box3 from '../images/box3.png';
import box4 from '../images/box4.png';
import box5 from '../images/box5.png';
import box6 from '../images/box6.png';

import axios from 'axios';

const backImgArray = [box1,box2,box3,box4,box5,box6];
class MyInteresting extends Component {
  constructor(props){
    super(props);
    this.state={
      forum_details:undefined,
      isSpin:true
    }
  }

  componentDidMount = () =>{
    this.getInfo();
  }

  getInfo = () =>{
    this.setState({
      isSpin:true
    })
    const url =  `/my_memos/my_interested`;
    axios.get(url).then((result)=>{
      if(result){
        this.setState({
          forum_details:result.data.forum_details,
          isSpin:false
        })
      }
    }).catch(error=>{
      
    })
  }

  // 取消收藏
  cancelEnshrineEvent=(id)=>{
    const url = `/memos/forum_memos/${id}/is_watch.json`;
    axios.post((url),{
      is_watch:0
    }).then(result=>{
      if(result){
        this.getInfo();
      }
    }).catch(error=>{

    })
  }

  render(){
    const { forum_details , isSpin } = this.state;

    const divList = ( forum_details && forum_details.length > 0 ?
      <div className="ForumList"> 
        {
          forum_details.map((item,key) => {
          const index = Number(Number((key)%6)+1)-1;
          // console.log(index);
          return(
            <div className="interestItem">
              <div className="interestingUpper" style={{backgroundImage:`url(${backImgArray[index]})`}}>
                <div>
                  <p className="font-20 color-white mb10">{item.title}</p>
                  <p className="color-white font-12 edu-txt-center">{item.memos_count} 个话题</p>
                </div>
              </div>
              <span className="interestingOperate">
                <span className="operateBtn c_point" onClick={()=>this.cancelEnshrineEvent(`${item.id}`)}>取消收藏</span>
                <Link className="operateBtn color-blue" to={`/forums/theme/${item.id}`}>查看</Link>
              </span>
            </div>
          )
        })
      }
    </div>
    :
    <div className="pt50 pb50 edu-back-white"><Empty/></div>
    )
    return(
      <Spin spinning={isSpin}>
        <div style={{backgroundColor:"#fafafa"}}>
          { divList }
        </div>
      </Spin>
    )
  }
}

export default MyInteresting; 