<template>
    <page-meta :page-style="$theme.pageStyle">
        <!-- #ifndef H5 -->
        <navigation-bar :front-color="$theme.navColor" :background-color="$theme.navBgColor" />
        <!-- #endif -->
    </page-meta>
    <page-status :status="status">
        <view class="ai-creation">
            <view class="flex-1">
                <u-field @click="showCalendar = true" v-model="dateRange" :disabled="true" label="时间"
                    placeholder="请选择时间范围" right-icon="arrow-down-fill">
                </u-field>
                <tabs :current="current" :swipeable="true" @change="handleChange" height="80" bar-width="60"
                    :barStyle="{ bottom: '0' }">
                    <tab name="模板">
                        <view class="news-list pt-[20rpx]">
                            <VerticalBarChart :data="chartData" title="模板使用人数" />
                            <VerticalBarChart :data="chartData2" title="模板使用次数" />
                        </view>
                    </tab>
                    <tab name="部门">
                        <view class="news-list pt-[20rpx]">
                            <VerticalPieChart :data="chartData4" title="部门使用次数" />
                        </view>
                    </tab>
                    <tab name="个人">
                        <view class="news-list pt-[20rpx]">
                            <VerticalBarChart :data="chartData3" title="个人使用次数" />
                        </view>
                    </tab>
                </tabs>
            </view>
        </view>
        <u-calendar v-model="showCalendar" :mode="mode" @change="changeCalendar"></u-calendar>
    </page-status>
    <tabbar />

</template>

<script setup lang="ts">
import { getCharts } from '@/api/user'
import { onLoad, onPullDownRefresh, onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'
import VerticalBarChart from './_components/chart.vue'
import VerticalPieChart from './_components/pie-chart.vue'
import { PageStatusEnum } from '@/enums/appEnums'
import { cloneDeep } from 'lodash-es'
import Tabs from '@/packages/components/tabs/tabs.vue'
import Tab from '@/packages/components/tab/tab.vue'
import uCalendar from '@/uni_modules/vk-uview-ui/components/u-calendar/u-calendar.vue'
import uField from '@/uni_modules/vk-uview-ui/components/u-field/u-field.vue'
import { useUserStore } from '@/stores/user'
import { useRouter } from 'uniapp-router-next'

const userStore = useUserStore()
const router = useRouter()


// 获取昨天往前7天的日期范围
const getDateRange = () => {
    const today = new Date()
    const yesterday = new Date(today)
    yesterday.setDate(today.getDate() - 1)
    const startDate = new Date(yesterday)
    startDate.setDate(startDate.getDate() - 6)
    const start = formatDate(startDate)
    const end = formatDate(yesterday)
    return `${start} ~ ${end}`
}


// 格式化日期
const formatDate = (date: Date) => {
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    return `${year}-${month}-${day}`
}



const status = ref(PageStatusEnum.LOADING)
const dateRange = ref(getDateRange())
const showCalendar = ref(false)
const mode = ref('range')
const queryParams = ref({
    startTime: getDateRange().split(' ~ ')[0] + ' 00:00:00',
    endTime: getDateRange().split(' ~ ')[1] + ' 23:59:59',
})


const current = ref<number>(0)
const handleChange = (index: number) => {
    current.value = Number(index)
}

const chartData = ref([])
const chartData2 = ref([])
const chartData3 = ref([])
const chartData4 = ref([])

// 获取数据
const getData = async () => {
    try {

        const responseData = await getCharts(queryParams.value)
        console.log('responseData', responseData);
        chartData.value = responseData.modelUseUserTotal.map((item: any) => ([item.name, item.total]))
        chartData2.value = responseData.modelVisitTotal.map((item: any) => ([item.name, item.total]))
        chartData3.value = responseData.userUseTotalList.map((item: any) => ([item.name, item.total]))
        chartData4.value = responseData.companyTotalList.map((item: any) => ({ name: item.name, value: item.total }))


        status.value = PageStatusEnum.NORMAL
    } catch (error) {
        console.log('error', error);
        if (!userStore.isLogin) {
            uni.$u.toast('未登录')
            router.navigateTo({ path: '/pages/login/login' })
        }
        status.value = PageStatusEnum.ERROR
    }
}
onLoad(() => {
    getData()
})

// 选择日期
const changeCalendar = (e: Object) => {
    console.log('range', e);
    dateRange.value = e.startDate + ' ~ ' + e.endDate
    queryParams.value.startTime = e.startDate + ' 00:00:00'
    queryParams.value.endTime = e.endDate + ' 23:59:59'
    getData()
}






//下拉状态
// const refresherStatus = ref(false)

// //下拉刷新
// const refresh = async () => {
//     refresherStatus.value = true
//     await getData()
//     refresherStatus.value = false
// }

// const refreshDebounce = () => {
//     uni.$u.debounce(refresh, 500)
// }

</script>

<style lang="scss">
page {
    height: 100%;
}

.ai-creation {
    // height: 100%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(44.7deg, #eaffff 0%, #faf6ff 50%, #f2f3ff 63%, #eaffff 100%);
    background-size: cover;
}
</style>
