online/src/app/basicVersion/caseShow/CaseShow.jsx

import React, {Component} from 'react';
import {Layout, Card, Button, Avatar, Spin, Icon, Row, Col, notification, Tabs, Select} from 'antd';
import lo from '../../../images/lo.png'
import './index.css'
import {graphqlUrl} from "../../../config";
import {SHOW_ALL_CASE, SHOW_CASE} from "../../../gql";
import {FormattedMessage} from 'react-intl';
import {request} from 'graphql-request'
import UserCustom from "./UserCustom";
import {Query} from "react-apollo";
import gql from "graphql-tag";
import {getCookie} from "../../../cookie";

const TabPane = Tabs.TabPane;
const {Content} = Layout;
const {Meta} = Card;

class CaseShow extends Component {
    constructor(props) {
        super(props);
        this.state = {
            examplesMP: [],
            examplesPublic: [],
            examplesH5: [],
            showCustom: false,
            chosenSchemaID: '',
            activeKey: '1',
            showCaseID: 'order-react-CaseID'
        }
    }

    componentWillMount() {
        this._isMounted = true;
        // 查询是否登录
        let userID = getCookie('user_id');
        if (userID !== undefined && userID !== '') {
            this.setState({
                userID
            });
        }

        request(graphqlUrl, SHOW_ALL_CASE, {}).then(data => {
                let cases = data.case_by_props;
                let examplesMP = cases.filter(case1 => case1.description === '小程序');
                let examplesPublic = cases.filter(case2 => case2.description === '公众号');
                let examplesH5 = cases.filter(case2 => case2.description === 'H5');
                if (this._isMounted) {
                    this.setState({
                        examplesMP,
                        examplesPublic,
                        examplesH5
                    })
                }
            }
        )
    }

    componentWillUnmount() {
        this._isMounted = false;
    }

    schemaIDChangeBucket = (schemaID) => {
        if (this.props.location && this.props.location.state) {
            switch (schemaID) {
                case 'order_schemaID':
                    return 'appointment';
                case 'ecommerce_schemaID':
                    return 'e-commerce';
                case 'bills_schemaID':
                    return 'bills';
                default:
                    break;
            }
        }
    };

    backToMe = () => {
        this.setState({
            showCustom: false
        })
    };

