<template>
  <div class="selectCircle">
    <div class="header">{{Data.type}}</div>
    <div class="body">
      <div
        v-for="(item,index)  in Data.data"
        :class="{'foucs':item.state}"
        :key="index"
        @click="Success(item)"
      >{{item.id}}</div>
    </div>
  </div>
</template>
<script>
// key值 唯一标识
// props
// 渲染数据
// Data
//       {
//         type: "单选题",id:1
//         data: [{ id: 1, state: true }, { id: 2, state: true }, { id: 3, state: true }, { id: 4, state: false }, { id: 5, state: false }, { id: 6, state: false }]
//       }, 
//事件函数 @Success
export default {
  props: {
    props: {
      type: Number / String,
      default: ''
    },
    Data: {
      type: Object,
      default: {}
    }
  },
  data () {
    return {}
  },
  methods: {
    Success (data) {
      this.$emit("Success", { tag: 'SelectCircle', key: this.props, value: data.id, data })
    }
  }

}
</script>
<style lang="less" scoped>
.selectCircle {
  margin-bottom: 10px;
  .header {
    font-size: 14px;
    color: #777;
  }
  .body {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    & > div {
      font-size: 12px;
      margin: 5px;
      width: 27px;
      text-align: center;
      line-height: 27px;
      padding: 5px;
      border-radius: 50%;
      background-color: #eee;
    }
    .foucs {
      background-color: #409eff;
      color: aliceblue;
    }
  }
}
</style>
