<template>
    <div style="padding: 10px">
        <el-row :gutter="10">
            <el-col :span="4">
                <el-card :style="`height: ${vh}; overflow-y: auto`">
                    <ul class="nav navbar-nav navbar-right">
                        <li v-for="(item, ind) in list" :key="ind" style="margin-bottom: 5px">
                            <a :href="item.href">{{ item.text }}</a>
                        </li>
                    </ul>
                </el-card>

                <!-- <div
          v-for="(item, ind) in list"
          :key="ind"
          @click="aClick(item, $event)"
        >
          <a :href="item.href">{{ item.text }}</a>
        </div> -->
            </el-col>
            <el-button
                type="primary"
                size="mini"
                style="position: absolute; right: 15px"
                icon="el-icon-refresh-left"
                @click="back"
            >
                返回
            </el-button>
            <el-col class="dom" :span="20">
                <el-card id="col" :style="`height: ${vh}; overflow-y: auto`">
                    <div v-html="html"></div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import jquery from 'jquery'
import { getAlgorithmSave, getAlgorithmAll } from '@/api/algorithm/index'
export default {
    name: 'algorithmview',
    components: {},
    props: {},
    data() {
        return {
            vh: null,
            list: [],
            html: ''
        }
    },
    created() {
        getAlgorithmAll().then(res => {
            this.html = res.data[0].fileContent
        })
    },
    mounted() {
        setTimeout(() => {
            let _this = this
            this.list = []
            this.setHeight()
            window.addEventListener('resize', this.setHeight)
            let array1 = document.querySelectorAll('.dom h1') //获取p的元素节点列表 P[0].style.color =”red”                      //”hello”变为红色字体

            for (let i = 0; i < array1.length; i++) {
                array1[i].setAttribute('class', `table`)
            }

            let array2 = document.querySelectorAll('.dom h2') //获取p的元素节点列表 P[0].style.color =”red”                      //”hello”变为红色字体
            for (let i = 0; i < array2.length; i++) {
                array2[i].setAttribute('class', `table`)
            }
            let array3 = document.querySelectorAll('.dom h3') //获取p的元素节点列表 P[0].style.color =”red”                      //”hello”变为红色字体
            for (let i = 0; i < array3.length; i++) {
                array3[i].setAttribute('class', `table`)
            }
            let array4 = document.querySelectorAll('.dom h4') //获取p的元素节点列表 P[0].style.color =”red”                      //”hello”变为红色字体
            for (let i = 0; i < array4.length; i++) {
                array4[i].setAttribute('class', `table`)
            }
            let array5 = document.querySelectorAll('.dom h5') //获取p的元素节点列表 P[0].style.color =”red”                      //”hello”变为红色字体
            for (let i = 0; i < array5.length; i++) {
                array5[i].setAttribute('class', `table`)
            }
            let array6 = document.querySelectorAll('.dom h6') //获取p的元素节点列表 P[0].style.color =”red”                      //”hello”变为红色字体
            for (let i = 0; i < array6.length; i++) {
                array6[i].setAttribute('class', `table`)
            }

            let array = document.querySelectorAll('.table') //获取p的元素节点列表 P[0].style.color =”red”                      //”hello”变为红色字体
            for (let i = 0; i < array.length; i++) {
                array[i].setAttribute('id', `box` + i)
                this.list.push({
                    text: array[i].innerText,
                    href: `#box${i}`
                })
            }
            setTimeout(() => {
                jquery('.navbar-right > li ')[0].setAttribute('class', `active`)

                //页面滚动到哪,对应的nav里的li就高亮
                jquery('#col').on('scroll', function () {
                    //获取遍历a标签找到hash值
                    jquery('.navbar-right > li > a').each(function (index, ele) {
                        // 页面最后一个a不是高亮的内容,所以直接跳出函数
                        // if (index == jquery(".navbar-right > li > a").length - 1) return;

                        // 获取hash值
                        var target = jquery(this).prop('hash')

                        // 判断section距离页面的高度与页面滚动高度比较
                        if (jquery(target).offset().top - 110 < 0) {
                            // 给对应的li高亮操作
                            jquery(this).parent('li').siblings().removeClass('active')
                            jquery(this).parent('li').addClass('active')
                        }
                    })
                })
            }, 10)
        }, 500)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 10 + 'px'
        },
        back() {
            //管理员
            if (this.$store.state.user.userInfo.loginName == 'njcnpqs') {
                this.$router.push({
                    path: this.redirect || '/user-boot/user/list'
                })
            }

            //业务管理员
            else if (this.$store.state.user.userInfo.loginName == 'njcnser') {
                this.$router.push({
                    path: this.redirect || '/BusinessAdministrator/TerminalManagement/FrontManagement'
                })
            }
            //审核管理员
            else if (this.$store.state.user.userInfo.loginName == 'njcnsh') {
                this.$router.push({
                    path: this.redirect || '/user/checkUserListview'
                })
            }
            //审计管理员
            else if (this.$store.state.user.userInfo.loginName == 'njcnsj') {
                this.$router.push({
                    path: this.redirect || '/BusinessAdministrator/Audit/Operations/Management'
                })
            } else {
                //用户 loginName
                this.$router.push({
                    path: this.redirect || '/dashboard/index'
                })
            }
        }
    },
    updated() {},
    computed: {},

    watch: {}
}
</script>
<style lang="less" scoped>
.active {
    color: red;
}
::-webkit-scrollbar {
    width: 8px !important;
    height: 14px;
}
</style>
<style>
/* table 样式 */
table {
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
}
table td,
table th {
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    padding: 3px 5px;
}
table th {
    border-bottom: 2px solid #ccc;
    text-align: center;
    background-color: var(--w-e-textarea-slight-bg-color);
    font-weight: 700;
}

/* blockquote 样式 */
blockquote {
    display: block;
    border-left: 8px solid #d0e5f2;
    padding: 5px 10px;
    margin: 10px 0;
    line-height: 1.4;
    font-size: 100%;
    background-color: #f1f1f1;
}

/* code 样式 */
code {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    background-color: #f1f1f1;
    border-radius: 3px;
    padding: 3px 5px;
    margin: 0 3px;
}
pre code {
    display: block;
}

/* ul ol 样式 */
ul,
ol {
    margin: 10px 0 10px 20px;
}
</style>
