<template>
  <!-- <a-radio-group :options="plainOptions" v-model="value1" @change="onChange1" /> -->
  <a-radio-group v-model="value1" @change="onChange1" v-bind="itemAttr"  class="radio-group-help-con">
    <span :key="''+index" v-for="(item,index) in plainOptions" class="radio-item">
      <a-radio :value="Object.prototype.toString.call(item) === '[object String]'?item:item.value">
        {{ Object.prototype.toString.call(item) === '[object String]'?item:item.label}}
      </a-radio>
      <!-- <a-popconfirm placement="right" >
          <template slot="title">
            <p>{{ text }}</p>
            <p>{{ text }}</p>
          </template>
          <a-icon type="question-circle" />
        </a-popconfirm> -->
    </span>

  </a-radio-group>
</template>

<script>
const plainOptions = ['Apple', 'Pear', 'Orange'];
export default {
  name: 'PRadioGroup',
  props: {
    value: { type: String },
    optionsList:{type:Array},
    itemAttr:{type:Object},
  },
  data() {
    return {
      plainOptions,
      value1: '',
      text:'ceshi',
    }
  },
  watch: {
    value: {
      handler(val) {
        this.value1 = val
      },
      deep: true,
      immediate: true
    },
    optionsList: {
      handler(val) {
        if(Object.prototype.toString.call(val)==='[object Array]'){
          this.plainOptions = val
        }
      },
      deep: true,
      immediate: true
    },
  },
  methods: {
    onChange1(e) {
      const val_ = e.target.value
      this.value1 = val_
      console.log('radio1 checked', val_);
      this.$emit('change.value', val_)
      this.$emit('change', val_);
      this.$emit('input', val_);
    },
  }
}
</script>

<style lang="less" scoped>
.radio-group-help-con{
 .radio-item{
  margin: 0 10px;
  .ant-radio-wrapper{
    margin-right: 3px;
  }
 }
}


.ant-popover-buttons{
    display: none;
  }
</style>
