<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" @change="selectYear">
                        <el-option v-for="(item, index) in yearoptions" :key="index" :label="item" :value="item" />
                    </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">{{ totalObj?.budgetInput }}</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">{{ totalObj?.budgetOutput }}</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">{{ totalObj?.practicalInput }}</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">{{ totalObj?.practicalOutput }}</span>
                                <span class="text">元</span>
                            </div>
                        </div>
                    </HcGradientCard>
                </el-col>
            </el-row>
        </div>
        <HcTabsSimple :cur="tabsKey" :datas="tabsData" class="mt-6 tableui" @tab-click="tabsClick">
            <template #tab-all>
                <TabAll />
            </template>
            <template #tab-month>
                <TabMonth :cur="tabsKey" :checkyear="checkyear" />
            </template>
            <template #tab-decost>
                <TabDecost :cur="tabsKey" :checkyear="checkyear" />
            </template>
            <template #tab-mannager>
                <TabManager :cur="tabsKey" :checkyear="checkyear" />
            </template>
        </HcTabsSimple>
    </el-scrollbar>
</template>

 <script setup>
 import { onActivated, ref } 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'
 import mainApi from '~api/home/index'
 import mainApi1 from '~api/static/actual.js'
 import { getArrValue, getObjValue } from 'js-fast-way'
onActivated(async ()=>{
   await getYearList()
    budgetAndPracticalByBusiness()
})
const importModalClick = ()=>{

}
const checkyear = ref('')
const yearoptions = ref([
    
])
const selectYear = ()=>{
    budgetAndPracticalByBusiness()
}
//获取年度列表
const getYearList = async () => {
    const { error, code, data } = await mainApi.yearList()
    //判断状态
    if (!error && code === 200) {
        const arr = getArrValue(data)
        yearoptions.value = arr
        if ( yearoptions.value.length > 0) {
            checkyear.value = yearoptions.value[0]
        }
    } else {
        yearoptions.value = []
     
    }
}
//获取总经营数据
const totalObj = ref({})
const budgetAndPracticalByBusiness = async () => {
    const { error, code, data } = await mainApi1.budgetAndPracticalByBusiness(
     { year:checkyear.value },
    )
    //判断状态
    if (!error && code === 200) {
    console.log(data, 'data')
    totalObj.value = getObjValue(data)
    } else {
        totalObj.value = {}
    }
}
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>