Vue.component("roll-amplify-img", {
    template: `
        <div class="amplify-carousel" v-show="imgShow" style="display: none">
            <div class="amplify-carousel-img">
                <img :src="imgUrl">
            </div>
            <div class="amplify-carousel-close" @click="onCloseBtn">
                <i class="el-icon-close"></i>
            </div>
            <div class="amplify-carousel-btn amplify-carousel-left" @click="onTowardsLeft">
                <i class="el-icon-arrow-left"></i>
            </div>
            <div class="amplify-carousel-btn amplify-carousel-right" @click="onTowardsRight">
                <i class="el-icon-arrow-right"></i>
            </div>
            
        </div>
    `,
    props: {
        list:{
            type:Array
        },
        url:{
            type:String
        },
        show:{
            type:Boolean
        }
    },
    data() {
        return {
            index: -1,
            imgUrl:'',
            imgShow:false
        }
    },
    created() {

    },
    mounted(){

    },
    methods: {
        init(){
            this.imgUrl = this.url
            this.imgShow = this.show
            this.towards()
        },
        towards(){
            for (let i = 0; i < this.list.length ; i++) {
                if(this.list[i] == this.imgUrl){
                    this.index = i
                    break
                }
            }
        },
        onTowardsLeft(){
            this.index = this.index - 1
            if(this.index < 0){
                this.imgUrl = this.list[this.list.length-1]
                this.index = this.list.length-1
            }else{
                this.imgUrl = this.list[this.index]
            }
        },
        onTowardsRight(){
            this.index = this.index + 1
            if(this.index > this.list.length-1){
                this.imgUrl = this.list[0]
                this.index = 0
            }else{
                this.imgUrl = this.list[this.index]
            }
        },
        onCloseBtn(){
            this.imgShow = false
            this.$emit("show",false)
        },

    },
    watch:{
        list:function (o,n) {
            this.init()
        },
        url:function (o,n) {
            this.init()
        },
        show:function (o,n) {
            this.init()
        }
    },

})