import React, {Component} from 'react';
import {Redirect} from 'react-router';
import {List, Typography, Tag, Modal, Radio, Checkbox, Table, Pagination,Upload,notification} from 'antd';
import {  NoneData } from 'educoder'

import TPMRightSection from './component/TPMRightSection';
import TPMNav from './component/TPMNav';
import axios from 'axios';
import './tpmmodel/tpmmodel.css'
import {getUploadActionUrl,appendFileSizeToUploadFileAll} from 'educoder';
import moment from 'moment';

const confirm = Modal.confirm;

class TPMDataset extends Component {
	constructor(props) {
		super(props)
		this.state = {
			value: undefined,
			columns: [
				{
					title: '文件',
					dataIndex: 'title',
					key: 'title',
					align: 'left',
					className: " font-14 wenjiantit",
					width: '220px',
					render: (text, record) => (
						<div>
							{record.title}
						</div>
					)
				},
				{
					title: '最后修改时间',
					dataIndex: 'timedata',
					key: 'timedata',
					align: 'center',
					className: "edu-txt-center font-14 zuihoushijian",
					width: '150px',
					render: (text, record) => (
						<div>
							{record.timedata}
						</div>
					)
				},
				{
					title: '最后修改人',
					dataIndex: 'author',
					key: 'author',
					align: 'center',
					className: "edu-txt-center font-14 ",
					render: (text, record) => (
						<div>
							{record.author}
						</div>
					)
				},
				{
					title: '文件大小',
					dataIndex: 'filesize',
					key: 'filesize',
					align: 'center',
					className: "edu-txt-center font-14 ",
					render: (text, record) => (
						<div>
							{record.filesize}
						</div>
					)
				},
			],
			page: 1,
			limit: 10,
			selectedRowKeys: [],
			mylistansum:30,
			collaboratorList:[],
			fileList:[],
			fileListimgs:[],
			file:null,
			datalist:[],
			data_sets_count:0,
			selectedRowKeysdata:[],
			loadingstate:false,
			checked: false,
		}
	}

	componentDidMount() {
		this.setState({
			loadingstate:true,
		})
		this.getdatas()

	}

	mysonChange = (e) => {
		// console.log(`全选checked = ${e.target.checked}`);
		if (e.target.checked === true) {
			let mydata=[];
			let datas=[];
			for(let i=0;i<this.state.collaboratorList.data_sets.length;i++){
				mydata.push(this.state.collaboratorList.data_sets[i].id);
				datas.push(i);

			}
			this.setState({
				selectedRowKeysdata:mydata,
				selectedRowKeys: datas,
				checked:true,
			})
		  // console.log(mydata);
			// console.log(datas);
		} else {
			this.setState({
				selectedRowKeysdata:[],
				selectedRowKeys: [],
				checked:false,


			})
		}
	}


	getdatas = () => {
		let id=this.props.match.params.shixunId;

		let collaborators=`/shixuns/${id}/jupyter_data_sets.json`;
		axios.get(collaborators,{params:{
				page:1,
				limit:10,
			}}).then((response)=> {
			if(response.status===200){
				if (response.data.status === 403||response.data.status === 401||response.data.status === 500) {

				}else{
					let datalists=[];
          for(let i=0;i<response.data.data_sets.length;i++){
						const datas=response.data.data_sets;
						var timedata = moment(datas[i].created_on).format('YYYY-MM-DD HH:mm');
						datalists.push({
							timedata:timedata,
							author:datas[i].author,
							filesize:datas[i].filesize,
							id:datas[i].id,
							title:datas[i].title,
						})
					}
					this.setState({
						collaboratorList: response.data,
						data_sets_count:response.data.data_sets_count,
						datalist:datalists,
						selectedRowKeysdata:[],
						selectedRowKeys: [],
						checked:false,
					});

				}

			}
			setTimeout(() => {
				this.setState({
					loadingstate:false,
				})
			}, 500)

		}).catch((error)=>{
			setTimeout(() => {
				this.setState({
					loadingstate:false,
				})
			}, 500)
			console.log(error)
		});

	}

	getdatastwo = (page,limit) => {
		let id=this.props.match.params.shixunId;

		let collaborators=`/shixuns/${id}/jupyter_data_sets.json`;
		axios.get(collaborators,{params:{
				page:page,
				limit:limit,
			}}).then((response)=> {
			if(response.status===200){
				if (response.data.status === 403||response.data.status === 401||response.data.status === 500) {

				}else{
          let datalists=[];
					for(let i=0;i<response.data.data_sets.length;i++){
						const datas=response.data.data_sets;
						var timedata = moment(datas[i].created_on).format('YYYY-MM-DD HH:mm');
						datalists.push({
							timedata:timedata,
							author:datas[i].author,
							filesize:datas[i].filesize,
							id:datas[i].id,
							title:datas[i].title,
						})
					}
					this.setState({
						collaboratorList: response.data,
						data_sets_count:response.data.data_sets_count,
						datalist:datalists,
						selectedRowKeysdata:[],
						selectedRowKeys: [],
						checked:false,
					});
				}

			}
			setTimeout(() => {
				this.setState({
					loadingstate:false,
				})
			}, 500)
		}).catch((error)=>{
			setTimeout(() => {
				this.setState({
					loadingstate:false,
				})
			}, 500)
			console.log(error)
		});

	}


