<template>
    <uv-sticky custom-nav-height="0" z-index="97">
        <view v-if="shortcut.length" class="bg-white px-20 pb-20 fx-row">
            <view class="flex-1 min-w-1 overflow-x-auto" ref="scrollWrap">
                <view class="fx-row items-center gap-10 w-max">
                    <uv-tags v-for="s in shortcut" :text="s.text" plain plain-fill size="mini" shape="circle">
                        <template #icon>
                            <view class="mr-5 w-32 h-32 rounded-full fx-row fx-cen-cen bg-primary-light"
                                  @click="handleRemove(s)">
                                <uv-icon name="close" size="12" color="white"/>
                            </view>
                        </template>
                    </uv-tags>
                </view>
            </view>
            <view class="fx-row bg-white fx-cen-cen pl-20 relative" :class="{ 'is-hover': showShadow }">
                <uv-icon size="18" name="trash" color="primary" @click="handleRemoveAll"/>
            </view>
        </view>
        <uv-line/>
    </uv-sticky>
</template>

<script>
import _ from 'lodash';
import InjectAIDataMixin from "@/pagesOther/pages/ie/entry-ai-form/components/InjectAIDataMixin";
import MxConst from "@/common/MxConst";

export default {
    name: "ai-form-filter-shortcut",
    mixins: [InjectAIDataMixin],
    data() {
        return {
            showShadow: true
        }
    },
    watch: {
        'shortcut.length'() {
            this.$nextTick(() => {
                this.initScroll();
                this.handleTagScroll({target: this.$refs.scrollWrap?.$el});
            });
        }
    },
    methods: {
        async handleRemove(op) {
            await this.couldChangeFilter(op)
            op.selected = false
            _.pull(this.shortcut, op)
            uni.$emit(MxConst.globalEvents.aiFilterShortcutClear, op)
        },
        async handleRemoveAll() {
            let confirmed = false
            for (const i of this.shortcut) {
                await this.couldChangeFilter(i, () => confirmed = true)
                if (confirmed) break; // only confirm once.
            }
            let op = this.shortcut.shift()
            while (op) {
                op.selected = false
                uni.$emit(MxConst.globalEvents.aiFilterShortcutClear, op)
                op = this.shortcut.shift()
            }
        },
        handleTagScroll(e) {
            if (!e.target) {
                return;
            }
            const target = e.target;
            const {scrollLeft, clientWidth} = target;
            const childWidth = target.firstElementChild.clientWidth;
            this.showShadow = Math.ceil(clientWidth + scrollLeft + 2) < childWidth;
        },
        initScroll() {
            const scrollWrap = this.$refs.scrollWrap?.$el;
            if (scrollWrap) {
                scrollWrap?.removeEventListener('scroll', this.handleTagScroll);
                scrollWrap?.addEventListener('scroll', this.handleTagScroll);
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.is-hover {
    &::before {
        content: "";
        width: 10px;
        height: 100%;
        position: absolute;
        left: -10px;
        top: 0;
        z-index: 1;
        background: linear-gradient(to left, rgba(0, 0, 0, 0.2), transparent);
    }
}
</style>
