<template>
  <view class="student-select" >
    <student-info :itemData='itemData' />
    <view class="check-box" >
     
      <view
        v-if="!isSelect"
        class="un-select"  
        @click="pushStudentIds"
      />
      <image
        v-else 
        class="select" 
        :src="require('@/static/common/check.png')"
        @click="pushStudentIds"
      />
    </view>

  </view>
</template>

<script>

export default {
  name: 'student-select',
  props: {
    itemData: {
      type: Object,
      require: true
    },
    babyIds: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    isSelect () {
      return  this.babyIds.includes(this.itemData.id)
    }
  },
  methods: {
    pushStudentIds () {
      this.$emit('push-baby-ids', this.itemData.id)
    }
  }
}
</script>

<style lang="less" scoped>
.student-select {
  width: 100vw;
  padding: 0 32rpx;
  height: 172rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  .check-box {

    .un-select {
      width: 40rpx;
      height: 40rpx;
      border: 4rpx solid rgba(153, 153, 153, .6);
      border-radius: 50%;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .select {
      width: 40rpx;
      height: 40rpx;
      display: block;
    }
  }
}

</style>