/**
 * Created by SEELE on 2017/8/23.
 */
import React, { Component } from 'react';
import ReactEcharts from 'echarts-for-react';

var stations = [
    {
        name: 'F7',
        x: -150,
        y: -800,
        itemStyle: { borderColor: '#EE1822', color: 'white' },
        category: '1号线',
    },
    {
        name: 'F6',
        x: -300,
        y: -800,
        itemStyle: { borderColor: '#EE1822', color: 'white' },
        category: '1号线',
    },
    {
        name: 'F5',
        x: -450,
        y: -800,
        itemStyle: { borderColor: '#EE1822', color: 'white' },
        category: '1号线',
    },
    {
        name: 'F4',
        x: -600,
        y: -800,
        itemStyle: { borderColor: '#EE1822', color: 'white' },
        category: '1号线',
    },
    {
        name: 'F3',
        x: -750,
        y: -800,
        itemStyle: { borderColor: '#EE1822', color: 'white' },
        category: '1号线',
    },
    {
        name: 'F2',
        x: -850,
        y: -700,
        itemStyle: { borderColor: '#EE1822', color: 'white' },
        category: '1号线',
    },
    {
        name: 'F1',
        x: -950,
        y: -600,
        itemStyle: { borderColor: '#EE1822', color: 'white' },
        category: '1号线',
    },
    {
        name: 'F9',
        x: 150,
        y: -800,
        itemStyle: { borderColor: '#EE1822', color: 'white' },
        category: '1号线',
    },

    {
        name: 'F11',
        x: 450,
        y: -800,
        itemStyle: { borderColor: '#EE1822', color: 'white' },
        category: '1号线',
    },
    {
        name: 'F12',
        x: 600,
        y: -800,
        itemStyle: { borderColor: '#EE1822', color: 'white' },
        category: '1号线',
    },
    {
        name: 'F13',
        x: 750,
        y: -800,
        itemStyle: { borderColor: '#EE1822', color: 'white' },
        category: '1号线',
    },
    {
        name: 'F14',
        x: 750,
        y: -600,
        itemStyle: { borderColor: '#EE1822', color: 'white' },
        category: '1号线',
    },
    {
        name: 'F15',
        x: 900,
        y: -600,
        itemStyle: { borderColor: '#EE1822', color: 'white' },
        category: '1号线',
    },
    {
        name: 'F16',
        x: 1050,
        y: -600,
        itemStyle: { borderColor: '#EE1822', color: 'white' },
        category: '1号线',
    },
    {
        name: 'F17',
        x: 1300,
        y: -600,
        itemStyle: { borderColor: '#EE1822', color: 'white' },
        category: '1号线',
    },
    {
        name: 'F18',
        x: 1450,
        y: -600,
        itemStyle: { borderColor: '#EE1822', color: 'white' },
        category: '1号线',
    },

    {
        name: 'S1',
        x: 0,
        y: -1400,
        itemStyle: { borderColor: '#FDD303', color: 'white' },
        category: '2号线',
    },
    {
        name: 'S2',
        x: 0,
        y: -1300,
        itemStyle: { borderColor: '#FDD303', color: 'white' },
        category: '2号线',
    },
    {
        name: 'S3',
        x: 0,
        y: -1200,
        itemStyle: { borderColor: '#FDD303', color: 'white' },
        category: '2号线',
    },
    {
        name: 'S4',
        x: 0,
        y: -1100,
        itemStyle: { borderColor: '#FDD303', color: 'white' },
        category: '2号线',
    },
    {
        name: 'S5',
        x: 0,
        y: -1000,
        itemStyle: { borderColor: '#FDD303', color: 'white' },
        category: '2号线',
    },
    {
        name: 'S6',
        x: 0,
        y: -900,
        itemStyle: { borderColor: '#FDD303', color: 'white' },
        category: '2号线',
    },
    {
        name: 'FS8',
        x: 0,
        y: -800,
        itemStyle: { borderColor: '#FDD303', color: 'white' },
        category: '2号线',
    },
    {
        name: 'S8',
        x: 0,
        y: -700,
        itemStyle: { borderColor: '#FDD303', color: 'white' },
        category: '2号线',
    },
    {
        name: 'S9',
        x: 0,
        y: -600,
        itemStyle: { borderColor: '#FDD303', color: 'white' },
        category: '2号线',
    },
    {
        name: 'S10',
        x: 0,
        y: -500,
        itemStyle: { borderColor: '#FDD303', color: 'white' },
        category: '2号线',
    },
    {
        name: 'S12',
        x: 200,
        y: -300,
        itemStyle: { borderColor: '#FDD303', color: 'white' },
        category: '2号线',
    },
    {
        name: 'S13',
        x: 300,
        y: -200,
        itemStyle: { borderColor: '#FDD303', color: 'white' },
        category: '2号线',
    },
    {
        name: 'S14',
        x: 400,
        y: -100,
        itemStyle: { borderColor: '#FDD303', color: 'white' },
        category: '2号线',
    },
    {
        name: 'S15',
        x: 500,
        y: 0,
        itemStyle: { borderColor: '#FDD303', color: 'white' },
        category: '2号线',
    },
    {
        name: 'S16',
        x: 650,
        y: 0,
        itemStyle: { borderColor: '#FDD303', color: 'white' },
        category: '2号线',
    },
    {
        name: 'S17',
        x: 800,
        y: 0,
        itemStyle: { borderColor: '#FDD303', color: 'white' },
        category: '2号线',
    },
    {
        name: 'S18',
        x: 950,
        y: 0,
        itemStyle: { borderColor: '#FDD303', color: 'white' },
        category: '2号线',
    },
    {
        name: 'S19',
        x: 1100,
        y: 0,
        itemStyle: { borderColor: '#FDD303', color: 'white' },
        category: '2号线',
    },
    {
        name: 'S20',
        x: 1300,
        y: 0,
        itemStyle: { borderColor: '#FDD303', color: 'white' },
        category: '2号线',
    },
    {
        name: 'T16',
        x: 400,
        y: -1000,
        itemStyle: { borderColor: '#00b2ff', color: 'white' },
        label: { rotate: 120 },
        category: '3号线',
    },
    {
        name: 'T15',
        x: 300,
        y: -900,
        itemStyle: { borderColor: '#00b2ff', color: 'white' },
        category: '3号线',
    },
    {
        name: 'FT10',
        x: 300,
        y: -800,
        itemStyle: { borderColor: '#00b2ff', color: 'white' },
        category: '3号线',
    },
    {
        name: 'T13',
        x: 300,
        y: -600,
        itemStyle: { borderColor: '#00b2ff', color: 'white' },
        category: '3号线',
    },
    {
        name: 'T12',
        x: 200,
        y: -500,
        itemStyle: { borderColor: '#00b2ff', color: 'white' },
        category: '3号线',
    },
    {
        name: 'ST11',
        x: 100,
        y: -400,
        itemStyle: { borderColor: '#00b2ff', color: 'white' },
        category: '3号线',
    },
    {
        name: 'T10',
        x: 0,
        y: -300,
        itemStyle: { borderColor: '#00b2ff', color: 'white' },
        category: '3号线',
    },
    {
        name: 'T9',
        x: 0,
        y: -200,
        itemStyle: { borderColor: '#00b2ff', color: 'white' },
        category: '3号线',
    },
    {
        name: 'T8',
        x: 0,
        y: -100,
        itemStyle: { borderColor: '#00b2ff', color: 'white' },
        category: '3号线',
    },
    {
        name: 'T7',
        x: 0,
        y: 0,
        itemStyle: { borderColor: '#00b2ff', color: 'white' },
        category: '3号线',
    },
    {
        name: 'T6',
        x: 0,
        y: 100,
        itemStyle: { borderColor: '#00b2ff', color: 'white' },
        category: '3号线',
    },
    {
        name: 'T5',
        x: 0,
        y: 200,
        itemStyle: { borderColor: '#00b2ff', color: 'white' },
        category: '3号线',
    },
    {
        name: 'T4',
        x: 0,
        y: 300,
        itemStyle: { borderColor: '#00b2ff', color: 'white' },
        category: '3号线',
    },
    {
        name: 'T3',
        x: 0,
        y: 400,
        itemStyle: { borderColor: '#00b2ff', color: 'white' },
        category: '3号线',
    },
    {
        name: 'T2',
        x: 0,
        y: 500,
        itemStyle: { borderColor: '#00b2ff', color: 'white' },
        category: '3号线',
    },
    {
        name: 'T1',
        x: 0,
        y: 600,
        itemStyle: { borderColor: '#00b2ff', color: 'white' },
        category: '3号线',
    },
];

