<template>
  <view
    :style="{
      background: `linear-gradient(to bottom, #ff803a 0, #ff803a ${getNavBarHeight() * 2}px, transparent ${getNavBarHeight() * 2}px, transparent 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.ALL_TYPE" class="all-type-img" @click="openPopup"></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"></view>
      </view>
    </view>

    <!-- 主要内容区域 -->
    <view class="body">666</view>
  </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">全部类型</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'

export default {
  name: 'CashFlowPage',
  components: { uniPopup },
  data() {
    const currentDate = this.getDate()
    return {
      getNavBarHeight,
      date: currentDate,
      startDate: this.getDate('start'),
      endDate: this.getDate('end'),
      expenseTypes: [
        '餐饮',
        '交通',
        '服饰',
        '购物',
        '服务',
        '教育',
        '娱乐',
        '运动',
        '生活缴费',
        '旅行',
        '宠物',
        '医疗',
        '保险',
        '公益',
        '发红包',
      ],
    }
  },
  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.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 {
    &-img {
      width: 138px;
      height: 40px;
    }
  }

  .cash-flow {
    height: 100%;
    display: flex;
    align-items: center;

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

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

    .cash-flow-detail {
    }
  }
}

// 主要内容区域
.body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  //background: #ca3232;
  border-radius: 40rpx;
  margin: 0 30rpx;
  padding: 40rpx;
}

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;
}

.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: rgba(204, 67, 67, 0.95);
  color: #fff;
  //border-radius: 50rpx;
  margin: 20rpx 0;
  width: 33%;
}

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

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