<template>
    <div class="mix-radio-container">
        <van-field
            :name="name"
            :label="label"
            ref="radio"
            :required="required"
            v-model="currentValue"
            :disabled="disabled"
            :readonly="readonly"
            :rules="validatePropRules">
            <template #input>
                <van-radio-group
                    v-model="currentValue"
                    :direction="direction"
                    :disabled="disabled || readonly">
                    <van-radio
                        v-for="item in dataList"
                        :name="item.id"
                        :label-disabled="disabled || readonly"
                        :key="item.id">
                        {{item.label}}
                        <template #icon="props">
                            <img 
                                :src="getCustomIcon(props.checked)"
                                alt=""
                                style="width: 20px; height: 20px;"
                            />
                        </template>
                    </van-radio>
                </van-radio-group>
            </template>
        </van-field>
    </div>
</template>

<script>
    import { checkOptionMixin } from "../../mixins/form.component";

    export default {
        name: "BgoRadio",
        mixins: [checkOptionMixin],
        props: {
            name: {
                type: String,
                default: 'radio'
            }
        },
        watch: {
            dataList(newList) {
                this.$emit('dataListChange', newList);
            }
        },
        created() {
            this.handleFormRule();
        },
        mounted() {
            this.getDataItem();
            if(this.vanForm) {
                this.vanForm.addField(this.$refs.radio);
            }
        },
        methods: {
            getSourceElement() {
                return this.$refs.radio
            },
            getCustomIcon(checked) {
                let icon
                if(checked) {
                    icon = require('../../assets/icons/radio-checked.png')
                    if(this.disabled || this.readonly) {
                        icon = require('../../assets/icons/radio-check-disabled.png')
                    }
                } else {
                    icon = require('../../assets/icons/uncheck.png')
                    if(this.disabled || this.readonly) {
                        icon = require('../../assets/icons/disabled.png')
                    }
                }

                return icon
            },
        }
    }
</script>
<style lang="scss">
    @import "../../style/var.scss";
    @import "../../style/mixins/hairline.scss";

    .mix-radio-container {
        .van-radio-group--vertical .van-radio:not(:last-child) {
            position: relative;
            margin-top: $padding-md;
            margin-bottom: $padding-md;
            padding-bottom: $padding-md;
            // border-bottom: 1px solid $gray-3;

            &::after {
                @include hairline-bottom($border-color, 0, 0);
            }
        }
        .van-cell__title {
            max-width: 90px;
        }
    }
</style>
