import React from 'react';
import {resource} from '../../../api';
import {image} from '../../../../../common/utils';
import yaSDK from 'yoho-activity-sdk';

import './index.scss';

export default class Resource extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            floors: []
        };

        this.loadResource();
    }

    loadResource = async () => {
        try {
            let result = await resource({contentCode: this.props.code});
            
            if (result.code === 200) {
                this.setState({
                    floors: result.data
                });
            }

        } catch (err) {
            
        }
    };

    render() {
        const {floors} = this.state;
        
        if (!this.props.code) {
            return null;
        }

        let jump = e => {
            let $el = e.currentTarget;
            let url = $el.getAttribute('data-url');
            
            if (!url) {
                return;
            }
            yaSDK.link(e)
        };
        
        return (
            <div className="comp-resource-wrap">
                {
                    floors.map((floor) => {
                        return (
                            <div className="new-single-img-item" key={floor.template_id}>
                                <a data-type='other' data-url={floor.data.list[0].url} onClick={jump}>
                                    <img src={
                                        image(floor.data.list[0].src, floor.data.imageWidth, floor.data.imageHeight)
                                    } alt=""/>
                                </a>
                            </div>
                        )
                    })
                }
            </div>
        )
    }
}