<!--
 * @Description  : 图片组-页签组件
 * @Author       : 熊伟
 * @Date         : 2020-06-16 16:33:46
 * @LastEditTime: 2020-10-10 14:47:33
 * @LastEditors: 李璕
 * @FilePath     : \see-tp-imgtab.vue
 -->
<template>
    <div class="see-tp-imgtab" v-if="isShow">
        <div
            class="see-imgtab"
            v-if="componentData"
            :class="[{ m: componentData.commonVariable.isMobile }]"
        >
            <div class="tabs">
                <template v-if="!componentData.commonVariable.isMobile">
                    <div
                        v-for="(tab, index) in componentData.group"
                        :key="index"
                        :title="tab.title"
                        class="tab-item"
                        :class="{ active: currIndex == index }"
                        @click="currIndex = index"
                    >
                        {{ tab.title || "页签" + (index + 1) }}
                    </div>
                </template>
                <template v-else>
                    <swiper :options="swiperOption" ref="categorySwiper">
                        <swiper-slide
                            v-for="(tab, index) in componentData.group"
                            :key="index"
                            :title="tab.title"
                        >
                            <div
                                class="tab-item"
                                :class="{ active: currIndex == index }"
                                @click="currIndex = index"
                            >
                                {{ tab.title || "页签" + (index + 1) }}
                            </div>
                        </swiper-slide>
                    </swiper>
                </template>
            </div>
            <div class="img-wrapper">
                <div
                    v-for="(imgItem, idx) in componentData.group"
                    :key="idx"
                    v-show="idx == currIndex"
                    class="img-cont"
                >
                    <base-image
                        v-if="imgItem.img"
                        class="image"
                        :class="{ link: imgItem.link }"
                        :src="imgItem.img"
                        :tips="imgItem.tip"
                        @click.native="imgJump(imgItem.link)"
                    ></base-image>
                    <div
                        v-if="
                            componentData.commonVariable.pageType == 'design' &&
                            !imgItem.img
                        "
                        class="img-empty"
                    >
                        <div>
                            <div>图片</div>
                            <div style="font-size: 12px; margin-top: 10px">
                                支持拓展名：.png .jpg .gif .bmp
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import btnMixin from "./button-mixin";
import BaseImage from "./components/base-image";
import permissionMixin from "./permission-mixin";
import "swiper/dist/css/swiper.min.css";
import Vue from "vue";
import VueAwesomeSwiper from "vue-awesome-swiper";
Vue.use(VueAwesomeSwiper);

export default {
    name: "see-tp-imgtab",
    mixins: [btnMixin,permissionMixin],
    components: {
        BaseImage,
    },
    // inject: ['isPC'],
    props: {
        componentData: {
            required: false,
        },
    },
    data() {
        return {
            items: [],
            currIndex: 0,
            swiperOption: {
                slidesPerView: 3,
                spaceBetween: 5,
                threshold: 10,
            },
        };
    },
    computed: {
        currTab() {
            if (this.componentData && this.componentData.group.length) {
                return this.componentData.group[this.currIndex];
            } else {
                return {};
            }
        },
    },
    watch: {},
    created() {},
    mounted() {},
    methods: {
        imgJump(jumpUrl) {
            if (this.componentData.commonVariable.pageType == "design") return;

            if (!jumpUrl || !jumpUrl.trim()) return;

            this._mixJumpClick(
                !this.componentData.commonVariable.isMobile,
                jumpUrl
            );
        },
    },
    destroyed() {},
};
</script>

<style lang="scss" scoped>
.see-tp-imgtab {
    min-height: 40px;
    box-shadow: 0 4px 12px 0 rgba(0,0,0,0.08);
    .tabs {
        width: 100%;
        height: 54px;
        border-bottom: 1px solid #ececec;
        .swiper-container {
            height: 100%;
        }
        .tab-item {
            position: relative;
            display: inline-block;
            height: 54px;
            max-width: 210px;
            margin-right: 64px;
            line-height: 54px;
            font-size: 20px;
            color: #666;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: center;
            cursor: pointer;
            &.active {
                color: #007AFF;
                font-weight: 500;
                &:after {
                    content: "";
                    position: absolute;
                    left: 0;
                    bottom: 0px;
                    right: 0;
                    top: auto;
                    height: 5px;
                    background-color: #007aff;
                    transition: all 1s ease;
                    border-radius: 2px;
                }
            }
        }
    }
    .image {
        width: 100%;
        height: auto;
        cursor: default;
        &.link {
            cursor: pointer;
        }
    }
}
.see-imgtab.m {
    width: 100%;
    .tabs {
        height: 40px;
        border-bottom: 0;
    }
    .tab-item {
        width: 100%;
        margin-right: 0;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        &.active {
            &:after {
                content: "";
                position: absolute;
                left: 50%;
                right: 30px;
                width: 26px;
                height: 3px;
                transform: translate(-50%, 0);
            }
        }
    }
}
.img-empty {
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: rgba(204, 204, 204, 0.15);
}
</style>

