import Vue from "vue";

export default Vue.extend({
    template: `
        <div>
            <Select
            v-model="value"
            ref="select"
            style="width:200px;"
            transfer
            clearable
            filter
            :placeholder="placeholder"
        >
            <Option v-for="key in Object.keys(dict)" :value="key" :key="key">{{ dict[key] }}</Option>
        </Select>
        </div>
    `,
    data() {
        return {
            value: null,
            valueGetter: null,
            dict: {}
        }
    },
    computed: {
        placeholder() {
            return `请选择${this.params.colDef.headerName}`
        }
    },
    methods: {
        isFilterActive() {
            return this.value !== null && this.value !== undefined && this.value !== '';
        },

        doesFilterPass(params) {
            if (this.valueGetter(params.node)) {
                return !this.value || this.value.toLowerCase()
                    .split(" ")
                    .every((filterWord) => {
                        return this.valueGetter(params.node).toString().toLowerCase().indexOf(filterWord) >= 0;
                    });
            }
        },

        getModel() {
            return { value: this.value };
        },

        setModel(model) {
            if (model) {
                this.value = model.value;
            }
        },

        afterGuiAttached() {
            // this.$refs.select.focus();
        },

        componentMethod(message) {
            alert(`Alert from PartialMatchFilterComponent ${message}`);
        }
    },
    watch: {
        value(to,from ){
            if ( to !== from ){
                this.params.filterChangedCallback();
            }
        }
    },
    created() {
        let column = this.params.colDef;
        let gridDicts = this.params.context.gridDicts;
        this.dict = gridDicts[column.colId]
        this.valueGetter = this.params.valueGetter;

        console.log(this.params)
    }
})