<template>
  <div class="notice-details-page">
    <div class="nav">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/bycnoticetm' }"
          >商标公告查询</el-breadcrumb-item
        >
        <!-- 优化点：公告类型不同 -->
        <el-breadcrumb-item :to="{ path: '/bycnoticeindex' }"
          >第{{ noticesearchparams.ggqh }}期商标初审公告</el-breadcrumb-item
        >
        <el-breadcrumb-item :to="{ path: '/bycnoticedetail' }"
          >{{ sbmc }}公告详情</el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div class="show-notice">
      <!-- 优化点：数据图片的展示：GET net::ERR_NAME_NOT_RESOLVED 给予相应提示 -->
      <img :src="linkurl" alt="" />
    </div>
  </div>
</template>

<script>
import { noticeSearch } from "@/api/tmQuery.js";
export default {
  data() {
    return {
      noticesearchparams: {
        ggqh: "",
        sbzch: ""
      },
      //  面包屑部分： 商标名称
      sbmc: "",
      //   返回数据中的公告图形
      linkurl: ""
    };
  },
  created() {
    //  面包屑部分 商标名称的装填
    this.sbmc = this.$route.query.sbmc;
    // 获取并装填公告详情查询参数
    this.noticesearchparams.ggqh = this.$route.query.ggqh.split("(")[0];
    this.noticesearchparams.sbzch = this.$route.query.sbzch;

    // 进行公告详情查询
    noticeSearch(this.noticesearchparams).then(res => {
      if (res.status == 0) {
        if (res.data == null) {
          this.$notify({
            title: "警告",
            message: "暂时没有该公告", // 服务器端返回的数据为空
            type: "warning"
          });
        }
        // 状态码不是 0
        else {
          this.linkurl = res.data.linkurl;
          //  域名处理 http://sbggwj.saic.gov.cn:8000/ 变为 http://sbggwj.sbj.cnipa.gov.cn:8000/ 公告才可以访问
          let linkpart2 = this.linkurl.split(":8000")[1];
          let rightlinkpart1 = "http://sbggwj.sbj.cnipa.gov.cn";
          let rightlinkurl = rightlinkpart1.concat(":8000", linkpart2);
          this.linkurl = rightlinkurl;
        }
      } else {
        this.$notify.error({
          title: "错误", // 服务器端请求失败
          message: res.msg
        });
      }
    });
  }
};
</script>

<style lang="scss" scoped>
.notice-details-page {
  min-height: calc(100% - 70px);
}
.nav {
  width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
}
.show-notice {
  width: 889px;
  height: 1260px;
  padding-top: 50px;
  margin: 0 auto;

  img {
    display: block;
    border: 1px solid gray;
  }
}
</style>