	getdatasthree = (page,limit) => {
		let id=this.props.match.params.shixunId;

		let collaborators=`/shixuns/${id}/jupyter_data_sets.json`;
		axios.get(collaborators,{params:{
				page:page,
				limit:limit,
			}}).then((response)=> {
			if(response.status===200){
				if (response.data.status === 403||response.data.status === 401||response.data.status === 500) {

				}else{


				}

			}

		}).catch((error)=>{

		});

	}

	paginationonChanges = (pageNumber) => {
		// //console.log('Page: ');
		this.setState({
			page: pageNumber,
			loadingstate:true,
		})

		this.getdatastwo(pageNumber,10);
	}

	onSelectChange = (selectedRowKeys, selectedRows) => {
		console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
		this.setState(
			{
				selectedRowKeys
			}
		);
    let mydata=[];
		for(let i=0;i<selectedRows.length;i++){
			mydata.push(selectedRows[i].id);
		}

		this.setState({
			selectedRowKeysdata:mydata,
		})
		console.log(mydata);



	}
	rowClassName = (record, index) => {
		let className = 'light-row';
		if (index % 2 === 1) className = 'dark-row';
		return className;
	}
	handleChange = (info) => {
		if(info.file.status == "done" || info.file.status == "uploading" || info.file.status === 'removed'){
			let fileList = info.fileList;
			this.setState({
				fileList: appendFileSizeToUploadFileAll(fileList),
			});
			if(info.file.status === 'done'){
				//done 成功就会调用这个方法
				this.getdatas();
			}
		}
	}


	onAttachmentRemove = (file) => {
		// debugger
		if(!file.percent || file.percent == 100){
			confirm({
				title: '确定要删除这个附件吗?',
				okText: '确定',
				cancelText: '取消',
				// content: 'Some descriptions',
				onOk: () => {
					console.log("665")
					this.deleteAttachment(file)
				},
				onCancel() {
					console.log('Cancel');
				},
			});
			return false;
		}

	}

  deleteRemovedata(){

    if(this.state.selectedRowKeysdata===undefined || this.state.selectedRowKeysdata===null ||this.state.selectedRowKeysdata.length===0){

			this.props.showNotification(`请选择要删除的文件`);

			return
		}

		confirm({
			title: '确定要删除文件吗?',
			okText: '确定',
			cancelText: '取消',
			// content: 'Some descriptions',
			onOk: () => {
				const url = `/attachments/destroy_files.json`;
				axios.delete(url,
					{ params: {
							id:this.state.selectedRowKeysdata,
						}}
					)
					.then((response) => {
						if (response.data) {
							const { status } = response.data;
							if (status == 0) {
								this.props.showNotification(`删除成功`);

								this.getdatas()
							}
						}
					})
					.catch(function (error) {
						console.log(error);
					});
			},
			onCancel() {
				console.log('Cancel');
			},
		});

	}
	deleteAttachment = (file) => {
		// console.log(file);
		let id=file.response ==undefined ? file.id : file.response.id
		const url = `/attachements/destroy_files.json`
		axios.delete(url, {
			id:[id],
			})
			.then((response) => {
				if (response.data) {
					const { status } = response.data;
					if (status == 0) {
						// console.log('--- success')

						this.setState((state) => {

							const index = state.fileList.indexOf(file);
							const newFileList = state.fileList.slice();
							newFileList.splice(index, 1);
							return {
								fileList: newFileList,
								deleteisnot:true
							};
						});
					}
				}
			})
			.catch(function (error) {
				console.log(error);
			});
	}



