<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="feed">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '%feed.records%',
  },
}
</route>
<template>
  <view class="min-h-screen bg-white">
    <wd-navbar
      title="喂养记录"
      left-arrow
      fixed
      :placeholder="true"
      :bordered="false"
      safeAreaInsetTop
      @click-left="handleClickLeft"
    >
      <template #right>
        <text @click="handleClickRight" class="text-sm text-[#333]">统计</text>
      </template>
    </wd-navbar>

    <view class="pb-[30rpx]">
      <!-- 主要内容区 -->
      <view class="">
        <!-- 日历部分 -->
        <!-- <view class="bg-white px-4 py-3">
          <view class="flex items-center justify-between mb-4">
            <span class="text-sm text-gray-600">2023/12月</span>
            <view class="flex space-x-1">
              <i class="fas fa-chevron-left text-gray-400 text-xs"></i>
              <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
            </view>
          </view>

          <view class="grid grid-cols-7 gap-2 text-center">
            <view
              v-for="day in ['一', '二', '三', '四', '五', '六', '日']"
              :key="day"
              class="text-xs text-gray-400"
            >
              {{ day }}
            </view>
            <view
              v-for="date in 31"
              :key="date"
              class="relative h-8 flex items-center justify-center"
            >
              <span :class="date === 15 ? 'text-orange-500' : 'text-gray-600'" class="text-sm">
                {{ date }}
              </span>
              <view
                v-if="date === 15"
                class="absolute bottom-1 w-1 h-1 rounded-full bg-orange-500"
              ></view>
            </view>
          </view>
        </view> -->

        <view class="box-border pb-[32rpx]">
          <view
            :class="showCalendar ? 'h-[465rpx]' : 'h-[236rpx]'"
            class="pt-[32rpx] overflow-hidden"
          >
            <wd-calendar-view
              style="
                --wot-calendar-week-fs: 32rpx;
                --wot-calendar-day-fw: 400;
                --wot-calendar-panel-title-fs: 32rpx;
                --wot-calendar-day-height: 100.26rpx;
              "
              type="daterange"
              :show-panel-title="true"
              :show-confirm="false"
              :formatter="formatter"
              v-model="value"
              @change="handleChange"
            />
          </view>

          <wd-divider>
            <wd-icon
              @click="showCalendar = !showCalendar"
              :name="showCalendar ? 'arrow-up' : 'arrow-down'"
              size="36rpx"
              color="#333"
            />
          </wd-divider>
        </view>
        <wd-gap bg-color="#F2F2F2"></wd-gap>
        <view class="p-4 text-[#333]">2020年12月15日 {{ value }}</view>

        <template v-if="records.length">
          <FeedBnaner />
          <RecordList :dataList="records" />
        </template>

        <Empty v-else top="pt-[200rpx]" />
      </view>

      <!-- 悬浮添加按钮 -->

      <HoverButton
        @onButton="
          () => {
            showPopup = !showPopup
          }
        "
      />
    </view>

    <FeedWdPopup v-model:show="showPopup" />
  </view>
</template>

<script setup>
  import Empty from '@/components/empty/empty.vue'
  import FeedBnaner from '@/components/feedBnaner/feedBnaner.vue'
  import RecordList from '@/components/record-list/record-list.vue'
  import FeedWdPopup from '@/components/feed-wd-popup/feed-wd-popup.vue'
  import HoverButton from '@/components/hover-button/hover-button.vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { ref } from 'vue'

  onLoad(({ id }) => {
    if (id) {
      //请求宝宝得参数
      // records.value = [0]
    } else {
      console.log(4567)
      //没有宝宝参数
      records.value = []
    }
  })
  // 获取屏幕边界到安全区域距离
  const { safeAreaInsets } = uni.getSystemInfoSync()
  const babyAvatarUrl = ref(
    'https://ai-public.mastergo.com/ai/img_res/8a91ddc9c5fd46352c7b33ff40870fb7.jpg',
  )

  const records = ref([
    {
      id: '0',
      type: 1,
      time: '13:00',
      title: '喂奶 200ml',
      desc: '宝宝今天胃口很好',
      imageCount: 0,
      recorder: '妈妈 王小美',
      image: 'https://ai-public.mastergo.com/ai/img_res/3d04b8dc21d0fe5f0f639f125fbd5c53.jpg',
    },
    {
      id: '1',
      type: 2,
      time: '10:00-13:00',
      title: '母乳喂养',
      desc: '持续了30分钟',
      recorder: '妈妈 王小美',
      imageCount: 2,
      image: 'https://ai-public.mastergo.com/ai/img_res/3d04b8dc21d0fe5f0f639f125fbd5c53.jpg',
    },
    {
      id: '2',
      type: 3,
      time: '10:00',
      title: '辅食 50ml',
      desc: '今天尝试了新的米糊，宝宝很喜欢',
      recorder: '妈妈 王小美',
      imageCount: 0,
      image: '',
    },
  ])

  const showCalendar = ref(true)
  const showPopup = ref(false)

  const dataList = ref()

  // const { show: showToast } = useToast()
  function handleClickRight() {
    uni.navigateTo({
      url: '/pages/feed-statistics/feed-statistics',
    })
  }

  function handleClickLeft() {
    uni.navigateBack()
  }

  const value = ref(1741881600000)

  function handleChange({ value }) {
    console.log(value)
  }

  const formatter = (day) => {
    const date = new Date(day.date)
    const now = new Date()
    const year = date.getFullYear()
    const month = date.getMonth()
    const da = date.getDate()
    const nowYear = now.getFullYear()
    const nowMonth = now.getMonth()
    const nowDa = now.getDate()

    if (year === nowYear && month === nowMonth && da === nowDa) {
      // day.topInfo = '今天'
      day.bottomInfo = '·'
    }

    // if (month === 5 && da === 18) {
    //   day.topInfo = '618大促'
    // }

    // if (month === 10 && da === 11) {
    //   day.topInfo = '京东双11'
    // }

    // if (day.type === 'start') {
    //   day.bottomInfo = '开始'
    // }

    // if (day.type === 'end') {
    //   day.bottomInfo = '结束'
    // }

    // if (day.type === 'same') {
    //   day.bottomInfo = '开始/结束'
    // }

    return day
  }
</script>

<style scoped>
  .border-b {
    border-color: rgba(229, 231, 235, 0.5);
  }

  ::v-deep .wd-month__day.is-start .wd-month__day-container,
  ::v-deep .wd-month__day,
  ::v-deep .wd-month__day.is-end .wd-month__day-container {
    border-radius: 50%;
  }

  ::v-deep .wd-month__day-bottom {
    bottom: 0px;
    font-size: 1rem;
  }

  ::v-deep .wd-month__day-text {
    font-size: 0.875rem;
    /* color: #666; */
  }

  ::v-deep .wd-month-panel__title {
    margin-bottom: 32rpx;
    font-weight: 600;
  }
  ::v-deep .wd-month-panel__weeks {
    font-weight: 600;
  }
  /* ::v-deep .wd-month__day {
    width: 14.285%;
    height: 14.285% !important;
  }

  ::v-deep .wd-month__day.is-start .wd-month__day-container {
    width: 100%;
    height: 100%;
  } */
</style>
