import React, { Component } from 'react';
import {Card, Icon,Avatar,Dropdown,Menu,Button} from 'antd';
import {getAxios} from '../../utils/http';
import {global} from '../../constants/global'
const { Meta } = Card;
const {actions, CMS_BASE_URL} = global
// const axios = getAxios();
export default class IMECard extends Component {

constructor (props) {
    super(props);
    this.state = {
        item: this.props.item,
        i : this.props.i,
        actions : [],
    }
}

componentWillReceiveProps(nextProps){
    if(this.props.item  != nextProps.item){
        this.setState({item : nextProps.item});
    }
}

//動態(tài)加載按鈕
initMyActions = (actions,oid)=>{
    const  self = this;
    let arr = [];
    let MenuItems  =  [];
    const menu = (
        <Menu>
            {MenuItems}
        </Menu>
    );
    for(let i = 0;i<actions.length;i++){
        let action = actions[i];
        console.log(action);
        //顯示前面兩個
       if(i<2) {
           arr.push(self.initAction(action, oid));
       }
       //超過三個的時候
       else{
           let nowItem = (<Menu.Item>{self.initAction(action, oid)}</Menu.Item>);
           MenuItems.push(nowItem);
       }
    }
        const showMore = (<Dropdown overlay={menu} placement="topCenter"><Icon type="ellipsis" /></Dropdown>);
        arr.push(showMore);
    return arr;
}
 //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~函數(shù)里面新建對象~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
initAction = function (action, oid) {
    console.info('actionOid:' + oid)
    let object = require("../../actions/" + action.key).default;
    const element = React.createElement(object,{"oid": oid} ,null);
    return element;
}

componentWillMount() {
    var self = this;
    getAxios().get(actions+'/owner').then(function (response) {
        const success = response.data.success;
        if(success){
            self.setState({actions:response.data.result});
        }
    });
}

render() {
    const self = this;
    const {image, name, desc,oid} = this.state.item;
    return (
        <Card
            key = {oid + `-card`}
            style={{ width: '100%',minHeight:273}}
            bordered={true} hoverable={true}
            cover={<img alt="" src={CMS_BASE_URL + image} style={{'max-height': '529px', height:'100%'}}
                        onClick = {(e) =>{if(this.props.onClick != null) this.props.onClick(e, this.state.i)}}/>}
            actions={
                // this.state.actions.map(action => this.initAction(action, oid))
                this.initMyActions(this.state.actions,oid)
            }
        >
            <Meta
                avatar={<Avatar src="/images/ODTLcjxAfvqbxHnVXCYX.png" />}
                title={name}
                style={{margin:'-21px'}}
                description={desc}
            />
        </Card>

    )
}

}