import React from 'react';
import { Icon, Button, Spin, message, Table, Input, Modal, DatePicker, Upload, Select, Pagination } from 'antd';
import { beforeUpload, getBase64 } from '../../../tools';
import moment from 'moment';
import ajax from 'jquery/src/ajax/xhr.js';
import $ from 'jquery/src/ajax';
const Avatar = React.createClass({
    getInitialState() {
        return {
            imageUrl: ''
        }
    },
    handleChange(info) {
        if (info.file.status === 'done') {
            // Get this url from response in real world.
            getBase64(info.file.originFileObj, imageUrl => this.setState({ imageUrl }));
            this.props.urlData(info.file.response.data);
        }
    },
    componentWillReceiveProps(nextProps) {
        if (this.props.visible && !nextProps.visible) {
            this.state.imageUrl = null;
        };
    },
    render() {
        const imageUrl = this.state.imageUrl;
        return (
            
                {
                    (imageUrl || this.props.imageUrl) ?
                         :
                        
                }
            
        );
    }
});
const Lecture = React.createClass({
    loadData(pageNo) {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + '/api/admin/banners/list',
            data: {
                pageNo: pageNo || 1,
                pageSize: this.state.pagination.pageSize,
                key: this.state.searchKey
            },
            success: function (data) {
                let theArr = [];
                if (!data.data || !data.data.list) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    };
                } else {
                    for (let i = 0; i < data.data.list.length; i++) {
                        let thisdata = data.data.list[i];
                        theArr.push({
                            key: i,
                            id: thisdata.id, //主键
                            sign: thisdata.sign,  // 位置标示
                            text: thisdata.text,  //广告图描述
                            imgurl: thisdata.imgurl, //广告图url
                            url: thisdata.url, //跳转链接
                            width: thisdata.width, //宽度
                            height: thisdata.height, //高度
                            startDate: thisdata.startDate, //广告图开始时间
                            endDate: thisdata.endDate //广告图结束时间
                        });
                    };
                    this.state.pagination.pageNo = pageNo || 1;
                    this.state.pagination.total = data.data.total || 0;
                };
                this.setState({
                    tableData: theArr,
                    pagination: this.state.pagination
                });
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    loadKeys() {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            url: globalConfig.context + '/api/admin/banners/keys',
            success: function (data) {
                let theArr = [];
                if (!data.data) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    };
                } else {
                    for (let item in data.data) {
                        let thisdata = data.data[item];
                        theArr.push(
                            {thisdata}
                        );
                    };
                };
                this.setState({
                    keysOption: theArr,
                    keysObj: data.data
                });
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    getInitialState() {
        return {
            loading: false,
            visible: false,
            selectedRowKeys: [],
            selectedRows: [],
            keysObj: {},
            RowData: {},
            pagination: {
                pageNo: 1,
                pageSize: 10,
                total: 0
            },
            columns: [
                {
                    title: '位置',
                    dataIndex: 'sign',
                    key: 'sign',
                    render: text => { return this.state.keysObj[text] }
                }, {
                    title: '广告图描述',
                    dataIndex: 'text',
                    key: 'text',
                }, {
                    title: '广告图url',
                    dataIndex: 'imgurl',
                    key: 'imgurl',
                }, {
                    title: '跳转链接',
                    dataIndex: 'url',
                    key: 'url',
                }, {
                    title: '宽度',
                    dataIndex: 'width',
                    key: 'width',
                }, {
                    title: '高度',
                    dataIndex: 'height',
                    key: 'height',
                }, {
                    title: '开始时间',
                    dataIndex: 'startDate',
                    key: 'startDate',
                }, {
                    title: '结束时间',
                    dataIndex: 'endDate',
                    key: 'endDate',
                }
            ],
            tableData: []
        };
    },
    tableRowClick(record, index) {
        this.state.RowData = record;
        this.setState({
            visible: true
        });
    },
    componentWillMount() {
        this.loadKeys();
        this.loadData();
    },
    clearCache() {
        if (!this.state.searchKey) {
            message.warning('必须选择一个位置!');
            return;
        };
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + '/api/admin/banners/clearCache',
            data: {
                key: this.state.searchKey  // 位置标示,必填
            },
            success: function (data) {
                if (data.error && data.error.length) {
                    message.warning(data.error[0].message);
                } else {
                    message.success('更新缓存成功!');
                };
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    submit() {
        if (!this.state.RowData.sign) {
            message.warning('必须选择一个位置!');
            return;
        };
        if (!this.state.RowData.imgurl) {
            message.warning('必须上传一张广告图!');
            return;
        };
        if (!this.state.RowData.url) {
            message.warning('必须填写跳转链接!');
            return;
        };
        this.setState({
            loading: true
        });
        $.ajax({
            method: "post",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + '/api/admin/banners/save',
            data: {
                id: this.state.RowData.id || null, //主键,如果不填主键则为新增记录,填主键则为更新
                sign: this.state.RowData.sign,  // 位置标示,必填
                text: this.state.RowData.text,  //广告图描述,长度 255
                imgurl: this.state.RowData.imgurl, //广告图url,必填,长度 255
                url: this.state.RowData.url, //跳转链接,必填,长度255
                width: this.state.RowData.width, //宽度,非必填,最大99999
                height: this.state.RowData.height, //高度,非必填,最大99999
                startDate: this.state.RowData.startDate, //广告图开始时间,非必填
                endDate: this.state.RowData.endDate //广告图结束时间,非必填
            },
            success: function (data) {
                if (data.error && data.error.length) {
                    message.warning(data.error[0].message);
                } else {
                    message.success('保存成功!');
                    this.setState({ visible: false });
                    this.loadData();
                };
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    delectRow() {
        if (this.state.selectedRows.length > 1) {
            return;
        };
        this.setState({
            selectedRowKeys: [],
            loading: this.state.selectedRows.length > 0
        });
        $.ajax({
            method: "POST",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/banners/delete",
            data: {
                id: this.state.selectedRows[0].id
            }
        }).done(function (data) {
            if (data.error && data.error.length) {
                message.warning(data.error[0].message);
            } else {
                message.success('删除成功!');
            };
            this.setState({
                loading: false,
            });
            this.loadData();
        }.bind(this));
    },
    reset() {
        this.state.searchKey = undefined;
        this.loadData();
    },
    render() {
        const rowSelection = {
            selectedRowKeys: this.state.selectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
                this.setState({
                    selectedRows: selectedRows.slice(-1),
                    selectedRowKeys: selectedRowKeys.slice(-1)
                });
            }
        };
        const hasSelected = this.state.selectedRowKeys.length > 0;
        const { pageNo, pageSize, total } = this.state.pagination;
        return (
 :
                        
                }
            
        );
    }
});
const Lecture = React.createClass({
    loadData(pageNo) {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + '/api/admin/banners/list',
            data: {
                pageNo: pageNo || 1,
                pageSize: this.state.pagination.pageSize,
                key: this.state.searchKey
            },
            success: function (data) {
                let theArr = [];
                if (!data.data || !data.data.list) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    };
                } else {
                    for (let i = 0; i < data.data.list.length; i++) {
                        let thisdata = data.data.list[i];
                        theArr.push({
                            key: i,
                            id: thisdata.id, //主键
                            sign: thisdata.sign,  // 位置标示
                            text: thisdata.text,  //广告图描述
                            imgurl: thisdata.imgurl, //广告图url
                            url: thisdata.url, //跳转链接
                            width: thisdata.width, //宽度
                            height: thisdata.height, //高度
                            startDate: thisdata.startDate, //广告图开始时间
                            endDate: thisdata.endDate //广告图结束时间
                        });
                    };
                    this.state.pagination.pageNo = pageNo || 1;
                    this.state.pagination.total = data.data.total || 0;
                };
                this.setState({
                    tableData: theArr,
                    pagination: this.state.pagination
                });
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    loadKeys() {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            url: globalConfig.context + '/api/admin/banners/keys',
            success: function (data) {
                let theArr = [];
                if (!data.data) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    };
                } else {
                    for (let item in data.data) {
                        let thisdata = data.data[item];
                        theArr.push(
                            {thisdata}
                        );
                    };
                };
                this.setState({
                    keysOption: theArr,
                    keysObj: data.data
                });
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    getInitialState() {
        return {
            loading: false,
            visible: false,
            selectedRowKeys: [],
            selectedRows: [],
            keysObj: {},
            RowData: {},
            pagination: {
                pageNo: 1,
                pageSize: 10,
                total: 0
            },
            columns: [
                {
                    title: '位置',
                    dataIndex: 'sign',
                    key: 'sign',
                    render: text => { return this.state.keysObj[text] }
                }, {
                    title: '广告图描述',
                    dataIndex: 'text',
                    key: 'text',
                }, {
                    title: '广告图url',
                    dataIndex: 'imgurl',
                    key: 'imgurl',
                }, {
                    title: '跳转链接',
                    dataIndex: 'url',
                    key: 'url',
                }, {
                    title: '宽度',
                    dataIndex: 'width',
                    key: 'width',
                }, {
                    title: '高度',
                    dataIndex: 'height',
                    key: 'height',
                }, {
                    title: '开始时间',
                    dataIndex: 'startDate',
                    key: 'startDate',
                }, {
                    title: '结束时间',
                    dataIndex: 'endDate',
                    key: 'endDate',
                }
            ],
            tableData: []
        };
    },
    tableRowClick(record, index) {
        this.state.RowData = record;
        this.setState({
            visible: true
        });
    },
    componentWillMount() {
        this.loadKeys();
        this.loadData();
    },
    clearCache() {
        if (!this.state.searchKey) {
            message.warning('必须选择一个位置!');
            return;
        };
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + '/api/admin/banners/clearCache',
            data: {
                key: this.state.searchKey  // 位置标示,必填
            },
            success: function (data) {
                if (data.error && data.error.length) {
                    message.warning(data.error[0].message);
                } else {
                    message.success('更新缓存成功!');
                };
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    submit() {
        if (!this.state.RowData.sign) {
            message.warning('必须选择一个位置!');
            return;
        };
        if (!this.state.RowData.imgurl) {
            message.warning('必须上传一张广告图!');
            return;
        };
        if (!this.state.RowData.url) {
            message.warning('必须填写跳转链接!');
            return;
        };
        this.setState({
            loading: true
        });
        $.ajax({
            method: "post",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + '/api/admin/banners/save',
            data: {
                id: this.state.RowData.id || null, //主键,如果不填主键则为新增记录,填主键则为更新
                sign: this.state.RowData.sign,  // 位置标示,必填
                text: this.state.RowData.text,  //广告图描述,长度 255
                imgurl: this.state.RowData.imgurl, //广告图url,必填,长度 255
                url: this.state.RowData.url, //跳转链接,必填,长度255
                width: this.state.RowData.width, //宽度,非必填,最大99999
                height: this.state.RowData.height, //高度,非必填,最大99999
                startDate: this.state.RowData.startDate, //广告图开始时间,非必填
                endDate: this.state.RowData.endDate //广告图结束时间,非必填
            },
            success: function (data) {
                if (data.error && data.error.length) {
                    message.warning(data.error[0].message);
                } else {
                    message.success('保存成功!');
                    this.setState({ visible: false });
                    this.loadData();
                };
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    delectRow() {
        if (this.state.selectedRows.length > 1) {
            return;
        };
        this.setState({
            selectedRowKeys: [],
            loading: this.state.selectedRows.length > 0
        });
        $.ajax({
            method: "POST",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/banners/delete",
            data: {
                id: this.state.selectedRows[0].id
            }
        }).done(function (data) {
            if (data.error && data.error.length) {
                message.warning(data.error[0].message);
            } else {
                message.success('删除成功!');
            };
            this.setState({
                loading: false,
            });
            this.loadData();
        }.bind(this));
    },
    reset() {
        this.state.searchKey = undefined;
        this.loadData();
    },
    render() {
        const rowSelection = {
            selectedRowKeys: this.state.selectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
                this.setState({
                    selectedRows: selectedRows.slice(-1),
                    selectedRowKeys: selectedRowKeys.slice(-1)
                });
            }
        };
        const hasSelected = this.state.selectedRowKeys.length > 0;
        const { pageNo, pageSize, total } = this.state.pagination;
        return (
            
                广告图管理
                
                    广告图列表
                    
                        
                        
                        
                        
                        
                        
                    
                    
                        
                        
                             { this.loadData(e); }}
                                total={total}
                                showTotal={() => { return '共' + total + '条数据' }}
                                current={pageNo}
                                pageSize={pageSize} />
                         
                    
                 
                 { this.state.RowData = {}; }}
                    onCancel={() => { this.setState({ visible: false }) }} >
                    
                        
                            广告图位置
                            {this.state.RowData.id ? 
                                {this.state.keysObj[this.state.RowData.sign]}
                            
 : 
                                    
                                
}
                        
 
                        
                        
                        
                        
                        
                            广告图播放时间
                            
                                 {
                                        this.state.RowData.startDate = str;
                                        this.setState({ RowData: this.state.RowData });
                                    }} />
                                到
                                 {
                                        this.state.RowData.endDate = str;
                                        this.setState({ RowData: this.state.RowData });
                                    }} />
                            
                         
                        
                            上传图片
                            
                                 { this.state.RowData.imgurl = url }} />
                             
                         
                        
                            
                            
                        
                    
                
             
        );
    }
});
export default Lecture;