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, SEARCH_SCHEMA} 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;

// caseshow 与 usercustom 展示于一个三目运算符
// 因此刷新 usercustom 将不存在，并且他没有路径

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 = async (schemaID) => {
        let bucketname = await request(graphqlUrl, SEARCH_SCHEMA, {id: schemaID})
        console.log(bucketname.schema_by_id.schemaName, 'is schemaName,is equal to bucketName')
        return bucketname.schema_by_id.schemaName;
    };

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