import { inject, observer } from 'mobx-react';
import { WeaLocaleProvider, WeaNewScroll } from "ecCom";
import { i18n } from '../../public/i18n.js'
import {addContentPath} from '../../util/index.js'
import "../../style/blessCard.less";
import { WeaPopoverHrm } from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;

@inject('hrmBlessCard')
@observer
export default class BlessCard extends React.Component {
    componentWillMount() {
        document.title = i18n.label.blessCard()
    }
    componentDidMount() {
        const { hrmBlessCard: { readBirthdayBlessingData }, params } = this.props;
        readBirthdayBlessingData(params.id);
    }

    componentDidUpdate(prevProps, prevState) {
        const { hrmBlessCard: { setInfoHeight } } = this.props;
        setInfoHeight($(".info").height());
    }

    getLetterRows = () => {
        const { hrmBlessCard: { blessRowNumber } } = this.props;
        let arr = [];
        for (let i = 0; i < blessRowNumber; i++) {
            arr.push(<div className="blessingRow"/>)
        }
        return arr;
    }

    render() {
        const { hrmBlessCard: { blessing, createDate, creator, imgUrl, setRef, blessingHeight, handleLetterPaperScroll ,hrmId } } = this.props;
        return (
            <div className="blessCard">
                <WeaPopoverHrm />
                <div className="bcInnner">
                    <img src={addContentPath(imgUrl)} alt="" ref={ref => setRef(ref, "img")}/>
                    <div className="letterPaper" style={{height: blessingHeight,zIndex:0}} onScroll={handleLetterPaperScroll}>
                        {this.getLetterRows()}
                    </div>
                    <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@58567q`} height={blessingHeight} ref={ref => setRef(ref, "scroll")}>
                        <div className="info">
                            <p>{blessing}</p>
                            {/* <span dangerouslySetInnerHTML = {{ __html: getLabel(-1,"来自: {param}").replace("{param}",`<a>${creator}</a>`) }}></span> */}
                            <span>来自<a href={`javaScript:openhrm(${hrmId})`}  onClick={e => window.pointerXY(e)}>{creator}</a></span>

                            <span>{createDate}</span>
                        </div>
                    </WeaNewScroll>
                </div>
            </div>
        );
    }
}