<template>
  <div :class="show ? 'g-check-error' : ''">
    <p-tooltip placement="top">
      <p-radio-group
        :size="size"
        @change="change"
        :value="value"
        :options="type == 'radio' ? options : null"
        :buttonStyle="buttonStyle"
      >
        <p-radio-button
          v-for="item in options"
          :value="item.value"
          :key="item.value"
        >
          {{ item.label }}
        </p-radio-button>
      </p-radio-group>
      <template slot="title" v-if="show">
        <span>{{ validate.message }}</span>
      </template>
    </p-tooltip>
  </div>
</template>
<script>
import mixin from './mixin'
export default {
  name:'gRadio',
  mixins:[mixin],
  computed: {
    show() {
      return this.provObj.errorCheck &&
        this.validate.required &&
        !this.value.toString()
        ? true
        : false
    },
  },
  model: {
    prop: 'value',
    event: 'change',
  },
  methods: {
    change(e) {
      this.$emit('change', e.target.value)
    },
  },
  props: {
    size: {
      type: String,
      default: 'large', // large | default | small
    },
    options: {
      type: Array,
      default: () => [
        { label: '男', value: 1, disabled: false },
        { label: '女', value: 2, disabled: false },
      ],
    },
    validate: {
      type: Object,
      default: () => ({
        required: false,
        message: '',
      }),
    },
    buttonStyle: {
      type: String,
      default: 'solid',
    },
    type: {
      type: String,
      default: 'radio', // radio | button
    },
    value: {
      type: [String, Number],
      default: '',
    },
  },
}
</script>
<style lang="less" scoped>
.g-check-error {
  /deep/ .poros-radio-group {
    border: 1px solid #ff4d4f;
    border-width: 1px !important;
    outline: 0;
    &:hover {
      box-shadow: 0 0 0 2px rgb(245 34 45 / 20%);
    }
  }
}
</style>