<template>
  <view
    :style="{
      background: `linear-gradient(to bottom, #ff803a 0, #ff803a ${getNavBarHeight() * 2}px, #F7F7F7 ${getNavBarHeight() * 2}px, #F7F7F7 100%)`,
    }"
    class="page"
  >
    <!-- 头部区域 -->
    <custom-nav-bar3 title="收支明细"></custom-nav-bar3>
    <view :style="{ height: getNavBarHeight() + 'px' }" class="fill"></view>
    <view :style="{ height: getNavBarHeight() + 'px' }" class="header">
      <view class="all-type">
        <image :src="commonEnum.TYPE_SELECT" class="all-type-img" @click="openPopup">
          <text>{{ expenseType }}</text>
        </image>
      </view>
      <view class="cash-flow">
        <view class="date">
          <view class="uni-list-cell">
            <view class="uni-list-cell-db">
              <picker
                :end="endDate"
                :start="startDate"
                :value="date"
                mode="date"
                @change="bindDateChange"
              >
                <view class="uni-input">{{ date }}</view>
              </picker>
            </view>
          </view>
          <image :src="commonEnum.DOWN_ICON"></image>
        </view>
        <view class="cash-flow-detail">支出￥{{ expenditures }} 入账￥{{ Recorded }}</view>
      </view>
    </view>

    <!-- 卡片区域 -->
    <cash-flow-card v-for="(item, index) in cardList" :key="index" :cardData="item" />
  </view>
  <!-- 底部弹窗 -->
  <uni-popup ref="popup" :mask-click="true" type="bottom">
    <view class="popup-content">
      <!-- 弹窗标题栏 -->
      <view class="popup-header">
        <text class="close-icon" @click="closePopup">✕</text>
        <text class="title">请选择类型</text>
      </view>

      <!-- “全部类型”按钮 -->
      <button class="all-types-btn" @click="selectType('全部类型')">全部类型</button>

      <!-- 支出分类网格 -->
      <view class="type-grid">
        <view
          v-for="(type, index) in expenseTypes"
          :key="index"
          class="type-item"
          @click="selectType(type)"
        >
          {{ type }}
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script>
import commonEnum from '../../enum/commonEnum'
import { getNavBarHeight } from '../../utils/system'
import uniPopup from '../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue'
import CashFlowCard from '../../components/cashFlowCard/cashFlowCard.vue'

export default {
  name: 'CashFlowPage',
  components: { uniPopup, CashFlowCard },
  data() {
    const currentDate = this.getDate()
    return {
      getNavBarHeight,
      expenseType: '全部类型',
      expenditures: '1000.00',
      Recorded: '1000.00',
      date: currentDate,
      startDate: this.getDate('start'),
      endDate: this.getDate('end'),
      expenseTypes: [
        '餐饮',
        '交通',
        '服饰',
        '购物',
        '服务',
        '教育',
        '娱乐',
        '运动',
        '生活缴费',
        '旅行',
        '宠物',
        '医疗',
        '保险',
        '公益',
        '发红包',
      ],
      cardList: [
        {
          date: '4月28日',
          outflow: 200.0,
          inflow: 200.0,
          items: [
            {
              title: '提现',
              status: '审核中',
              time: '15:22',
              orderNumber: '213646848744124758',
              amount: -200.0,
            },
            {
              title: '订单',
              time: '15:22',
              orderNumber: '213646848744124758',
              amount: 200.0,
            },
          ],
        },
        {
          date: '4月28日',
          outflow: 200.0,
          inflow: 200.0,
          items: [
            {
              title: '提现',
              status: '审核中',
              time: '15:22',
              orderNumber: '213646848744124758',
              amount: -200.0,
            },
            {
              title: '订单',
              time: '15:22',
              orderNumber: '213646848744124758',
              amount: 200000.0,
            },
          ],
        },
      ],
    }
  },
  computed: {
    commonEnum() {
      return commonEnum
    },
  },
  onLoad() {
    // 页面加载时的逻辑
  },
  methods: {
    // 日期选择变化处理
    bindDateChange: function (e) {
      this.date = e.detail.value
    },
    getDate(type) {
      const date = new Date()
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let day = date.getDate()

      if (type === 'start') {
        year = year - 10
      } else if (type === 'end') {
      }
      month = month > 9 ? month : '0' + month
      day = day > 9 ? day : '0' + day
      return `${year}-${month}-${day}`
    },
    // 打开弹窗
    openPopup() {
      this.$refs.popup.open()
    },
    // 关闭弹窗
    closePopup() {
      this.$refs.popup.close()
    },
    // 选择类型
    selectType(type) {
      console.log('选择的类型：', type)
      this.expenseType = type
      this.closePopup()
    },
  },
}
</script>
<style lang="scss" scoped>
.page {
  position: relative;
  height: 100vh;
}

.header {
  //background: #13c622;
  position: relative;
  display: flex;
  flex-direction: column;
  padding-left: 40rpx;

  .all-type {
    position: relative;
    display: flex;
    width: 138px;
    height: 40px;

    &-img {
      width: 100%;
      height: 100%;
      display: flex;

      text {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 40px;
        color: #ffffff;
        line-height: 40px;
        //border: red 1px solid;
        align-items: center;
        justify-content: center;
        padding-left: 40rpx;
      }
    }
  }

  .cash-flow {
    height: 84rpx;
    display: flex;
    align-items: center;

    .date {
      display: flex;
      color: white;
      align-items: center;

      image {
        width: 19px;
        height: 11px;
      }
    }

    .cash-flow-detail {
      margin-left: 22rpx;
      color: white;
      font-size: 24rpx;
    }
  }
}

view {
  // border: #16ff00 1px solid;
}

/* 弹窗内容样式 */
.popup-content {
  background-color: #fff;
  border-radius: 16rpx 16rpx 0 0;
  padding: 20rpx;
}

/* 弹窗标题栏 */
.popup-header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 20rpx 0;
  border-bottom: #b8bed1 solid 1px;
  margin-bottom: 20rpx;
}

.close-icon {
  position: absolute;
  left: 20rpx;
  font-size: 32rpx;
  color: #999;
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
}

/* “全部类型”按钮 */
.all-types-btn {
  background-color: #ff803a;
  color: #f5f5f5;
  //border-radius: 50rpx;
  margin: 0 0;
  width: 30%;
  height: 100rpx;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 支出分类网格 */
.type-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20rpx 0;
}

.type-item {
  width: 30%;
  height: 100rpx;
  background-color: #fff;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20rpx;
  font-size: 28rpx;
  box-shadow: #ff803a 0 2rpx 8rpx;
}
</style>
