<template>
    <view v-if="child && child.key && child.options && child.options.length">
        <view class="title">{{ child.label }}</view>
        <view class="option-box">
            <view
                v-for="(option, index) in child.options"
                :key="child.key + index"
                :class="['option-item', 'c-line-clamp1', option.selected && 'active']"
                :style="{
                    'margin-right': (index + 1) % 3 ? '8px' : 0,
                }"
                @tap="handleItemTap(index)"
            >
                {{ option.text }}
            </view>
        </view>
    </view>
</template>

<script>
import {isEmptyObject} from '@utils/core';
import {ubcSend} from '@utils/log';

export default {
    config: {
        component: true
    },
    name: 'CheckBox',
    data() {
        return {
            checkedIndex: [],
            child: {}
        };
    },
    props: {
        originData: {
            type: Object,
            default: () => {
            }
        },
        selectedIndex: {
            type: Array,
            default: () => []
        }
    },
    created() {
        let checkedIndex = this.selectedIndex;
        let data = JSON.parse(JSON.stringify(this.originData || {}));
        if (!isEmptyObject(data)) {
            for (let i in checkedIndex) {
                data.options[checkedIndex[i]].selected = true;
            }
        }
        this.child = data;
        this.checkedIndex = checkedIndex;
    },
    watch: {
        selectedIndex(newVal) {
            this.checkedIndex = newVal;
            let data = JSON.parse(JSON.stringify(this.originData || {}));
            for (let i in data.options) {
                data.options[i].selected = false;
            }

            for (let i in newVal) {
                data.options[newVal[i]].selected = true;
            }

            this.$set(this, 'child', data);
        }
    },
    methods: {
        handleItemTap(index) {
            const containIndex = this.checkedIndex.includes(index);
            if (containIndex) {
                this.checkedIndex.splice(this.checkedIndex.indexOf(index), 1);
            } else if (this.child.supportMulti) {
                this.checkedIndex.push(index);
            } else {
                this.checkedIndex = [index];
            }
            if (!containIndex) {
                ubcSend({
                    type: 'clk',
                    value: 'type_handle',
                    ext: {
                        parent: this.originData.key,
                        text: this.originData.options[index].text
                    }
                });
            }
            this.$emit('check', this.child, this.checkedIndex);
        }
    }
};
</script>

<style lang="less" scoped>
.title {
    font-size: 14px;
    color: #1f1f1f;
    letter-spacing: 0;
    line-height: 14px;
    margin-bottom: 11px;
    margin-top: 15px;
}

.option-box {
    display: flex;
    flex-wrap: wrap;

    .option-item {
        box-sizing: border-box;
        height: 35px;
        line-height: 35px;
        text-align: center;
        padding: 0 7px;
        font-size: 14px;
        color: #525252;
        letter-spacing: 0;
        width: calc((100% - 16px) / 3);
        background: #f5f5f5;
        border-radius: 100px;
        margin-bottom: 8px;
    }

    .active {
        background: rgba(0, 200, 200, 0.15);
        font-weight: bold;
        color: #00c8c8;
    }
}
</style>
