<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="feed">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '%feed.records%',
  },
}
</route>
<!-- src/static/images/ -->
<template>
  <view class="min-h-screen bg-[#F2F2F2] box-border pb-35">
    <wd-navbar
      :title="title"
      left-arrow
      fixed
      :bordered="false"
      :placeholder="true"
      :safeAreaInsetTop="true"
      @click-left="handleClickLeft"
    >
      <template v-if="show" #right>
        <view @click="handleClickRight">
          <image class="w-[40rpx] h-[40rpx]" :src="deleteSvg" mode="widthFix" />
          <!-- <wd-icon name="delete" size="40rpx" color="#FB4848"></wd-icon> -->
        </view>
      </template>
    </wd-navbar>
    <wd-form ref="formRef" :model="formData">
      <ItemForm v-for="item in formDataList" :key="item.id" :label="item.label">
        <template #default>
          <view class="px-4" v-if="item.unit">
            <wd-input
              no-border
              type="number"
              placeholder="请填写"
              maxlength="30"
              v-model="formData[item.id]"
            >
              <template #suffix>
                <text class="text-sm text-[#333]">
                  {{ item.unit }}
                </text>
              </template>
            </wd-input>
          </view>

          <wd-datetime-picker
            v-else
            title="时间"
            label=""
            type="date"
            v-model="formData[item.id]"
            confirm-button-text="确认"
            :formatter="formatter"
            @confirm="handleConfirm"
          />
        </template>
      </ItemForm>
      <view
        class="w-full box-border fixed bottom-0 left-0 px-4 pt-2 pb-8 bg-white"
        :style="{ marginBottom: safeAreaInsets?.bottom + 'px' }"
      >
        <wd-button size="large" @click="handleSubmit" block>保存</wd-button>
      </view>
    </wd-form>
    <wd-toast />
    <wd-message-box />
  </view>
</template>

<script setup>
  import PickerTime from '@/components/picker-time/picker-time.vue'
  import deleteSvg from '@/static/images/delete.svg'
  import ItemForm from '@/components/item-form/item-form.vue'
  import { ref, reactive } from 'vue'
  import { useToast, useMessage } from 'wot-design-uni'
  import { onLoad } from '@dcloudio/uni-app'

  const toast = useToast()

  // 获取屏幕边界到安全区域距离
  const { safeAreaInsets } = uni.getSystemInfoSync()

  const message = useMessage()
  const show = ref(false)
  const title = ref('')
  const formRef = ref('')

  // 表单数据
  const formData = reactive({
    id: '',
    date: Date.now(), //日期
    height: null, //身高
    weight: null, //体重
    headC: null, //头围
  })

  const formDataList = [
    {
      id: 'height',
      label: '身高',
      unit: 'cm',
    },
    {
      id: 'weight',
      label: '体重',
      unit: 'kg',
    },
    {
      id: 'headC',
      label: '头围',
      unit: 'cm',
    },
    {
      id: 'date',
      label: '日期',
      unit: '',
    },
  ]

  // 新增喂养记录和修改喂养记录提交按钮
  function handleSubmit() {
    //  添加宝宝的接口 /baby/bt_feed_record/add
    formRef.value
      .validate()
      .then(({ valid, errors }) => {
        console.log(valid, 'valid')

        if (valid) {
        }
      })
      .catch((error) => {
        console.log(error, 'error')
      })
    console.log(formData, 'handleSubmit')
  }

  // 删除这条数据
  function handleDelete(id) {
    console.log(id, 'handleDelete')
    toast.loading('删除中...')
    setTimeout(() => {
      toast.close()

      toast.success('删除成功')
    }, 2000)
  }

  function handleClickRight() {
    message
      .confirm({
        msg: '确定删除记录吗？',
      })
      .then(() => {
        handleDelete()
      })
      .catch((error) => {
        console.log(error)
      })
  }

  const formatter = (type, value) => {
    switch (type) {
      case 'year':
        return value + '年'
      case 'month':
        return value + '月'
      case 'date':
        return value + '日'
      default:
        return value
    }
  }
  function handleConfirm({ value, type }) {
    formData.date = value
  }

  function handleClickLeft() {
    uni.navigateBack()
  }

  //
  function changeFormData(types) {}

  onLoad(({ id }) => {
    if (id) {
      show.value = true
      title.value = '记录详情'
      // 获取详情的请求
    } else {
      show.value = false
      title.value = '新增记录'
    }

    formData.id = id ? id : ''
  })
</script>

<style scoped>
  ::v-deep .wd-button.is-primary {
    background: linear-gradient(270deg, #f88842 0%, #ffac78 100%);
  }
  ::v-deep .wd-input.is-large {
    padding: 8rpx 24rpx;
  }

  ::v-deep .wd-upload__close {
    top: 8rpx;
    right: 8rpx;
  }

  ::v-deep .wd-input.is-large {
    padding: 0.25rem 1rem;
  }
</style>
