<!--
 * @Description: 导航详情
 * @Author: 空白格
 * @Date: 2022-08-29 17:52:23
 * @LastEditors: 空白格
 * @LastEditTime: 2022-08-29 18:08:33
 * @FilePath: \veterans_client_web\src\views\PolicyAdvice\BannerDetails\BannerDetailsIndex.vue
 * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
-->
<template>
  <div class="app-main">
    <BannerBreadcrumb title="详情" :isRouter="true" />
    <div class="app-main-box">
      <div class="app-main-box-content">
        <div class="name">{{ name }}</div>
        <div class="ql-editor" v-html="dom"></div>
      </div>
    </div>
  </div>
</template>

<script>
import BannerBreadcrumb from "@/components/BannerBreadcrumb";
import { getBannerList } from "@/api/Home";
export default {
  name: "BannerDetailsIndex",
  components: {
    BannerBreadcrumb,
  },
  data() {
    return {
      id: undefined,
      type: undefined,
      dom: null,
      name: undefined,
    };
  },
  created() {
    const { id, type } = this.$route.query;
    if (id) {
      this.id = id;
      this.type = type;
      this.getBannerList();
    }
  },
  methods: {
    getBannerList() {
      getBannerList({ type: this.type }).then((res) => {
        if (res.code === 200) {
          const list = res.data;
          list.forEach((item) => {
            if (item.id == this.id) {
              this.dom = item.content;
              this.name = item.name;
            }
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.name {
  padding: 10px 0;
  text-align: center;
  font-size: 24px;
  color: #1a1a1a;
  border-bottom: 1px solid #d5d5d5;
}
</style>
