<route lang="json5">
{ layout: 'tabbar', style: { navigationBarTitleText: '我的', navigationStyle: 'custom' } }
</route>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { designer, settled, treaty } from '../../core/libs/pngs'
import { integral, coupon, order, agent, setting, scan } from '../../core/libs/svgs'
import { getMemberUserInfo, getTasks } from '../../core/libs/requests'
import { useUserStore } from '../../store'
import { storeToRefs } from 'pinia'
import { isEmpty } from 'radash'
import Card from '@designer-hub/app/src/components/card.vue'
import SectionHeading from '@designer-hub/app/src/components/section-heading.vue'
import { merchantPageHeaderBg } from '@designer-hub/assets/src/svgs'

const userStore = useUserStore()
const { isLogined, userInfo } = storeToRefs(userStore)
const { setUserInfo } = userStore
const { data, run } = useRequest(getMemberUserInfo)
const { data: taskData, run: getTaskData } = useRequest(() => getTasks({}), {
  initialData: { list: [] },
})
const menus = ref([
  { title: '积分明细', icon: integral },
  { title: '优惠券包', icon: coupon },
  { title: '我的订单', icon: order },
  { title: '专属客服', icon: agent },
  { title: '个人设置', icon: setting },
])
const pieces = ref([
  {
    title: '设计师成长计划',
    desc: '赋能设计共同成长',
    icon: designer,
    class: 'items-start! pb-0 pr-0',
    iconSize: 102,
    gridItemClass: 'col-start-1 row-start-1 row-end-3',
  },
  {
    title: '材料商入驻',
    desc: '提供优质材料商',
    icon: settled,
    class: 'flex-row! pb-0 pr-0',
    iconSize: 68,
    gridItemClass: 'col-start-2 row-start-1',
  },
  {
    title: '筑巢荟公约',
    desc: '共同遵守平台公约',
    icon: treaty,
    class: 'col-start-2 row-start-2 flex-row! pb-0',
    iconSize: 44,
    gridItemClass: 'col-start-2 row-start-2',
  },
])
const avatar = computed(() =>
  !isEmpty(userInfo.value.avatar) ? userInfo.value.avatar : 'https://via.placeholder.com/72x72',
)
const nickNameClickHandle = async () => {
  if (isLogined.value) return
  uni.navigateTo({ url: '/pages/login/index' })
}
onShow(async () => {
  if (isLogined.value) {
    await run()
    setUserInfo({
      ...userInfo.value,
      ...data.value,
    })
  }
})
const handleToAuthentication = () => {
  if (!isLogined.value) return
  uni.navigateTo({ url: '/pages/mine/authentication/index' })
}
const handleToHomepage = () => {
  uni.navigateTo({ url: '/pages/mine/homepage/index' })
}
onMounted(async () => {
  // await run()
  // console.log(data.value)
  // await getTaskData()
})
const navBarProps = ref({ customClass: 'bg-transparent!' })
onPageScroll(({ scrollTop }: { scrollTop: number }) => {
  console.log(scrollTop)
  navBarProps.value.customClass = scrollTop === 0 ? 'bg-transparent!' : ''
})
</script>

