<template>
  <view class="child-list">
      <scroll-view class="scroll-view" scroll-x="true" scroll-left="0">
        <radio-group @change="radioChange">
          <radio
            :value="item.value"
            v-for="item in items"
            :key="item.value"
            :checked="item.value === currentSeletct"
          >
            <view class="s-view-item">
              <img class="avater" :src="item.imgUrl" />
              <view>
                <text :class="{'child-name':'true'=='true', 'active':item.value === currentSeletct}">{{item.name}}</text>
                <br />
                <text
                  :class="{'child-class':'true'=='true','active':item.value === currentSeletct}"
                  >{{ item.class }}</text
                >
              </view>
            </view>
          </radio>
          <view class="s-view-item add-child" id="add-child" style="vertical-align: top;">
            <img class="avater" src="../../static/add-child.png" />
            <view style="padding-top: 20rpx;">
              <text class="child-add-text">添加小孩</text>
            </view>
          </view>
        </radio-group>
      </scroll-view>
    </view>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      default: []
    },
    current: {
        type: String,
        default: ""
    }
    },
  data: () => ({
      currentSeletct:""
  }),
  computed: {},
  methods: {
      radioChange(evt) {
      for (let i = 0; i < this.items.length; i++) {
        if (this.items[i].value === evt.target.value) {
          this.currentSeletct = this.items[i].value;
          break;
        }
      }
    }
  },
  watch: {},

  // 组件周期函数--监听组件挂载完毕
  mounted() {
      this.currentSeletct = this.current
  },
  // 组件周期函数--监听组件数据更新之前
  beforeUpdate() {},
  // 组件周期函数--监听组件数据更新之后
  updated() {},
  // 组件周期函数--监听组件激活(显示)
  activated() {},
  // 组件周期函数--监听组件停用(隐藏)
  deactivated() {},
  // 组件周期函数--监听组件销毁之前
  beforeDestroy() {},
};
</script>

<style scoped>
.scroll-view {
  width: 95%;
  margin: 10rpx auto;
  white-space: nowrap;
  display: inline-block;
}
.child-list {
  margin-left: 20rpx;
  margin-top: 10rpx;
  margin-bottom: 10rpx;
  margin-right: 0;
}
.child-name {
  font-size: 20rpx;
  font-weight: bold;
}
.child-class {
  font-size: 18rpx;
}
.child-add-text {
  font-size: 20rpx;
}
#add-child {
 display: inline-block;
 vertical-align: top;
}
.avater {
  border-radius: 50%;
  width: 80rpx;
  height: 80rpx;
  margin: 0 auto;
}
.active {
  color: #0251ff;
}
.s-view-item {
  width: 150rpx;
  height: 140rpx;
  margin: 10rpx 5rpx;
  text-align: center;
  color: #333;
  display: inline-block;
  /* block => inline-block */
  line-height: 25rpx;
}
</style>
