<template>
    <tr>
        <td class="text-center align-middle" style="width: 20px;">
            <i :class="filter.getIco()" data-v-a15d8858="" style="font-size: 14px;"></i>
        </td>
        <td class="text-center align-middle">
            <input type="text" attribute="col_name" v-model="filter.columnName" class="form-control-sm form-control" style="background: #ffffff00;border-style: none; font-size: 12px;" maxlength="32" readonly='true' required placeholder="column name" data-placement="top" title="column name"  />
        </td>
        <td class="align-middle">
            <div class="dropdown">
                <button class="btn btn-primary btn-sm dropdown-toggle" attribute="col_type" aria-expanded="false" data-toggle="dropdown" type="button" data-boundary="window" style="background: #4e73df00;color: rgb(128,128,128);border-style: none;" data-placement="top" title="column data type" :value="selectedValue">{{selectedText}}</button>
                <div class="dropdown-menu" style="width: 200px;">
                    <a  class="dropdown-item" v-for="(option,index) in filterList" :key="index" @click="handleClick(index)">{{option.text}}</a>
                </div>
            </div>
        </td>
        <td class="align-middle">
            <input :id="'input_value_' + index"   :type="this.filter.datatype" v-if="activeInputValue" :value="filter.value" @input="$emit('update:value', $event.target.value, index)" attribute="value" class="form-control-sm form-control" style="background: #ffffff00;border-style: none; font-size: 12px;" maxlength="32" required placeholder="value" data-placement="top"  />
            <input :id="'input_low_value_' + index"   :type="this.filter.datatype" v-if="activeInputLowValue" :value="filter.low_value" @input="$emit('update:low_value', $event.target.value, index)" attribute="low value" class="form-control-sm form-control" style="background: #ffffff00;border-style: none; font-size: 12px;" maxlength="32" required placeholder="low value" data-placement="top"   />
            <input :id="'input_hight_value_' + index"   :type="this.filter.datatype" v-if="activeInputHightValue" :value="filter.higth_value" @input="$emit('update:hight_value', $event.target.value, index)" attribute="hight value" class="form-control-sm form-control" style="background: #ffffff00;border-style: none; font-size: 12px;" maxlength="32" required placeholder="hight value" data-placement="top"   />
        </td>
        <td style="width: 20px;" class="align-middle">
            <a @click="deleteItem" class="btn">
                <i class="fa fa-trash"></i>
            </a>
        </td>
    </tr>
</template>
<script lang="ts">
import { Filter } from '../../../domain/models/filterSql/filter';
export default{
    name: 'ItemFilter',
    props:{
        index: Number,
        filter: Filter,
    },
    components:{

    },
    data: () =>{
        return{
            inputType: '',
            filterList: [],
            filterTypeList: [
                {
                    datatype: 'TEXT',
                    filters: [
                        { value: '=', text: 'equal to' },
                        { value: '<>', text: 'not equal to' },
                        { value: 'LIKE', text: 'contains'},
                        { value: 'NOT LIKE', text: 'does not contain' },
                        { value: "START", text: 'starts with' },
                        { value: "NOT START", text: 'does not start with' },
                        { value: 'IS NULL', text: 'is null' },
                        { value: 'IS NOT NULL', text: 'is not null' },
                    ]
                },
                {
                    datatype: 'NUMBER',
                    filters: [
                        { value: '=', text: 'equal to' },
                        { value: '<>', text: 'not equal to' },
                        { value: '<', text: 'less than' },
                        { value: '<=', text: 'less than or equal to' },
                        { value: '>', text: 'greater than' },
                        { value: '>=', text: 'greater than or equal to' },
                        { value: 'BETWEEN', text:'between' },
                        { value: 'NOT BETWEEN', text:'not between' },
                        { value: 'IS NULL', text: 'is null' },
                        { value: 'IS NOT NULL', text: 'is not null' },
                    ]
                },
                {
                    datatype: 'DATE',
                    filters: [
                        { value: '=', text: 'equal to' },
                        { value: '<>', text: 'not equal to' },
                        { value: '<', text: 'less than' },
                        { value: '<=', text: 'less than or equal to' },
                        { value: '>', text: 'greater than' },
                        { value: '>=', text: 'greater than or equal to' },
                        { value: 'BETWEEN', text:'between' },
                        { value: 'NOT BETWEEN', text:'not between' },
                        { value: 'IS NULL', text: 'is null' },
                        { value: 'IS NOT NULL', text: 'is not null' },
                    ]
                },
            ],
            selectedValue: "",
            selectedText: "",
            activeInputValue: true,
            activeInputHightValue: false,
            activeInputLowValue: false,
        }
    },
    watch:{
        value: function(selectedItem){
            this.selectedValue = selectedItem;
            this.selectedText = this.optionList.find(item => item.value === selectedItem).text;
            console.log('change', 'dropdown' );
        },
        index: function(){
            console.log('change index', this.filter.columnName);
            this.activeInput(this.filter.filter);
        },
        filter: function(){
            console.log('change filter', this.filter.columnName);
            this.activeInput(this.filter.filter);
            this.selectedText = this.filter.filter;
        }
    },
    methods:{
        handleClick(index : any) {
            this.selectedValue = this.filterList[index].value;
            this.activeInput(this.selectedValue);
            this.selectedText = this.filterList[index].text;
            this.$emit('selectchange',  this.selectedValue, this.index);
            
        },
        deleteItem(){
             this.$emit('deleteItem',  this.index);
        },
        activeInput(filterType: string){
            console.log('activeInput => ', filterType);
            if(filterType === 'IS NULL' || filterType === 'IS NOT NULL'){
                this.activeInputValue = false;
                this.activeInputHightValue = false;
                this.activeInputLowValue = false;
            }else if(filterType === 'BETWEEN' || filterType === 'NOT BETWEEN'){
                this.activeInputValue = false;
                this.activeInputHightValue = true;
                this.activeInputLowValue = true;
            }else{
                this.activeInputValue = true;
                this.activeInputHightValue = false;
                this.activeInputLowValue = false;
            }
        }
    },
    mounted(){
        this.selectedText =  'select filter type';
        this.filterList = this.filterTypeList.find(item => item.datatype === this.filter.datatype).filters;
        let selectedFilter = this.filterList.find((item : any) => item.value  == this.filter.filter);
        if(selectedFilter != undefined){
            this.selectedValue = selectedFilter.value;
            this.selectedText  = selectedFilter.text;
            this.activeInput(selectedFilter.value);
        }
        
    }
}
</script>
<style scoped>
.table-body-cell{
display: table-cell;
}

.resp-table-row{
display: table-row;
color: black;
}

.resp-table-body{
display: table-row-group;
}

#resp-table {
width: 100%;
display: table;
}
</style>