import React, {Component} from 'react';
import {Layout, Butt, Spin, Row, Col, Tabs} from 'antd';
import './index.css'
import {graphqlUrl} from "../../../config";
import {SHOW_ALL_CASE} from "../../../gql";
import {FormattedMessage} from 'react-intl';
import {request} from 'graphql-request'
import UserCustom from "./UserCustom";
import {getCookie} from "../../../cookie";

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

class CaseShow extends Component {
    constructor(props) {
        super(props);
        this.state = {
            examplesFirst: [],
            examplesSecond: [],
            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 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;
    }

    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, examplesFirst, examplesSecond} = this.state;
        const tabStyle = {
            paddingBottom: '50px',
            height: '550px',
            display: 'inline-block',
        };
        return (
            <div id="example-show">
                <Layout style={{padding: '24px', minHeight: '300px'}}>
                    <Content className="content">
                        {
                            !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>
                                :
                                <UserCustom
                                    userID={userID}
                                    bucketName={this.schemaIDChangeBucket(chosenSchemaID)}
                                    history={this.props.history}
                                    backToMe={this.backToMe}
                                />
                        }
                    </Content>
                </Layout>
            </div>
        )
    }
}

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