    render() {
        let {userID, showCustom, chosenSchemaID, activeKey, showCaseID} = this.state;
        const tabStyle = {
            paddingTop: '50px',
            paddingBottom: '50px',
            height: '550px',
            display: 'inline-block',
        };
        return (
            <div id="example-show">
                <Layout style={{padding: '24px', minHeight: '300px'}}>
                    <Content className="content">
                        {
                            !showCustom ?
                                <div>
                                    <div className={'schema-name'} style={{fontSize: 25}}><FormattedMessage
                                        id='scan and use'/></div>
                                    <div>
                                        <Tabs tabPosition='left' size='large' tabBarStyle={tabStyle} tabBarGutter={100}>
                                            <TabPane tab="公众号" key="1">
                                                <div>
                                                    <Row>
                                                        <Col span={12}>
                                                            <Row>
                                                                <Query query={gql(SHOW_CASE)} variables={{id: showCaseID}}>
                                                                    {
                                                                        ({loading, error, data}) => {
                                                                            if (loading) {
                                                                                return <Spin/>
                                                                            }
                                                                            if (error) {
                                                                                return 'error!';
                                                                            }
                                                                            let thisCase = data.case_by_id;

                                                                            return (
                                                                                <div>
                                                                                    <div>{thisCase.title}</div>
                                                                                    <div className={'case-detail-description'}>{thisCase.detailDescription ? thisCase.detailDescription : '暂无简介'}</div>
                                                                                </div>
                                                                            )
                                                                        }
                                                                    }
                                                                </Query>
                                                            </Row>
                                                            <Row>
                                                                {
                                                                    this.state.examplesMP.map((item, index) => (
                                                                        <div
                                                                            className='cover-div'
                                                                            onMouseEnter={() => {
                                                                                this.setState({
                                                                                    showCaseID: item.id
                                                                                })
                                                                            }}
                                                                        >
                                                                            <img
                                                                                className='cover-img'
                                                                                src={item.img}
                                                                                alt={item.title + '' + item.description}
                                                                            />
                                                                            <div>{item.title}</div>
                                                                        </div>
                                                                    ))
                                                                }
                                                            </Row>
                                                        </Col>
                                                        <Col span={6}>
                                                            这个地方是截图，可以放在 detailImage 里面
                                                        </Col>
                                                    </Row>

                                                    {/*下面这串代码仅供参考，可以整体删除*/}
                                                    {
                                                        this.state.examplesMP.map((item, index) => (
                                                            <Row key={index} className='case-item'>
                                                                <Col span={12} style={{padding: '20px'}}>
                                                                    <Query query={gql(SHOW_CASE)}
                                                                           variables={{id: item.id}}>
                                                                        {
                                                                            ({loading, error, data}) => {
                                                                                if (loading) {
                                                                                    return <Spin/>
                                                                                }
                                                                                if (error) {
                                                                                    return 'error!';
                                                                                }
                                                                                let thisCase = data.case_by_id;

                                                                                return (
                                                                                    <div>
                                                                                        <div
                                                                                            className={'case-detail-attention'}> {thisCase.detailAttention ?
                                                                                            <div>
                                                                                                <Icon
                                                                                                    type="alert"/>{thisCase.detailAttention}
                                                                                            </div>
                                                                                            :
                                                                                            ''
                                                                                        }
                                                                                        </div>
                                                                                        <div
                                                                                            className={'case-detail-description'}>{thisCase.detailDescription ? thisCase.detailDescription : '暂无简介'}</div>
                                                                                        <div
                                                                                            className={'detail-images'}>
                                                                                            <img
                                                                                                key={thisCase.detailImages[0]}
                                                                                                src={thisCase.detailImages[0]}
                                                                                                alt=""
                                                                                                height="500"/>
                                                                                        </div>
                                                                                    </div>
                                                                                )
                                                                            }
                                                                        }
                                                                    </Query>
                                                                </Col>
                                                                <Col span={4}>
                                                                    <div>
                                                                        <div
                                                                            className={'schema-name'}>想要定制化该案例
                                                                        </div>
                                                                        <div>
                                                                            <div>联系作者</div>
                                                                            <div>
                                                                                <Icon type="mail"/>
                                                                                {
                                                                                    item.user_id.email ? item.user_id.email : '该作者未留下联系方式'
                                                                                }
                                                                            </div>
                                                                        </div>
                                                                        <div>
                                                                            <div>自行修改代码</div>
                                                                            <div>
                                                                                <Icon type="github"/>
                                                                                {
                                                                                    item.codeAddress ? item.codeAddress : '该作者未留下代码仓库地址'
                                                                                }
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </Col>
                                                                <Col span={8}>
                                                                    <div style={{padding: '10px 0'}}>
                                                                        <Card
                                                                            key={index}
                                                                            style={{width: 300}}
                                                                            cover={<div className='cover-div'><img
                                                                                className='cover-img'
                                                                                src={item.img}
                                                                                alt={item.title + '' + item.description}/>
                                                                            </div>}
                                                                            actions={[
                                                                                <span>已部署: {item.deployedNum}</span>,
                                                                                <span><Icon
                                                                                    type="like"/>: {item.like}</span>,
                                                                                <Button type="primary" onClick={() => {
                                                                                    this.setState({
                                                                                        showCustom: true,
                                                                                        chosenSchemaID: item.schema_id.id
                                                                                    })
                                                                                }}><FormattedMessage
                                                                                    id='one more step'/></Button>
                                                                            ]}
                                                                        >
                                                                            <Meta
                                                                                avatar={<Avatar src={lo}/>}
                                                                                title={item.title}
                                                                                description={item.description}
                                                                            />
                                                                        </Card>
                                                                    </div>
                                                                </Col>
                                                            </Row>
                                                        ))
                                                    }
                                                </div>
                                            </TabPane>
                                            <TabPane onMouseEnter={() => {
                                                this.setState({activeKey: '2'})
                                            }} tab="小程序" key="2">Content of Tab 2</TabPane>
                                            <TabPane onMouseEnter={() => {
                                                this.setState({activeKey: '3'})
                                            }} tab="H5 网页" key="3">Content of Tab 3</TabPane>
                                        </Tabs>
                                    </div>
                                </div>
                                :
                                <UserCustom
                                    userID={userID}
                                    bucketName={this.schemaIDChangeBucket(chosenSchemaID)}
                                    history={this.props.history}
                                    backToMe={this.backToMe}
                                />
                        }

                    </Content>
                </Layout>
            </div>
        )
    }
}

export default CaseShow;