<template>
  <div class="main">
    <div class="pageTitle">{{ detailObj.NOTICEINFO_TITLE || "" }}</div>
    <div class="time">{{ detailObj.START_DATE || "-" }}</div>

    <div class="jumpTo" v-if="detailObj.NOTICEINFO_TYPE === 2010">
      <view class="jumpBox">
        <div class="jumpItem" @click="handleGoCoupons">去领券</div>
      </view>
    </div>

    <div
      class="navList"
      v-if="detailObj.ImageList && detailObj.ImageList.length > 0"
    >
      <image class="img" :src="detailObj.ImageList[0].ImageUrl" />
    </div>
    <text class="content">{{ detailObj.NOTICEINFO_CONTENT || "" }}</text>
  </div>
</template>
<script>
export default {
  data() {
    return {
      detailObj: {
        NOTICEINFO_TITLE: "",
        START_DATE: "",
        NOTICEINFO_CONTENT: "",
      },
    };
  },
  onLoad(query) {
    console.log("query", query);
    if (query.id) {
      this.hanldeGetDetail(query.id);
    }
    this.$utils.addUserBehaviorNew();
  },
  methods: {
    handleGoCoupons() {
      uni.switchTab({
        url: "/pages/discovery/index",
      });
    },
    async hanldeGetDetail(id) {
      const req = {
        NOTICEINFOId: id,
      };
      const data = await this.$api.$get(
        "/EShangApiMain/Notice/GetNOTICEINFODetail",
        req
      );
      console.log("detail", data);
      const formattedText =
        data.Result_Data.NOTICEINFO_CONTENT.split("\n").join("\n\n");
      this.detailObj = data.Result_Data;
      this.detailObj.NOTICEINFO_CONTENT = formattedText;
    },
  },
};
</script>

<style scoped lang="less">
.main {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  padding: 16rpx 32rpx;
  background: #fff;
  .pageTitle {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 40rpx;
    color: #130f05;
    line-height: 56rpx;
    text-align: left;
    font-style: normal;
  }
  .time {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    color: #716f69;
    line-height: 36rpx;
    text-align: left;
    font-style: normal;
    margin-top: 4rpx;
  }
  .jumpTo {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    .jumpBox {
      padding: 10rpx 20rpx;
      border-radius: 28rpx;
      background: linear-gradient(90deg, #ffebe5 0%, #ffedd8 100%);
      .jumpItem {
        font-family: "PingFangSC";
        font-weight: 400;
        font-size: 26rpx;
        color: #ff7040;
        line-height: 36rpx;
        text-align: left;
        font-style: normal;
      }
    }
  }

  .navList {
    width: 100%;
    height: 436rpx;
    border-radius: 6rpx;
    overflow: hidden;
    margin: 32rpx 0;
    .img {
      width: 100%;
      height: 100%;
    }
  }

  .content {
    display: block;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 30rpx;
    color: #130f05;
    line-height: 52rpx;
    text-align: justify;
    font-style: normal;
  }
}
</style>