var links = [
    { source: 'T16', target: 'T15', lineStyle: { color: '#00b2ff' } },
    { source: 'T15', target: 'FT10', lineStyle: { color: '#00b2ff' } },
    { source: 'FT10', target: 'T13', lineStyle: { color: '#00b2ff' } },
    { source: 'T13', target: 'T12', lineStyle: { color: '#00b2ff' } },
    { source: 'T12', target: 'ST11', lineStyle: { color: '#00b2ff' } },
    { source: 'ST11', target: 'T10', lineStyle: { color: '#00b2ff' } },
    { source: 'T10', target: 'T9', lineStyle: { color: '#00b2ff' } },
    { source: 'T9', target: 'T8', lineStyle: { color: '#00b2ff' } },
    { source: 'T8', target: 'T7', lineStyle: { color: '#00b2ff' } },
    { source: 'T7', target: 'T6', lineStyle: { color: '#00b2ff' } },
    { source: 'T6', target: 'T5', lineStyle: { color: '#00b2ff' } },
    { source: 'T5', target: 'T4', lineStyle: { color: '#00b2ff' } },
    { source: 'T4', target: 'T3', lineStyle: { color: '#00b2ff' } },
    { source: 'T3', target: 'T2', lineStyle: { color: '#00b2ff' } },
    { source: 'T2', target: 'T1', lineStyle: { color: '#00b2ff' } },

    { source: 'T16', target: 'T15', lineStyle: { color: '#00b2ff' } },
    { source: 'T15', target: 'FT10', lineStyle: { color: '#00b2ff' } },
    { source: 'FT10', target: 'T13', lineStyle: { color: '#00b2ff' } },
    { source: 'T13', target: 'T12', lineStyle: { color: '#00b2ff' } },
    { source: 'T12', target: 'ST11', lineStyle: { color: '#00b2ff' } },
    { source: 'ST11', target: 'T10', lineStyle: { color: '#00b2ff' } },
    { source: 'T10', target: 'T9', lineStyle: { color: '#00b2ff' } },
    { source: 'T9', target: 'T8', lineStyle: { color: '#00b2ff' } },
    { source: 'T8', target: 'T7', lineStyle: { color: '#00b2ff' } },
    { source: 'T7', target: 'T6', lineStyle: { color: '#00b2ff' } },
    { source: 'T6', target: 'T5', lineStyle: { color: '#00b2ff' } },
    { source: 'T5', target: 'T4', lineStyle: { color: '#00b2ff' } },
    { source: 'T4', target: 'T3', lineStyle: { color: '#00b2ff' } },
    { source: 'T3', target: 'T2', lineStyle: { color: '#00b2ff' } },
    { source: 'T2', target: 'T1', lineStyle: { color: '#00b2ff' } },

    { source: 'S1', target: 'S2', lineStyle: { color: '#FDD303' } },
    { source: 'S2', target: 'S3', lineStyle: { color: '#FDD303' } },
    { source: 'S3', target: 'S4', lineStyle: { color: '#FDD303' } },
    { source: 'S4', target: 'S5', lineStyle: { color: '#FDD303' } },
    { source: 'S5', target: 'S6', lineStyle: { color: '#FDD303' } },
    { source: 'S6', target: 'FS8', lineStyle: { color: '#FDD303' } },
    { source: 'FS8', target: 'S8', lineStyle: { color: '#FDD303' } },
    { source: 'S8', target: 'S9', lineStyle: { color: '#FDD303' } },
    { source: 'S9', target: 'S10', lineStyle: { color: '#FDD303' } },
    { source: 'S10', target: 'ST11', lineStyle: { color: '#FDD303' } },
    { source: 'ST11', target: 'S12', lineStyle: { color: '#FDD303' } },
    { source: 'S12', target: 'S13', lineStyle: { color: '#FDD303' } },
    { source: 'S13', target: 'S14', lineStyle: { color: '#FDD303' } },

    { source: 'S14', target: 'S15', lineStyle: { color: '#FDD303' } },
    { source: 'S15', target: 'S16', lineStyle: { color: '#FDD303' } },
    { source: 'S16', target: 'S17', lineStyle: { color: '#FDD303' } },
    { source: 'S17', target: 'S18', lineStyle: { color: '#FDD303' } },
    { source: 'S18', target: 'S19', lineStyle: { color: '#FDD303' } },
    { source: 'S19', target: 'S20', lineStyle: { color: '#FDD303' } },

    { source: 'FS8', target: 'F7', lineStyle: { color: '#EE1822' } },
    { source: 'F7', target: 'F6', lineStyle: { color: '#EE1822' } },
    { source: 'F6', target: 'F5', lineStyle: { color: '#EE1822' } },
    { source: 'F5', target: 'F4', lineStyle: { color: '#EE1822' } },
    { source: 'F4', target: 'F3', lineStyle: { color: '#EE1822' } },
    { source: 'F3', target: 'F2', lineStyle: { color: '#EE1822' } },
    { source: 'F2', target: 'F1', lineStyle: { color: '#EE1822' } },
    { source: 'FS8', target: 'F9', lineStyle: { color: '#EE1822' } },
    { source: 'F9', target: 'FT10', lineStyle: { color: '#EE1822' } },
    { source: 'FT10', target: 'F11', lineStyle: { color: '#EE1822' } },
    { source: 'F11', target: 'F12', lineStyle: { color: '#EE1822' } },
    { source: 'F12', target: 'F13', lineStyle: { color: '#EE1822' } },
    { source: 'F13', target: 'F14', lineStyle: { color: '#EE1822' } },
    { source: 'F14', target: 'F15', lineStyle: { color: '#EE1822' } },
    { source: 'F15', target: 'F16', lineStyle: { color: '#EE1822' } },
    { source: 'F16', target: 'F17', lineStyle: { color: '#EE1822' } },
    { source: 'F17', target: 'F18', lineStyle: { color: '#EE1822' } },
];

