<template>
    <div>
        <div id="_cmp" style="padding-left: 6px;padding-right: 6px;">
            <div class="row" style="height: 40px;">
                <div class="col">
                    <div class="input-group mb-3">
                        <span class="input-group-text d-xl-flex justify-content-xl-end" style="font-style: normal;font-weight: bold;background: rgba(234,236,244,0);border-color: rgba(133,135,150,0);border-right-style: none;font-size: 14px;padding-left: 0px;">Properties</span>
                        <span class="input-group-text d-xl-flex justify-content-xl-start form-control" style="font-style: normal;font-weight: bold;background: rgba(234,236,244,0);border-color: rgba(133,135,150,0);border-style: none;font-size: 14px;padding-left: 0px;">
                            <button id="add_btn" class="btn btn-primary btn-sm" type="button" @click="addPropertyEntry" style="border-top-left-radius: 25px;border-top-right-radius: 25px;border-bottom-right-radius: 25px;border-bottom-left-radius: 25px;margin-right: 10px;background: rgba(28,200,138,0);border-style: none;border-color: var(--bs-gray);padding-top: 2px;padding-bottom: 2px;padding-right: 6px;padding-left: 6px;" title="add field"><i class="fas fa-plus" style="color: #858796;"></i></button>
                            <button id="del_btn" class="btn btn-primary btn-sm" type="button" @click="delPropertyEntry" style="border-top-left-radius: 25px;border-top-right-radius: 25px;border-bottom-right-radius: 25px;border-bottom-left-radius: 25px;margin-right: 10px;background: rgba(28,200,138,0);border-style: none;border-color: var(--bs-gray);padding-left: 6px;padding-right: 6px;padding-top: 2px;padding-bottom: 2px;" title="remove checked fields"><i class="fas fa-minus" style="color: #858796;"></i></button>
                        </span>
                    </div>
                </div>
            </div>
            <div class="row" v-for="(property, index) in _propertyList" :key="index">
            <div class="col-auto">
                <input type="checkbox" v-model="property.check" />
            </div>
            <div class="col-5">
                <InputForm :value="property.name" placeholder="property" @update:value="property.name = $event"></InputForm>
            </div>
            <div class="col-2">
                <DropDownListDS label="" :optionList="algorithmList" :value="property.algorithm" placeholder="select algorithm" @selectchange='property.algorithm = $event'></DropDownListDS>
            </div>
            <div class="col-4" style="padding-bottom: 20px;">
                <div>
                    <div style="float:left; width:75%">
                        <MultipleRangeSlider :intervals="intervals" :min="0" :step='0.01' :max="1" :minValue="property.low" :maxValue="property.high" @update:maxValue="property.high = $event" @update:minValue="property.low = $event" ></MultipleRangeSlider>
                    </div>
                    <div style="float:left; padding-left: 10px; font-size: 13px;">
                        <div>High: {{property.high}}</div>
                        <div>Low: {{property.low}}</div> 
                    </div>
                    
                </div>
            </div>
            
        </div>
        </div>
    </div>
</template>
<script lang="ts">
import DropDownListDS from '@/lib-components/component/DropDownListDS.vue';
import InputForm from '@/lib-components/component/InputForm.vue';
import RowForm from '@/lib-components/component/RowForm.vue';
import MultipleRangeSlider from '@/lib-components/component/MultiRangeSlider.vue'
import { uuid } from 'vue-uuid' ;
export default {
    name: 'Properties',
    components: {
        DropDownListDS,
        InputForm,
        RowForm,
        MultipleRangeSlider,
    },
    props:{
        propertyList: [],
        minValue: { type: Number, default: 0.10 },
        maxValue: { type: Number, default: 0.90 },

    },
    data:() => {
        return {
            propertyName: {},
            algorithmList:[
                { value: 'DiceCoefficient', text: "DiceCoefficient" },
                { value: 'Different', text: "Different" },
                { value: 'Exact', text: "Exact" },
                { value: 'Geoposition', text: "Geoposition" },
                { value: 'Ignore', text: "Ignore" },
                { value: 'JaccardIndex', text: "JaccardIndex" },
                { value: 'JaroWinkler', text: "JaroWinkler" },
                { value: 'JaroWinklerTokenized', text: "JaroWinklerTokenized" },
                { value: 'Levenshtein', text: "Levenshtein" },
                { value: 'LongestCommonSubstring', text: "LongestCommonSubstring" },
                { value: 'Matcher.java', text: "Matcher.java" },
                { value: 'Metaphone', text: "Metaphone" },
                { value: 'Norphone', text: "Norphone" },
                { value: 'Numeric', text: "Numeric" },
                { value: 'PersonName', text: "PersonName" },
                { value: 'QGram', text: "QGram" },
                { value: 'Soundex', text: "Soundex" },
                { value: 'WeightedLevenshtei', text: "WeightedLevenshtein" }
            ],
            intervals: 2,
            selected: '',
            checkSelectd: true,
            _propertyList: []
        }
    },
    methods:{
        addPropertyEntry(){
            let property = {
                check : false,
                name : '',
                algorithm: '',
                high : this.maxValue.toFixed(2),
                low : this.minValue.toFixed(2),
                id: uuid.v1()
            }
            this._propertyList.push(property);
        },
        delPropertyEntry(){
            this._propertyList = this._propertyList.filter((item: any) => !item.check);
            this.$emit("delete:properties");
        }
    },
    watch:{
        _propertyList: {
            handler(){
            this.$emit("update:properties", this._propertyList);
        },
        deep: true
        },
        propertyList: {
            handler(){
            this._propertyList = this.propertyList;
        },
        deep: true
        }
    },
    mounted(){
        this._propertyList = this._propertyList;
    }
}
</script>
