<template>
  <div class="container">
    <div class="activity-title">
      {{ locale === "zh_CN" ? detailInfo.titleZh : detailInfo.titleEn }}
    </div>
    <div class="img-box">
      <img
        class="img"
        :src="
          locale === 'zh_CN' ? detailInfo.coverImageZh : detailInfo.coverImageEn
        "
      />
    </div>
    <div class="container-main">
      <div v-if="detailInfo.extraRecommend" class="activity-remark">
        {{
          locale === "zh_CN"
            ? detailInfo.extraRecommend.shareContentZh
            : detailInfo.extraRecommend.shareContentEn
        }}
      </div>
      <div
        v-if="detailInfo.type == 4"
        class="share-label"
        v-html="
          locale === 'zh_CN'
            ? detailInfo.extraShare.activityDescZh
            : detailInfo.extraShare.activityDescEn
        "
      />
      <div class="activity-cell">
        <div class="cell-label">{{ $t("integral.illustrate") }}</div>
        <div class="cell-content">
          <img class="cell-image" src="@/assets/integral/score_b.png" />
          <div class="cell-text">
            <span v-if="detailInfo.type == 4">{{
              $t("integral.shareLabel", { val: detailInfo.getScoreOnce })
            }}</span>
            <span v-if="detailInfo.type == 3">{{
              $t("integral.referralCodeLabel", { val: detailInfo.getScoreOnce })
            }}</span>
            <span v-if="detailInfo.type == 2">{{
              $t("integral.registerLabel", { val: detailInfo.getScoreOnce })
            }}</span>
            <div v-if="detailInfo.type == 1">
              <div
                v-for="ruleItem in detailInfo.extraOrderV.orderVRule"
                :key="ruleItem.low"
                class="rule"
              >
                {{
                  $t("integral.orderRuleLabel", {
                    low: ruleItem.low,
                    high: ruleItem.high,
                    score: ruleItem.score,
                    unit:
                      detailInfo.extraOrderV.transportType == 1 ? "m³" : "kg",
                  })
                }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="detailInfo.type != 2" class="activity-cell">
        <div class="cell-label">{{ $t("integral.maxIntegral") }}</div>
        <div class="cell-content">
          <img class="cell-image" src="@/assets/integral/score_b.png" />
          <div class="cell-text">{{ detailInfo.maxScoreTotal }}</div>
        </div>
      </div>
      <div class="activity-cell">
        <div class="cell-label">{{ $t("integral.date") }}</div>
        <div class="cell-content">
          {{ getTimeRange(detailInfo.startTime, detailInfo.endTime) }}
        </div>
      </div>
      <div class="activity-cell">
        <div class="cell-label">{{ $t("integral.rulesIllustrate") }}</div>
        <div class="cell-content">
          {{ locale === "zh_CN" ? detailInfo.descZh : detailInfo.descEn }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { integralActivityDetail } from "@/api/integral";
export default {
  data() {
    return {
      detailInfo: {},
    };
  },
  computed: {
    locale() {
      return this.$store.getters.language;
    },
  },
  created() {
    this.getDetail();
  },
  methods: {
    // 获取详情
    async getDetail() {
      try {
        const { code, data } = await integralActivityDetail({
          id: this.$route.query.id,
        });
        if (code !== 0) return;
        this.detailInfo = data;
      } catch (err) {
        console.log(err);
      }
    },
    // 时间范围返回
    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.$t("exchange.to")}${formatDate(end)}`;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding: 10px;
  background-color: #fff;
  border-radius: 10px;
}
.img-box {
  margin: 10px 0;
  width: 320px;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  .img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.container-main {
  padding: 6px;
}
.activity-title {
  font-size: 28px;
  height: 42px;
  display: flex;
  font-weight: 700;
  align-items: center;
  color: #333;
}
.activity-remark {
  font-size: 16px;
  color: #333;
}
.activity-cell {
  margin-top: 10px;
  width: 100%;
  display: flex;
  font-size: 16px;
  color: #333;
}
.cell-content {
  max-width: 60%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.cell-image {
  width: 12px;
  height: 12px;
}
.cell-text {
  margin-left: 4px;
  font-weight: 600;
  font-size: 16px;
  color: #000;
}
.cell-label {
  font-weight: 700;
  margin-right: 10px;
  &::after {
    content: ":";
  }
}
</style>
