<template>
    <span class="doc-checkbox-wrapper" :style="{
        marginLeft: record.options.marginLeft + 'px',
        marginRight: record.options.marginRight + 'px',
        padding: record.options.padding
    }">
        <span @click.stop="clickCheckbox(item.value)" :style="{
            marginRight: record.options.gap + 'px'
        }" v-for="(item, index) in record.options.options" :key="index" class="vertical-middle doc-checkbox-item">
            <span :style="{
                padding: isCheckedFlag(item.value) ? '0 2px' : '0 6px',
            }" class="doc-checkbox-label">
                {{ isCheckedFlag(item.value) ? '✔' : '' }}
            </span>
            <span class="doc-checkbox-text" v-text="item.label">

            </span>
        </span>

    </span>
</template>

<script>
export default {
    props: {
        record: {
            type: Object,
            default: () => { }
        },
        models: {
            type: Object,
            default: () => { }
        },
        options: {
            type: Array,
            default: () => []
        }
    },
    computed: {
        // 当前段落输入框是否选中
        isCheckedFlag() {
            return (value) => {
                if (value) {
                    if (this.selectedList.includes(value)) {
                        return true;
                    } else {
                        return false;
                    }
                } else {
                    return false
                }

            };
        }
    },
    data() {
        return {
            // 最终选择的模式
            selectedList: []
        }
    },
    methods: {
        clickCheckbox(value){
            const index = this.selectedList.findIndex(k => k == value)
            if(this.record.options.mode === "radio"){
                if(index < 0){
                    this.selectedList = []
                    this.selectedList.push(value)
                }
            }else{
                if(index > -1){
                    this.selectedList.splice(index,1)
                }else{
                    this.selectedList.push(value)
                }
            }
            const emitData = {
                key: this.record.model,
                value: this.selectedList.join(",")
            }
            this.$emit("change",emitData)
        }
    },
    created() {
        if (this.models[this.record.model]) {
            // 初始化值
            this.selectedList = this.models[this.record.model].split(",")
        }
    }
}
</script>

<style scoped lang="scss">
.doc-checkbox-wrapper {
    // vertical-align: sub;

    .doc-checkbox-item{
        cursor: pointer;
    }

    .doc-checkbox-label {
        position: relative;
        font-size: 12px;
        display: inline;
        // vertical-align: middle;
    }

    .vertical-middle {
        // vertical-align: middle;
    }

    .doc-checkbox-label::after {
        position: absolute;
        left: 50%;
        top: 50%;
        display: block;
        transform: translate(-50%, -50%);
        content: "";
        height: 14px;
        width: 14px;
        outline: 1px solid #000;
    }

    .doc-checkbox-text {
        // vertical-align: middle;
        margin-left: 15rpx;
    }
}</style>