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

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { getMemberUserInfo } 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, desinTopBg, rightArrowIcon } from '@designer-hub/assets/src/svgs'

const userStore = useUserStore()
const { isLogined, userInfo } = storeToRefs(userStore)
const { setUserInfo } = userStore
const { data, run } = useRequest(getMemberUserInfo)
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' })
}
const toInfoSeting = () => {
  uni.navigateTo({ url: '/pages/mine/merchant/merchant_settings' })
}
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' })
}
const toorderDetail = async () => {
  uni.navigateTo({ url: '/pages/mine/merchant/order_detail' })
}
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>
    <template v-if="userInfo.appLoginType === 1">
      <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>
    </template>
    <template v-if="userInfo.appLoginType === 2">
      <view class="p-[16px]">
        <div class="aspect-[1.575/1] absolute left-0 right-0 top-0">
          <wd-img width="100%" height="100%" :src="desinTopBg" custom-class="vertical-top"></wd-img>
        </div>
        <div
          @click="toInfoSeting"
          class="bg-white rounded-2xl shadow relative mt-[28px] py-[29px] px-[14px] flex items-center"
        >
          <div><img class="w-16 h-16 rounded-full" src="https://via.placeholder.com/64x64" /></div>
          <div class="ml-[10px]">
            <div class="text-black/90 text-lg font-normal font-['PingFang SC'] leading-[10.18px]">
              商家：GELATO
            </div>
            <div
              class="h-6 px-1.5 py-1 bg-[#f5f6fa] rounded justify-center items-center gap-2.5 inline-flex mt-[17px]"
            >
              <div class="text-[#8b8b8b] text-xs font-normal font-['PingFang SC'] leading-none">
                ID：1201451200
              </div>
            </div>
          </div>
        </div>
        <div class="flex items-center mt-[20px]">
          <div class="w-1 h-[19px] bg-[#2357e9] rounded-md"></div>
          <div class="text-black text-lg font-normal font-['PingFang SC'] leading-normal ml-[8px]">
            记录
          </div>
        </div>
        <div class="mt-[16px]">
          <div class="bg-white rounded-2xl p-[16px] flex flex-col" @click="toorderDetail">
            <div class="text-black/90 text-sm font-normal font-['PingFang SC'] leading-normal">
              完成时间：2024-10-20 10:00
            </div>

            <div class="flex mt-[19px] items-center">
              <div class="w-[86px] h-[86px] bg-[#f6f6f6] rounded-[10px]"></div>
              <div class="ml-[16px]">
                <div class="text-black text-base font-normal font-['PingFang SC'] leading-normal">
                  阿芙佳朵
                </div>
                <div
                  class="text-left text-black/30 text-sm font-normal font-['PingFang SC'] leading-normal"
                >
                  数量x2
                </div>
                <div
                  class="text-left text-black/30 text-sm font-normal font-['PingFang SC'] leading-normal"
                >
                  600积分
                </div>
              </div>
            </div>
          </div>
        </div>
      </view>
    </template>
  </view>
</template>

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