<template>
  <view class="activity_detail">
    <view class="detail">
    <view class="title">{{language=='zh' ?detailInfo.titleZh:detailInfo.titleEn }}</view>
    <view class="container">
       <img class="coverImg" :src="language=='zh' ?detailInfo.coverImageZh:detailInfo.coverImageEn" alt="" srcset="">
       <view class="activityDesc" v-html="language=='zh' ?detailInfo.extraShare.activityDescZh:detailInfo.extraShare.activityDescEn"></view>
    </view>
    </view>
   
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: null,
      memberCode:"",
      detailInfo: {
        extraShare:{
          activityDescZh:''
        }
      },
      language:"zh"
    }
  },
  onLoad(route) {
    console.log(route)
    this.id = route.id
    this.memberCode = route.memberId
    this.getDetail()
  },
  computed: {
    locale() {
      return this.$lang.locale
    },
    detail() {
      return this.$lang.lang.detail
    }
  },
  methods: {
    // 获取详情
    getDetail() {
      this.$request
        .post("/app-api/member/score-rule/get", { id: this.id })
        .then(({ code, data }) => {
          if (code === 0 && data) {
            this.detailInfo = data
            this.handleTriggerShare()
          }
        })
    },
    handleTriggerShare(){
      
      this.$request
        .get("/app-api/member/score-rule/trigger/share", {userId: this.memberCode, ruleId:this.id })
        .then(({ code, data }) => {
          if (code === 0 && data) {
            this.detailInfo = data
          }
        })
    }
    // 时间范围返回
 
  }
}
</script>

<style lang="scss">
.activityDesc{
   padding: 20upx;
}
.activity_detail{
  max-width: 750upx;
  .title{
    padding: 20upx;
    font-size: 16px;
    font-weight: 600;
  }
  .coverImg{
    width: 100%;
  }
}
page {
  /* #ifdef H5 */
  padding-top: 140upx;
  /* #endif */
  /* #ifdef APP-PLUS */
  padding-top: calc(var(--status-bar-height) + 100upx);
  /* #endif */
  background-color: #d4e5fe;
}
.container {
  // padding: 20upx;
  // background-color: #fff;
  // border-radius: 20upx;
}
.img-box {
  width: 100%;
  height: 400upx;
  display: flex;
  justify-content: center;
  align-items: center;
  .img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.container-main {
  padding: 12upx;
}
.activity-title {
  font-size: 28upx;
  height: 84upx;
  display: flex;
  align-items: center;
  color: var(--c2);
}
.activity-remark {
  font-size: 24upx;
  color: #7f7f7f;
}
.activity-cell {
  margin-top: 20upx;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.cell-label {
  font-size: 24upx;
  color: #7f7f7f;
}
.cell-content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 24upx;
  color: #7f7f7f;
}
.cell-image {
  width: 24upx;
  height: 24upx;
}
.cell-text {
  margin-left: 6upx;
  font-weight: 600;
  font-size: 26upx;
  color: #000;
}
</style>