	render() {
		const {tpmLoading, shixun, user, match} = this.props;
		const {columns, page, limit, selectedRowKeys,mylistansum,fileList,datalist,data_sets_count,loadingstate} = this.state;
		const rowSelection = {
			selectedRowKeys,
			onChange: this.onSelectChange,
		};
		// getCheckboxProps: record => ({
		// 	disabled: record.name === 'Disabled User', // Column configuration not to be checked
		// 	name: record.name,
		// }),
		let id=this.props.match.params.shixunId;
		const uploadProps = {
			width: 600,
			fileList,
			data:{
			attachtype: 2,
				container_id:this.props.match.params.shixunId,
				container_type: "Shixun",
		},
			multiple: false,
			//multiple 是否支持多选 查重的时候不能多选 不然弹许多框出来
			// https://github.com/ant-design/ant-design/issues/15505
			// showUploadList={false}，然后外部拿到 fileList 数组自行渲染列表。
			// showUploadList: false,
			action: `${getUploadActionUrl()}`,
			showUploadList:false,
			onChange: this.handleChange,
			onRemove: this.onAttachmentRemove,
			beforeUpload: (file) => {
				//上传前的操作
				console.log('beforeUpload', file.name);
				const isLt150M = file.size / 1024 / 1024 < 150;
				if (!isLt150M) {
					this.props.showNotification('文件大小必须小于150MB!');
				}
				return isLt150M;
			},
		};
		return (
			<React.Fragment>
				<div className="tpmComment educontent clearfix mt30 mb80">

					<div className="with65 fl edu-back-white commentsDelegateParent">

						<TPMNav
							match={match}
							user={user}
							shixun={shixun}
							{...this.props}
							is_jupyter={this.props.is_jupyter}
						></TPMNav>

						<div className="padding20 edu-back-white mt20 " style={{minHeight: '463px'}}>
							<div className="sortinxdirection">

										<div className="tpmwidth">
											<Checkbox checked={this.state.checked} onChange={this.mysonChange}>全选</Checkbox>
										</div>

								<div className="tpmwidth xaxisreverseorder">
									<style>
										{
											`
											.ant-upload-list{
											 display:none
											}
											`
										}
									</style>
									<div className="deletebuttom intermediatecenter ">	<Upload {...uploadProps}><p className="deletebuttomtest" type="upload">

										上传文件</p>		</Upload></div>
									{
										data_sets_count>0?
											<div
												className={selectedRowKeys.length > 0 ? "deletebutomtextcode  intermediatecenter mr21" : "deletebutom intermediatecenter mr21"} onClick={()=>this.deleteRemovedata()}>
												<p className="deletebutomtext" >删除</p></div>
											:""
									}
								</div>
							</div>
							<div className="mt24">
								<style>{`
              	          .ant-spin-nested-loading > div > .ant-spin .ant-spin-dot {
																			top: 72%;}
						                }
						                .edu-table .ant-table-tbody > tr > td {
														height: 42px;
															}
														.edu-table .ant-table-thead > tr > th{
																 	height: 42px;
														 }
						                			.ysltableowss .ant-table-thead > tr > th{
																 	height: 42px;
														 }
														 	.ysltableowss .ant-table-tbody > tr > td{
																 	height: 42px;
														 }
														 .ysltableowss .ant-table-thead > tr > th, .ant-table-tbody > tr > td {
													 padding: 9px;
															}
															.mysjysltable4 .ant-table-thead > tr > th, .ant-table-tbody > tr > td {
													 padding: 0px;
															}
															.ant-table-thead .ant-table-selection-column  span{
															visibility:hidden;
															}
															.ant-table-thead > tr > th {
															    background:#FFFFFF !important;
															}
															.ant-table table {
																width: 100%;
																text-align: left;
																border-radius: 4px 4px 0 0;
																border-collapse: separate;
																border-spacing: 0;
																  border-left: 1px solid #eeeeee;
																   border-top: 1px solid #eeeeee;
																    border-right: 1px solid #eeeeee;
														}
																`}</style>
								{data_sets_count===0?
									<div className="edu-table edu-back-white  ysltableowss">
										<style>
											{
												`
											.ant-table-tbody{
											display:none;
											}
											.ant-table-placeholder{
												display:none;
											}
						         	.ant-table table {
											 border-bottom: 1px solid #eeeeee  !important;
											}
											
											`
											}
										</style>
										<Table
									columns={columns}
									pagination={false}
									className="mysjysltable4"
									rowSelection={rowSelection}
									rowClassName={this.rowClassName}
									/>
									</div>
									:
									<div className="edu-table edu-back-white  ysltableowss">
										<Table
											dataSource={datalist}
											columns={columns}
											pagination={false}
											className="mysjysltable4"
											rowSelection={rowSelection}
											rowClassName={this.rowClassName}
											loading={loadingstate}

										/>
									</div>
								}

								{
									data_sets_count>=11?
									<div className="edu-txt-center mt40 mb20">
									<Pagination showQuickJumper current={page}
									onChange={this.paginationonChanges} pageSize={limit}
									total={data_sets_count}
									></Pagination>
									</div>
										:""
								}

								{	data_sets_count===0?
									<NoneData style={{width: '100%'}}></NoneData>:""
								}

							</div>


						</div>
					</div>
					<div className="with35 fr pl20">
						<TPMRightSection
							{...this.props}
						/>
					</div>
				</div>
			</React.Fragment>
		);
	}
}

export default TPMDataset;