<template>
    <div class="filtrate-widget-input">
        <header class="filtrate-header" v-if="model == 'bottomFilter' && title">
            {{ title }}
        </header>
        <main :class="{'select-model': model == 'checkbox'}">
            <van-field
                v-for="(item, idx) in queryData"
                :key="idx"
                class="filtrate-input"
                v-model.trim="value[item.property]"
                @input="handleInput(item)"
                label-align="right"
                :class="{'selected': selectQuery.indexOf(item.property) > -1}"
                @click="handleClick(item)"
                @click-input.stop="handleClickInput(item)"
            >
                <template #label>
                    <div v-if="model == 'checkbox'" class="select-checkbox lj-icon" :class="{'checked': selectQuery.indexOf(item.property) > -1}">
                        <i class="iconfont icon-tongyi" v-if="selectQuery.indexOf(item.property) > -1"></i>
                    </div>
                    <div class="text-ellipsis-one">
                        {{ item.title }}
                    </div>
                </template>
            </van-field>
        </main>
    </div>
</template>

<script>
export default {
    name: 'LjWidgetInput',
    data() {
        return {
            queryData: {},
            selectQuery: [], // 选择模式：需要筛选的属性
        };
    },
    props: {
        // 同lj-filtrate:queryFields
        data: {
            type: Object
        },
        // 标题：在底部筛选窗体时，使用
        title: {
            type: String,
            default: ""
        },
        // 模式，tabsFilter:标签筛选栏; bottomFilter:底部筛选窗体；checkbox:长按菜单，选择模式
        model: {
            type: String,
            default: ""
        },
        value: {
            type: Object
        },
        // 长按菜单，选择模式：已选列表
        selecteditem: {
            type: Array,
            default: function() {
                return []
            }
        }
    },
    mounted() {
        this.init();
    },
    methods: {
        /**确认 */
        handleInput(item) {
            this.$emit('input', item);
        },
        /**安装 */
        init() {
            this.queryData = this.data.children;
            if (this.selecteditem.length > 0) {
                this.selectQuery = this.selecteditem;
            }
        },
        /**点击事件 */
        handleClick(item) {
            // 非编辑模式跳出
            if (this.model != 'checkbox') {
                return false;
            }
            let idx = this.selectQuery.indexOf(item.property);
            if (idx > -1) {
                // 删除
                this.selectQuery.splice(idx, 1);
                this.$emit('click-checkbox', this.selectQuery);
            } else {
                // 添加
                this.selectQuery.push(item.property);
                this.$emit('click-checkbox', this.selectQuery);
            }
            // this.$emit('click', item);
        },
        /**点击事件 */
        handleClickInput(item) {
            // 非编辑模式跳出
            if (this.model != 'checkbox') {
                return false;
            }
            let idx = this.selectQuery.indexOf(item.property);
            if (idx == -1) {
                // 添加
                this.selectQuery.push(item.property);
                this.$emit('click-checkbox', this.selectQuery);
            }
            // this.$emit('click', item);
        }
    },
};
</script>

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

        .filtrate-header {
            font-size: 16px;
            font-weight: bold;
            padding: 4px 0;
        }
        main {
            background-color: #F8F8F8;
            border-radius: 8px;
            margin: 0 8px;

            .filtrate-input {
                input {
                    color: @musePrimary;
                }
            }
            &.select-model {
                background-color: unset;

                .van-cell::after {
                    content: none;
                }
                .filtrate-input {
                    margin: 2px 0;

                    input {
                        color: @secondary;
                    }
                    &.selected {
                        background-color: rgba(83, 178, 255, 0.08);
                        border-radius: 8px;

                        input {
                            color: @musePrimary;
                        }
                    }
                    .select-checkbox {
                        position: absolute;
                        left: 10px;
                        top: 0;
                        bottom: 0;
                        margin: auto;
                    }
                }
            }
        }
        .van-cell {
            background-color: unset;
            padding-left: 8px;
            padding-right: 8px;
        }
    }
</style>