import React from 'react'; import $ from 'jquery/src/ajax'; import { Modal, message, Spin, Upload, Button, Form, } from 'antd'; import {getVideoStatus,splitUrl,getVideoType,getVideoPosition} from '@/tools'; const NewDetail = Form.create()(React.createClass({ getInitialState() { return { visible: false, loading: false, textFileList: [], videoFileList: [], previewVisibleImg:false, pictureUrl: [], videoUrl:[] }; }, loadData(id) { this.setState({ loading: true }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + '/api/admin/video/getVideoById' , data: { id: id }, success: function (data) { let thisData = data.data; if (!thisData) { if (data.error && data.error.length) { message.warning(data.error[0].message); }; thisData = {}; }; let videoUrl =thisData.url ? splitUrl(thisData.url, ',', 'http://118.190.205.7:8000' ) : []; videoUrl[0].name=thisData.url.split('/').pop(); videoUrl[0].thumbUrl=globalConfig.avatarHost + '/upload'+thisData.coverUrl; this.setState({ id:thisData.id, data: thisData, videoUrl: videoUrl, pictureUrl: thisData.coverUrl ? splitUrl(thisData.coverUrl, ',', globalConfig.avatarHost + '/upload') : [] }); }.bind(this), }).always(function () { this.setState({ loading: false }); }.bind(this)); }, cancelFun(){ this.props.closeDesc(); }, //撤销发布 revokeFun(){ this.setState({ loading:true }) $.ajax({ method: "POST", dataType: "json", crossDomain: false, url: globalConfig.context + '/api/admin/video/updateVideo', data: { id: this.state.id, status:2, } }).done(function (data) { if (!data.error.length) { message.success('撤销成功!'); this.setState({ loading: false, }); } else { message.warning(data.error[0].message); }; this.props.handOk(); }.bind(this)); }, componentWillMount() { if (this.props.data.id) { this.loadData(this.props.data.id); } else { this.state.data = {}; }; }, componentWillReceiveProps(nextProps) { if (!this.props.visible && nextProps.visible) { this.state.textFileList = []; this.state.videoFileList = []; if (nextProps.data.id) { this.loadData(nextProps.data.id); } else { this.state.data = {}; this.state.pictureUrl = []; }; this.props.form.resetFields(); }; }, render() { const theData = this.state.data || {}; const FormItem = Form.Item const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 12 }, }; return ( <div className='login'> <Form layout="horizontal" id="demand-form"> <Spin spinning={this.state.loading}> <div className="clearfix"> <FormItem className="half-item" {...formItemLayout} label="视频名称"> <span>{theData.name}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="视频类型"> <span>{getVideoType(theData.type)}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="视频文件"> <div className="clearfix"> <Upload className="demandDetailShow-upload" listType="picture-card" fileList={this.state.videoUrl} onPreview={(file) => { this.setState({ previewImage: file.url || file.thumbUrl, previewVisible: true, }); }} > </Upload> <Modal maskClosable={false} footer={null} visible={this.state.previewVisible} onCancel={() => { this.setState({ previewVisible: false }); let video = document.getElementsByTagName('video')[0]; video.pause();}} > <video alt="" style={{ width: '100%' }} src={this.state.previewImage || ''} controls></video> </Modal> </div> </FormItem> <FormItem className="half-item" {...formItemLayout} label="视频封面"> <div className="clearfix"> <Upload className="demandDetailShow-upload" listType="picture-card" fileList={this.state.pictureUrl} onPreview={(file) => { this.setState({ previewImage: file.url || file.thumbUrl, previewVisibleImg: true, }); }} > </Upload> <Modal maskClosable={false} footer={null} visible={this.state.previewVisibleImg} onCancel={() => { this.setState({ previewVisibleImg: false }) }}> <img alt="" style={{ width: '100%' }} src={this.state.previewImage || ''} /> </Modal> </div> </FormItem> </div> <div className="clearfix breakWord"> <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 18 }} label="视频简介"> <span>{theData.summary}</span> </FormItem> </div> <div className="clearfix"> <FormItem className="half-item" {...formItemLayout} label="发布位置"> <span>{getVideoPosition(theData.position)}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="发布人"> <span>{theData.owner=='1'?'管理员':theData.owner}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="发布状态"> <span>{getVideoStatus(theData.status)}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="视频状态"> <span>{theData.transcoding=='2'?'已转码':'正在转码'}</span> </FormItem> </div> <div className="clearfix"> {theData.status=='1'&&<FormItem wrapperCol={{ span: 12, offset: 3 }}> <Button type="danger" style={{marginRight:20}} onClick={(e)=>{this.revokeFun()}}> 撤销发布 </Button> <Button className="set-submit" type="ghost" onClick={this.cancelFun}> 取消 </Button> </FormItem>} </div> </Spin> </Form> </div> ) } })); export default NewDetail;