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 AddShare from '../product/addShare';
import {getPicPath} from "@/tools.js";

const { RangePicker } = DatePicker;

class WeappShare extends Component{
    constructor(props) {
        super(props);
        this.state={
            pageNo: 1,
            searchUserName: '',
            projectType: '',
            loading: false,
            imgeditvisible: false,
            maximg: '',
            columns:[
                {
                    title: '序号',
                    dataIndex: 'key',
                    key: 'key'
                },
                {
                    title: '分享标题',
                    dataIndex: 'title',
                    key: 'title',
                },
                {
                    title: '分享位置',
                    dataIndex: 'type',
                    key: 'type',
                    render: type => (
                        type === 0 ? '项目详情' :
                            type === 1 ? '首页' : ''
                    )
                },
                {
                    title: '朋友分享缩略图',
                    dataIndex: 'shareUrl',
                    key: 'shareUrl',
                    render: url => {
                        let path = getPicPath(globalConfig.avatarUploadHost, url);
                        return (
                            <div style={{
                                display: 'flex',
                                alignItems: '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: 'momentsUrl',
                    key: 'momentsUrl',
                    render: url => {
                        let path = getPicPath(globalConfig.avatarUploadHost, url);
                        return (
                            <div style={{
                                display: 'flex',
                                alignItems: '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: "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>
                            </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,

        }
        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.delete = this.delete.bind(this);
        this.homeOperation = this.homeOperation.bind(this);
    }

    search(){this.loadData();}

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

    tableRowClick(value){
        console.log(value)
        this.setState({
            visible:true,
            id:value.pid,
            shareType:value.type+'',
            infor:value,
            shareId:value.id,
        })
    }

    edit(value){
        this.setState({
            visible:true,
            id:value.pid,
            infor:value,
            shareType:value.type+'',
            shareId:value.id,
        })
    }

    loadData(pageNo = 1) {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/weChatShare/pageList",
            data: {
                pageNo: pageNo || 1,
                pageSize: 10,
                name: this.state.searchUserName || undefined,
                type: this.state.projectType,
            }
        }).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,shareType:'',shareId:''});
        this.loadData(this.state.pageNo)
    }

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

    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/weChatShare/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
                        placeholder="请输入分享标题"
                        value={this.state.searchUserName}
                        onChange={(e) => { this.setState({ searchUserName: e.target.value }); }}
                        style={{
                            marginRight: "10px",
                            marginBottom: "10px"
                        }}
                    />
                    <Select
                        style={{width:130}}
                        value={this.state.projectType || undefined}
                        placeholder="请选择分享位置"
                        onChange={e => {
                            this.setState({
                                projectType: e
                            });
                        }}
                    >
                        <Option value={0}>项目详情</Option>
                        <Option value={1}>首页</Option>
                    </Select>
                    <Button type="primary" onClick={this.search} style={{marginLeft:'10px'}}>搜索</Button>
                    <Button onClick={this.reset}>重置</Button>
                    <Button
                        type="primary"
                        onClick={()=>{this.setState({visible:true,shareType: '',shareId:''})}}
                        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 ? <AddShare
                    id={this.state.id}
                    shareType={this.state.shareType}
                    shareId={this.state.shareId}
                    infor={this.state.infor}
                    visible={this.state.visible}
                    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 WeappShare;
