<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
  },
}
</route>
<!-- 宝宝信息 -->
<template>
  <view>
    <headerTitle
      v-if="!isQueryListEmpty"
      :is-show="true"
      title="宝宝信息"
      @deleteBaby="deleteBaby"
    ></headerTitle>
    <headerTitle v-else title="宝宝信息"></headerTitle>

    <view class="avatar-wrapper">
      <!-- 头像 -->
      <view class="card-container" @click="photoBtn">
        <view class="info-profile"><image :src="camera" /></view>
        <view class="info-camera">
          <image src="/src/static/icon/camera.svg" />
        </view>
      </view>
      <view class="card-item">
        <!-- 昵称 -->
        <ItemForm label="宝宝昵称" :required="true">
          <template #default>
            <wd-input v-model="nicknameValue" placeholder="请输入昵称" />
          </template>
        </ItemForm>

        <!-- 性别 -->
        <ItemForm label="宝宝性别" :required="true">
          <template #default>
            <pickerUser
              :columns="columns"
              v-model:value="genderValue"
              title="性别"
              @confirm="handleGenderBtn"
            />
          </template>
        </ItemForm>
        <!-- 生日 -->
        <ItemForm label="宝宝生日" :required="true">
          <template #default>
            <wd-datetime-picker type="date" v-model="datetimeValue" @confirm="handleTimes" />
          </template>
        </ItemForm>
        <!-- 血型 -->
        <ItemForm label="宝宝血型">
          <template #default>
            <pickerUser
              required
              :columns="columnsBlood"
              title="血型"
              v-model:value="bloodValue"
              @confirm="handleBloodBtn"
            />
          </template>
        </ItemForm>
      </view>
    </view>
    <view class="baby-Bottom" v-if="!isQueryListEmpty">
      <wd-button @click="addBaby">保存</wd-button>
    </view>
    <view class="baby-Bottom" v-else>
      <wd-button @click="startBtn">开始育儿</wd-button>
    </view>
    <wd-message-box />
  </view>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import headerTitle from './headerTitle.vue'
  import ItemForm from './item-form.vue'
  import pickerUser from './pickerUser.vue'
  import { formateDate } from '../../../utils/times'
  import { useMessage } from 'wot-design-uni'
  const message = useMessage()
  const queryList = ref({}) // 宝宝信息
  const columns = ref(['男', '女', '保密'])
  const columnsBlood = ref(['A型', 'B型', 'AB型', 'O型'])
  const genderValue = ref('') // 性别
  const bloodValue = ref('') // 血型
  const nicknameValue = ref('') // 宝宝昵称
  const datetimeValue = ref('') // 生日

  const camera = 'https://ai-public.mastergo.com/ai/img_res/d2b4d6b8d90031e1134ed22cfb120081.jpg'

  // 删除
  const deleteBaby = () => {
    message
      .confirm({
        msg: '确定删除宝宝信息吗？',
        cancelButtonProps: {
          customClass: 'custom-one',
        },
        confirmButtonProps: {
          customClass: 'custom-two',
        },
      })
      .then(() => {
        console.log('点击了确定按钮')
      })
      .catch(() => {
        console.log('点击了取消按钮')
      })
  }

  // 换头像
  const photoBtn = () => {
    uni.chooseImage({
      count: 1, // 最多选择1张
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: (res) => {
        console.log(res)
      },
      fail: (err) => {
        console.error(err)
      },
    })
  }

  // 性别
  const handleGenderBtn = () => {
    console.log(genderValue.value)
  }

  // 血型
  const handleBloodBtn = () => {
    console.log(11)
  }

  // 生日
  const handleTimes = ({ value }) => {
    formateDate(value)
    console.log(formateDate(value), 'formattedDateformattedDate')
  }

  // 保存数据
  const addBaby = () => {
    console.log('保存数据')
  }

  // 开始育人
  const startBtn = () => {
    console.log('开始育人')
  }

  // 计算属性判断 queryList 是否为空
  const isQueryListEmpty = computed(() => Object.keys(queryList.value).length === 0)
  onLoad((query) => {
    if (query.songDate) {
      queryList.value = JSON.parse(decodeURIComponent(query.songDate))
    }
  })
</script>

<style lang="scss" scoped>
  .avatar-wrapper {
    height: calc(100vh - 280rpx);
    background: #f2f2f2;
  }
  .card-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 240rpx;
    padding-top: 32rpx;
    background: #fff;
  }
  .info-profile {
    overflow: hidden;
    border-radius: 50%;
    image {
      width: 200rpx;
      height: 200rpx;
    }
  }
  .info-camera {
    position: absolute;
    top: 204rpx;
    left: 400rpx;
    background: #f88842;
    border-radius: 50%;
    image {
      width: 52rpx;
      height: 52rpx;
    }
  }
  .card-item {
    background: #fff;
  }
  .baby-Bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 128rpx;
    padding: 16rpx 32rpx;
  }
  ::v-deep .wd-picker__cell {
    padding: 12rpx 0px;
  }
  ::v-deep .wd-button {
    gap: 10px;
    flex: 1 0 0;
  }
  ::v-deep .wd-message-box__actions {
    .custom-one {
      color: #000 !important;
      border: none;
      background: #fff !important;
    }
    .custom-two {
      color: #fb4848 !important;
      border: none;
      background: #fff !important;
    }
  }
</style>
