<template>
  <template v-if="type == 1">
    <ItemForm label="喂奶方式">
      <template #default>
        <PickerInfo
          :columns="feedMethodList"
          title="喂奶方式"
          v-model:value="nurseMethod"
          @confirm="handleConfirm2"
        />
      </template>
    </ItemForm>

    <ItemForm v-if="nurseMethod != 1" label="喂奶量">
      <template #default>
        <view class="px-4 pt-2">
          <wd-input
            no-border
            type="number"
            placeholder="请填写"
            maxlength="30"
            v-model="nurseAmount"
          >
            <!--    @input="handleChange" -->
            <template #suffix><text class="text-sm text-[#333]">ml</text></template>
          </wd-input>

          <view v-if="nurseAmountList.length" class="pt-3 flex justify-start overflow-x-auto">
            <view
              v-for="item in nurseAmountList"
              :key="item"
              @click="nurseAmount = item"
              class="box-border py-[4rpx] px-2 text-xs bg-[#F3F3F3] mr-2 rounded-full"
            >
              {{ item }}
            </view>
          </view>
        </view>
      </template>
    </ItemForm>
  </template>

  <template v-if="type != 2 && type != 3 && type != 4">
    <ItemForm label="开始时间">
      <template #default>
        <wd-calendar
          type="datetime"
          v-model="startTime"
          title="时间"
          hide-second
          @confirm="handleConfirmTime"
          :time-filter="timeFilter"
        />
      </template>
    </ItemForm>

    <ItemForm label="结束时间">
      <template #default>
        <wd-calendar type="datetime" v-model="endTime" title="时间" />
      </template>
    </ItemForm>
  </template>

  <template v-if="type == 2">
    <ItemForm label="辅食名称">
      <template #default>
        <view class="px-4 pt-2">
          <wd-input
            no-border
            type="number"
            placeholder="请填写"
            maxlength="30"
            v-model="complementaryName"
          >
            <!--    @input="handleChange" -->
          </wd-input>
          <view v-if="nurseAmountList.length" class="pt-3 flex justify-start overflow-x-auto">
            <view
              v-for="item in nurseAmountList"
              :key="item"
              @click="complementaryName = item"
              class="box-border py-[4rpx] px-2 text-xs bg-[#F3F3F3] mr-2 rounded-full"
            >
              {{ item }}
            </view>
          </view>
        </view>
      </template>
    </ItemForm>

    <ItemForm label="辅食时间">
      <template #default>
        <wd-calendar
          type="datetime"
          v-model="startTime"
          title="时间"
          hide-second
          @confirm="handleConfirmTime"
          :time-filter="timeFilter"
        />
      </template>
    </ItemForm>
  </template>

  <template v-if="type == 3">
    <ItemForm label="更换时间">
      <template #default>
        <wd-calendar
          type="datetime"
          v-model="startTime"
          title="时间"
          hide-second
          @confirm="handleConfirmTime"
          :time-filter="timeFilter"
        />
      </template>
    </ItemForm>
    <ItemForm label="有无便便">
      <template #default>
        <PickerInfo
          :columns="cacationList"
          title="排便"
          v-model:value="hasStool"
          @confirm="handleConfirm2"
        />
      </template>
    </ItemForm>
  </template>

  <template v-if="type == 4">
    <ItemForm label="入睡时间">
      <template #default>
        <wd-calendar
          type="datetime"
          v-model="startTime"
          title="时间"
          hide-second
          @confirm="handleConfirmTime"
          :time-filter="timeFilter"
        />
      </template>
    </ItemForm>

    <ItemForm label="睡醒时间">
      <template #default>
        <wd-calendar type="datetime" v-model="endTime" title="时间" />
      </template>
    </ItemForm>
  </template>

  <template v-if="type == 5">
    <ItemForm label="吸奶量">
      <!--  size="large" -->
      <template #default>
        <view class="px-4 pt-2">
          <wd-input
            no-border
            type="number"
            placeholder="请填写"
            maxlength="30"
            v-model="milkOutput"
          >
            <!--    @input="handleChange" -->
            <template #suffix>
              <text class="text-sm text-[#333]">ml</text>
            </template>
          </wd-input>
          <view v-if="nurseAmountList.length" class="pt-3 flex justify-start overflow-x-auto">
            <view
              v-for="item in nurseAmountList"
              :key="item"
              @click="milkOutput = item"
              class="box-border py-[4rpx] px-2 text-xs bg-[#F3F3F3] mr-2 rounded-full"
            >
              {{ item }}
            </view>
          </view>
        </view>
      </template>
    </ItemForm>
  </template>
</template>

<script setup>
  import { formattedDate } from '@/utils'
  import { feedMethodList, cacationList } from '@/pages/record/data.js'
  import ItemForm from './item-form.vue'
  import PickerInfo from '@/components/picker-info/picker-info.vue'
  defineOptions({
    name: 'NurseForm',
  })

  const type = defineModel('type')
  const nurseMethod = defineModel('nurseMethod')
  const nurseAmount = defineModel('nurseAmount')
  const startTime = defineModel('startTime')

  const endTime = defineModel('endTime')
  const complementaryName = defineModel('complementaryName')
  const milkOutput = defineModel('milkOutput')
  const hasStool = defineModel('hasStool')
  // 获取喂奶量的历史记录的请求
  const nurseAmountList = ref([])
  function getNurseAmountList() {
    // 得传type 1 喂奶  2辅食 5 吸奶
    let data = []

    if (type.value == 2) {
      data = ['小米粥', '小米粥', '小米粥', '小米粥', '小米粥']
    } else {
      data = [50, 100, 200, 300, 600, 700, 800, 900, 1000]
    }

    nurseAmountList.value = data
  }

  function handleConfirm2({ value }) {
    if (value != 1 && type.value == 1) getNurseAmountList()
    if (type.value == 1) nurseMethod.value = value
    if (type.value == 3) hasStool.value = value
  }
  function handleConfirmTime({ value, type }) {
    //  formattedDate(value)
    startTime.value = value
  }

  function timeFilter({ type, values }) {
    if (type === 'minute') {
      // 只展示 0,10,20,30,40,50 分钟选项
      return values.filter((item) => {
        return item
      })
    }
    return values
  }

  watch(
    type,
    (newVal) => {
      if (newVal == 2 || newVal == 5) {
        getNurseAmountList()
      }
    },
    {
      deep: true,
      immediate: true,
    },
  )

  // function handleChange({ value }) {
  //   // 请求添加到历史记录的事件
  //   console.log(value, '555')
  // }
</script>

<style lang="scss" scoped></style>
