<template>
    <div class="full-ctn">
        <div v-if="showToolbar" class="toolbar">
            <el-button-group>
                <el-button @click="refreshPage" class="btn">刷新</el-button>
                <el-button v-if="!isAuto" class="btn" @click="doAutoPlay(true)">自动切换</el-button>
                <el-button v-if="isAuto" class="btn" @click="doAutoPlay(false)">手动切换</el-button>
                <el-button class="btn" @click="showPreviousPage">上一页</el-button>
                <el-button class="btn" @click="showNextPage">下一页</el-button>
            </el-button-group>
        </div>
        <template v-for="(item, index) in pageList">
            <iframe :class="currentIndex == index ? 'show' : ''" v-if="!item.isComponent" :src="item.path" class="page-ctn"></iframe>
            <component :class="currentIndex == index ? 'show' : ''" v-if="item.isComponent" :parameter="item.parameter" :is="item.name" class="page-ctn"></component>
        </template>
    </div>
</template>

<script>
import {requireComponent} from '@/ap/config/routes'
import {getHrefParams, setScale} from "ap-util/util/WindowUtil";

export default {
    name: 'SysBoard',
    components: {},
    data() {
        return {
            isAuto: true,
            showToolbar: false,
            currentIndex: 0, // 当前显示页
            pageList: []
        }
    },
    beforeMount() {
        setScale();
    },
    mounted() {
        this.initBoard();
    },
    methods: {
        initBoard() {
            let params = getHrefParams();
            let code = params.code;
            if (code == null || code == "") {
                this.$message.error("看板编码为空");
                return;
            }
            this.$request({
                url: '/apm/sys/TSysBoard/getBoardInfo',
                method: 'post',
                data: {
                    code: params.code
                }
            }).then(response => {
                let pages = response.data;
                this.showToolbar = pages[0].fdShowToolbar; // 显示工具栏
                let pageList = [];
                for (let i = 0; i < pages.length; i++) {
                    let item = {};
                    let path = pages[i].fdPath;
                    let parameter = pages[i].fdParameter == null ? "" : pages[i].fdParameter;
                    if (path.startsWith("@")) {
                        let name = "name" + i;
                        this.$options.components[name] = requireComponent(path);
                        item.name = name;
                        item.isComponent = true;
                        item.path = path;
                        item.parameter = parameter;
                    } else {
                        item.path = path + parameter;
                        item.isComponent = false;
                    }
                    item.duration = pages[i].fdDuration;
                    item.checkPath = pages[i].fdCheckPath;
                    pageList.push(item);
                }
                this.currentIndex = 0; // 第一页显示
                console.log(pageList);
                this.pageList = pageList;
                this.setAutoPlay();
            })
        },
        refreshPage() {
            location.reload();
        },
        doAutoPlay(auto) {
            if (auto) {
                this.isAuto = true;
                this.setAutoPlay();
            } else {
                this.isAuto = false
            }
        },
        showPage(index, type) {
            let path = this.pageList[index].checkPath;
            // 没有检查地址
            if (path == null || path == "") {
                this.currentIndex = index;
                return;
            }

            this.$request({
                url: '/apm/sys/TSysBoard/getCheckInfo',
                method: 'post',
                data: {
                    path: path
                }
            }).then(response => {
                if (response.data) {
                    this.currentIndex = index;
                    return;
                }
                if (type == "next") {
                    if (index == this.pageList.length - 1) {
                        this.showPage(0, "next");
                    } else {
                        this.showPage(index + 1, "next");
                    }
                }
                if (type == "previous") {
                    // 判断是否第一个
                    if (index == 0) {
                        this.showPage(this.pageList.length - 1, "previous");
                    } else {
                        this.showPage(index - 1, "previous");
                    }
                }
                console.log(response);
            })
        },
        showPreviousPage() {
            let pageList = this.pageList;
            for (let i = 0; i < pageList.length; i++) {
                if (this.currentIndex == i) {
                    // 判断是否第一个
                    if (i == 0) {
                        this.showPage(pageList.length - 1, "previous");
                    } else {
                        this.showPage(i - 1, "previous");
                    }
                    break;
                }
            }
        },
        showNextPage() {
            let pageList = this.pageList;
            for (let i = 0; i < pageList.length; i++) {
                if (this.currentIndex == i) {
                    // 判断是否最后一个
                    if (i == pageList.length - 1) {
                        this.showPage(0, "next");
                    } else {
                        this.showPage(i + 1, "next");
                    }
                    break;
                }
            }
        },
        showNextPageAuto() {
            this.showNextPage();
            this.setAutoPlay();
        },
        setAutoPlay() {
            if (this.pageList.length == 1) {
                return;
            }
            if (!this.isAuto) {
                return;
            }
            let pageList = this.pageList;
            for (let i = 0; i < pageList.length; i++) {
                if (this.currentIndex == i) {
                    let duration = pageList[i].duration;
                    if (duration == null) {
                        duration = 10; // 默认10秒
                    }
                    setTimeout(this.showNextPageAuto, duration * 1000);
                    break;
                }
            }
        }
    }
}
</script>

<style scoped>
.full-ctn {
    position: relative;
    width: 100%;
    height: 100%;
}

.page-ctn{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -10;
}

.show{
    z-index: 100;
}

.btn{
    background-color: rgba(106,146,210,0.3) !important;
    border-color: #6a92d2 !important;
    color: #fff !important;
}

.btn:hover{
    background-color: #6a92d2 !important;
}

.toolbar {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 200;
}
</style>
