<template>
    <el-popover v-model:visible="visible"
                placement="bottom"
                trigger="click"
                :popper-class="column.prop"
                @show="handlerShow"
                @hide="handlerHide">
        <template v-slot:reference >
           <div
                class="column-filter-style"
                :style="{background: visible ? '#c9cdd4' : ''}"
            >
                <img
                    v-if="tempChecked.list.length > 0 || tempInput || selectChecked || (constomSelectChecked && constomSelectChecked.length > 0)"
                    src="../../assets/images/columnfilter-active.png"
                >
                <img
                    v-else
                    src="../../assets/images/columnfilter.png"
                >
           </div>
        </template>
        <infoForm :modelData="entity"
                :config="config">
            <template #divider>
                <el-divider />
            </template>
        </infoForm>
    </el-popover>
</template>
<script lang="ts">
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
import infoForm from '../infoForm/infoForm.vue'
import { FormConfig } from '../form'
import { defineComponent, reactive, ref } from 'vue'

interface entityInterface {
    checked: string[]
    name: string
    selectValue: string | any[],
    constomSelectValue: string | any[]
}

export default defineComponent({
    components: {
        infoForm,
        ArrowDown,
        ArrowUp
    },
    props: {
        column: {
            type: Object,
            default: () => {
            }
        },
        parameter: {
            type: Object,
            default: () => {}
        },
        options: {
            type: Object,
            default: () => {
            }
        }
    },
    setup (props) {
        let visible = ref<boolean>(false)
        let entity: entityInterface = reactive({
            checked: [],
            name: '',
            selectValue: '',
            constomSelectValue: ''
        })
        interface tempCheckedInterface {
            list: string[]
        }
        let tempChecked = reactive<tempCheckedInterface>({
            list: []
        })

        let tempInput = ref('')
        let selectChecked: any = ref('')
        let constomSelectChecked: any = ref('')
        let formConfig = new FormConfig({
            validate: {},
            labelWidth: '0'
        })
        formConfig.setRule({
            model: 'checked',
            type: 'infoCheckbox',
            inline: false,
            label: '',
            allElection: false,
            show: () => props.column.filterOptions && props.column.filterOptions(),
            checkbox: () => props.column.filterOptions ? props.column.filterOptions() : [],
            methods: () => {
                // props.column.highlight = val.length > 0
            }
        })
        formConfig.setSelectRule({
            label: '',
            type: 'infoCustomSelect',
            model: 'constomSelectValue',
            teleported: false,
            multiple: props.column.multiple,
            optionsLabel: props.column?.optionsLabel || 'label',
            optionsValue: props.column?.optionsValue || 'value',
            show: () => props.column?.customSelectOptions?.(),
            options: () => props.column?.customSelectOptions?.() || []
        }).setSelectRule({
            label: '',
            type: 'infoSelect',
            model: 'selectValue',
            teleported: false,
            multiple: props.column.multiple,
            optionsLabel: props.column?.optionsLabel || 'label',
            optionsValue: props.column?.optionsValue || 'value',
            show: () => props.column?.selectOptions?.(),
            options: () => props.column?.selectOptions?.() || []
        }).setInputRule({
            label: '',
            type: 'infoInput',
            model: 'name',
            show: () => props.column.filterInput,
            keyEvent: true,
            methods: () => {
                tempChecked.list = entity.checked // 记录初始值
                tempInput.value = entity.name
                props.column.filterMethod(entity, props.column)
                visible.value = false
            }
        })
        formConfig.setRule({
            label: '',
            type: 'infoSlot',
            model: 'divider',
            slotName: 'divider'
        })
        formConfig.setRule({
            model: 'operation.button',
            type: 'infoButton',
            label: '',
            operation: [{
                show: () => true,
                label: 'confirm',
                text: true,
                type: 'primary',
                size: 'small',
                methods: () => {
                    tempChecked.list = entity.checked // 记录初始值
                    tempInput.value = entity.name
                    constomSelectChecked.value = entity.constomSelectValue
                    selectChecked.value = entity.selectValue
                    props.column.filterMethod(entity, props.column)
                    visible.value = false
                }
            }, {
                show: () => true,
                label: 'reset',
                text: true,
                size: 'small',
                type: 'primary',
                methods: () => {
                    entity.checked = []
                    tempChecked.list = []
                    tempInput.value = ''
                    entity.name = ''
                    entity.selectValue = ''
                    entity.constomSelectValue = ''
                    selectChecked.value = ''
                    constomSelectChecked.value = ''
                    props.column.filterMethod(entity, props.column)
                    // props.column.highlight = false
                }
            }]
        })
        const handlerShow = () => {
            entity.checked = tempChecked.list
            entity.name = tempInput.value
            entity.selectValue = selectChecked.value
            entity.constomSelectValue = constomSelectChecked.value
        }
        const openPopover = () => {
            visible.value = true
        }
        const handlerHide = () => {
            // props.column.highlight = tempChecked.length > 0
        }
        return { visible, entity, tempChecked, constomSelectChecked, selectChecked, config: reactive(formConfig), handlerShow, handlerHide, tempInput, openPopover }
    }
})
</script>
<style lang="scss" scoped>
.wrap {
    padding-left: 0;
}

:deep(.info-from) {
    .el-divider {
        margin: 0;
    }

    .el-form-item {
        margin-bottom: 5px;
    }
}

.el-icon-s-operation {
    color: var(--info-color-ccc);
    cursor: pointer;
    padding: 5px;
}
.column-filter-style {
    display: inline-block;
    img {
        width: 20px;
        height: 20px;
        vertical-align: middle;
    }
    &:hover {
        background: var(--info-color-ccc);
    }
}
</style>
