import React, { useState, useEffect, useContext, memo } from 'react';
import { Progress, Input, Tooltip } from 'antd'
import { getUrl2, isDev, CBreadcrumb, ActionBtn, ThemeContext } from 'educoder'
import axios from 'axios'
import moment from 'moment'
import playIcon from './images/play.png'

/**
cover_url: "http://video.educoder.net/f6ba49c3944b43ee98736898e31b7d88/snapshots/12da3f7df07c499b8f0fc6dc410094e9-00005.jpg"
created_at: "2019-08-12 13:48:26"
file_url: "http://video.educoder.net/sv/4c7eb4-16c845ee09c/4c7eb4-16c845ee09c.mp4"
id: 1
published_at: "2019-08-12 15:38:00"
title: "测试标题"
updated_at: "2019-08-12 17:17:09"
 */
function VideoInReviewItem (props) {
    const theme = useContext(ThemeContext);
    const { history, cover_url, title, created_at, isReview
        , onEditVideo, onMaskClick } = props;
    
    const username = props.match.params.username
    function toList() {
        history.push(`/users/${username}/videoes`)
    }
    function toUpload() {
        history.push(`/users/${username}/videoes/upload`)
    }
    return (
        <div className={`${isReview ? 'videoInReviewItem' : 'nItem'} videoItem`}>
            
            <img className="cover" src={cover_url || "http://video.educoder.net/e7d18970482a46d2a6f0e951b504256c/snapshots/491e113950d74f1dab276097dae287dd-00005.jpg"}
            ></img>
            {!isReview && <div className="mask" onClick={() => onMaskClick(props)}>
                <img className="play" src={playIcon}></img>
            </div>}
            <div className="square-main">
                <div className="title overflowHidden1"
                    title={title && title.length > 20 ? title : ''}
                >{title}</div>
                <div className="df buttonRow">
                    {/* 2019-09-01 10:00:22 */}
                    <span className="time">{moment(created_at).format('YYYY-MM-DD HH:mm:ss')}</span>
                    { isReview != true && <div>
                        <Tooltip title="编辑">
                            <i className="icon-fuzhi iconfont" onClick={() => onEditVideo(props)}></i>
                        </Tooltip>
                        <Tooltip title="复制视频地址">
                            <i className="icon-fuzhi iconfont"></i>
                        </Tooltip>
                    </div> }
                </div>
            </div>
        </div>
    )
}

export default VideoInReviewItem