<template>
  <view>
    <view class="card-list">
      <view
        class="item"
        v-for="(item, index) in list"
        :key="index"
        @click="clickItem(item)"
      >
        <view class="text">
          <IconFont :name="item.icon" color="red" size="30" />
          <view>{{ item.label }}</view>
        </view>
      </view>
      <view style="width: 45%"></view>
    </view>
    <!-- 二维码弹窗 -->
    <nut-popup :style="{ padding: '30px 50px' }" v-model:visible="show">
      <view class="popup">
        <view>推荐人二维码绑定</view>
        <image style="margin-top: 10px" :src="urlCode" />
      </view>
    </nut-popup>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { IconFont } from "@nutui/icons-vue-taro";
import Taro from "@tarojs/taro";
import { getRefereeCode } from "@/api/user";

const show = ref(false);

const urlCode = ref("");

const list = ref([
  {
    id: 1,
    icon: "scan",
    label: "推广名片",
  },
  {
    id: 2,
    icon: "date",
    label: "积分明细",
  },
  {
    id: 3,
    icon: "my2",
    label: "推广用户",
  },
]);

const clickItem = async (item: any) => {
  if (item.id === 1) {
    // urlCode.value = `https://api.pwmqr.com/qrcode/create?url=${Taro.getStorageSync(
    //     "token"
    // )}`;
    Taro.showLoading({
      title: "加载中",
      mask: true,
    });
    const res = await getRefereeCode();
    urlCode.value = `data:image/png;base64,${res.data.data}`;
    show.value = true;
    Taro.hideLoading();
  } else if (item.id === 2) {
    Taro.navigateTo({
      url: "/pages/users/distribution/integral/index",
    });
  } else {
    Taro.navigateTo({
      url: "/pages/users/distribution/userlist/index",
    });
  }
};
</script>

<style lang="scss">
.card-list {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;

  .item {
    width: 45%;
    height: 200px;
    background-color: #fff;
    border-radius: 20px;
    margin-top: 10px;
    text-align: center;
    padding: 10px;
    position: relative;

    .text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}

.popup {
  text-align: center;

  image {
    width: 300px;
    height: 300px;
  }
}
</style>
