<template>
    <div class="app-rawitem-carousel">
        <Carousel class="carsouel-container" :autoplay="swipeConfig.isAuto" :autoplay-speed="swipeConfig.timeSpan" radius-dot>
            <CarouselItem v-for="(item, index) in swipeData" :key="index">
                <div class="carousel-img-item">
                    <a v-if="item.linkPath" :href="item.linkPath">
                        <img class="app-carouse-img" v-if="item.imgPath" :src="item.imgPath" @error="imgError" />
                        <i v-else :class="item.iconClass"></i>
                    </a>
                    <img class="app-carouse-img" v-else-if="item.imgPath" :src="item.imgPath" @error="imgError" />
                    <i v-else :class="item.iconClass.cssClass" :style="handleIconCss(item.iconClass)"></i>
                </div>
            </CarouselItem>
        </Carousel>
    </div>
</template>
<script lang='ts'>
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
@Component({})
export default class AppCarousel extends Vue {
    /**
     * @description 轮播图数据
     * @param {*}
     * @memberof AppCarousel
     */
    @Prop() public data?: any;

    /**
     * @description 轮播图样式
     * @param {*}
     * @memberof AppCarousel
     */
    @Prop() public rawstyle?: any;

    /**
     * @description 轮播图图片所有项数据
     * @memberof AppCarousel
     */

    public swipeData: any[] = [];

    /**
     * @description 轮播图配置
     * @memberof AppCarousel
     */
    public swipeConfig: any = {};

    /**
     * data值变化
     *
     * @param {*} newVal
     * @param {*} oldVal
     * @memberof AppCarousel
     */
    @Watch('data', { immediate: true, deep: true })
    public onDataChange(newVal: any, oldVal: any) {
        if (newVal) {
            this.handleSwipData(newVal);
        }
    }

    /**
     * @description 构建之前
     * @memberof AppCarousel
     */
    created() {
        this.handleSwipData(this.data);
    }

     /**
     * @description 处理轮播图数据
     * @memberof AppCarousel
     */
    private handleSwipData(data: any) {
        if (data && data.length > 0) {
            const configItem = data.findIndex((item: any) =>
                Object.is(item.key, "autoplay")
            );
            if (configItem > -1) {
                // 有配置参数就截掉配置参数
                this.swipeData = data.slice(0, -2);
                this.swipeConfig = this.setSwipeConfig(data.slice(-2));
            } else {
                this.swipeData = this.data;
                this.swipeConfig = this.setSwipeConfig(data);
            }
        }
    }

    /**
     * @description 设置轮播图配置
     * @param {*}
     * @memberof AppRawItem
     */
    private setSwipeConfig(data: any) {
        const autoPlay: any =
            data.find((item: any) => Object.is(item.key, "autoplay")) || {};
        const timeSpan: any =
            data.find((item: any) => Object.is(item.key, "timespan")) || {};
        let isauto = false;
        let timespan = 0;
        if (autoPlay.value && Object.is(autoPlay.value, "1")) {
            isauto = true;
        }
        if (timeSpan.value) {
            timespan = Number(timeSpan.value);
        }
        return {
            isAuto: isauto,
            timeSpan: timespan,
        };
    }

    /**
     * 处理图标大小
     * @memberof AppMobCarousel
     */
    public handleIconCss(data: any) {
        return {
            width: data.width || 6 + 'px',
            height: data.height || 6 + 'px',
        };
    }

    /**
     * img src错误
     *
     * @param {*} $event
     * @memberof AppCarousel
     */
    imgError($event: any) {
        let img = $event.srcElement;
        if (img && !img.imgSign) {
            if (img && !img.imgSign) {
                img.src = 'assets/img/404.png';
                img.imgSign = true;
                img.imgSign = true;
            }
            img.onerror = null;
        }
    }
}
</script>

<style lang='less'>
@import './app-rawitem-carousel.less';
</style>