<template>
  <view>
    <div class="aspect-[0.96/1] absolute left-0 right-0 top--1">
      <wd-img
        width="100%"
        height="100%"
        :src="merchantPageHeaderBg"
        custom-class="vertical-bottom"
      ></wd-img>
    </div>
    <wd-navbar
      fixed
      safeAreaInsetTop
      custom-class="bg-transparent!"
      :bordered="false"
      placeholder
      v-bind="navBarProps"
    ></wd-navbar>
    <div class="p-4 flex flex-col gap-4 relative">
      <div class="flex items-center px-4 mb-4">
        <img
          class="w-14 h-14 rounded-full border border-white"
          src="https://via.placeholder.com/56x56"
        />
        <div class="mx-4 flex-1">
          <div class="text-white text-lg font-normal font-['PingFang SC'] leading-normal">
            李晓东
          </div>
          <div class="text-white text-xs font-normal font-['PingFang SC'] leading-relaxed">
            ID：1023621
          </div>
        </div>
        <div>
          <div class="w-[29px] h-[29px] relative bg-[#ff523f]"></div>
          <div class="text-white text-[10px] font-normal font-['PingFang SC'] leading-relaxed">
            邀请码
          </div>
        </div>
      </div>
      <Card>
        <SectionHeading title="本年目标" size="base"></SectionHeading>
        <div class="flex flex-col gap-2.5 mt-3">
          <template
            v-for="{ name } of [
              { name: 'Imola订单金额目标' },
              { name: '平台订单金额目标' },
              { name: '拜访次数' },
              { name: '到店次数' },
            ]"
            :key="name"
          >
            <div
              class="bg-gradient-to-r from-[#fef3ee] to-[#f0f4f9] rounded-lg flex items-center p-4 gap-6"
            >
              <div>
                <div class="w-[45px] h-[45px] rounded-full border-4 border-[#ffe2d0] bg-red"></div>
              </div>
              <div class="flex-1">
                <div class="text-black/60 text-xs font-normal font-['PingFang SC']">{{ name }}</div>
                <div class="flex items-center gap-1">
                  <div class="text-black/90 text-lg font-medium font-['DIN'] leading-normal">
                    6000
                  </div>
                  <div class="text-black text-xs font-normal font-['PingFang SC']">万</div>
                </div>
                <div class="flex items-center gap-1">
                  <div class="text-black/60 text-xs font-normal font-['PingFang SC']">差值</div>
                  <div class="text-[#ff2d2d] text-xs font-medium font-['DIN'] leading-normal">
                    3000
                  </div>
                  <div class="text-[#ff2d2d] text-[10px] font-medium font-['DIN'] leading-normal">
                    万
                  </div>
                </div>
              </div>
              <div class="">
                <div class="text-black/60 text-xs font-normal font-['PingFang SC']">当年完成</div>
                <div class="flex items-center gap-1">
                  <div class="text-black/90 text-lg font-medium font-['DIN'] leading-normal">
                    6000
                  </div>
                  <div class="text-black text-xs font-normal font-['PingFang SC']">万</div>
                </div>
                <div class="flex items-center gap-1">
                  <div class="text-black/60 text-xs font-normal font-['PingFang SC']">本月</div>
                  <div class="text-[#0FC187] text-xs font-medium font-['DIN'] leading-normal">
                    3000
                  </div>
                  <div class="text-[#0FC187] text-[10px] font-medium font-['DIN'] leading-normal">
                    万
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>
      </Card>
      <Card>
        <SectionHeading title="设计师数据" size="base"></SectionHeading>
        <div class="mt-3 grid grid-cols-3 gap-2.5">
          <template
            v-for="{ name, value } of [
              { name: '设计师总数', value: 220 },
              { name: '成交过', value: 220 },
              { name: '未成交过', value: 220 },
              { name: '消耗积分', value: 220 },
              { name: '参加游学', value: 220 },
              { name: '参与活动', value: 220 },
            ]"
            :key="name"
          >
            <div class="bg-[#f6f7ff] rounded-lg aspect-[1/1] flex flex-col justify-around p-2.5">
              <div class="text-black/60 text-xs font-normal font-['PingFang SC'] leading-none">
                {{ name }}
              </div>
              <div class="text-black/90 text-lg font-bold font-['D-DIN Exp'] leading-normal">
                {{ value }}
              </div>
              <div class="flex items-center gap-1">
                <div class="text-black/40 text-xs font-normal font-['PingFang SC'] leading-none">
                  年新增
                </div>
                <div class="text-[#ff2d2d] text-xs font-normal font-['D-DIN Exp'] leading-normal">
                  20
                </div>
              </div>
            </div>
          </template>
        </div>
      </Card>
      <Card>
        <SectionHeading title="跟进数据" size="base"></SectionHeading>
        <div class="mt-3 grid grid-cols-3 gap-2.5">
          <template
            v-for="{ name, value } of [
              { name: '累计跟进', value: 220 },
              { name: '线下拜访', value: 220 },
              { name: '线上跟进', value: 220 },
            ]"
            :key="name"
          >
            <div class="bg-[#f6f7ff] rounded-lg aspect-[1/1] flex flex-col justify-around p-2.5">
              <div class="text-black/60 text-xs font-normal font-['PingFang SC'] leading-none">
                {{ name }}
              </div>
              <div class="text-black/90 text-lg font-bold font-['D-DIN Exp'] leading-normal">
                {{ value }}
              </div>
              <div class="flex items-center gap-1">
                <div class="text-black/40 text-xs font-normal font-['PingFang SC'] leading-none">
                  年新增
                </div>
                <div class="text-[#ff2d2d] text-xs font-normal font-['D-DIN Exp'] leading-normal">
                  20
                </div>
              </div>
            </div>
          </template>
        </div>
      </Card>
    </div>
  </view>
</template>

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