<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.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 {
  signnodegetNodeListByPatient,
  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
      signnodegetNodeListByPatient(this.query).then(res => {
        if (res.data.length > 0) {
          res.data.forEach(e => {
            this.categorylist.push(e.detailInfo)
            // e.detailInfo.forEach(el => {
            //     this.categorylist.push(el)
            // })
          })
          this.categoryItem = this.categorylist[0]
        }
      })
    },
  }
};
</script>
<style lang="scss" scoped>
::v-deep iframe {
  width: 100%;
  height: 500px;
}
.header {
  background-color: #fff !important;
  padding: 0 !important;
  display: flex;
  height: calc(100vh - 84px);

  .rightheader {
    width: 80%;
    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 {
      height: calc(100vh - 352px);
      overflow: auto;
      overflow-x: hidden !important;
      width: 100%;
      margin: 0 auto;
      // border: 1px solid #CCCCCC;
    }
  }

  .leftheader {
    height: calc(100vh - 352px);

    width: 20%;
    margin-top: 20px;
    // height: 450px;
    overflow: auto;
    // 隐藏表头的滚动条
    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>
