<template>
  <view>
    <view>
      <StoreDropDown></StoreDropDown>
    </view>

    <view class="bg-primary p-base text-center text-white relative">
      <view class="absolute top-20rpx right-20rpx">
        <uv-icon color="#fff" size="48rpx" name="chat"></uv-icon>
      </view>
      <view class="mt-60rpx">昨日累计金额</view>
      <view class="mt-20rpx">截止2024-03-21</view>
      <view class="flex items-center mt-40rpx">
        <view class="flex-1 text-center">
          <view>销售</view>
          <view>20000</view>
        </view>
        <view class="h-80rpx flex-none flex-center">
          <uv-line direction="vertical"></uv-line>
        </view>
        <view class="flex-1 text-center">
          <view>支出</view>
          <view>20000</view>
        </view>
      </view>
    </view>
    <view>
      <view class="h-80rpx leading-80rpx px-base">近30天趋势数据</view>
    </view>
    <view>
      <uv-tabs
        :activeStyle="{ color: '#ee2c37' }"
        lineColor="#ee2c37"
        :list="list"
        @click="onTabClick"
        :scrollable="false"
      ></uv-tabs>
      <ChartComp></ChartComp>
    </view>
  </view>
</template>
<script setup>
import { ref, reactive, computed } from 'vue'
import ChartComp from './components/chart.vue'
import StoreDropDown from '@/pages/home/components/store-drop-down/index.vue'

const list = ref([
  {
    name: '销售金额',
  },
  {
    name: '支出金额',
  },
])

const onTabClick = (e) => {
  console.log(e)
}
</script>
