<template>
    <div class="header">
        <div class="leftheader" v-if="categorylist.length > 0">
            <div class="item" v-for="(item, index) in categorylist" :key="item.propagandaInfoId"
                @click="clickcategory(item, index)" :class="index == categoryindex ? 'selectitem' : ''">
                <div class="name">
                    {{ item.propagandaTitle }}
                </div>
            </div>
        </div>
        <div class="rightheader" v-if="categorylist.length > 0">
            <div class="richtext">
                <div class="bodytop">
                    <div class="titletop">文章模板:{{ categoryItem.propagandaTitle }}</div>
                    <div class="titledata">{{ categoryItem.propagandaTitle }}</div>
                    <img :src="baseUrl + categoryItem.detailInfo.propagandaCoverPath" alt="" />
                    <div class="know">知识卡片</div>
                    <div v-html="categoryItem.propagandaContent"></div>
                </div>
            </div>
        </div>
        <el-empty description="暂无" style="width: 100%;" v-else></el-empty>
    </div>
</template>
<script>
import {
    getList
} from '@/api/manage/healthEducation'
export default {
    name: "healthEducation",
    data() {
        return {
            baseUrl: process.env.VUE_APP_BASE_API,
            //左侧类型选中
            categoryindex: 0,
            //左侧选中的item
            categoryItem: {},
            //左侧list
            categorylist: [],
            query: {
                patientId: '',
                routeCheckStatus: 'AGREE',
                taskType: 'PROPAGANDA_ARTICLE'
            }
        };
    },
    mounted() {
        this.info();
    },
    methods: {
        clickcategory(item, index) {
            this.categoryindex = index
            this.categoryItem = item
        },
        info() {
            this.query.patientId = this.$route.query.patientId
            getList(this.query).then(res => {
                if (res.data.length > 0) {
                    res.data.forEach(e => {
                        e.nodeList.forEach(el => {
                            this.categorylist.push(el)
                        })
                    })
                    this.categoryItem = this.categorylist[0]
                }
            })
        },
    }
};
</script>
<style lang="scss" scoped>
.header {
    background-color: #fff !important;
    padding: 0 !important;
    display: flex;

    .rightheader {
        width: 75%;
        padding-top: 20px;
        border-left: 3px solid #DFE4ED;

        .bodytop {
            width: 96%;
            margin: 0 auto;

            .titletop {
                font-size: 20px;
                font-weight: 700;
                margin: 10px 0px 0 0;
            }

            .titledata {
                margin: 30px 0px 15px 0;
                font-size: 16px;
            }

            .audiotop {
                margin: 10px 0px 10px 0;
            }

            img {
                width: 100%;
                margin: 0px 0px 0px 0;
            }

            .know {
                margin: 11px 0px 10px 0;
                font-size: 16px;
            }

            .knowlist {
                margin: 10px 0px 10px 0;
                font-size: 16px;
            }
        }

        .richtext {
            overflow: scroll;
            // 隐藏表头的滚动条
            overflow-x: hidden !important;
            width: 400px;
            margin: 0 auto;
            height: 450px;
            border: 1px solid #CCCCCC;
        }
    }

    .leftheader {
        width: 20%;
        margin-top: 20px;
        height: 450px;
        overflow: scroll;
        // 隐藏表头的滚动条
        overflow-x: hidden !important;

        .selectitem {
            background-color: #D2E9FC;
            border-left: 2px solid #1890ff !important;
            border-bottom: 1px solid #fff !important;
        }

        .item {
            padding: 25px 10px;
            position: relative;
            border-left: 2px solid #fff;
            border-bottom: 1px solid #E7E7E7;

            .name {
                font-size: 18px;
                font-weight: 600;
            }
        }
    }
}
</style>