<template>
    <div class="toggleFile">
        <div class="toggleFile-btns">
        	<el-button class="abc1" size="mini" @click="firstFile" :disabled="fileIndex==1"></el-button>
        	<el-button class="abc2" size="mini" @click="prevPFile" :disabled="fileIndex==1"></el-button>
        	<input class="fileIndex" type="text" v-model="fileIndex" @keyup="currentFileChange"/>
        	<span class="fileCount"> &nbsp;/&nbsp;{{fileTotal}}</span>
        	<el-button class="abc3" size="mini" @click="nextFile" :disabled="fileIndex==fileTotal"></el-button>
        	<el-button class="abc4" size="mini" @click="lastFile" :disabled="fileIndex==fileTotal"></el-button>
        </div>
    </div>
</template>
<script type="text/javascript">
    export default{
        name: 'ToggleFile',
        props: ['fileList','fileId'],
        data(){
            return {
                fileIndex: 1,
                fileTotal: '',
                keyword_file_index: '',
            }
        },
        created(){
        },
        mounted(){

        },
        methods: {
            firstFile(){
            	if(this.fileIndex == 1){
            		return;
            	}
            	this.fileIndex = 1;
            },
            prevPFile(){
            	if(this.fileIndex == 1){
            		return;
            	}
            	this.fileIndex--;
            },
            nextFile(){
            	if(this.fileIndex == this.fileTotal){
            		return;
            	}
            	this.fileIndex++;
            },
            lastFile(){
            	if(this.fileIndex == this.fileTotal){
            		return;
            	}
            	this.fileIndex = this.fileTotal;
            },
            currentFileChange(){
            	let that = this;
            	if(this.fileChangeTimeId){
            		clearTimeout(this.fileChangeTimeId);
            	}
            	this.fileChangeTimeId = setTimeout( () => {
            		that.fileIndex = Number(that.fileIndex);
            		if(that.fileIndex > that.fileTotal) {
            			that.fileIndex = that.fileTotal;
            		}
            		if(that.fileIndex < 1){
            			that.fileIndex = 1;
            		}
            		that.fileChangeTimeId = '';
            	},1000);
            }
        },
        watch: {
            fileList(newval){
                this.fileTotal = newval.length;
            },
            fileId(newval,oldval){
                if(newval !== oldval){
                    this.fileList.forEach( (file,index) => {
                        if(file.id == newval){
                            this.keyword_file_index = (index - 0 +1);
                            this.fileIndex =  (index - 0 +1);
                        }
                    })
                }
            },
            fileIndex(newval,oldval){
                if(newval != oldval && newval != this.keyword_file_index){
                    this.$bus.emit('toggleFile',this.fileList[newval - 1].id);
                }
            }
        }
    }

</script>
<style type="text/css" scoped>
    .toggleFile{
   		width: 100%;
   		height: 40px;
   		line-height: 40px;
    }
    .toggleFile-btns{
   		margin: 0px auto;
   		padding: 0px 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .fileIndex{
        vertical-align: -2px;
   		width: 34px;
   		height: 24px;
   		font-size: 18px;
        line-height: 20px;
        text-align: center;
   		border: 1px solid #bbb;
        outline: none;
    }
    .fileCount{
   		vertical-align: -2px;
   		font-size: 18px;
    }
</style>
<style type="text/css">
    .toggleFile .el-button--mini,
    .toggleFile .el-button--mini.is-round{
        padding: 4px 5px;
    }
</style>

<style type="text/css">
    .abc1{
        background: url(/static/image/icon/1.png) no-repeat center center !important;
        width: 20px;
        height: 20px;
    }
    .abc2{
        background: url(/static/image/icon/2.png) no-repeat center center !important;
        width: 20px;
        height: 20px;
    }
    .abc3{
        background: url(/static/image/icon/3.png) no-repeat center center !important;
        width: 20px;
        height: 20px;
    }
    .abc4{
        background: url(/static/image/icon/4.png) no-repeat center center !important;
        width: 20px;
        height: 20px;
    }
    
    .toggleFile-btns button{
        border: none !important;
        outline: none !important;
    }
</style>
