<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"></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>
        </view>
        <view class="cash-flow-detail"></view>
      </view>
    </view>

    <!-- 主要内容区域 -->
    <view class="body">666</view>
  </view>
</template>

;

<script>
import commonEnum from '../../enum/commonEnum'
import { getNavBarHeight } from '../../utils/system'

export default {
  name: 'AgentsPage',

  data() {
    const currentDate = this.getDate({
      format: true,
    })
    return {
      getNavBarHeight,
      date: currentDate,
    }
  },
  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') {
        year = year + 10
      }
      month = month > 9 ? month : '0' + month
      day = day > 9 ? day : '0' + day
      return `${year}-${month}-${day}`
    },
  },
}
</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 {
    display: flex;

    .date {
    }

    .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;
}
</style>
