<template>
  <window-size>
    <van-cell title="选择日期区间" :value="date" @click="showCalendar = true" />
    <van-calendar
      v-model:show="showCalendar"
      type="range"
      :min-date="minDate"
      :max-date="maxDate"
      @confirm="onConfirmDate"
    />
    <van-cell title="花费金额">
      <template #default>
        <span style="color: orangered">￥ {{ totalCost }}</span>
      </template>
    </van-cell>
    <div style="height: 3px"></div>
    <div style="background: white; text-align: center; font-size: 12px; padding: 0 10px">
      <div style="height: 5px"></div>
      <van-row>
        <van-col :span="10">项目名称</van-col>
        <van-col :span="5">单价</van-col>
        <van-col :span="4">数量</van-col>
        <van-col :span="5">金额</van-col>
      </van-row>
      <div style="height: 8px"></div>
      <div :style="scrollStyle">
        <div v-for="(fee, index) in fees.slice(pageSize * (currentPage - 1), pageSize * currentPage)" :key="index">
          <div style="height: 8px"></div>
          <van-row>
            <van-col :span="10">{{ fee.xmmc }}</van-col>
            <van-col :span="5">{{ fee.dj }}</van-col>
            <van-col :span="4">{{ fee.sl }}</van-col>
            <van-col :span="5">{{ fee.je }}</van-col>
          </van-row>
          <div style="height: 8px"></div>
        </div>
      </div>
      <div style="position: absolute; bottom: 0; left: 0; right: 0; background: white">
        <van-pagination
          v-model="currentPage"
          :total-items="fees.length"
          :items-per-page="pageSize"
          force-ellipses
          @change="handleCurrentPageChange"
        />
      </div>
    </div>
  </window-size>
</template>

<script setup>
import store from '@/store'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { getOneWeekOffset } from '@/utils/date'
import { getZyFees } from '@/api/inpatient-service'

const scrollStyle = {
  height: store.state.screenSize.h - 208 + 'px',
  overflowY: 'scroll',
}
const router = useRouter()
const params = router.currentRoute.value.params
const date = ref('')
const showCalendar = ref(false)
const minDate = new Date(2012, 0, 1)
const maxDate = new Date()
const fees = ref([])
const totalCost = ref('')
const currentPage = ref(1)
const pageSize = ref(30)
const handleCurrentPageChange = (val) => {
  currentPage.value = val
}
const onConfirmDate = (val) => {
  const [start, end] = val
  showCalendar.value = false
  date.value = `${formatDate(start)} - ${formatDate(end)}`
  params.start = formatDate(start)
  params.end = formatDate(end)
  getZyFees(params).then((res) => {
    fees.value = res.fees
    totalCost.value = res.totalCost
  })
}
onMounted(() => {
  const oneWeekOffset = getOneWeekOffset(params.admissDate)
  date.value = oneWeekOffset.start + ' - ' + oneWeekOffset.end
  params.start = oneWeekOffset.start
  params.end = oneWeekOffset.end
  getZyFees(params).then((res) => {
    fees.value = res.fees
    totalCost.value = res.totalCost
  })
})

function formatDate(date) {
  return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
}
</script>