import React,{Component}from 'react';
import {Button, DatePicker, Icon, Input, message, Modal, Popconfirm, Select, Table} from "antd";
import SpinContainer from "../../../SpinContainer";
import $ from "jquery/src/ajax";
import moment from "moment";
import Add from './add';
import AddShare from './AddShare';
import {getPicPath} from "@/tools.js";

const { RangePicker } = DatePicker;

class Product extends Component{
    constructor(props) {
        super(props);
        this.state={
            pageNo: 1,
            searchUserName: '',
            time: [],
            loading: false,
            imgeditvisible: false,
            maximg: '',
            columns:[
                {
                    title: '序号',
                    dataIndex: 'key',
                    key: 'key'
                },
                {
                    title: '产品分类',
                    dataIndex: 'typeName',
                    key: 'typeName'
                },
                {
                    title: '产品ID',
                    dataIndex: 'id',
                    key: 'id'
                },
                {
                    title: '产品缩略图',
                    dataIndex: 'thumbnailUrl',
                    key: 'thumbnailUrl',
                    render: url => {
                        let path = getPicPath(globalConfig.avatarUploadHost, url);
                        return (
                            <div style={{
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                            }}>
                                <img src={path} style={{ width: "100px", height: 50 }} />
                                <Button
                                    className="buttonimg"
                                    style={{ marginLeft: 10 }}
                                    onClick={e => {
                                        e.stopPropagation();
                                        this.setState({
                                            imgeditvisible: true,
                                            maximg: path,
                                        })
                                    }}
                                >
                                    查看大图
                                </Button>
                            </div>
                        );
                    }
                },
                {
                    title: '产品名称',
                    dataIndex: 'name',
                    key: 'name'
                },
                {
                    title: '金额',
                    dataIndex: 'amount',
                    key: 'amount'
                },
                {
                    title: '排序',
                    dataIndex: 'sort',
                    key: 'sort'
                },
                {
                    title: '上传时间',
                    dataIndex: 'createTimes',
                    key: 'createTimes'
                },
                {
                    title: '是否发布',
                    dataIndex: 'releaseStatus',
                    key: 'releaseStatus',
                    render: (text, record) => {
                        return (
                            text === 0 ? '否' : text === 1 ? '是' : '未知'
                        )
                    }
                },
                {
                    title: '是否首页',
                    dataIndex: 'host',
                    key: 'host',
                    render: (text, record) => {
                        return (
                            text === 0 ? '否' : text === 1 ? '是' : '未知'
                        )
                    }
                },
                {
                    title: "操作",
                    dataIndex: "aab",
                    key: "aab",
                    render: (text, record) => {
                        return (
                            <div>
                                <Button
                                    type="primary"
                                    onClick={(e) => {
                                        e.stopPropagation();
                                        this.edit(record);
                                    }}
                                >
                                    编辑
                                </Button>
                                <Popconfirm
                                    placement="top"
                                    title={"是否确认删除？"}
                                    onConfirm={e => {
                                        e.stopPropagation();
                                        this.delete(record.id);
                                    }}
                                    okText="确认"
                                    cancelText="取消"
                                >
                                    <Button
                                        type="primary"
                                        style={{ marginLeft: 10,background:'#f00' }}
                                        onClick={(e)=>{
                                            e.stopPropagation();
                                        }}
                                    >
                                        删除
                                    </Button>
                                </Popconfirm>
                                <Popconfirm
                                    placement="top"
                                    title={record.host === 0 ? "是否确认推荐首页？" : "是否确认从首页撤下？"}
                                    onConfirm={e => {
                                        this.homeOperation(record.id,record.host === 0 ? 1 : 0);
                                    }}
                                    okText="确认"
                                    cancelText="取消"
                                >
                                    <Button
                                        type="primary"
                                        style={{ marginLeft: 10 }}
                                        onClick={(e)=>{
                                            e.stopPropagation();
                                        }}
                                    >
                                        {record.host === 0 ? "推荐首页" : '首页撤下'}
                                    </Button>
                                </Popconfirm>
                                <Button
                                    type="primary"
                                    style={{ marginLeft: 10,background:'#2aaf65' }}
                                    onClick={(e) => {
                                        e.stopPropagation();
                                        this.shareEdit(record);
                                    }}
                                >
                                    编辑分享
                                </Button>
                            </div>
                        );
                    }
                }
            ],
            dataSource:[],
            pagination: {
                defaultCurrent: 1,
                defaultPageSize: 10,
                showQuickJumper: true,
                pageSize: 10,
                onChange: function (page) {
                    this.loadData(page);
                }.bind(this),
                showTotal: function (total) {
                    return '共' + total + '条数据';
                }
            },
            visible:false,
            shareVisible:false,

        }
        this.search = this.search.bind(this);
        this.reset = this.reset.bind(this);
        this.tableRowClick = this.tableRowClick.bind(this);
        this.loadData = this.loadData.bind(this);
        this.addProduct = this.addProduct.bind(this);
        this.onCancel = this.onCancel.bind(this);
        this.edit = this.edit.bind(this);
        this.shareEdit = this.shareEdit.bind(this);
        this.delete = this.delete.bind(this);
        this.homeOperation = this.homeOperation.bind(this);
    }