var lineNames = [];

for (var index = 0; index < stations.length - 1; index++) {
    if (lineNames.indexOf(stations[index].category) === -1) {
        lineNames.push(stations[index].category);
    }
}

var legend = [
    {
        data: lineNames,
    },
];

var categories = lineNames.map((lineName) => {
    return {
        name: lineName,
    };
});

const option = {
    title: {
        text: '地铁示意图',
    },
    color: ['#EE1822', '#FDD303', '#00b2ff'],
    tooltip: {},
    legend: legend,
    animationDurationUpdate: 1500,
    animationEasingUpdate: 'quinticInOut',
    series: [
        {
            type: 'graph',
            layout: 'none',
            symbolSize: 6,
            focusNodeAdjacency: true,
            roam: false,
            label: {
                show: true,
                rotate: '30',
                color: 'black',
                position: 'right',
            },
            edgeSymbol: ['none', 'none'],
            edgeSymbolSize: [4, 6],
            edgeLabel: {
                normal: {
                    textStyle: {
                        fontSize: 20,
                    },
                },
            },
            data: stations,
            links: links,
            categories: categories,
            lineStyle: {
                normal: {
                    opacity: 0.9,
                    width: 6,
                    curveness: 0,
                },
            },
        },
    ],
};
class EchartsForce extends Component {
    render() {
        return (
            <ReactEcharts
                option={option}
                style={{ height: '700px', width: '1400px' }}
                className={'react_for_echarts'}
            />
        );
    }
}

export default EchartsForce;
