<template>
  <tabbar :titles='["全部","充值","消费"]' :item-active-color='"#D95554"' :indicator-color='"#D95554"' />
  <view class='content'>
    <view class='c-flex-row'>
      <text>选择日期</text>
      <picker mode='date' @change='changeDate'>
        <view class='current-date c-flex-row'>
          <text>2024-02-10</text>
          <image :src='assetsUrl("ic_triangle_down.png")' />
        </view>
      </picker>
    </view>

    <scroll-view :scroll-y='true'>
      <trade-item v-for='(item,index) in tradeList' :key='index' :item='item' />
    </scroll-view>
  </view>
</template>

<script lang='ts' setup>
import { assetsUrl } from '@/utils/assets';
import TradeItem from '@/pages/mine/subs/trade/components/trade-item.vue';

const tradeList = ref([1, 2, 3, 4, 5]);

const changeDate = () => {

};
</script>

<style lang='scss' scoped>
.content {
  padding: 20rpx 24rpx;
}

.current-date {
  height: 50rpx;
  background: #FFFFFF;
  border-radius: 5rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: #333333;
  padding: 0 20rpx;
  margin-left: 10rpx;

  image {
    width: 19rpx;
    height: 11rpx;
    margin-left: 57rpx;
  }
}
</style>
