<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue';
import SmallTitle from '../smallTitle/smallTitle.vue'
import './SalesComparison.less'
// import cylinderTop from '../../../../assets/image/cylinderTop.png'


// 季月年的选中
let selectType = ref<number>(1)
// 线上的百分比
let onLineValue = ref<number>(10)



onMounted(async () => {
    const res: any = await handleGetData()

})

// 修改选择的季月年
const handleChangeType = async (value: number) => {
    selectType.value = value
}

const handleGetData = async () => {

    let category: string[] = []
    let seriesData: number[] = []
    let realData: string[] = []


    let res: any = {
        category: category,// x轴的内容
        seriesData: seriesData,// y轴的数据
        realData: realData// 真实数据
    }
    return res
}



</script>


<template>
    <div class="SalesComparisonBox">
        <SmallTitle :title="'线上线下销售额对比'" :pageType="'center'"></SmallTitle>

        <div class="SalesComparisonContent">
            <div class="SalesComparison">

                <!-- 线上 -->
                <div class="defaultCylinder">
                    <div class="cylinderTop"></div>
                    <div class="cylinderBottom"></div>
                    <div class="cylinderOnline" :style="{ bottom: onLineValue + '%' }"></div>
                    <div class="cylinderHave" :style="{ height: `calc(${onLineValue}% + 6px)` }"></div>
                    <div class="cylinderOnlineBottom"></div>
                </div>

                <!-- 线下 -->
                <div class="defaultCylinder">
                    <div class="cylinderTop"></div>
                    <div class="cylinderBottom"></div>
                    <div class="cylinderOnline" :style="{ bottom: onLineValue + '%' }"></div>
                    <div class="cylinderHave" :style="{ height: `calc(${onLineValue}% + 6px)` }"></div>
                    <div class="cylinderOnlineBottom"></div>
                </div>

                
            </div>
        </div>

    </div>

</template>