<template>
    <view class="data-statistics">
        <view class="filter">
            <view class="range">
                <text
                    v-for="item in range"
                    :key="item.value"
                    :class="{ active: curDate === item.value }"
                    @click="handleActiveDate(item.value)"
                >
                    {{ item.label }}
                </text>
            </view>
        </view>
        <view class="chart">
            <DataOverview />
            <DeviceStatistics />
            <OrderStatistics />
        </view>
        <view class="tooltip" :style="tooltipStyle">{{ tooltipContent }}</view>
    </view>
    <canvas canvas-id="content" id="content"></canvas>
    <!-- 添加遮罩层是为了点击空白处关闭tooltip -->
    <view
        class="mask"
        v-if="maskShow"
        :style="{ height: maskHeight + 'px' }"
        @click="handleMaskClick"
    ></view>
</template>

<script setup lang="ts">
import { getCurrentInstance, provide, ref, shallowRef } from 'vue'
import DataOverview from './components/data-overview.vue'
import DeviceStatistics from './components/device-statistics.vue'
import OrderStatistics from './components/order-statistics.vue'
import { onReady } from '@dcloudio/uni-app'

const tooltipContent = ref('')
const tooltipStyle = ref()
const maskHeight = ref()
const canvasCtx = ref()
const instance = getCurrentInstance()

onReady(() => {
    canvasCtx.value = uni.createCanvasContext('content')
    uni.createSelectorQuery()
        .in(instance)
        .select('.chart')
        .boundingClientRect(data => {
            maskHeight.value = data.height
        })
        .exec()
})
const maskShow = ref(false)
// 更新tooltip的位置
const getTooltipStyle = ({ left, top, content }) => {
    const metrics = canvasCtx.value.measureText(content)
    tooltipStyle.value = {
        top: top - 40 + 'px',
        left: left - (metrics.width + 56) / 2 + 'px',
        display: 'block'
    }
    tooltipContent.value = content
    maskShow.value = !maskShow.value
}
const handleMaskClick = () => {
    if (tooltipStyle.value.display === 'block') {
        tooltipStyle.value.display = 'none'
        maskShow.value = false
    }
}
const range = shallowRef([
    { label: '日', value: 1 },
    { label: '月', value: 2 },
    { label: '年', value: 3 }
])
const curDate = ref(1)
const handleActiveDate = (val: number) => {
    curDate.value = val
}
provide('statistics', {
    getTooltipStyle
})
</script>

<style lang="scss" scoped>
.data-statistics {
    width: 100vw;
    background-color: $gray-1;
    position: relative;
    @include flex-direction;
    gap: 20rpx;
    .filter {
        @include flex-center(flex-end);
        background-color: $white-1;
        padding: 18rpx 0;
        .range {
            display: flex;
            margin-right: 32rpx;
            > text {
                line-height: 48rpx;
                width: 100rpx;
                text-align: center;
                border-width: 1px;
                border-style: solid;
                border-color: $gray-3 $gray-3 $gray-3 transparent;
                &:first-child {
                    border-left-color: $gray-3;
                }
                &.active {
                    background-color: $blue-1;
                    color: $white-1;
                    border-left: none;
                }
            }
        }
    }
    .chart {
        @include flex-direction;
        gap: 20rpx;
    }
    .tooltip {
        display: none;
        position: absolute;
        font-size: 24rpx;
        padding: 0 24rpx;
        border-radius: 12rpx;
        background-color: rgba(0, 0, 0, 0.5);
        color: $white-1;
        line-height: 60rpx;

        &::before {
            content: '';
            position: absolute;
            left: 50%;
            bottom: -16rpx;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 16rpx 8rpx 0 8rpx;
            border-color: rgba(0, 0, 0, 0.5) transparent transparent transparent;
        }
    }
}
#content {
    display: none;
}
.mask {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: transparent;
}
</style>
