<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
  },
}
</route>
<!-- 宝宝信息 -->
<template>
  <view>
    <headerTitle
      v-if="!isQueryListEmpty"
      :is-show="true"
      title="宝宝信息"
      @deleteBaby="deleteBaby"
    ></headerTitle>
    <headerTitle v-else title="宝宝信息" @deleteBaby="deleteBaby"></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">
        <!-- 昵称 -->
        <view class="section" @click="nicknameBtn">
          <view class="section-left">
            <view class="label">宝宝昵称</view>
            <view class="nickname">
              <wd-input v-model="nicknameValue" placeholder="请输入昵称" />
            </view>
          </view>
        </view>
        <!-- 性别 -->
        <ItemForm label="宝宝性别">
          <template #default>
            <pickerUser
              :columns="columns"
              v-model:value="genderValue"
              title="性别"
              @confirm="handleConfirm"
            />
          </template>
        </ItemForm>
        <!-- 生日 -->
        <ItemForm label="宝宝生日">
          <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="handleConfirm"
            />
          </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="addBaby">开始育人</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'
  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 = () => {}
  const handleConfirm = () => {
    console.log(genderValue.value)
  }
  const nicknameBtn = () => {}
  const photoBtn = () => {
    console.log('换头像')
  }
  // 开始育人
  const addBaby = () => {
    console.log('开始育人')
  }
  const handleTimes = ({ value }) => {
    formateDate(value)
    console.log(formateDate(value), 'formattedDateformattedDate')
  }
  // 计算属性判断 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: 320rpx;
    padding-top: 32rpx;
    background: #fff;
  }
  .info-profile {
    overflow: hidden;
    border-radius: 50%;
    image {
      width: 200rpx;
      height: 200rpx;
    }
  }
  .info-camera {
    position: absolute;
    top: 240rpx;
    left: 410rpx;
    background: #f88842;
    border-radius: 50%;
    image {
      width: 52rpx;
      height: 52rpx;
    }
  }
  .card-item {
    background: #fff;
    .section {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 32rpx 32rpx 0px 32rpx;
      border-bottom: 1px solid #f1f5f9;
    }
    .section-left {
      width: 100%;
      height: 120rpx;
    }

    .label {
      height: 60rpx;
      font-size: 1rem;
      font-style: normal;
      font-weight: 400;
      line-height: 48rpx;
    }
    .nickname {
      display: flex;
      align-items: center;
      height: 60rpx;
      font-family: 'PingFang SC';
      font-size: 28rpx;
      font-style: normal;
      font-weight: 400;
    }
  }
  .baby-Bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 128rpx;
    padding: 16rpx 32rpx;
  }
  ::v-deep .wd-picker__cell {
    padding: 12rpx 0px;
  }
</style>