    search(){this.loadData();}

    reset(){
        this.setState({
            searchUserName: '',
            time: [],
        },()=>{
            this.loadData();
        })
    }

    tableRowClick(value){
        this.setState({
            visible:true,
            id:value.id,
            infor:value,
        })
    }

    edit(value){
        this.setState({
            visible:true,
            id:value.id,
            infor:value,
        })
    }

    shareEdit(value){
        this.setState({
            shareVisible:true,
            id:value.id,
            infor:value,
        })
    }

    loadData(pageNo = 1) {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/project/list",
            data: {
                pageNo: pageNo || 1,
                pageSize: 10,
                name: this.state.searchUserName || undefined,
                startTime: this.state.time[0] || undefined,
                endTime: this.state.time[1] || undefined,
            }
        }).done((data1) => {
            if (data1.error.length !== 0) {
                message.warning(data1.error[0].message);
            } else {
                for (let i = 0; i < data1.data.list.length; i++) {
                    data1.data.list[i].key = (data1.data.pageNo-1)*10+(i+1);
                }
                this.state.pagination.current = data1.data.pageNo;
                this.state.pagination.total = data1.data.totalCount;
            }
            this.setState({
                dataSource: data1.data.list,
                pagination: this.state.pagination,
                pageNo: data1.data.pageNo
            });
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this))
    }

    addProduct(){
        this.setState({visible:false,shareVisible:false});
        this.loadData(this.state.pageNo)
    }

    onCancel(){
        this.setState({
            visible:false,
            shareVisible:false,
            id:'',
            infor:'',
        })
    }

    homeOperation(id,host){
        this.setState({
            loading: true
        });
        $.ajax({
            method: "post",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/project/update",
            data: {
                id,
                host
            },
            success: function(data) {
                if (data.error && data.error.length) {
                    message.warning(data.error[0].message);
                } else {
                    message.warning('操作成功');
                    this.loadData(this.state.pageNo);
                }
            }.bind(this)
        }).always(
            function() {
                this.setState({
                    loading: false
                });
            }.bind(this)
        );
    }

    delete(id){
        this.setState({
            loading: true
        });
        $.ajax({
            method: "post",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/project/delete",
            data: {
                id
            },
            success: function(data) {
                if (data.error && data.error.length) {
                    message.warning(data.error[0].message);
                } else {
                    message.warning('删除成功');
                    this.loadData(this.state.pageNo);
                }
            }.bind(this)
        }).always(
            function() {
                this.setState({
                    loading: false
                });
            }.bind(this)
        );
    }

    componentDidMount() {
        this.loadData();
    }

    imghandleCancel() {
        this.setState({
            imgeditvisible: false
        });
    }

    render() {
        return (
            <div className="user-content" >
                <div className="content-title">
                    <span>产品管理</span>
                </div>
                <div className="user-search">
                    <Input style={{bottom:'5px'}} placeholder="产品关键字" value={this.state.searchUserName} onChange={(e) => { this.setState({ searchUserName: e.target.value }); }} />
                    <span style={{ fontSize: 14 }} >提交日期：</span>
                    <RangePicker
                        value={[
                            this.state.time[0] ? moment(this.state.time[0]) : null,
                            this.state.time[1] ? moment(this.state.time[1]) : null
                        ]}
                        onChange={(data, dataString) => {
                            this.setState({ time: dataString });
                        }}
                    />
                    <Button type="primary" onClick={this.search} style={{marginLeft:'10px'}}>搜索</Button>
                    <Button onClick={this.reset}>重置</Button>
                    <Button
                        type="primary"
                        onClick={()=>{this.setState({visible:true})}}
                        style={{ marginLeft: "100px" }}
                    >
                        新增产品
                    </Button>
                </div>
                <div className="patent-table">
                    <SpinContainer spinning={this.state.loading}>
                        <Table columns={this.state.columns}
                               dataSource={this.state.dataSource}
                               pagination={this.state.pagination}
                               onRowClick={this.tableRowClick} />
                    </SpinContainer>
                </div>
                {this.state.visible ? <Add
                    id={this.state.id}
                    infor={this.state.infor}
                    visible={this.state.visible}
                    onOk={this.addProduct}
                    onCancel={this.onCancel}
                /> : null}
                {this.state.shareVisible ? <AddShare
                    shareType='0'
                    id={this.state.id}
                    infor={this.state.infor}
                    visible={this.state.shareVisible}
                    onOk={this.addProduct}
                    onCancel={this.onCancel}
                /> : null}
                <Modal
                    visible={this.state.imgeditvisible}
                    onCancel={()=>{this.imghandleCancel()}}
                    onOk={()=>{this.imghandleCancel()}}
                    footer={false}
                >
                    <img style={{ width: "100%" }} src={this.state.maximg} />
                </Modal>
            </div >
        )
    }
}

export default Product;
