<template>
    <div class="row bg-white clearfix go-img-list-ctl">
        <div class="left-arrow pull-left" @click="scrollToLeft()">
            <Icon type="ios-arrow-back"></Icon>
        </div>

        <div class="right-arrow pull-right" @click="scrollToRight()">
            <Icon type="ios-arrow-forward"></Icon>
        </div>

        <div class="img-list  clearfix" style="margin: 0 25px;">
            <div
                class="img-list-body clearfix"
                ref="listBody"
                :style="getListBodyStyle()"
            >
                <div
                    :key="item.id"
                    @click="selImg(item, $event)"
                    class="go-simple-img-item bg-gray pull-left"
                    :class="item.id === activeKey ? 'active-item' : ''"
                    v-for="item of imgAry"
                >
                    <div class="item-img">
                        <img :src="item.img"/>
                    </div>
                    <div class="item-label">
                        <span>{{ item.title }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "go-img-page-list",
        props: {
            activeKey: {
                type: String,
                default: ""
            },
            imgAry: {
                type: Array
            }
        },
        computed: {},
        methods: {
            scrollToRight() {
                //    滚动到右边
                let pWid = parseFloat(
                    $(this.$refs.listBody)
                        .parent()
                        .css("width")
                );
                if (
                    parseFloat($(this.$refs.listBody).css("width")) +
                    parseFloat($(this.$refs.listBody).position().left) >
                    pWid + 60
                ) {
                    $(this.$refs.listBody).animate(
                        {left: $(this.$refs.listBody).position().left - 90 + "px"},
                        100
                    );
                }
            },
            scrollToLeft() {
                //    滚动到右边
                if ($(this.$refs.listBody).position().left < -60) {
                    $(this.$refs.listBody).animate(
                        {left: $(this.$refs.listBody).position().left + 90 + "px"},
                        3
                    );
                } else {
                    $(this.$refs.listBody).animate({left: 0 + "px"}, 3);
                }
            },
            getListBodyStyle() {
                return {
                    width: this.imgAry.length * 90 + "px"
                };
            },
            selImg(item) {
                this.$emit("selectItem", item);
            }
        }
    };
</script>
