<template>
     <el-scrollbar class="hc-main-scrollbar">
        <div class="hc-main-row">
            <el-row :gutter="14" style="justify-content: flex-end;">
                <div class="ml-4">
                    <el-button size="large" type="primary" @click="importModalClick">
                        <HcIcon name="upload-cloud"/>
                        <span>导入</span>
                    </el-button>
                </div>
                <div class="w-36 ml-4">
                    <el-select v-model="checkyear" block clearable placeholder="选择年份" size="large">
                        <el-option v-for="item in yearoptions" :label="item.name" :value="item.key"/>
                    </el-select>
                </div>
            </el-row>
            <el-row :gutter="14" class="mt-4">
                    <el-col :span="6">
                        <HcGradientCard color="purple1">
                            <div class="hc-card-item-sub">
                                <div class="item-sub-title">总经营收入预算</div>
                                <div class="item-sub-num">
                                    <span class="num">120000</span>
                                    <span class="text">元</span>
                                </div>
                            </div>
                        </HcGradientCard>
                    </el-col>
                    <el-col :span="6">
                        <HcGradientCard color="blue1">
                            <div class="hc-card-item-sub">
                                <div class="item-sub-title">总经营支出预算</div>
                                <div class="item-sub-num">
                                    <span class="num">560</span>
                                    <span class="text">元</span>
                                </div>
                            </div>
                        </HcGradientCard>
                    </el-col>
                    <el-col :span="6">
                        <HcGradientCard color="red1">
                            <div class="hc-card-item-sub">
                                <div class="item-sub-title">总经营实际收入</div>
                                <div class="item-sub-num">
                                    <span class="num">90</span>
                                    <span class="text">元</span>
                                </div>
                            </div>
                        </HcGradientCard>
                    </el-col>
                    <el-col :span="6">
                        <HcGradientCard color="purple1">
                            <div class="hc-card-item-sub">
                                <div class="item-sub-title">总经营实际支出</div>
                                <div class="item-sub-num">
                                    <span class="num">125</span>
                                    <span class="text">元</span>
                                </div>
                            </div>
                        </HcGradientCard>
                    </el-col>
            </el-row>
            
        
        
           
        
        </div>
        <HcTabsSimple :cur="tabsKey" :datas="tabsData" @tabClick="tabsClick" class="mt-6 tableui" >
                    <template #tab-all>
                        <TabAll/>
                    </template>
                    <template #tab-month>
                        <TabMonth/>
                    </template>
                    <template #tab-decost>
                        <TabDecost/>
                    </template>
                    <template #tab-mannager>
                        <TabManager/>
                    </template>
        
         </HcTabsSimple>
    </el-scrollbar>
</template>

 <script setup>
 import {ref, watch} from "vue";
 import TabAll from './components/tab-all.vue'
 import TabMonth from './components/tab-month.vue'
 import TabDecost from './components/tab-decost.vue'
 import TabManager from './components/tab-mannager.vue'

const importModalClick=()=>{

}
const checkyear=ref('')
const yearoptions=ref([
    {name:'2021年',key:2021,},
    {name:'2022年',key:2022,},
    {name:'2023年',key:2023,},
])
const tabsKey=ref('all')
const tabsData=ref([
    {icon: 'bar-chart-box', label: '汇总统计', key: 'all'},
    {icon: 'bar-chart-box', label: '月度统计', key: 'month'},
    {icon: 'bar-chart-box', label: '部门支出统计', key: 'decost'},
    {icon: 'bar-chart-box', label: '人工/管理统计支出占比', key: 'mannager'},
])
const tabsClick = (key) => {
    tabsKey.value = key
}
</script>
<style lang="scss" scoped>
@import "~src/styles/static/actual.scss";

</style>
<style lang="scss" >
 .tableui.hc-sb-table .el-tabs .el-tabs__content {
 height:auto;  
}

</style>