<template>
<div class="analysis xp-wrapper">
    <div class="xp-card analysis-tab">
        <h2 class="xp-title">分析报告</h2>
        <el-tabs v-model="tab" @tab-click="clickTab" class="analysis-tab-list">
            <el-tab-pane :label="index+''" v-for="(item,index) in list" :key="index">
                <span slot="label"><i class="fa" :class="item.icon" aria-hidden="true"></i>{{item.title}}</span>
            </el-tab-pane>
        </el-tabs>
    </div>
    <card-pane :item="list[0]">
        <table-with-fixed-header></table-with-fixed-header>
        <h5 class="xp-subtitle ">数据明细</h5>
        <chart-scatter-diagram></chart-scatter-diagram>
    </card-pane>
    <card-pane :item="list[1]">
        <chart-graph></chart-graph>
    </card-pane>
    <card-pane :item="list[2]">
        <chart-line-basic></chart-line-basic>
    </card-pane>
    <card-pane :item="list[3]">
        <chart-bar-single></chart-bar-single>
    </card-pane>
    <card-pane :item="list[4]">
        <el-tabs v-model="tab1" style="width:100%">
            <el-tab-pane label="展现" name="1001" lazy>
                <chart-pie-double-ring></chart-pie-double-ring>
            </el-tab-pane>
            <el-tab-pane label="点击" name="1002" lazy>
                <chart-pie-double-ring1></chart-pie-double-ring1>
            </el-tab-pane>
        </el-tabs>
    </card-pane>
    <card-pane :item="list[5]">
        <el-tabs v-model="tab2" style="width:100%">
            <el-tab-pane label="性别" name="1001" lazy>
                <chart-pie-sex></chart-pie-sex>
                <table-with-fixed-header1></table-with-fixed-header1>
            </el-tab-pane>
            <el-tab-pane label="平台" name="1002" lazy>
                <chart-bar1></chart-bar1>
            </el-tab-pane>
            <el-tab-pane label="地区" name="1003" lazy>
                <chart-map></chart-map>
            </el-tab-pane>
        </el-tabs>
    </card-pane>

</div>
</template>

<script>
/**
 * @file analysis 页面
 * @author zhangping15
 * @date 2018-07-06
 */

import tableWithFixedHeader from './components/table-with-fixed-header/index.vue';
import chartScatterDiagram from './components/chart-scatter-diagram/index.vue';
import tableWithFixedHeader1 from './components/table-with-fixed-header1/index.vue';
import chartGraph from './components/chart-graph/index.vue';
import chartLineBasic from './components/chart-line-basic/index.vue';
import chartPieDoubleRing1 from './components/chart-pie-double-ring1/index.vue';
import chartPieDoubleRing from './components/chart-pie-double-ring/index.vue';
import chartPieSex from './components/chart-pie-sex/index.vue';
import chartBar1 from './components/chart-bar1/index.vue';
import chartMap from './components/chart-map/index.vue';
import chartBarSingle from './components/chart-bar-single/index.vue';
import chartBar from './components/chart-bar/index.vue';
import cardPane from '@/components/card-pane';

export default {
    components: {
        'card-pane': cardPane,
        'chart-bar-single': chartBarSingle,
        'chart-bar': chartBar,
        'chart-pie-sex': chartPieSex,
        'chart-bar1': chartBar1,
        'chart-map': chartMap,
        'chart-pie-double-ring': chartPieDoubleRing,
        'chart-pie-double-ring1': chartPieDoubleRing1,
        'chart-line-basic': chartLineBasic,
        'chart-graph': chartGraph,
        'table-with-fixed-header': tableWithFixedHeader,
        'table-with-fixed-header1': tableWithFixedHeader1,
        'chart-scatter-diagram': chartScatterDiagram
    },
    data() {
        return {
            tab: 0,
            tab1: '1001',
            tab2: '1001',
            list: [{
                icon: 'fa-table',
                title: '总量分析',
                name: '0'
            }, {
                icon: 'fa-bullseye',
                title: '竞争分析',
                name: '1'
            }, {
                icon: 'fa-line-chart',
                title: '子行业趋势分析',
                name: '2'
            }, {
                icon: 'fa-bar-chart',
                title: '占比趋势分析',
                name: '3'
            }, {
                icon: 'fa-pie-chart',
                title: '流量类型和页面类型分析',
                name: '4'
            }, {
                icon: 'fa-crosshairs',
                title: '定向分析',
                name: '5'
            }]
        };
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
        },
        clickTab() {
            let selector = '#tab' + this.tab;
            this.$el.querySelector(selector).scrollIntoView({block: 'end', behavior: 'smooth'});
        },
        render() {
            return h();
        }
    }
};
</script>

<style lang="less">
.analysis {
    &-tab {
        margin-top: 20px;
        &-list {
            .el-tabs__header i {
                margin-right: 5px;
            }
        }
    }

}
</style>
