<template>
  <div class="ad" v-loading="loading">
    <div class="content" v-if="notices&& notices.id>0">
      <div class="notice-title"> {{notices.title}}</div>
      <div v-html="notices.content"></div>
      <div class="user">{{notices.updateName}}</div>
      <div class="time">{{notices.updateTime?notices.updateTime.replace("T"," "):""}}</div>
    </div>
    <div class="foot" v-if="notices && notices.id>0">
      <div class="lt">
      </div>
      <div class="rt">
        <span :class="{'disable':notices.maxID==0}" @click="queryNotice(notices.maxID)">
          <i class="iconfont icon-xingzhuang-1"></i>
        </span>
        <span :class="{'disable':notices.minID==0}" @click="queryNotice(notices.minID)">
          <i class="iconfont icon-xingzhuang-"></i>
        </span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      notices: {},
      loading: false
    };
  },
  mounted() {
    this.queryNotice(-1);
  },
  methods: {
    queryNotice(id) {
      if (id != 0) {
        this.loading = true;
        id = id == -1 ? 0 : id;
        this.apipost(
          "customerIndex_post_GetPersonalCenterNotice",
          { id },
          r => {
            this.notices = r.data.data;
            this.loading = false;
          }
        );
      }
    }
  }
};
</script>
<style>
.ad {
  padding: 0 30px;
}
.ad .content {
  height: 270px;
  padding: 20px;
  background: #eef1ff;
  color: #2c3343;
  overflow-y: auto;
  font-size: 13px;
  line-height: 25px;
  position: relative;
  overflow-x: hidden;
}
.ad .content img{
  max-width: 100%;
}
.ad .content .notice-title {
  padding-bottom: 10px;
  font-size: 14px;
  font-family: pingfangR;
  color: #111;
  text-align: center;
}
.ad .content .time,
.ad .content .user {
  text-align: right;
  margin-top: 20px;
}
.ad .content .user {
  bottom: 50px;
}
.ad .foot {
  margin-top: 23px;
  display: flex;
}
.ad .foot .lt {
  font-size: 13px;
  color: #2c3343;
  display: flex;
  align-items: baseline;
}
.ad .foot .lt .v {
  line-height: 25px;
}
.ad .foot .lt .v a {
  display: block;
  color: #5d78ff;
  text-decoration: #5d78ff;
}
.ad .foot .rt {
  text-align: right;
  flex: 1;
}
.ad .foot .rt span {
  display: inline-block;
  height: 28px;
  width: 28px;
  line-height: 28px;
  text-align: center;
  background: #eef1ff;
  color: #5d78ff;
  margin-left: 30px;
  font-size: 12px;
  cursor: pointer;
}
.ad .foot .rt span.disable {
  color: #cdd3ee;
  cursor:no-drop;
}
.ad .foot .rt span i {
  zoom: 0.6;
}
</style>
