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

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import {
  getOrders,
  getVendorAppInfo,
  getYearTarget,
  getDesignerStatistics,
  getFollowStatistics,
  getBroker,
} from '../../core/libs/requests'

import { storeToRefs } from 'pinia'
import { isEmpty } from 'radash'
import Card from '@designer-hub/app/src/components/card.vue'
import { desinTopBg } from '@designer-hub/assets/src/svgs'
import NavBarEvo from '@designer-hub/app/src/components/navbar-evo.vue'
import dayjs from 'dayjs'
import PageHelper from '../../components/page-helper.vue'
import { useUserStore } from '@/store'
import AgentMine from './components/agent-mine.vue'
import PageHelperEvo from '@/components/page-helper-evo.vue'

const userStore = useUserStore()
const { isLogined, userInfo, isMerchant, isAgent } = storeToRefs(userStore)
const { data, run: setData } = useRequest(() => getVendorAppInfo())
const { data: orders, run: setOrders } = useRequest(() => getOrders())
const { data: yearTarget, run: setYearTarget } = useRequest(() => getYearTarget())
const { data: designerData, run: setdesignerData } = useRequest(() => getDesignerStatistics())
const { data: followData, run: setFollowData } = useRequest(() => getFollowStatistics())
const { data: agent, run: setAgent } = useRequest(() =>
  getBroker({ brokerId: String(userInfo.value.userId) }),
)

const status = ref<any>({
  '0': '已报名',
  '1': '已完成',
  '2': '未核销',
  '3': '已取消',
  '4': '待交付',
})
const toInfoSeting = () => {
  uni.navigateTo({ url: '/pages/mine/merchant/merchant_settings' })
}
const toOrder = (order: any) => {
  uni.navigateTo({ url: `/pages/mine/merchant/orders/detail/index?id=${order.id}` })
}
onShow(async () => {
  if (isLogined.value && isMerchant?.value) {
    await setData()
    await setOrders()
  }

  if (isLogined.value && isAgent?.value) {
    await setAgent()
    await Promise.all([setYearTarget(), setdesignerData(), setFollowData()])
  }
})
onMounted(async () => {})
const navBarProps = ref({ customClass: 'bg-transparent!' })
onPageScroll(({ scrollTop }: { scrollTop: number }) => {
  console.log(scrollTop)
  navBarProps.value.customClass = scrollTop === 0 ? 'bg-transparent!' : ''
})
</script>

<template>
  <view>
    <NavBarEvo title="我的" transparent dark placeholder></NavBarEvo>
    <template v-if="isAgent">
      <AgentMine></AgentMine>
    </template>
    <template v-if="isMerchant">
      <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>
            <wd-img width="64" height="64" round :src="data?.avatar" />
          </div>
          <div class="ml-[10px]">
            <div class="text-black/90 text-lg font-normal font-['PingFang_SC'] leading-[10.18px]">
              商家：{{ data?.vendorName }}
            </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：{{ data?.id }}
              </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]">
          <PageHelperEvo :request="getOrders" :query="{}">
            <template #default="{ source }">
              <div class="flex flex-col gap-4">
                <template v-for="(it, i) in source?.list" :key="i">
                  <Card custom-class="py-4">
                    <div class="bg-white rounded-2xl flex flex-col" @click="toOrder(it)">
                      <div class="flex items-center justify-between">
                        <div
                          class="text-black/90 text-sm font-normal font-['PingFang_SC'] leading-normal"
                        >
                          支付时间：
                          {{ dayjs(it.completeTime).format('YYYY-MM-DD HH:mm') }}
                        </div>
                        <div
                          class="text-xs font-normal font-['PingFang_SC'] leading-normal"
                          :class="
                            ['2', '4'].includes(it.orderStatus) ? 'text-[#ff2d2d]' : 'text-black/30'
                          "
                        >
                          {{ status[it.orderStatus] }}
                        </div>
                      </div>

                      <div class="flex mt-[19px] items-center">
                        <div class="w-[86px] h-[86px] bg-[#f6f6f6] rounded-[10px] overflow-hidden">
                          <wd-img
                            width="86"
                            height="86"
                            custom-class="vertical-bottom bg-[#f6f6f6]"
                            :src="it.orderImgUrl"
                          ></wd-img>
                        </div>
                        <div class="ml-[16px] flex-1">
                          <div
                            class="text-black text-base font-normal font-['PingFang_SC'] leading-normal"
                          >
                            {{ it.projectName }}
                          </div>
                          <div
                            class="text-left text-black/30 text-sm font-normal font-['PingFang_SC'] leading-normal"
                          >
                            数量x{{ it.orderQuantity }}
                          </div>
                          <div
                            class="text-left text-black/30 text-sm font-normal font-['PingFang_SC'] leading-normal"
                          >
                            {{ it.points }}积分
                          </div>
                        </div>
                      </div>
                    </div>
                  </Card>
                </template>
              </div>
            </template>
          </PageHelperEvo>
        </div>
      </view>
    </template>
  </view>
</template>

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