<template>
    <div class="htex-render-wrap">
        <HTEXRender :renderJson="curPageData"></HTEXRender>
        <div class="page-wrap">
            <Page v-if="indexData.slides" :total="indexData.slides.length" :page-size="1" size="small" @on-change="toPage"/>
            <Icon type="md-expand" class="full-screen" @click="fullScreen"/>
        </div>
    </div>
</template>
<script>
import HTEXRender from '@/view/classrecord/HtexRender.vue'
export default {
    components: {
        HTEXRender
    },
    props: {
        url: {
            type: String,
            default: '',
            required: true
        }
    },
    data() {
        return {
            indexData: {},
            curPage: 1, //页码数据，从1开始，取数据的时候要减1
            curPageData: {
                jsonUrl: undefined,
                page: 0,
                url: '',
                sas: ''
            },
        }
    },
    methods: {
        fullScreen(){
            this.$Message.warning('全屏功能开发中')
        },
        toPage(page){
            console.log(page)
            this.renderPage(page)
        },
        /**
         * @param page 页码 index = page - 1 
         */
        renderPage(page) {
            this.curPage = page
            this.$tools.getFile(this.indexData.slides[page - 1].url).then(
                res => {
                    console.log(res)
                    this.curPageData.jsonUrl = JSON.parse(res || '{}')
                    this.curPageData.page = this.curPage
                    console.log('渲染数据', this.curPageData)
                },
                err => {

                }
            )
        },
        getIndexData() {
            this.$tools.getFile(this.url).then(
                res => {
                    console.log(typeof res, res)
                    this.indexData = JSON.parse(res || '{}')
                    if (this.indexData.slides && this.indexData.slides.length) {
                        this.indexData.slides.forEach(item => {
                            let u = this.url
                            item.url = u.replace('index.json', item.url)
                        })
                        this.renderPage(1)
                    }
                },
                err => {
                    console.log(err)
                }
            )

        }
    },
    watch: {
        url: {
            handler(n, o) {
                console.log('文件地址', n)
                let d = n.split('index.json')
                if (d.length == 2) {
                    this.curPageData.url = d[0]
                    this.curPageData.sas = d[1]
                    this.getIndexData()
                } else {
                    throw new Error(`url error: ${n}`)
                }
            },
            immediate: true
        }
    }
}
</script>
<style lang="less" scoped>
.htex-render-wrap{
    width: fit-content;
    background: rgba(255, 255, 255, 1);
}
.page-wrap{
    width: 100%;
    height: fit-content;
    background: rgba(81, 90, 110, .8);
    padding: 8px 4px;
}
.full-screen{
    float: right;
    color: white;
    margin-top: -18px;
    margin-right: 10px;
    cursor: pointer;
}
</style>