<template>
  <hs-card>
    <view>
      <view class="data_header">
        <MyDaySelect
          :day="useModel.formData.day"
          v-model:valueModel="useModel.formData.day"
        />
        <hs-day-picker
          v-model:valueModel="useModel.formData.day"
          icon="calendar"
        />
      </view>
      <view class="data_total_price">
        <view class="data_title">交易金额(元)</view>
        <view class="prices"> <text>¥</text>0.00 </view>
      </view>
      <view class="data_item_list">
        <view class="data_item">
          <view class="data_label">订单数(笔)</view>
          <view class="data_value">321</view>
        </view>
        <view class="data_item">
          <view class="data_label">总重量(Kg)</view>
          <view class="data_value">321</view>
        </view>
        <view class="data_item">
          <view class="data_label">总计件</view>
          <view class="data_value">321</view>
        </view>
      </view>
    </view>
  </hs-card>
</template>
<script setup lang="ts">
import { watch } from "vue";
import MyDaySelect from "./daySelect.vue";
import useModel from "../model";
import method from "../method";
</script>
<style lang="scss" scoped>
.data_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 0 40rpx 0;
}
.data_total_price {
  text-align: center;
  padding: 10rpx 0 30rpx 0;
  .data_title {
    color: #999;
    font-size: 25rpx;
    padding-bottom: 8rpx;
    font-weight: 500;
  }
  .prices {
    color: #f00;
    font-size: 40rpx;
    font-weight: bold;
    text {
      font-size: 25rpx;
    }
  }
}
.data_item_list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding-bottom: 40rpx;
  .data_item {
    width: 33.333%;
    padding: 20rpx 0 0 0;
    text-align: center;
    .data_label {
      font-size: 22rpx;
      color: #999;
      padding-bottom: 8rpx;
    }
    .data_value {
      font-weight: 600;
      font-size: 35rpx;
    }
  }
}
</style>
