<template>
    <v-container>
        <v-navigation-drawer
                v-model="drawerRight"
                fixed
                right
                clipped
                app
        >
            <!--            <v-list dense>-->
            <!--                <v-list-tile @click.stop="right = !right">-->
            <!--                    <v-list-tile-action>-->
            <!--                        <v-icon>exit_to_app</v-icon>-->
            <!--                    </v-list-tile-action>-->
            <!--                    <v-list-tile-content>-->
            <!--                        <v-list-tile-title>Ope Temporary Drawer</v-list-tile-title>-->
            <!--                    </v-list-tile-content>-->
            <!--                </v-list-tile>-->
            <v-list subheader>
                <v-subheader>列表</v-subheader>
                <v-list-tile
                        v-for="item in items"
                        :key="item.title"
                        @click="switchTable(item)"
                        avatar
                >
                    <v-list-tile-action>
                        <svg class="icon" aria-hidden="true">
                            <use :xlink:href="item.iconName"></use>
                        </svg>
                    </v-list-tile-action>

                    <v-list-tile-content>
                        <v-list-tile-title v-html="item.title"></v-list-tile-title>
                    </v-list-tile-content>

                    <v-list-tile-action>
                        <v-icon v-show="item.active"
                                color="green"
                        >check
                        </v-icon>
                    </v-list-tile-action>
                </v-list-tile>
            </v-list>

        </v-navigation-drawer>
        <v-toolbar
                fixed
                app
                clipped-right
        >
            <!--                        <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>-->
            <v-toolbar-title>仪表盘</v-toolbar-title>
            <v-spacer></v-spacer>

            <span class="body-2"
                  @click.stop="drawerRight = !drawerRight"
            >
                <svg class="icon" aria-hidden="true" style="vertical-align: middle; margin-right: 5px"><use
                        :xlink:href="selectedItem.iconName"></use></svg>
                <span style="vertical-align: middle; margin-right: 2px" v-text="selectedItem.title"></span>
                <v-icon style="vertical-align: middle">menu</v-icon>
            </span>

            <!--            <v-btn  large-->
            <!--                    left-->
            <!--                   @click.stop="drawerRight = !drawerRight">-->
            <!--                未返还税金分析-->
            <!--                <v-icon>menu</v-icon>-->
            <!--            </v-btn>-->
            <!--            <v-toolbar-side-icon @click.stop="drawerRight = !drawerRight"></v-toolbar-side-icon>-->
        </v-toolbar>
        <v-container ma-0 pa-0>
            <Tableau :url="chartUrl"
                     width="100%"
                     ref="tableau"
                     :apiUrl="tableauApiUrl"
            >
            </Tableau>
        </v-container>
    </v-container>
</template>

<script>
    import Tableau from './Tableau'

    export default {
        data: () => ({
            chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauTaxCategoryUnreturnedTax',
            tableauApiUrl: require('../assets/tableaujs.js'),
            // tableauApiUrl: 'https://public.tableau.com/javascripts/api/tableau-2.2.2.min.js',
            drawer: null,
            drawerRight: null,
            right: false,
            left: false,
            items: [
                {
                    iconName: '#d-iconyihuankuanbufen',
                    active: false,
                    title: '税种未返还税金分析',
                    chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauTaxCategoryUnreturnedTax',
                },
                {
                    iconName: '#d-iconyihuankuanbufen',
                    active: false,
                    title: '地区未返还税金分析',
                    chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauDistrictUnreturnedTax',
                },
                {
                    iconName: '#d-iconCompare',
                    active: false,
                    title: '未返还/返还后税金比较',
                    chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauUnreturnedAndReturnedTax',
                },
                {
                    iconName: '#d-iconCompare',
                    active: false,
                    title: '费用分析',
                    chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauCostAnalysis',
                },
                {
                    iconName: '#d-iconhuaban',
                    active: false,
                    title: '地区利润总额/亏损额',
                    chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauDistrictProfitAndLoss',
                },
                {
                    iconName: '#d-iconhuaban',
                    active: false,
                    title: '公司利润总额/亏损额',
                    chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauCompanyProfitAndLoss',
                },
                {
                    iconName: '#d-iconqita1',
                    active: false,
                    title: '司机/员工人数',
                    chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauDriverAndEmployee',
                },
                {
                    iconName: '#d-iconqita1',
                    active: false,
                    title: '业务线GMV及补贴统计',
                    chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauGmvAndSubsidy',
                },
                {
                    iconName: '#d-iconqita1',
                    active: false,
                    title: '档案归档情况',
                    chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauFileArrangement',
                },
                {
                    iconName: '#d-iconqita1',
                    active: false,
                    title: '国际税全球概览',
                    chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauGlobalOverview',
                },

                {
                    iconName: '#d-iconqita1',
                    active: false,
                    title: '国际税业务数据',
                    chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauGlobalBusiness',
                },
                {
                    iconName: "#d-iconmexico",
                    active: false,
                    title: '墨西哥税务分析',
                    chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauMexicanTax',
                },
                {
                    iconName: '#d-iconaodaliya',
                    active: false,
                    title: '澳洲税务分析',
                    chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauAustralianTax',
                },
                {
                    iconName: '#d-iconbaxi',
                    active: false,
                    title: '巴西税务分析',
                    chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauBrazilianTax',
                },
                {
                    iconName: '#d-iconqita',
                    active: false,
                    title: '其他国家税务分析',
                    chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauOtherTaxAnalysis',
                },
            ],
            selectedItem: null
        }),

        props: {
            source: String
        },

        components: {
            Tableau
        },

        created() {
            this.selectTable(this.items[0])

            // Axios使用示例
            // this.$axios({
            //     method: 'get',
            //     url: 'https://api.coindesk.com/v1/bpi/currentprice.json',
            // }).then((response) => {          //这里使用了ES6的语法
            //     console.log(response)       //请求成功返回的数据
            // }).catch((error) => {
            //     console.log(error)       //请求失败返回的数据
            // })

        },

        mounted() {

            // console.log(process.env.VUE_APP_TABLEAU_API)

        },

        methods: {
            selectTable(item) {

                if (this.selectedItem != null) {
                    this.selectedItem.active = false
                }

                item.active = true
                this.selectedItem = item
            },

            switchTable(item) {
                this.selectTable(item)
                this.drawerRight = !this.drawerRight
                this.chartUrl = this.selectedItem.chartUrl
            }
        }


    }
</script>

<style scoped>

</style>