<script lang="ts" setup>
/**
 * @Name: PlatformDetail.vue
 * @Description: 平台详情页
 * @Author: Cheney
 */

import { useResponse } from '/@/utils/useResponse';
import * as api from '../api';
import { Link, Picture as IconPicture } from '@element-plus/icons-vue';
import { platformColumns } from '../useColumns';
import router from '/@/router';
import { useTableData } from '/@/utils/useTableData';
import { usePagination } from '/@/utils/usePagination';


const route = useRoute();
const platform = route.query.platform;
const platformOverview: any = ref([]);
const overviewLoading = ref();
const { tableOptions, handlePageChange } = usePagination(fetchPlatformDetail);
const platformTableData = ref([]);
const gridOptions: any = reactive({
  border: false,
  round: true,
  stripe: true,
  currentRowHighLight: true,
  height: 870,
  toolbarConfig: {
    custom: true,
  },
  rowConfig: {
    isHover: true
  },
  columnConfig: {
    resizable: true
  },
  pagerConfig: {
    total: tableOptions.value.total,
    page: tableOptions.value.page,
    limit: tableOptions.value.limit
  },
  loading: false,
  loadingConfig: {
    icon: 'vxe-icon-indicator roll',
    text: '正在拼命加载中...'
  },
  columns: platformColumns,
  data: platformTableData
});

onBeforeMount(() => {
  fetchPlatformDetailOverview();
  fetchPlatformDetail();
});

async function fetchPlatformDetail() {
  const query = {
    platform,
    page: gridOptions.pagerConfig.page,
    limit: gridOptions.pagerConfig.limit
  };
  await useTableData(api.getTableData, query, gridOptions)
}

async function fetchPlatformDetailOverview() {
  const res = await useResponse({ platform }, api.getPlatformDetailOverview, overviewLoading);
  platformOverview.value = res.data;
}

function handleNavigate(item: any) {
  router.push({
    path: '/shop/detail',
    query: { platformNumber: item.platformNumber }
  });
}

</script>

<template>
  <div class="p-2.5">
    <!-- overview-card -->
    <el-card v-loading="overviewLoading" body-class="flex items-center" shadow="hover" style="border: none">
      <el-image :src="`/src/assets/platformImg/${ platform }.png`" class="mr-7 rounded-2xl" fit="contain"
                style="height: 120px; width: 120px;">
        <template #error>
          <div class="mr-3.5 flex items-center justify-center text-5xl"
               style="height: 100%; width: 100%; background-color: #f5f5f5">
            <el-icon>
              <icon-picture/>
            </el-icon>
          </div>
        </template>
      </el-image>
      <div class="text-lg">
        <div class="font-semibold">
          平台名称:
          <span class="font-medium italic ml-1.5" style="color: #64748b"> 
            {{ platformOverview[0]?.platform ? platformOverview[0]?.platform : '--' }} 
          </span>
        </div>
        <div class="font-semibold">
          公司:
          <span class="font-medium italic ml-1.5" style="color: #64748b">
            {{ platformOverview[0]?.countCompany ? platformOverview[0]?.countCompany : '--' }} 
          </span>
        </div>
        <div class="font-semibold">
          店铺:
          <span class="font-medium italic ml-1.5" style="color: #64748b">
            {{ platformOverview[0]?.countShop ? platformOverview[0]?.countShop : '--' }}
          </span>
        </div>
        <div class="font-semibold">
          电脑:
          <span class="font-medium italic ml-1.5" style="color: #64748b"> 
            {{ platformOverview[0]?.countComputer ? platformOverview[0]?.countComputer : '--' }}
          </span>
        </div>
      </div>
    </el-card>
    <!-- table-card -->
    <el-card body-style="padding-top: 10px" class="mt-2.5" shadow="hover" style="border: none">
      <vxe-grid v-bind="gridOptions">
        <template #platformNumber="{ row }">
          <el-button link style="font-weight: 700" type="primary" @click="handleNavigate(row)">
            <el-icon>
              <Link/>
            </el-icon>
            {{ row.platformNumber ? row.platformNumber : '--' }}
          </el-button>
        </template>
        <template #pager>
          <vxe-pager
              v-model:currentPage="gridOptions.pagerConfig.page"
              v-model:pageSize="gridOptions.pagerConfig.limit"
              :total="gridOptions.pagerConfig.total"
              @page-change="handlePageChange"
          >
          </vxe-pager>
        </template>
      </vxe-grid>
    </el-card>
  </div>
</template>

<style scoped></style>
