<template>
    <div class="advanced">
        <Select class="item" v-model="item.item" @on-change="changeItem" transfer>
            <Option v-for=" item in items" :value="item.value" :key="item.value">{{item.label}}</Option>
        </Select>
        <Select class="op" v-model="item.op" @on-change="changeOp" transfer>
            <Option v-show="itemType=='String'" value="like">{{$t('it.grid.cndLike')}}</Option>
            <Option value="equal">{{$t('it.grid.cndEqual')}}</Option>
            <Option v-show="itemType=='String'" value="start-with">{{$t('it.grid.cndStartWith')}}</Option>
            <Option v-show="itemType=='String'" value="end-with">{{$t('it.grid.cndEndWith')}}</Option>
            <Option v-show="itemType=='String'" value="is-null">{{$t('it.grid.cndIsNull')}}</Option>
            <Option
                v-show="itemType!='String'"
                value="greater-than"
            >{{$t('it.grid.cndGreaterThan')}}</Option>
            <Option
                v-show="itemType!='String'"
                value="greater-than-or-equal"
            >{{$t('it.grid.cndGreaterThanOrEqual')}}</Option>
            <Option v-show="itemType!='String'" value="less-than">{{$t('it.grid.cndLessThan')}}</Option>
            <Option
                v-show="itemType!='String'"
                value="less-than-or-equal"
            >{{$t('it.grid.cndEessThanOrEqual')}}</Option>
        </Select>
        <Input
            class="value"
            clearable
            v-model="item.value"
            v-show="!hideValue && itemType!=='Number'"
        ></Input>
        <InputNumber class="value" v-model="inputNum" v-show="!hideValue && itemType==='Number'"></InputNumber>
        <Icon class="remove" type="md-close" color="red" size="18" title="删除" @click="removeItem"></Icon>
    </div>
</template>
<script>
export default {
    name: 'HighFilterItem',
    data() {
        return {
            itemType: undefined,
            hideValue: false
            // inputNum: 1
        }
    },
    props: {
        item: {
            type: Object
        },

        items: {
            type: Array
        }
    },
    computed: {
        inputNum: {
            get() {
                return parseInt(this.item.value) || 1
            },
            set(newVal) {
                this.item.value = newVal
            }
        }
    },
    watch: {
        itemType(newVal) {
            if (newVal === 'Number' && !this.item.value) {
                this.item.value = 1
            }
        }
    },
    methods: {
        changeItem() {
            const fItem = this.items.find(curr => {
                return curr.value == this.item.item
            })

            if(!fItem) {
                return
            }
            
            this.item.type = fItem.type
            this.itemType = fItem.type

            if (this.itemType === 'String') {
                this.item.op = 'like'
            } else {
                this.item.op = 'equal'
            }
        },

        changeOp() {
            this.hideValue = this.item.op === 'is-null'
        },

        removeItem() {
            this.$emit('on-remove')
        }
    },
    mounted() {
        this.changeOp()
    }
}
</script>
<style lang="less"
    scoped>
.advanced {
    display: flex;
    align-items: center;
    margin-bottom: 6px;

    .item {
        width: 200px;
    }

    .op {
        width: 80px;
        margin: 0 6px;
    }

    .value {
        flex: 1;
    }

    .remove {
        cursor: pointer;
    }
}
</style>
