<template>
  <v-dialog
    v-model="isVisible"
    max-width="600px"
    data-cy="dataTableMobileFilterColumnSelectorControl"
    @keydown.esc="close()"
  >
    <v-list>
      <v-subheader>{{ $sock.t("Filter") }}</v-subheader>
      <v-list-item-group v-model="mobileSelectedFilterColumn" color="primary">
        <template v-for="(item, i) in headers">
          <v-list-item v-if="item.flt" :key="i" @click="close(item)">
            <v-list-item-icon>
              <v-icon :color="filterColor(item)">$sockiFilter</v-icon>
            </v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title v-text="item.text"></v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </template>
      </v-list-item-group>
    </v-list>
  </v-dialog>
</template>
<script>
export default {
  data: () => ({
    isVisible: false,
    resolve: null,
    reject: null,
    filterColor: null,
    mobileSelectedFilterColumn: null,
    headers: []
  }),

  methods: {
    open(headers, filterColor) {
      this.headers = headers;
      this.filterColor = filterColor;
      this.isVisible = true;
      return new Promise((resolve, reject) => {
        this.resolve = resolve;
        this.reject = reject;
      });
    },
    close(ret) {
      this.isVisible = false;
      this.resolve(ret);
    }
  }
};
</script>
