
<template>
    <div class="filtrate-widget-switch">
        <header class="filtrate-header" v-if="model == 'bottomFilter' && title">
            {{ title }}
        </header>
        <main>
            <van-switch v-model="boolean" size="20"/>
        </main>
    </div>
</template>

<script>
export default {
    name: 'LjWidgetSwitch',
    data() {
        return {
            queryData: {},
        };
    },
    props: {
        // 同lj-filtrate:queryFields
        data: {
            type: Object
        },
        // 标题：在底部筛选窗体时，使用
        title: {
            type: String,
            default: ""
        },
        // 模式，tabsFilter:标签筛选栏; bottomFilter:底部筛选窗体
        model: {
            type: String,
            default: ""
        },
        value: {
            type: Object
        }
    },
    computed: {
        boolean: {
            get() {
                return Boolean(this.value[this.queryData.property])
            },
            set(val) {
                this.$set(this.value, this.queryData.property, Number(val));
            }
        }
    },
    mounted() {
        this.init();
    },
    methods: {
        // /**确认 */
        // handleInput(item) {
        //     this.$emit('input', item);
        // },
        /**安装 */
        init() {
            this.queryData = this.data.children[0];
            console.log(' this.queryData :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(this.queryData));
        }
    },
};
</script>

<style lang="less">
    .filtrate-widget-switch {
        padding: 8px 10px;
        display: flex;

        .filtrate-header {
            font-size: 16px;
            font-weight: bold;
            padding: 4px 0;
        }
        main {
            flex: 1;
            // background-color: #e7d1d1;
            border-radius: 8px;
            margin: 0 8px;
            display: flex;
            justify-content: flex-end;
            align-items: center;

            input {
                color: @musePrimary;
            }
        }
        .van-cell {
            background-color: unset;
            padding-left: 8px;
            padding-right: 8px;
        }
    }
</style>