 <template>
  <div class="pop-notice-wrapper">
    <div class="mask"></div>
    <div class="content">
      <div class="top">
        <span class="title">{{noticeData.noticeTitle | shortName(20)}}</span>
        <div></div>
        <span class="body">
          <!-- 该项目已于2019年12月1日
          <span class="b">停止发放项目证书</span>，但仍可以继续学习该项目 -->
          {{noticeData.noticeContent | shortName(150)}}
        </span>
      </div>
      <div class="line"></div>
      <div class="bottom" @click="clickNotice">
        <span>我知道了</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    popText: {
      type: String,
      default: ""
    },
    btnText: {
      type: String,
      default: ""
    },
    noticeData: {
      type: Object,
      default: () => {
        return {
          noticeContent: "",
          noticeId: '',
          noticeTitle: "",
          readFlag: 0
        }
      }
    }
  },
  filters: {
    shortContent(value, maxLength = 18) {
      if(value && value.length > maxLength) {
        return value.substr(0, maxLength) + '...'
      }
    }
  },
  methods: {
    clickNotice() {
      this.$emit("clickNotice");
    }
  }
};
</script>

<style lang="less" scoped>
.pop-notice-wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 110;
  font-size: 20px;
  .mask {
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    z-index: 111;
  }
  .content {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 112;
    width: 300px;
    // height: 185px;
    margin: -150px 0 0 -150px;
    border-radius: 3px;

    text-align: center;
    background: #fff;
    .top {
      padding: 30px;
      .title {
        display: inline-block;
        font-size: 18px;
        line-height: 28px;
        word-break: break-all;
        font-weight: 400;
        color: #333333;
      }
      .body {
        text-align: left;
        word-break: break-all;
        display: inline-block;
        margin: 14px 0;
        font-size: 14px;
        height: 21px;
        line-height: 21px;
        font-weight: 400;
        color: #676869;
        .b {
          font-weight: 700;
        }
      }
    }
    .line {
      width: 300px;
      height: 1px;
      background: rgba(240, 241, 242, 1);
    }
    .bottom {
      text-align: center;
      font-size: 17px;
      height: 50px;
      line-height: 50px;
      font-weight: 400;
      span {
        font-size: 17px;
        color: #449284;
      }
    }
  }
}
</style>

