<template>
  <div class="notice-details-page">
    <div class="noticedetail-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" v-loading="loading">
      <img :src="linkurl" alt="" />
    </div>
  </div>
</template>

<script>
import { noticeSearch } from "@/api/tmQuery.js";
export default {
  data() {
    return {
      noticesearchparams: {
        ggqh: "",
        sbzch: ""
      },
      sbmc: "", //  面包屑部分： 商标名称
      linkurl: "", //   返回数据中的公告图形

      // 动画加载
      loading: false
    };
  },
  created() {
    //  面包屑部分 商标名称的装填
    this.sbmc = this.$route.query.sbmc;
    // 获取并装填公告详情查询参数
    this.noticesearchparams.ggqh = this.$route.query.ggqh.split("(")[0];
    this.noticesearchparams.sbzch = this.$route.query.sbzch;

    this.loading = true; // 查询数据之前显示 loading
    // 进行公告详情查询
    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;
          this.loading = false; //数据查询成功之后隐藏 loading
        }
      } else {
        this.$notify.error({
          title: "错误", // 服务器端请求失败
          message: res.msg
        });
      }
    });
  }
};
</script>

<style lang="scss">
.notice-details-page {
  min-height: calc(100% - 70px);
  .el-breadcrumb {
    .el-breadcrumb__item {
      .el-breadcrumb__inner {
        color: #03004c;
        font-size: 16px;
      }
    }
    span:nth-child(3) {
      .el-breadcrumb__inner {
        color: #0989c5;
        font-size: 16px;
      }
    }
  }
}
.noticedetail-nav {
  width: 889px;
  margin: 0 auto;
  padding: 20px 0;
}
.show-notice {
  width: 889px;
  height: 1260px;
  padding-top: 10px;
  margin: 0 auto;

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