<template>
  <view class="index-nav u-flex u-row-around">
    <view
      class="index-nav__item u-flex-col u-col-center"
      @click="jump('applyBorn')"
    >
      <image :src="AddImage" class="image" />
      <view class="text">预定探视</view>
    </view>
    <view
      class="index-nav__item u-flex-col u-col-center"
      @click="jump('visitation')"
    >
      <image :src="ManagerImage" class="image" />
      <view class="text">探视管理</view>
    </view>
  </view>
</template>

<script>
import AddImage from '../images/add-image.png'
import ManagerImage from '../images/manager-image.png'
export default {
  props: {
    useInfo: {
      type: [Object],
      default: null
    }
  },
  data() {
    return {
      AddImage,
      ManagerImage
    }
  },
  methods: {
    jump(index) {
      console.log(this.useInfo, 'this.useInfo.name')
      if (index === 'applyBorn') {
        uni.navigateTo({ url: `/pages/babyVisit/applyBorn/applyBorn?familyName=${this.useInfo.name}` })
      } else if (index === 'visitation') {
        uni.navigateTo({ url: '/remote/my-remote-visitation/index' })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.index-nav {
  padding: 30rpx 30rpx;
  margin-top: 10rpx;
  background-color: #fff;
  box-sizing: border-box;

  &__item {
    position: relative;
    .image {
      width: 90rpx;
      height: 90rpx;
    }
    .text {
      margin-top: 10rpx;
      color: $color-text-title;
      font-size: 28rpx;
    }
  }
}
</style>
