<template>
    <Radio-group :value="handleValue" @on-change="updateValue">
        <Radio :label="gender.id" v-for="gender in genderList" :key="gender.id" :disabled="disable">
            <span>{{gender.label}}</span>
        </Radio>
    </Radio-group>
</template>

<script>
export default {
    name: 'RadioGender',
    props: {
        value: {
            type: String
        },
        disable: {
            type: Boolean
        }
    },
    data() {
        return {
            handleValue: this.value,
            genderList: [{
                id: '1',
                label: '男'
            }, {
                id: '2',
                label: '女'
            }, {
                id: '3',
                label: '通用'
            }]
        };
    },
    methods: {
        updateValue(newValue) {
            this.$emit('input', newValue);
        }
    },
    watch: {
        value(newValue) {
            this.handleValue = newValue;
        }
    },
};
</script>

<style>

</style>