<template>
    <div class="row go-form-row flex-div" :id="ctlId">
        <go-label
            :labelSplit="labelFlag"
            :showLabel="labelFlag"
            :showSlot="inputItem.showLabelSlot"
            :item="inputItem"
        ></go-label>
        <div :class="'go-content ' + getInputWid()" style="position: relative;">
            <RadioGroup @on-change="changeRadio" v-model="selValue">
                <div v-if="showType==='cell'">
                    <Radio :label="sonItem.value" :key="index" v-for="(sonItem, index) of inputItem.items">
                        <span>{{sonItem.label}}</span>
                    </Radio>
                </div>
                <div v-else>
                    <Row  :key="index" v-for="(sonItem, index) of inputItem.items" :style="extendStyle">
                        <Radio :label="sonItem.value">
                            <span>{{sonItem.label}}</span>
                        </Radio>
                    </Row>
                </div>
            </RadioGroup>
        </div>
    </div>
</template>

<script>
    import {GoingUtils,AssertUtils} from "goingutils";
    import formMixin from "../../mixins/formMixins";
    import GoLabel from "./commponents/go-label";

    export default {
        name: "go-radio-input",
        mixins: [formMixin],
        data: function () {
            return {
                selValue: "",
                ctlId: GoingUtils.getUUid(12)
            };
        },
        props: {
            rowHeight: {
                type: Number,
                default: 30
            },
            showType: {
                type: String,
                default: "cell"
            }
        },
        computed: {
            //判断是否显示label 以及是否显示split
            labelFlag(){
                if(AssertUtils.isNotEmpty(this.inputItem["label"])){
                    return true;
                }else{
                    return false;
                }
            },
            extendStyle(){
                return {height:this.rowHeight+'px'};
            }
        },
        methods: {
            changeRadio() {
                this.$emit("input", this.selValue);
                this.$emit("changeRadio", this.selValue);
            }
        },
        mounted() {
            let vueObj = this;
            this.selValue = this.value;
            //设置radio的初始值
            $("#" + this.ctlId)
                .find("input[type='radio']")
                .each(function () {
                    if (vueObj.value === $(this).val()) {
                        $(this).attr("checked", true);
                    }
                });
        },
        watch: {
            value(newVal) {
                this.selValue = newVal;
            }
        },
        components: {
            GoLabel
        }
    };
</script>
