<template>
    <tui-radio-group @input="input">
        <view :hover="false" class="tui-list-cell-radio">
            <view v-for="(item, index) in options" :key="index">
                <view class="radio-item">
                    <tui-radio :checked="item.checked" :value="item.isNumber ? item.value + '' : item.value" color="rgb(81, 121, 239)" borderColor="#999"> </tui-radio>
                    <text class="tui-text">{{ item.label }}</text>
                </view>
            </view>
        </view>
    </tui-radio-group>
</template>
<script>
export default {
    props: ["options", "value"],
    watch: {
        value: {
            handler(val) {
                this.options.forEach(item => {
                    if (typeof item.value === "number") {
                        item.isNumber = true;
                    }
                    this.$set(item, "checked", item.value == val);
                });
            },
            immediate: true,
        },
    },
    methods: {
        input(value) {
            // 将option里面设置的直发送出去，就不需要处理字符串和数字的问题了
            this.$emit("input", this.options.find(item => item.value == value).value);
        },
    },
};
</script>
<style lang="scss" scoped>
.tui-list-cell-radio {
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    padding: 0rpx !important;

    .radio-item {
        display: flex;
        align-items: center;
        margin-right: 30rpx;
        white-space:nowrap;
    }

    .tui-text {
        margin-left: 10rpx;
    }

    .tui-list-cell {
        padding: 0rpx;
    }
}
</style>
