<template>
<div class="analysis-hobby xp-wrapper">
    <h2 class="xp-title">分析报告</h2>
    <card-pane :item="list[0]">
        <el-tabs v-model="attrTab" style="width:100%">
            <el-tab-pane label="年龄" name="1001" lazy>
                <chart-bar-compare></chart-bar-compare>
            </el-tab-pane>
            <el-tab-pane label="性别" name="1002" lazy>
                <chart-pie-sex></chart-pie-sex>
            </el-tab-pane>
        </el-tabs>
    </card-pane>
    <card-pane :item="list[1]">
        <el-tabs v-model="assetsTab" style="width:100%">
            <el-tab-pane label="资产状况" name="1001" lazy>
                <chart-bar-compare1></chart-bar-compare1>
            </el-tab-pane>
        </el-tabs>
    </card-pane>
    <card-pane :item="list[2]">
        <el-tabs v-model="interestTab" style="width:100%">
            <el-tab-pane label="一级兴趣" name="1001" lazy>
                <chart-bar-compare2></chart-bar-compare2>
            </el-tab-pane>
            <el-tab-pane label="二级兴趣" name="1002" lazy>
                <chart-bar-compare2></chart-bar-compare2>
            </el-tab-pane>
        </el-tabs>
    </card-pane>




</div>
</template>

<script>
/**
 * @file analysis-hobby 页面
 *
 * @author zhangping15

 * @date 2018-07-06
 */

import progressBar from './components/progress-bar/index.vue';
import chartPieSex from './components/chart-pie-sex/index.vue';
import chartBarCompare from './components/chart-bar-compare/index.vue';
import chartBarCompare1 from './components/chart-bar-compare1/index.vue';
import chartBarCompare2 from './components/chart-bar-compare2/index.vue';
import cardPane from '@/components/card-pane';

export default {
    components: {
        'card-pane': cardPane,
        'progress-bar': progressBar,
        'chart-bar-compare': chartBarCompare,
        'chart-bar-compare1': chartBarCompare1,
        'chart-bar-compare2': chartBarCompare2,
        'chart-pie-sex': chartPieSex
    },
    data() {
        return {
            attrTab: '1001',
            assetsTab: '1001',
            interestTab: '1001',
            list: [{
                icon: 'fa-user',
                title: '属性',
                name: '0'
            }, {
                icon: 'fa-money',
                title: '资产与消费',
                name: '1'
            }, {
                icon: 'fa-star',
                title: '兴趣',
                name: '2'
            }]
        };
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
        }
    }
};
</script>

<style lang="less">
.analysis-hobby {

}
</style>
