<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '社区',
    navigationBarBackgroundColor: '#fff',
    navigationStyle: 'custom',
  },
}
</route>

<script setup lang="ts">
import NavBar from '@/components/NavBar.vue'
import VueQrcode from '@chenfengyuan/vue-qrcode'
import { useUserStore } from '@/store'
import Avatar from '@/components/Avatar.vue'
import {
  getCommunityInviteFirstAPI,
  getCommunityInviteRewardAPI,
  getCommunityMyInviteAPI,
} from '@/service'
import { showModal } from '@/utils'

const userStore = useUserStore()

const qrcodeValue =
  location.origin + '/#/pages/register/index?invite=' + userStore.userInfo?.invitecode

const onCopy = (code: string) => {
  uni.setClipboardData({
    data: code,
  })
}
const inviteData = ref({
  num: 0,
  performance: 0,
})
const { list } = useListPageRequest((params) => {
  return getCommunityMyInviteAPI(params).then((res) => {
    inviteData.value.num = res.data.num
    inviteData.value.performance = res.data.performance
    res.data.data = res.data.list
    return res.data
  })
})

const inviteInfo = ref<any>(null)
const loadInviteInfo = async () => {
  const { data } = await getCommunityInviteFirstAPI()
  inviteInfo.value = data
  // inviteInfo.value = {
  //   num: 10,
  //   isuserauth: 1,
  //   realrewards: '200',
  //   jianglitiaojian: {
  //     '10': '3000',
  //     '20': '5000',
  //     '30': '15000',
  //     '40': '30000',
  //     '50': '50000',
  //   },
  //   open: 1,
  // }
}

onShow(async () => {
  await loadInviteInfo()
})
const taskList = computed(() => {
  if (!inviteInfo.value) return []

  const inviteTask = Object.keys(inviteInfo.value.jianglitiaojian)
  const inviteTaskList = inviteTask.map((key) => ({
    title: `邀请${key}人(${inviteInfo.value.num}/${key})`,
    desc: `赠送${inviteInfo.value.jianglitiaojian[key]}元`,
    level: key,
    status: Number(inviteInfo.value.num) >= Number(key),
    open: false,
  }))
  // 查找最后一个完成的任务，并设置open为true
  const lastCompletedTask = inviteTaskList.findLast((item) => item.status)
  if (lastCompletedTask) {
    lastCompletedTask.open = inviteInfo.value.open
  }
  return [
    // {
    //   title: '注册实名',
    //   desc: `领取${inviteInfo.value.realrewards}元`,
    //   // status: inviteInfo.value.isuserauth,
    //   status: false,
    //   open: false,
    // },
    // {
    //   title: '签到有礼',
    //   desc: `每日签到送${inviteInfo.value.qiandaojiang}元`,
    //   status: false,
    //   open: false,
    // },
    // {
    //   title: '邀请有礼',
    //   desc: `每邀请1人并实名认证获得${inviteInfo.value.yaoqingjiang}元养老金`,
    //   status: 0,
    //   open: false,
    // },
    ...inviteTaskList,
  ]
})

async function onGetReward(level) {
  await getCommunityInviteRewardAPI({ level })
  showModal('领取成功')
  await loadInviteInfo()
}
</script>

<template>
  <view class="pb-100 min-h-screen invite-page">
    <NavBar />
    <view class="flex items-center mt-290 mx-auto w-345 bg-#FFFFFFE5 p-15 rounded-20">
      <view class="text-center">
        <view class="mt-15 rounded-10 overflow-hidden flex bg-#FFFFFF50 p-10 shadow">
          <VueQrcode
            class="!w-100 !h-100 rounded-10"
            :value="qrcodeValue"
            :options="{ size: 200 }"
          />
        </view>
        <view class="text-10 text-#333 mt-4">分享二维码给好友</view>
      </view>
      <view class="text-center p-15">
        <view class="text-14 text-#333">邀请码：{{ userStore.userInfo?.invitecode }}</view>
        <view
          class="mt-8 btn-gradient text-white rounded-full px-15 w-160 py-8 text-14 text-center"
          @click="onCopy(userStore.userInfo?.invitecode)"
        >
          复制邀请码
        </view>
        <view
          class="mt-8 btn-gradient text-white rounded-full px-15 w-160 py-8 text-14 text-center"
          @click="onCopy(qrcodeValue)"
        >
          复制推广链接
        </view>
      </view>
    </view>
    <view class="mt-70 w-345 mx-auto">
      <view
        class="bg-#FFF9F2 mt-5 rounded-10 border-#FFDD99 border-2 border-solid p-15 flex items-start"
        v-for="item of taskList"
        :key="item.title"
      >
        <view class="flex-1">
          <view class="text-15 text-#333 font-500">{{ item.title }}</view>
          <view class="text-12 text-#333 mt-8">{{ item.desc }}</view>
        </view>
        <view>
          <view
            class="w-fit ml-auto mr-0 rounded-4 px-10 py-4 leading-12 text-white text-12 mb-8"
            style="background: linear-gradient(90deg, #ffdd99 0%, #efb85a 100%)"
            v-if="item.status"
          >
            已获取
          </view>
          <!-- <view
            class="w-fit ml-auto mr-0 bg-#F3CB3B33 rounded-4 px-10 py-4 leading-12 text-#FFA600 text-12"
            v-if="item.open"
            @click="onGetReward(item.level)"
          >
            领取
          </view> -->
        </view>
      </view>
    </view>
    <view class="bg-#FFFFFFE5 rounded-20 mt-30 w-345 mx-auto p-15 flex">
      <view class="flex-1 text-center">
        <view class="text-18 text-#333">团队人数</view>
        <view class="text-gradient text-18 mt-8">{{ inviteData.num }}</view>
        <view class="font-500 text-14 mt-4">直推人数</view>
      </view>
      <view class="flex-1 text-center">
        <view class="text-18 text-#333">我的佣金</view>
        <!-- <view class="text-18 text-#333 h-25"></view> -->
        <view class="text-gradient text-18 mt-8">{{ inviteData.performance }}</view>
        <view class="font-500 text-14 mt-4">直推业绩</view>
      </view>
    </view>
    <view class="mt-15 w-345 mx-auto">
      <view class="ml-15 text-18 text-#DE9859">团队成员（{{ inviteData.num }}/人）</view>
      <template v-if="list.length">
        <view
          class="mt-15 bg-white px-15 pt-15 pb-15 rounded-10"
          v-for="item of list"
          :key="item.id"
        >
          <view class="flex items-center">
            <Avatar :src="item.avatar" class="w-50 h-50" mode="aspectFill" />
            <view class="ml-15 flex-1">
              <view class="text-15 text-#333">{{ item.nickname }}</view>
              <view class="text-12 text-#333 mt-10">{{ item.jointime }}</view>
            </view>
          </view>
        </view>
      </template>
      <view class="mt-15 bg-white rounded-10 p-15" v-else>
        <wd-status-tip image="content" tip="暂无内容" />
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.invite-page {
  background-image: url('@/static/images/page-sub/invite-bg.jpg'),
    linear-gradient(to right, #f1dbc3, #e8c5a3);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100%;
}
</style>
