<template>
  <ay-container v-show="store.webapi.strategy.get_by_Name.success">
    <div v-if="data.activity2025.open">
      <div class="whitespace-pre-wrap mb-spac" v-html="data.activity2025.desc"></div>
      <div class="flex justify-between font-bold mb-spac row">
        <div>排名</div>
        <div>驾驶员信息</div>
        <div>累计加气量</div>
      </div>
      <div
        class="center justify-between s-fz row item-row"
        :class="{ even: i % 2 === 0 }"
        v-for="(dr, i) in data.driverRank"
        :key="i"
      >
        <div>{{ dr.rank }}</div>
        <div>{{ dr.driverName }}</div>
        <div>{{ dr.gasQty }}</div>
      </div>
    </div>
    <div v-else class="font-bold text-center">活动已结束</div>
  </ay-container>
</template>

<script lang="ts" setup>
const methods = {}
const data = ay.initData({
  /** 2025年初运营活动信息 */
  activity2025: { open: 0 } as { open: number; title: string; bannerImg: string; desc: string },
  driverRank: [] as DriverRankVO[],
})

ay.entrance((args) => {
  // #ifdef MP
  uni.showShareMenu({
    // path: config.pages.activity_2025start._url,
    withShareTicket: true,
    menus: ['shareAppMessage', 'shareTimeline'],
  })
  // #endif
  webapi.strategy
    .get_by_Name<null, SystemConfig对象>({
      //
      name: 'activity2025',
    })
    .then((res) => {
      if (res?.value) {
        try {
          data.activity2025 = JSON.parse(res.value)
          uni.setNavigationBarTitle({ title: data.activity2025.title })
        } catch (e) {}
      }
    })

  webapi.settle.driver_rank<null, DriverRankVO[]>().then((res) => {
    data.driverRank = res
  })
})
</script>
<style lang="scss" scoped>
.row {
  & > div,
  > view {
    // margin-bottom: $p-spac;
    text-align: center;
  }
  & > div:first-child,
  > view:first-child {
    width: 15%;
  }
  & > div:last-child,
  > view:last-child {
    width: 25%;
  }
}
.item-row {
  min-height: 80rpx;
  background-color: #0084f433;
  &.even {
    background-color: #ec808d1a;
  }
}
</style>
