<template>
  <template v-for="(filter, i) in filterHead">
    <template v-if="filter.filter !== undefined">
      <template v-if="filter.filter.type === 'datetime-local'">
        <div class="panel-content-item">
          <form-date
            v-model="localFilterData[filter.name]"
            :label="filter.title"
            @change="UpdateFilter(filter)" />
          <form-select
            v-if="filter.filter.range !== undefined && filter.filter.range"
            :listData="filterOperator"
            v-model="localFilterData[filter.name + 'op']"
            @change="UpdateFilter(filter)" />
        </div>
      </template>
      <template v-if="filter.filter.type === 'date'">
        <div class="panel-content-item">
          <form-date
            type="date"
            v-model="localFilterData[filter.name]"
            :label="filter.title"
            @change="UpdateFilter(filter)" />
          <form-select
            v-if="filter.filter.range !== undefined && filter.filter.range"
            :listData="filterOperator"
            v-model="localFilterData[filter.name + 'op']"
            @change="UpdateFilter(filter)" />
        </div>
      </template>
      <template v-if="filter.filter.type === 'text'">
        <div class="panel-content-item">
          <form-input
            v-model="localFilterData[filter.name]"
            :label="filter.title"
            @change="UpdateFilter(filter)" />
          <form-select
            v-if="filter.filter.range !== undefined && filter.filter.range"
            :listData="filterOperator"
            v-model="localFilterData[filter.name + 'op']"
            @change="UpdateFilter(filter)" />
        </div>
      </template>
      <template v-if="filter.filter.type === 'select'">
        <div class="panel-content-item">
          <form-select
            :listData="filter.filter.data"
            :listText="filter.filter.listText"
            :listVal="filter.filter.listVal"
            :extraData="filter"
            :label="filter.title"
            v-model="localFilterData[filter.filter.filterId || filter.name]"
            @change="UpdateFilterSelect"
            clearable />
        </div>
      </template>
    </template>
  </template>
</template>
<script setup lang="ts">
  import { ref, reactive, onBeforeMount } from 'vue'

  const props = defineProps<{
    filterHead: Record<string, any>
    filterParams: Record<string, any>
  }>()

  const emit = defineEmits(['update:filterParams'])

  const localFilterData = reactive<Record<string, any>>({})
  const localFilterParams = reactive<Record<string, any>>(
    Object.assign(props.filterParams)
  )
  const filterOperator = ref<string[]>(['=', '<', '>'])

  const createFilterData = () => {
    props.filterHead.forEach((d: Record<string, any>) => {
      if (d.filter !== undefined) {
        let filterKey = d.filter.filterId || d.name
        localFilterData[filterKey] = ''
        localFilterData[filterKey + 'op'] = '='
      }
    })

    Object.keys(localFilterParams).forEach((k, i) => {
      localFilterData[k] = localFilterParams[k].val
      localFilterData[k + 'op'] = localFilterParams[k].op
    })
  }

  const UpdateFilter = (k: Record<string, any>) => {
    let filterKey = k.filter.filterId || k.name
    if (localFilterData[filterKey] !== '') {
      localFilterParams[filterKey] = {}
      localFilterParams[filterKey].val = localFilterData[filterKey]
      localFilterParams[filterKey].op = localFilterData[filterKey + 'op']
      localFilterParams[filterKey].title = k.title
    } else delete localFilterParams[filterKey]

    emit('update:filterParams', localFilterParams)
  }
  const UpdateFilterSelect = (
    e: Event,
    v: string,
    d: Record<string, any>,
    ext: Record<string, any>
  ) => {
    let filterKey = ext.filter.filterId || ext.name
    if (v !== '' && v !== null && localFilterData[filterKey] !== '') {
      localFilterParams[filterKey] = {}
      localFilterParams[filterKey].val = localFilterData[filterKey]
      localFilterParams[filterKey].op = localFilterData[filterKey + 'op']
      localFilterParams[filterKey].title = ext.title
      localFilterParams[filterKey].text = d[ext.filter.listText]
    } else {
      delete localFilterParams[filterKey]
    }
    emit('update:filterParams', localFilterParams)
  }
  onBeforeMount(() => {
    createFilterData()
  })
</script>
