<template>
  <div class="page">
    <a-row :gutter="10">
      <a-col :span="16">
        <RowItem class="mb-10" title="我的品牌" :number="brandTotal" desc="已创建" link="/brand">
          <div class="px-60 h-full grid grid-cols-5 gap-60">
            <router-link to="/brand" class="w-87 img-item fs-16 c-333" v-for="item in brandList" :key="item.id">
              <img class="w-87 h-87 shadow hover:shadow-gray transition-all object-cover" :src="item.brandLogo" />
              <p class="truncate w-full mt-10 text-center">{{ item.brandName }}</p>
            </router-link>
          </div>
        </RowItem>
        <RowItem class="mb-10" title="我的商品" :number="productTotal" desc="已维护" link="/brand">
          <div class="px-60 h-full grid grid-cols-5 gap-60">
            <router-link to="/brand" class="w-87 img-item fs-16 c-333" v-for="item in productList" :key="item.id">
              <img class="w-87 h-87 shadow hover:shadow-gray transition-all" :src="item.masterImage" />
              <p class="truncate w-full mt-10 text-center">{{ item.merchandiseEnglishName }}</p>
            </router-link>
          </div>
        </RowItem>
        <RowItem class="mb-10" title="我的订单" :number="orderTotal" desc="已下单" link="/order" linkText="查看所有">
          <div class="px-60 h-full flex justify-between items-center">
            <div class="box w-full shadow">
              <div
                class="head h-48 lh-48 px-20 flex justify-between items-center border-b-1 border-b-solid border-gray-1"
                v-for="item in orderList"
                :key="item.id"
              >
                <div>
                  <span class="order-id fs-16">{{ item.billNo }}</span>
                  <span class="order-date ml-10 fs-14 c-999">{{ item.createTime }}</span>
                </div>
                <div class="c-DF2525 fw-700">{{ toUSD(item.price) }}</div>
              </div>
              <div class="body px-20 py-15">
                <div class="list flex items-center justify-around">
                  <img
                    class="w-60 h-60 mr-30 shadow"
                    :src="item.url"
                    v-for="(item, i) in orderInnerList.filter((item, index) => index < 5)"
                    :key="i"
                  />
                  <span class="c-999 fs-14 w-100 flex">等{{ orderInnerList.length }}件产品</span>
                </div>
              </div>
            </div>
          </div>
        </RowItem>

        <img class="bottom-img w-full h-182 object-cover" src="@/assets/images/ejet_group.png" alt="" />
      </a-col>
      <a-col :span="8">
        <PanelItem class="mb-10" title="公告栏" noneText="您还没有新的公告~~"></PanelItem>
        <PanelItem class="mb-10" title="最新留言" noneText="您还没有新的留言~~"></PanelItem>
        <PanelConnect class="mb-10" title="客服"></PanelConnect>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import RowItem from './_components/RowItem.vue'
import PanelItem from './_components/PanelItem.vue'
import PanelConnect from './_components/PanelConnect.vue'
import { downloadFile } from '@/utils'
import { apiBrandList } from '@/api/brand'
import { apiProductList } from '@/api/product'
import { apiOrderList, apiRecentOrder } from '@/api/order'
import { toUSD } from '@/utils'
import type { UnwrapRef } from 'vue'
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()

const mockImg = 'https://picsum.photos/100/100'

// 品牌
let brandList: UnwrapRef<BrandItem[]> = reactive([])
let brandTotal = ref<number>(0)
apiBrandList({
  pageSize: 5,
})
  .then(({ data }) => {
    brandList = Object.assign(brandList, data.result.records)
    brandTotal.value = data.result.total
  })
  .catch(() => {})

// 商品
let productList: UnwrapRef<ProductItem[]> = reactive([])
let productTotal = ref<number>(0)
apiProductList({
  pageSize: 5,
})
  .then(({ data }) => {
    productList = Object.assign(productList, data.result.records)
    productTotal.value = data.result.total
  })
  .catch(() => {})

// 我的订单
let orderList: UnwrapRef<OrderItem[]> = reactive([])
let orderTotal = ref<number>(0)
apiOrderList({
  pageSize: 1,
})
  .then(({ data }) => {
    orderList = Object.assign(orderList, data.result.records)
    orderTotal.value = data.result.total
  })
  .catch(() => {})

type OrderInner = {
  url: string
}
let orderInnerList: UnwrapRef<Array<OrderInner>> = reactive([])
apiRecentOrder({
  supplierId: userStore.userInfo.id,
})
  .then(({ data }) => {
    console.log(data)
    orderInnerList = Object.assign(orderInnerList, data.result.lastMerchandise)
  })
  .catch(() => {})
</script>
<style scoped lang="less"></style>
