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

<script>
    import { checkOptionMixin } from "../../mixins/form.component";
    import { isNotEmpty } from "@bingoit/utils";

    export default {
        name: "BgoCheckbox",
        mixins: [checkOptionMixin],
        props: {
            name: {
                type: String,
                default: 'checkbox'
            }
        },
        created() {
            this.handleFormRule();
            // 可能传入逗号分隔的字符串，也处理一下
            if (!Array.isArray(this.value)) {
                if (typeof(this.value) === 'string') {
                    this.currentValue = 
                        this.value.split(',').filter(item => isNotEmpty(item))
                }
            }

            if(isNotEmpty(this.currentValue)) {
                if(Array.isArray(this.currentValue)) {
                    this.checkedValue = this.currentValue.join(',');
                } else {
                    this.checkedValue = this.currentValue
                }
            }
        },
        mounted() {
            this.getDataItem();
            if(this.vanForm) {
                this.vanForm.addField(this.$refs.checkbox);
            }
        },
        watch: {
            currentValue(val) {
                if(Array.isArray(val)) {
                    this.checkedValue = val.join(',');
                } else {
                    this.checkedValue = val;
                }
                this.$emit('input', val);
                this.$emit('change', val);
            },
            value(val) {
                this.currentValue = val;
            },
            dataList(newVal) {
                this.$emit("dataListChange", newVal);
            },
        },
        data() {
            return {
                checkedValue: ''
            }
        },
        methods: {
            getSourceElement() {
                return this.$refs.checkbox
            },
            getCustomIcon(checked) {
                let icon
                if(checked) {
                    icon = require('../../assets/icons/checkbox-checked.png')
                    if(this.disabled || this.readonly) {
                        icon = require('../../assets/icons/checkbox-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-checkbox-container {
        .van-checkbox-group--vertical .van-checkbox: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);
            }
        }
    }
</style>
