<template>
    <div class="keyValue-coment">
        <el-collapse v-model="expandArray">
            <el-collapse-item v-for="key in Object.keys(this.filtersFields)" :key="key" :title="key" :name="key">
                <el-form label-position="left" label-width="200px">
                    <el-form-item v-for="item in filtersFields[key]" :key="item.dataId" :label="item.dataName">
                        <div style="display: flex">
                            <el-tooltip effect="dark" placement="top" :disabled="rowData[item.dataStr] && rowData[item.dataStr].length > 30 ? false : true" :content="!!rowData[item.dataStr] ? t(rowData[item.dataStr].toString()) || rowData[item.dataStr].toString() : ''">
                                <span class="filterSpan">{{ t(rowData[item.dataStr]) || rowData[item.dataStr] }}</span>
                            </el-tooltip>

                            <div class="btns">
                                <el-tooltip effect="dark" placement="top" content="正选过滤条件">
                                    <i @click="add(item, 'positive')" style="color: #6aa6ce" class="el-icon-circle-plus-outline"></i>
                                </el-tooltip>
                                <el-tooltip effect="dark" placement="top" content="反选过滤条件">
                                    <i @click="add(item, 'back')" style="color: #ec5759; margin: 0 5px" class="el-icon-remove-outline"></i>
                                </el-tooltip>
                                <el-tooltip effect="dark" placement="top" content="切换是否在表格中展示字段">
                                    <i @click="$emit('toggle-click', item)" style="color: #fdcb3d" class="el-icon-reading"></i>
                                </el-tooltip>
                            </div>
                        </div>
                    </el-form-item>
                </el-form>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>
<script>
import i18n from '../../i18n'
export default {
    props: {
        filtersFields: {
            type: Object,
            default: () => {}
        },
        rowData: {
            type: Object,
            default: () => {}
        },
    },
    watch: {
        filtersFields: {
            immediate: true,
            handler(val) {
                this.expandArray = Object.keys(val)
            }
        }
    },
    data() {
        return {
            expandArray:[],
        }
    },
    methods: {
        add(item, type) {
            this.$emit('filter-click', {
                key: item.dataStr,
                value: this.rowData[item.dataStr],
                symbol: type == 'positive' ? '1' : '2',
                name: `${item.dataName} == ${this.rowData[item.dataStr]}`,
                query: `${type == 'positive' ? '' : 'NOT '}${item.dataStr} : "${this.rowData[item.dataStr]}"`,
                status: type,
                disabled: false
            })
        },
        t(val) {
            return i18n.zh[val]
        }
    }
}
</script>

<style lang="scss" scoped>
    .keyValue-coment {
        .el-form-item {
            margin-bottom: 2px;
        }
        ::v-deep .el-form-item__label {
            height: 20px;
            padding-left: 20px;
            line-height: normal;
        }
        ::v-deep .el-form-item__content {
            line-height: normal;
        }
        .filterSpan {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            width: 250px;
            margin-left: 50px;
        }
        .btns {
            margin-left: 50px;
            width: 53px;
            cursor: pointer; 
            text-align: right;
        }
    }
</style>