save

src/app/App.jsx

@@ -1,20 +1,54 @@
 import React, {Component} from 'react';
 import {FormattedMessage} from 'react-intl';
-import {Layout,Button, Card, Col, Row} from 'antd';
+import {Layout,Button, Spin, Col, Row, Tabs} from 'antd';
+
 import {withRouter} from "react-router-dom";
 
 import './developVersion/index.css';
+import {request} from 'graphql-request'
+import {graphqlUrl} from "../config";
+import {SHOW_ALL_CASE} from "../gql";
 const {Header, Footer, Content} = Layout;
+const TabPane = Tabs.TabPane;
 
 class App extends Component {
     constructor(props) {
         super(props);
         this.state = {
-
+            examplesFirst: [],
+            examplesSecond: [],
         }
     }
+    componentWillMount() {
+        this._isMounted = true;
+
+        request(graphqlUrl, SHOW_ALL_CASE, {}).then(data => {
+                let cases = data.case_by_props;
+                let examplesFirst = cases.filter(case1 => case1.title.includes('预约'));
+                let examplesSecond = cases.filter(case2 => case2.title.includes('服装店'));
+                if (this._isMounted) {
+                    this.setState({
+                        examplesFirst,
+                        examplesSecond,
+                    })
+                }
+            }
+        )
+    }
+
+    componentWillUnmount() {
+        this._isMounted = false;
+    }
+
 
     render() {
+        let {examplesFirst, examplesSecond} = this.state;
+        const tabStyle = {
+            paddingBottom: '50px',
+            height: '550px',
+            display: 'inline-block',
+        };
+
         return (
             <div>
                 <Layout className="layout">
@@ -23,7 +57,7 @@ class App extends Component {
                             <div className='logo'/>
                         </div>
                     </Header>
-                    <Content style={{padding: '30px 50px 0', minHeight: '780px' }} >
+                    <Content >
                         <div className="index" >
                             <div className="intro" style={{ padding: '30px' }}>
                                 <Row gutter={16}>
@@ -51,6 +85,34 @@ class App extends Component {
                                 </Button>
                             </div>
                         </div>
+
+                        <div style={{marginLeft: 200}}>
+                            <Tabs tabPosition='left' size='large' tabBarStyle={tabStyle} tabBarGutter={100}>
+                                <TabPane tab="预约" key="1">
+                                    <div style={{marginLeft: 100}}>
+                                        {
+                                            examplesFirst.length === 0 ?
+                                                <Spin/> :
+                                                <BaiduShow
+                                                    examples={examplesFirst}
+                                                />
+                                        }
+                                    </div>
+                                </TabPane>
+                                <TabPane tab="电商" key="2">
+                                    <div style={{marginLeft: 100}}>
+                                        {
+                                            examplesSecond.length === 0 ?
+                                                <Spin/> :
+                                                <BaiduShow
+                                                    examples={examplesSecond}
+                                                />
+                                        }
+                                    </div>
+                                </TabPane>
+                            </Tabs>
+                        </div>
+
                     </Content>
                     <Footer style={{ textAlign: 'center' }}>
                         版权所有 © 2019 栋天科技
@@ -62,4 +124,80 @@ class App extends Component {
     }
 }
 
-export default withRouter(App);
+export default withRouter(App);
+
+
+
+class BaiduShow extends Component {
+    constructor(props) {
+        super(props);
+        console.log(props);
+        this.state = {
+            showCaseID: props.examples[0].id,
+            index: 0
+        }
+    }
+
+    render() {
+        let {examples} = this.props;
+        let {showCaseID, index} = this.state;
+        let thisCase = examples[index];
+        return (
+            <Row>
+                <Col span={12}>
+                    <Row>
+                        <div>
+                            <div className={'case-detail-title'}>{thisCase.title}</div>
+                            <div
+                                className={'case-detail-description'}>{thisCase.detailDescription ? thisCase.detailDescription : '暂无简介'}</div>
+                            <div className='cover-div'>
+                                <img
+                                    className='cover-img'
+                                    src={thisCase.img}
+                                    alt={thisCase.title + '' + thisCase.description}
+                                />
+                                <div style={{marginTop: 5}}>—— 打开微信扫码体验 ——</div>
+                            </div>
+
+                        </div>
+                    </Row>
+                    <Row>
+                        {
+                            examples.map((item, index) => (
+                                <div
+                                    className={showCaseID === item.id ? 'logo-cover-div logo-cover-div-on' : 'logo-cover-div'}
+                                    onMouseEnter={() => {
+                                        this.setState({
+                                            showCaseID: item.id,
+                                            index
+                                        })
+                                    }}
+                                    key={index}
+                                >
+                                    <img
+                                        className='logo-cover-img'
+                                        src={item.img}
+                                        alt={item.title + '' + item.description}
+                                    />
+                                    <div>{item.description}</div>
+                                </div>
+                            ))
+                        }
+                    </Row>
+                </Col>
+                <Col span={6}>
+                    <div className={'detail-images'}>
+                        <img
+                            key={thisCase.detailImages[0]}
+                            src={thisCase.detailImages[0]}
+                            alt=""
+                            height="500"/>
+                    </div>
+                </Col>
+            </Row>
+        )
+    }
+}
+
+
+

src/app/basicVersion/BasicVersion.jsx

@@ -7,7 +7,6 @@ import '../developVersion/index.css';
 import CaseShow from "./caseShow/CaseShow";
 import MyDeploy from "./myDeploy/MyDeploy";
 import Communication from "./communication/Communication";
-import CaseDetailBackup from "./caseShow/CaseDetailBackup";
 import {logoutUrl} from "../../config";
 import {getCookie, setCookie} from "../../cookie";
 import {GET_USER} from "../../gql";
@@ -202,7 +201,6 @@ class BasicVersion extends Component {
                         <Route path="/common/example" exact component={CaseShow}/>
                         <Route path="/common/deploy" component={MyDeploy}/>
                         <Route path="/common/communication" component={Communication}/>
-                        <PrivateRoute path="/common/example/deploy-cloud-choose" component={CaseDetailBackup} ownProps={ownProps}/>
                     </Switch>
                 </Layout>
 

src/app/basicVersion/caseShow/CaseDetailBackup.js

@@ -1,275 +0,0 @@
-import React, {Component} from 'react';
-import {Layout, Button, notification, Row, Col, Icon, message, Spin} from 'antd';
-import {getCookie} from "../../../cookie";
-import {SHOW_CASE} from "../../../gql";
-import {FormattedMessage} from 'react-intl';
-import copy from 'copy-to-clipboard';
-import UserCustom from './UserCustom';
-import GraphiQL from "graphiql";
-import {Query} from "react-apollo";
-import gql from "graphql-tag";
-
-const {Content} = Layout;
-
-class CaseDetailBackup extends Component {
-    constructor() {
-        super();
-        this.state = {
-            userID: '',
-            bucketName: '',
-            domain: '',
-            showCustom: false,
-            images: [],
-            description: '',
-            developer: {}
-        };
-    }
-
-    componentWillMount() {
-        this._isMounted = true;
-
-        // 查询跳转来的案例，转成 apigroup id
-        // 此前，传递的值是 schemaID，考虑到都是根据 schemaID 生成的案例，所以 bucketName 是基于 schema.edn 的，在 cos 比较好找
-        // 又考虑到 fc 中仍有不含 schema.edn 的页面 fc。 故添加了 case 的表和 project 的 projectType === 'case'
-        // 所以，这部分待修改
-        // 最好的解决是，查询所有 projectType 为 case 的 project，然后传过来一举两得
-        // let groupID = '';
-        if (this.props.location && this.props.location.state) {
-            this.setState({
-                caseID: this.props.location.state.caseID,
-            });
-        }
-    }
-
-    componentWillUnmount() {
-        this._isMounted = false;
-    }
-
-    backToMe = () => {
-        this.setState({
-            showCustom: 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;
-            }
-        }
-    };
-
-
-    render() {
-        let {userID, showCustom, caseID} = this.state;
-        return (
-            <div className={'deploy-choose-cloud'}>
-                <Layout style={{padding: '24px', minHeight: '300px'}}>
-                    <Content style={{padding: '20px 50px', background: '#fff'}}>
-                        <Query query={gql(SHOW_CASE)} variables={{id: caseID}}>
-                            {
-                                ({loading, error, data}) => {
-                                    if (loading) {
-                                        return <Spin/>
-                                    }
-                                    if (error) {
-                                        return 'error!';
-                                    }
-                                    let thisCase = data.case_by_id;
-                                    let bucketName = this.schemaIDChangeBucket(thisCase.schema_id.id);
-                                    return (
-                                        <div>
-                                            {
-                                                !showCustom ?
-                                                    <div>
-                                                        <div className="column-menu" onClick={() => {
-                                                            this.props.history.push({
-                                                                pathname: '/common'
-                                                            })
-                                                        }}>
-                                                            <Icon type="left" style={{color: '#3187FA'}}/>
-                                                            <FormattedMessage id="back to all case show"/>
-                                                        </div>
-                                                        <Row>
-                                                            <Col span={18} style={{
-                                                                borderRight: '1px dashed #dcdadb',
-                                                                paddingRight: 20
-                                                            }}>
-                                                                <div>
-                                                                    <div className={'schema-name'}><FormattedMessage id='detail'/></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'}>
-                                                                        {
-                                                                            thisCase.detailImages.map(img => (
-                                                                                <img key={img} src={img} alt=""
-                                                                                     height="500" />
-                                                                            ))
-                                                                        }
-                                                                    </div>
-                                                                </div>
-                                                            </Col>
-                                                            <Col span={5} style={{marginLeft: 20}}>
-                                                                <div className={'user-custom-right-side '} style={{marginTop: 50}}>
-                                                                    <div>
-                                                                        <div className={'schema-name'}><FormattedMessage id='i want to use it directly'/></div>
-                                                                        <Button
-                                                                            className={'choose-cloud-button'}
-                                                                            type='primary'
-                                                                            onClick={() => {
-                                                                                if (userID === '') {
-                                                                                    notification['warning']({
-                                                                                        message: '需要登录',
-                                                                                        description: '后续使用，需要先登录',
-                                                                                    });
-
-                                                                                    this.props.history.push({
-                                                                                        pathname: `/login`
-                                                                                    })
-                                                                                } else {
-                                                                                    this.setState({
-                                                                                        showCustom: true
-                                                                                    })
-                                                                                }
-                                                                            }}>
-                                                                            <FormattedMessage id='one more step'/>
-                                                                        </Button>
-                                                                    </div>
-                                                                    <div>
-                                                                        <div className={'schema-name'}>想要定制化该案例</div>
-                                                                        <div>
-                                                                            <div>联系作者</div>
-                                                                            <div>
-                                                                                <Icon type="mail"/>
-                                                                                {
-                                                                                    thisCase.user_id.email ? thisCase.user_id.email : '该作者未留下联系方式'
-                                                                                }
-                                                                            </div>
-                                                                        </div>
-                                                                        <div>
-                                                                            <div>自行修改代码</div>
-                                                                            <div>
-                                                                                <Icon type="github" />
-                                                                                {
-                                                                                    thisCase.codeAddress ? thisCase.codeAddress : '该作者未留下代码仓库地址'
-                                                                                }
-                                                                            </div>
-                                                                        </div>
-                                                                    </div>
-                                                                </div>
-                                                            </Col>
-                                                        </Row>
-                                                    </div>
-                                                    :
-                                                    <UserCustom
-                                                        userID={userID}
-                                                        bucketName={bucketName}
-                                                        history={this.props.history}
-                                                        backToMe={this.backToMe}
-                                                    />
-                                            }
-                                        </div>
-                                    )
-                                }
-                            }
-                        </Query>
-                    </Content>
-                </Layout>
-            </div>
-        )
-    }
-}
-
-export default CaseDetailBackup
-
-class GraphShow extends Component {
-// <GraphShow domain={domain}/>
-    constructor(props) {
-        super(props);
-        this.state = {
-            showIDE: false
-        }
-    }
-
-    render() {
-        let {domain} = this.props;
-        return (
-            <div>
-                <div style={{marginTop: 100}}>
-                    <div className={'schema-name'}><FormattedMessage id='case graphql domain'/>
-                    </div>
-                    <div className={'schema-table-list-title'}>
-                        <Row>
-                            <Col span={15}>
-                                <span className={'schema-table-title'}><FormattedMessage id='defaultDomain'/></span>
-                            </Col>
-                        </Row>
-                    </div>
-                    <div className={'schema-table-list-content'}>
-                        <Row>
-                            <Col span={10}>
-                                {
-                                    domain ?
-                                        <div>
-                                            <span className={'schema-table-content'}>{domain} </span>
-                                            <Icon type="copy" theme="twoTone"
-                                                  onClick={() => {
-                                                      copy(domain);
-                                                      message.success('复制成功');
-                                                  }}/>
-                                        </div>
-                                        :
-                                        <Spin/>
-                                }
-
-                            </Col>
-                            <Col span={4}>
-                                <Button
-                                    style={{marginTop: 10}}
-                                    size={'small'}
-                                    onClick={() => {
-                                        this.setState({showIDE: !this.state.showIDE})
-                                    }}
-                                >
-                                    {this.state.showIDE ? <FormattedMessage id='closeIDE'/> :
-                                        <FormattedMessage id='showIDE'/>}
-                                </Button>
-                            </Col>
-                        </Row>
-                    </div>
-                </div>
-
-                {
-                    this.state.showIDE ?
-                        <Graphiql domain={domain}/>
-                        :
-                        ''
-                }
-            </div>
-        )
-    }
-}
-
-const Graphiql = ({domain}) => {
-    const domainFixed = 'http://' + domain + '/graphql';
-    const graphQLFetcher = (graphQLParams) => {
-        return fetch(domainFixed, {
-            method: 'post',
-            headers: {'Content-Type': 'application/json'},
-            body: JSON.stringify(graphQLParams),
-        }).then(response => response.json());
-    };
-
-    return (
-        <div style={{marginTop: 20}}>
-            <GraphiQL fetcher={graphQLFetcher}/>
-        </div>
-    );
-};

src/app/basicVersion/caseShow/CaseShow.jsx

@@ -1,5 +1,7 @@
+
 import React, {Component} from 'react';
-import {Layout, Butt, Spin, Row, Col, Tabs} from 'antd';
+import {Layout, Card, Button, Avatar, Spin, Icon, Row, Col, notification} from 'antd';
+import lo from '../../../images/lo.png'
 import './index.css'
 import {graphqlUrl} from "../../../config";
 import {SHOW_ALL_CASE, SHOW_CASE} from "../../../gql";
@@ -10,19 +12,17 @@ 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 = {
-            examplesFirst: [],
-            examplesSecond: [],
+            examplesIoobot: [],
+            examplesOthers: [],
             showCustom: false,
-            chosenSchemaID: '',
-            activeKey: '1',
-            showCaseID: 'order-react-CaseID'
+            chosenSchemaID: ''
         }
     }
 
@@ -38,12 +38,13 @@ class CaseShow extends Component {
 
         request(graphqlUrl, SHOW_ALL_CASE, {}).then(data => {
                 let cases = data.case_by_props;
-                let examplesFirst = cases.filter(case1 => case1.title.includes('预约'));
-                let examplesSecond = cases.filter(case2 => case2.title.includes('服装店'));
+                console.log(cases);
+                let examplesIoobot = cases.filter(case1 => case1.user_id.id === 'ioobot');
+                let examplesOthers = cases.filter(case2 => case2.user_id.id !== 'ioobot');
                 if (this._isMounted) {
                     this.setState({
-                        examplesFirst,
-                        examplesSecond,
+                        examplesIoobot,
+                        examplesOthers
                     })
                 }
             }
@@ -76,12 +77,7 @@ class CaseShow extends Component {
     };
 
     render() {
-        let {userID, showCustom, chosenSchemaID, examplesFirst, examplesSecond} = this.state;
-        const tabStyle = {
-            paddingBottom: '50px',
-            height: '550px',
-            display: 'inline-block',
-        };
+        let {userID, showCustom, chosenSchemaID} = this.state;
         return (
             <div id="example-show">
                 <Layout style={{padding: '24px', minHeight: '300px'}}>
@@ -89,30 +85,113 @@ class CaseShow extends Component {
                         {
                             !showCustom ?
                                 <div>
-                                    <Tabs tabPosition='left' size='large' tabBarStyle={tabStyle} tabBarGutter={100}>
-                                        <TabPane tab="预约" key="1">
-                                            <div style={{marginLeft: 100}}>
-                                                {
-                                                    examplesFirst.length === 0 ?
-                                                        <Spin/> :
-                                                        <BaiduShow
-                                                            examples={examplesFirst}
-                                                        />
-                                                }
-                                            </div>
-                                        </TabPane>
-                                        <TabPane tab="电商" key="2">
-                                            <div style={{marginLeft: 100}}>
-                                                {
-                                                    examplesSecond.length === 0 ?
-                                                        <Spin/> :
-                                                        <BaiduShow
-                                                            examples={examplesSecond}
-                                                        />
-                                                }
-                                            </div>
-                                        </TabPane>
-                                    </Tabs>
+                                    <div className={'schema-name'} style={{fontSize: 25}}><FormattedMessage id='scan and use'/></div>
+                                    <div>
+                                        <div className={'schema-name'}><FormattedMessage id='ioobot case'/></div>
+                                        <div>
+                                            {
+                                                this.state.examplesIoobot.length === 0 ?
+                                                    <Spin/>
+                                                    :
+                                                    this.state.examplesIoobot.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>
+                                    </div>
                                 </div>
                                 :
                                 <UserCustom
@@ -122,6 +201,7 @@ class CaseShow extends Component {
                                     backToMe={this.backToMe}
                                 />
                         }
+
                     </Content>
                 </Layout>
             </div>
@@ -129,79 +209,4 @@ class CaseShow extends Component {
     }
 }
 
-export default CaseShow;
-
-
-class BaiduShow extends Component {
-    constructor(props) {
-        super(props);
-        console.log(props);
-        this.state = {
-            showCaseID: props.examples[0].id,
-            index: 0
-        }
-    }
-
-    render() {
-        let {examples} = this.props;
-        let {showCaseID, index} = this.state;
-        let thisCase = examples[index];
-        return (
-            <Row>
-                <Col span={12}>
-                    <Row>
-                        <div>
-                            <div className={'case-detail-title'}>{thisCase.title}</div>
-                            <div
-                                className={'case-detail-description'}>{thisCase.detailDescription ? thisCase.detailDescription : '暂无简介'}</div>
-                            <div className='cover-div'>
-                                <img
-                                    className='cover-img'
-                                    src={thisCase.img}
-                                    alt={thisCase.title + '' + thisCase.description}
-                                />
-                                <div style={{marginTop: 5}}>—— 打开微信扫码体验 ——</div>
-                            </div>
-
-                        </div>
-                    </Row>
-                    <Row>
-                        {
-                            examples.map((item, index) => (
-                                <div
-                                    className={showCaseID === item.id ? 'logo-cover-div logo-cover-div-on' : 'logo-cover-div'}
-                                    onMouseEnter={() => {
-                                        this.setState({
-                                            showCaseID: item.id,
-                                            index
-                                        })
-                                    }}
-                                    key={index}
-                                >
-                                    <img
-                                        className='logo-cover-img'
-                                        src={item.img}
-                                        alt={item.title + '' + item.description}
-                                    />
-                                    <div>{item.description}</div>
-                                </div>
-                            ))
-                        }
-                    </Row>
-                </Col>
-                <Col span={6}>
-                    <div className={'detail-images'}>
-                        <img
-                            key={thisCase.detailImages[0]}
-                            src={thisCase.detailImages[0]}
-                            alt=""
-                            height="500"/>
-                    </div>
-                </Col>
-            </Row>
-        )
-    }
-}
-
-
-
+export default CaseShow;

src/app/basicVersion/caseShow/CaseShowBackup.js

@@ -1,27 +1,26 @@
 import React, {Component} from 'react';
-import {Layout, Card, Button, Avatar, Spin, Icon, Row, Col, notification} from 'antd';
-import lo from '../../../images/lo.png'
+import {Layout, Butt, Spin, Row, Col, Tabs} from 'antd';
 import './index.css'
 import {graphqlUrl} from "../../../config";
-import {SHOW_ALL_CASE, SHOW_CASE} from "../../../gql";
+import {SHOW_ALL_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 = {
-            examplesIoobot: [],
-            examplesOthers: [],
+            examplesFirst: [],
+            examplesSecond: [],
             showCustom: false,
-            chosenSchemaID: ''
+            chosenSchemaID: '',
+            activeKey: '1',
+            showCaseID: 'order-react-CaseID'
         }
     }
 
@@ -37,13 +36,12 @@ class CaseShow extends Component {
 
         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 examplesOthers = cases.filter(case2 => case2.user_id.id !== 'ioobot');
+                let examplesFirst = cases.filter(case1 => case1.title.includes('预约'));
+                let examplesSecond = cases.filter(case2 => case2.title.includes('服装店'));
                 if (this._isMounted) {
                     this.setState({
-                        examplesIoobot,
-                        examplesOthers
+                        examplesFirst,
+                        examplesSecond,
                     })
                 }
             }
@@ -76,7 +74,12 @@ class CaseShow extends Component {
     };
 
     render() {
-        let {userID, showCustom, chosenSchemaID} = this.state;
+        let {userID, showCustom, chosenSchemaID, examplesFirst, examplesSecond} = this.state;
+        const tabStyle = {
+            paddingBottom: '50px',
+            height: '550px',
+            display: 'inline-block',
+        };
         return (
             <div id="example-show">
                 <Layout style={{padding: '24px', minHeight: '300px'}}>
@@ -84,113 +87,30 @@ class CaseShow extends Component {
                         {
                             !showCustom ?
                                 <div>
-                                    <div className={'schema-name'} style={{fontSize: 25}}><FormattedMessage id='scan and use'/></div>
-                                    <div>
-                                        <div className={'schema-name'}><FormattedMessage id='ioobot case'/></div>
-                                        <div>
-                                            {
-                                                this.state.examplesIoobot.length === 0 ?
-                                                    <Spin/>
-                                                    :
-                                                    this.state.examplesIoobot.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>
-                                    </div>
+                                    <Tabs tabPosition='left' size='large' tabBarStyle={tabStyle} tabBarGutter={100}>
+                                        <TabPane tab="预约" key="1">
+                                            <div style={{marginLeft: 100}}>
+                                                {
+                                                    examplesFirst.length === 0 ?
+                                                        <Spin/> :
+                                                        <BaiduShow
+                                                            examples={examplesFirst}
+                                                        />
+                                                }
+                                            </div>
+                                        </TabPane>
+                                        <TabPane tab="电商" key="2">
+                                            <div style={{marginLeft: 100}}>
+                                                {
+                                                    examplesSecond.length === 0 ?
+                                                        <Spin/> :
+                                                        <BaiduShow
+                                                            examples={examplesSecond}
+                                                        />
+                                                }
+                                            </div>
+                                        </TabPane>
+                                    </Tabs>
                                 </div>
                                 :
                                 <UserCustom
@@ -200,7 +120,6 @@ class CaseShow extends Component {
                                     backToMe={this.backToMe}
                                 />
                         }
-
                     </Content>
                 </Layout>
             </div>
@@ -210,3 +129,74 @@ class CaseShow extends Component {
 
 export default CaseShow;
 
+
+class BaiduShow extends Component {
+    constructor(props) {
+        super(props);
+        console.log(props);
+        this.state = {
+            showCaseID: props.examples[0].id,
+            index: 0
+        }
+    }
+
+    render() {
+        let {examples} = this.props;
+        let {showCaseID, index} = this.state;
+        let thisCase = examples[index];
+        return (
+            <Row>
+                <Col span={12}>
+                    <Row>
+                        <div>
+                            <div className={'case-detail-title'}>{thisCase.title}</div>
+                            <div
+                                className={'case-detail-description'}>{thisCase.detailDescription ? thisCase.detailDescription : '暂无简介'}</div>
+                            <div className='cover-div'>
+                                <img
+                                    className='cover-img'
+                                    src={thisCase.img}
+                                    alt={thisCase.title + '' + thisCase.description}
+                                />
+                                <div style={{marginTop: 5}}>—— 打开微信扫码体验 ——</div>
+                            </div>
+
+                        </div>
+                    </Row>
+                    <Row>
+                        {
+                            examples.map((item, index) => (
+                                <div
+                                    className={showCaseID === item.id ? 'logo-cover-div logo-cover-div-on' : 'logo-cover-div'}
+                                    onMouseEnter={() => {
+                                        this.setState({
+                                            showCaseID: item.id,
+                                            index
+                                        })
+                                    }}
+                                    key={index}
+                                >
+                                    <img
+                                        className='logo-cover-img'
+                                        src={item.img}
+                                        alt={item.title + '' + item.description}
+                                    />
+                                    <div>{item.description}</div>
+                                </div>
+                            ))
+                        }
+                    </Row>
+                </Col>
+                <Col span={6}>
+                    <div className={'detail-images'}>
+                        <img
+                            key={thisCase.detailImages[0]}
+                            src={thisCase.detailImages[0]}
+                            alt=""
+                            height="500"/>
+                    </div>
+                </Col>
+            </Row>
+        )
+    }
+}