<route lang="json5" type="page">
{
  layout: 'default',
  needLogin: true,
  style: {
    navigationBarTitleText: '%missionCenter.title%',
    navigationBarBackgroundColor: '#fff'
  }
}
</route>

<script lang="ts" setup>
import { clockIn, todayDetail } from '@/api/mine'
import { t } from '@/locale'
import i18n from '@/locale/index'
import { toPage } from '@/utils/page'
import { toast } from '@/utils/toast'

defineOptions({
  name: 'MissionCenter', // 任务中心
})

const dailyMission = computed(() => {
  const _locale = i18n.global.locale
  void _locale
  return [
    {
      name: t('missionCenter.dailyMission.inviteFriends.name'),
      description: t('missionCenter.dailyMission.inviteFriends.description'),
      icon: '/static/icons/invite-friends.png',
      url: '/pages/referEarn/referEarn',
    },
    {
      name: t('missionCenter.dailyMission.openGroupBuy.name'),
      description: t('missionCenter.dailyMission.openGroupBuy.description'),
      icon: '/static/icons/open-group-buy.png',
      url: '/pages/bestSellers/bestSellers',
    },
    {
      name: t('missionCenter.dailyMission.joinGroupBuy.name'),
      description: t('missionCenter.dailyMission.joinGroupBuy.description'),
      icon: '/static/icons/join-group-buy.png',
      url: '/pages/bestSellers/bestSellers',
    },
  ]
})
// 今日是否已签到
const hasSignedToday = ref(true)

// 签到方法
async function signIn() {
  if (hasSignedToday.value)
    return
  const res = await clockIn()
  if (res.code === '200') {
    await getSignList()
    toast.success('Check-in Success')
  }
}
const signList = ref<any[]>([])
async function getSignList() {
  const res = await todayDetail()
  console.log(res)
  signList.value = res.data.signList
  hasSignedToday.value = res.data.today
}
onLoad(() => {
  getSignList()
})
</script>

<template>
  <view class="px-24rpx py-20rpx">
    <view class="mb-34rpx rounded-16rpx bg-white p-24rpx">
      <view
        class="mb-40rpx flex items-center before:h-45rpx before:w-8rpx before:rounded-4rpx before:bg-#FF3778 before:content-empty"
      >
        <text class="ml-10rpx text-32rpx">
          {{ $t('missionCenter.signIn.title') }}
        </text>
      </view>

      <!-- 七天签到日历 -->
      <view class="flex items-center justify-between">
        <view v-for="(day, index) in signList" :key="index" class="flex flex-col items-center">
          <view
            class="h-70rpx w-70rpx flex flex-col items-center justify-center rounded-full"
            :class="[day.status === 1 ? 'bg-#FF3778/30' : 'bg-gray-100']"
          >
            <view
              class="pt-6rpx text-24rpx"
              :class="[day.status === 1 ? 'text-[var(--wot-color-theme)]' : 'text-#000/15']"
            >
              ৳{{ day.value }}
            </view>
          </view>
          <view class="mt-8rpx text-20rpx text-gray-500">
            {{ day.days }}D
          </view>
        </view>
      </view>

      <!-- 签到按钮 -->
      <view class="mt-30rpx flex justify-center">
        <wd-button size="small" :type="hasSignedToday ? 'info' : 'primary'" :disabled="hasSignedToday" @click="signIn">
          {{ $t('missionCenter.signIn.button') }}
        </wd-button>
      </view>
    </view>
    <view class="rounded-16rpx bg-white p-24rpx">
      <view
        class="mb-20rpx flex items-center before:h-45rpx before:w-8rpx before:rounded-4rpx before:bg-#FF3778 before:content-empty"
      >
        <text class="ml-10rpx text-32rpx">
          {{ $t('missionCenter.dailyMission.title') }}
        </text>
      </view>
      <view
        v-for="(item, index) in dailyMission"
        :key="index"
        class="flex items-center justify-between py-30rpx"
        :class="{ 'border-b-1 border-b-solid border-b-#e8e8e8': index !== dailyMission.length - 1 }"
      >
        <view class="flex items-center">
          <image :src="item.icon" class="mr-16rpx h-100rpx w-100rpx" />
          <view>
            <view class="text-28rpx font-bold">
              {{ item.name }}
            </view>
            <view class="text-24rpx text-#6E6E6E">
              {{ item.description }}
            </view>
          </view>
        </view>
        <wd-button size="small" @click="toPage({ url: item.url })">
          {{ $t('missionCenter.dailyMission.startNow') }}
        </wd-button>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
//
</style>
