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

import React, {Component} from 'react';
import {Layout, Card, Button, Avatar, Spin, Icon, Row, Col, notification,Tag } 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 {Content} = Layout;
const {Meta} = Card;

class CaseShow extends Component {
    constructor(props) {
        super(props);
        this.state = {
            examplesIoobot: [],
            examplesOthers: [],
            showCustom: false,
            chosenSchemaID: ''
        }
    }

    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;
                // console.log(cases);
                let examplesIoobot = cases.filter(case1 => case1.user_id.id === 'ioobot');
                let IooList = this.examplesFilter(examplesIoobot);

                let examplesOthers = cases.filter(case2 => case2.user_id.id !== 'ioobot');
                let UserList = this.examplesFilter(examplesOthers);

                if (this._isMounted) {
                    this.setState({
                        examplesIoobot:IooList,
                        examplesOthers:UserList
                    })
                }
            }
        )
    }

    examplesFilter(example) {
        // console.log('examples',example);
        let hash = {},i = 0,list = [];

        example.forEach(function(item) {
            let {title} = item;
            hash[title] ? list[hash[title] - 1].content.push(item) : hash[title] = ++i && list.push({
                title,
                content: [item],
            });
        });

        // console.log('list',list);
        return list;
    }

    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
        })
    };

    showCustom = (item) => {
        this.setState({
            showCustom: true,
            chosenSchemaID: item
        })
    };

    render() {
        let {userID, showCustom, chosenSchemaID} = this.state;

        return (
            <div id="example-show">
                <Layout style={{padding: '24px 48px', minHeight: '300px'}}>
                    {
                        !showCustom ?
                            <div>
                                <div className={'card card-head'}>
                                    <Card.Grid className={'card-head-item orange-change'} >
                                        <p>我们永久无年费 &nbsp;&nbsp;&nbsp;&nbsp; 告别高成本</p>
                                        <p>省钱、更省心</p>
                                    </Card.Grid>
                                    <Card.Grid className={'card-head-item pink-change'} >
                                        <p>数据完全私有 &nbsp;&nbsp;&nbsp;&nbsp; 安全更可靠</p>
                                        <p>数据分析图表为您提供更细致的服务</p>
                                    </Card.Grid>
                                    <Card.Grid className={'card-head-item blue-change'} >
                                        <p>模板不满意 &nbsp;&nbsp;&nbsp;&nbsp; 快来定制化吧！</p>
                                        <p>上手有困难，联系我们即可</p>
                                        <Button
                                            onClick={() => {
                                                this.props.history.push({
                                                    pathname: `/common/communication`
                                                })}}>立即定制</Button>
                                    </Card.Grid>
                                </div>
                                <div className={'schema-name'}>
                                    <FormattedMessage id='ioobot case'/>
                                </div>
                                <div>
                                    {
                                        this.state.examplesIoobot.length === 0 ?
                                            <Spin/>
                                            :
                                            this.state.examplesIoobot.map((item, index) => {
                                                let exampleList = item.content;
                                                let gzh = exampleList.filter(case1 => case1.description === '微信公众号');
                                                let xcx = exampleList.filter(case1 => case1.description === '微信小程序');
                                                let value = exampleList[0];
                                                return(
                                                    <Row key={index} className='card card-case' type="flex" justify="space-around" align="middle">
                                                        <Col span={6} style={{padding:'20px'}}>
                                                            <div className="wrap">
                                                                <div className="case-name">{value.title}</div>
                                                                <div className="wrapper">
                                                                    <div >
                                                                        <div >
                                                                            <div >模板简介:</div>
                                                                            <div >{value.detailDescription ? value.detailDescription : '暂无简介' }</div>
                                                                        </div>
                                                                        <br/>
                                                                        <div >
                                                                            {value.detailAttention ?
                                                                                <div>适用行业: &nbsp;&nbsp;
                                                                                    <Tag color="blue">{value.detailAttention}</Tag>
                                                                                </div>
                                                                                :
                                                                                ''
                                                                            }
                                                                        </div>
                                                                        <br/>
                                                                        <div className="left-end">
                                                                            <div>
                                                                                <Icon type="mail"/>&nbsp;&nbsp;
                                                                                {
                                                                                    value.user_id.email ? value.user_id.email : '该作者未留下联系方式'
                                                                                }
                                                                            </div>
                                                                            <div>
                                                                                <Icon type="github"/>&nbsp;&nbsp;
                                                                                {
                                                                                    value.codeAddress ?
                                                                                        <a href={value.codeAddress}>查看源码 可自行修改使用</a>
                                                                                        :
                                                                                        '该作者未留下代码仓库地址'
                                                                                }
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </Col>
                                                        <Col span={9} style={{padding:'20px'}}>
                                                            {gzh.length ?
                                                                <CaseShowDetail caseContent={gzh} showCustom={this.showCustom}/>
                                                                :
                                                                <div>敬请期待</div>
                                                            }

                                                        </Col>
                                                        <Col span={9} style={{padding:'20px'}}>
                                                            {xcx.length ?
                                                                <CaseShowDetail caseContent={xcx} showCustom={this.showCustom}/>
                                                                :
                                                                <div>敬请期待</div>
                                                            }
                                                        </Col>
                                                    </Row>
                                                )
                                            })
                                    }
                                </div>
                            </div>
                            :
                            <UserCustom
                                userID={userID}
                                bucketName={this.schemaIDChangeBucket(chosenSchemaID)}
                                history={this.props.history}
                                backToMe={this.backToMe}
                            />
                    }
                </Layout>
            </div>
        )
    }
}

export default CaseShow;

class CaseShowDetail extends Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }

    render() {
        let caseDetail = this.props.caseContent[0];
        // console.log('caseDetail',caseDetail);

        return(
            <div key={caseDetail.id}>
                <Query query={gql(SHOW_CASE)} variables={{id: caseDetail.id}}>
                    {
                        ({loading, error, data}) => {
                            if (loading) {
                                return <Spin/>
                            }
                            if (error) {
                                return 'error!';
                            }
                            let thisCase = data.case_by_id;

                            return (
                                <div>
                                    <div className={'case-show-head'}>{caseDetail.description}</div>
                                    <div className={'wrapper'}>
                                        <div >
                                            <img
                                                key={thisCase.detailImages[0]}
                                                src={thisCase.detailImages[0]}
                                                alt=""
                                                height="500"
                                            />
                                        </div>
                                        <div className={'right'}>
                                            <div className="cl-center" >
                                                <div className='cover-div'>
                                                    <img
                                                        className='cover-img'
                                                        src={caseDetail.img}
                                                        alt={caseDetail.title + '' + caseDetail.description}/>
                                                </div>
                                            </div>
                                            <div className="cl-center">
                                                微信扫一扫立即体验
                                            </div>
                                            <div className="cl-center">
                                                <Button type="primary"
                                                        style={{borderRadius:30}}
                                                        onClick={() => {
                                                            this.props.showCustom(caseDetail.schema_id.id);
                                                        }}><FormattedMessage id='Publish immediately'/></Button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            )
                        }
                    }
                </Query>
            </div>
        )
    }
}