<template>
  <view class="activity_detail">
    <dHeader :title="detail.activity"></dHeader>
    <view class="container">
      <view class="img-box">
        <image
          class="img"
          :src="detailInfo[$lang.coverImage]"
        ></image>
      </view>
      <view class="container-main">
        <view class="activity-title">{{detailInfo[$lang.title]}}</view>
        <view
          class="activity-remark"
          v-if="detailInfo.type == 4"
          v-html="detailInfo.extraShare[activityDesc]"
        >
        </view>
        <view class="activity-cell">
          <view class="cell-label">{{ detail.illustrate }}</view>
          <view class="cell-content">
            <image class="cell-image" src="../../static/img/score_b.png"></image>
            <span v-if="detailInfo.type == 4">{{
              detail.shareLabel(detailInfo.getScoreOnce)
            }}</span>
            <span v-if="detailInfo.type == 3">{{
              detail.referralCodeLabel(detailInfo.getScoreOnce)
            }}</span>
            <view class="cell-text" v-if="detailInfo.type == '2'">{{
              detail.registerLabel(detailInfo.getScoreOnce)
            }}</view>
            <view v-if="detailInfo.type == 1">
              <view
                class="rule"
                v-for="ruleItem in detailInfo.extraOrderV.orderVRule"
                :key="ruleItem.low"
              >
                {{
                  detail.orderRuleLabel({
                    low: ruleItem.low,
                    high: ruleItem.high,
                    score: ruleItem.score,
                    unit: detailInfo.extraOrderV.transportType == 1 ? 'm³' : 'kg'
                  })
                }}
              </view>
            </view>
          </view>
        </view>
        <view class="activity-cell" v-if="detailInfo.type != 2">
          <view class="cell-label">{{ detail.maxIntegral }}</view>
          <view class="cell-content">
            <image class="cell-image" src="../../static/img/score_b.png"></image>
            <view class="cell-text">{{ detailInfo.maxScoreTotal }}</view>
          </view>
        </view>
        <view class="activity-cell">
          <view class="cell-label">{{ detail.date }}</view>
          <view class="cell-content">
            {{ getTimeRange(detailInfo.startTime, detailInfo.endTime) }}
          </view>
        </view>
        <view class="activity-cell">
          <view class="cell-label">{{ detail.rulesIllustrate }}</view>
          <view class="cell-content">
            {{ detailInfo[$lang.desc]}}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import dHeader from '../../components/dHeader/index.vue'
export default {
  components: {
    dHeader
  },
  data() {
    return {
      id: null,
      detailInfo: {}
    }
  },
  onLoad(route) {
    console.log(route)
    this.id = route.id
    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
          }
        })
    },
    // 时间范围返回
    getTimeRange(start, end) {
      const formatDate = (timestamp) => {
        const date = new Date(timestamp)
        const year = date.getFullYear()
        const month = String(date.getMonth() + 1).padStart(2, '0')
        const day = String(date.getDate()).padStart(2, '0')
        const hours = String(date.getHours()).padStart(2, '0')
        const minutes = String(date.getMinutes()).padStart(2, '0')
        const seconds = String(date.getSeconds()).padStart(2, '0')
        return `${year}-${month}-${day}`
      }
      return `${formatDate(start)}${this.detail.to}${formatDate(end)}`
    }
  }
}
</script>

<style lang="scss">
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>
