<template>
  <div class="page">
    <h-navbar title="Level Bonus" />
    <div class="page-body">
      <div class="block flex-sb" v-for="(item, index) in list" :key="index">
        <div class="left flex-ct">
          <!-- <h-img class="icon" src="perfil/jinbi_04.png" /> -->
          <h-img
            class="icon"
            v-if="item.iconUrl == 'perfil/jinbi_04.png' || !item.iconUrl"
            src="perfil/jinbi_04.png"
          />
          <van-image
            class="icon"
            v-else
            :src="getImage(item.iconUrl)"
          />
        </div>
        <div class="right">
          <span>VIP {{ item.lv }}</span>
          <span style="color: #f3e615">
            <i>R$ </i>{{ formatDigit(item.award[0].num / 10000) }}
          </span>
          <div style="text-align: right">
            <van-button color="#676e6e" v-show="item.status == STATUS.RECEIVED">
              Recebido
            </van-button>
            <van-button
              color="#1a795b"
              v-show="item.status == STATUS.NOT_RECEIVE"
            >
              Não completado
            </van-button>
            <van-button
              color="#a9792e"
              @click="receive(item._id)"
              v-show="item.status == STATUS.RECEIVE"
            >
              Receber
            </van-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import { useUserStore } from "@/stores/modules/user";
import { formatDigit,getImage } from "@/utils";
import socektApi from "@/socket/socketApi";
import { toast } from "@/utils/toast";
import http from "@/https/index";
const userStore = useUserStore();

const vipInfo = computed(() => userStore.vipInfo);

/**
 * 是否可领取
 *RECEIVE 可领取
 *RECEIVED 已领取
 *NOT_RECEIVE 不可领取
 * */

enum STATUS {
  RECEIVE = 1,
  RECEIVED,
  NOT_RECEIVE,
}
const propIdsData = ref<Array<any>>([]);

const list: any = computed(() => {
  let rows: Array<any> = [];
  console.log(vipInfo.value, "vipInfo.value.rows");
  if (vipInfo.value && vipInfo.value.rows) {
    rows = [...vipInfo.value.rows];
  }
  if (rows && rows.length) {
    rows.sort((a: any, b: any) => a.lv - b.lv);
    rows = rows.filter((i) => i.award.length);
    rows.forEach((item) => {
      if (item.lv <= vipInfo.value.myLv) {
        item.status = STATUS.RECEIVE;
      } else {
        item.status = STATUS.NOT_RECEIVE;
      }
    });
    console.log('====================================');
    console.log(vipInfo.value.vipLvAwardValue);
    console.log('====================================');
    /**如果没有已领取 */
    if (!vipInfo.value.vipLvAwardValue) {
      return rows;
    } else {
      rows.forEach((item: any) => {
        let i = vipInfo.value.vipLvAwardValue.findIndex(
          (i: any) => i == item.lv
        );
        if (i !== -1) {
          item.status = STATUS.RECEIVED;
        }
      });
    }
  }
  let propIdsData: Array<any> = Array.from(
    new Set(
      rows.map((item: any) => {
        return item.award[0].propId;
      })
    )
  );
  http.getPropsCache({ propIds: propIdsData }).then((res: any) => {
    if (res.code != 0) return rows;
    for (let i = 0; i < rows.length; i++) {
      for (let j = 0; j < res.data.props.length; j++) {
        if (
          rows[i].award[0] &&
          rows[i].award[0].propId === res.data.props[j]._id
        ) {
          rows[i].iconUrl = res.data.props[j].iconUrl;
        } else {
          rows[i].iconUrl = "perfil/jinbi_04.png";
        }
      }
    }
  });
  console.log(rows, "rows");
  return rows;
});

const receive = (id: string) => {
  http.getVipLvAward({
    _id:id
  }).then((res: any) => {
    if (res.code !== 0) return;
    toast("Recebido com sucesso");
    userStore.getUserInfo();
  });
};
</script>

<style lang="scss" scoped>
.page-body {
  padding: 0 0.2rem;
  :deep(.van-button) {
    width: 2.5rem;
  }
  .block {
    background: linear-gradient(to right, #262b31, #1c3236, #184039, #1d493c);
    margin: 0.25rem 0;
    border-radius: 0.15rem;
    .left {
      width: 1.5rem;
      background: rgba($color: #128258, $alpha: 0.3);
      padding: 0.25rem 0;
      border-top-left-radius: 0.15rem;
      border-bottom-left-radius: 0.15rem;
      .icon {
        width: 1rem;
      }
    }
    .right {
      flex: 1;
      display: grid;
      grid-template-columns: 1fr 1fr 3rem;
      align-items: center;
      height: 100%;
      font-size: 0.35rem;
      padding: 0 0.2rem;
      color: #c9d7c9;
      font-weight: 500;
      .van-button {
        :deep(.van-button__text:first-child) {
          color: #f3e615;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
