<template>
  <VCodeBlock
      :code="import_code"
      highlightjs
      label="Import"
      lang="javascript"
      tabs="true"
      theme="hybrid"
  />
  <!--  <VCodeBlock-->
  <!--      :code="filter_props"-->
  <!--      highlightjs-->
  <!--      label="Props"-->
  <!--      lang="javascript"-->
  <!--      tabs="true"-->
  <!--      theme="hybrid"-->
  <!--  />-->
  <props-details-table :props-data="props_data"/>
  <label class="form-label">Example</label>
  <ApbdFilterPanel :isSingle="true" @searchFilter="this.searchData" @reset="this.clearSearch"/>
  <VCodeBlock
      :code="single_search_demo"
      highlightjs
      label="Single search demo"
      lang="javascript"
      tabs="true"
      theme="hybrid"
  />
  <h6 class="fs-6 mb-3">Multi search</h6>
  <ApbdFilterPanel :filter-options="filterProps" @searchFilter="this.searchData" @reset="this.clearSearch"/>
  <VCodeBlock
      :code="multi_search_demo"
      highlightjs
      label="Multi search demo"
      lang="javascript"
      tabs="true"
      theme="hybrid"
  />
  <VCodeBlock
      :code="filter_props_data"
      highlightjs
      label="filterProps data example"
      lang="javascript"
      tabs="true"
      theme="hybrid"
  />
</template>

<script>
import ApbdFilterPanel from "@/components/ApbdFilterPanel";
import VCodeBlock from '@wdns/vue-code-block';
import PropsDetailsTable from "./PropsDetailsTable.vue";

export default {
  name: "TestFilterPanel",
  components: {PropsDetailsTable, ApbdFilterPanel, VCodeBlock},
  data() {
    return {
      filterProp: {
        searchKey: [],
        sort_prop: '',
        sort_ord: '',
      },
      filterProps: [
        {
          id: 1,
          name: 'Item Name',
          propName: 'title',
          placeholder: 'Enter name',
          type: 't',
          options: [],
          operators: 'like',
          value: '',
        },
        {
          id: 2,
          name: 'Available Seats',
          propName: 'seat_cap',
          placeholder: 'Enter Seats',
          type: 't',
          options: [],
          operators: 'like',
          value: '',
        },
        {
          id: 3,
          name: 'Order Date',
          propName: 'order_date',
          type: 'd',
          options: [],
          operators: 'eq',
          value: ''
        },
        {
          id: 4,
          name: 'Date Between',
          propName: 'order_date',
          type: 'dr',
          options: [],
          operators: 'bt',
          value: {
            start: '',
            end: ''
          }
        }
      ],
      import_code: "import AppFilterPanel from \"@appsbd/vue3-appsbd-libs\"",
      props_data: [
        {
          name: 'is-advance',
          type: 'Boolean',
          default_val: 'false',
          details: 'Option for advance search.'
        },
        {
          name: 'is-single',
          type: 'Boolean',
          default_val: 'false',
          details: 'Option for single search.'
        },
        {
          name: 'can-scan',
          type: 'Boolean',
          default_val: 'false',
          details: 'Option for scan.'
        },
        {
          name: 'filter-options',
          type: 'Array',
          default_val: '[ ]',
          details: 'Options that will use for search.'
        },
        {
          name: 'scan-props',
          type: 'String',
          default_val: '',
          details: 'Default scan properties name.'
        },
        {
          name: 'show-scan-fld',
          type: 'Boolean',
          default_val: 'false',
          details: 'Option to showing scan field.'
        },
        {
          name: 'show-dr-group-text',
          type: 'Boolean',
          default_val: 'true',
          details: 'Option to display input group text in the date property search input.'
        },
        {
          name: 'date-format',
          type: 'String',
          default_val: 'MMM DD,YYYY',
          details: 'Defines the display format for the date. '
        },
      ],
      filter_props: "  props:{\n" +
          "    isAdvance:{\n" +
          "      type:Boolean,\n" +
          "      default:false\n" +
          "    },\n" +
          "    advanceClass:{\n" +
          "      type:String,\n" +
          "      default:'col-sm-6 col-lg-3 mb-2'\n" +
          "    },\n" +
          "    buttonClass:{\n" +
          "      type:String,\n" +
          "      default:'col-sm-3 col-lg-2'\n" +
          "    },\n" +
          "    isSingle:{\n" +
          "      type:Boolean,\n" +
          "      default:false\n" +
          "    },\n" +
          "    isAllowed:{\n" +
          "      type:Boolean,\n" +
          "      default:false\n" +
          "    },\n" +
          "    filterOptions:{\n" +
          "      type:Array,\n" +
          "      default:[]\n" +
          "    },\n" +
          "  }",
      single_search_demo: "<ApbdFilterPanel :isSingle=\"true\" @searchFilter=\"this.searchData\" @reset=\"this.clearSearch\"/>",
      multi_search_demo: "<AppFilterPanel :filter-options=\"filterProps\" @searchFilter=\"this.searchData\" @reset=\"this.clearSearch\"/>",
      filter_props_data: "filterProps: [\n" +
          "        {\n" +
          "          id: 1,\n" +
          "          name: 'Item Name',\n" +
          "          propName: 'title',\n" +
          "          placeholder: 'Enter name',\n" +
          "          type: 't',\n" +
          "          options: [],\n" +
          "          operators: 'like',\n" +
          "          value: '',\n" +
          "        },\n" +
          "        {\n" +
          "          id: 2,\n" +
          "          name: 'Available Seats',\n" +
          "          propName: 'seat_cap',\n" +
          "          placeholder: 'Enter Seats',\n" +
          "          type: 't',\n" +
          "          options: [],\n" +
          "          operators: 'like',\n" +
          "          value: '',\n" +
          "        },\n" +
          "        {\n" +
          "          id: 3,\n" +
          "          name: 'Order Date',\n" +
          "          propName: 'order_date',\n" +
          "          type: 'd',\n" +
          "          options: [],\n" +
          "          operators: 'eq',\n" +
          "          value: ''\n" +
          "        },\n" +
          "        {\n" +
          "          id: 4,\n" +
          "          name: 'Date Between',\n" +
          "          propName: 'order_date',\n" +
          "          type: 'dr',\n" +
          "          options: [],\n" +
          "          operators: 'bt',\n" +
          "          value: {\n" +
          "            start: '',\n" +
          "            end: ''\n" +
          "          }\n" +
          "        }\n" +
          "      ],"
    }
  },
  methods: {
    searchData(data) {
      console.log(data);
      this.filterProp.searchKey = [];
      this.filterProp.searchKey = data;
    },
    clearSearch() {
      this.filterProp.searchKey = [];
    },
  }
}
</script>

<style scoped>

</style>