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

import { useResponse } from '/@/utils/useResponse';
import * as api from '../api';
import { Picture as IconPicture } from '@element-plus/icons-vue';
import { columns } from '../useColumns';
// import img from '/src/assets/img/headerImage.png'

const route = useRoute();
const platform = route.query.platform;
const platformOverview: any = ref([]);
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: 0,
    page: 1,
    limit: 10
  },
  loading: false,
  loadingConfig: {
    icon: 'vxe-icon-indicator roll',
    text: '正在拼命加载中...'
  },
  columns: columns,
  data: platformTableData
});

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

async function fetchPlatformDetail() {
  const query = {
    platform,
    page: gridOptions.pagerConfig.page,
    limit: gridOptions.pagerConfig.limit
  };
  const res = await useResponse(query, api.getPlatformDetailTableData, gridOptions);
  gridOptions.pagerConfig.total = res.total;
  gridOptions.pagerConfig.page = res.page;
  gridOptions.pagerConfig.limit = res.limit;
  platformTableData.value = res.data;
}

function pageChange({ pageSize, currentPage }: any) {
  gridOptions.pagerConfig.limit = pageSize;
  gridOptions.pagerConfig.page = currentPage;
  fetchPlatformDetail();
}

async function fetchPlatformDetailOverview() {
  const res = await useResponse({ platform }, api.getPlatformDetailOverview);
  platformOverview.value = res.data;
  console.log('(PlatformDetail.vue: 75)=> platformOverview.value', platformOverview.value);
}
</script>

<template>
  <div class="p-2.5">
    <!-- overview-card -->
    <el-card body-class="flex items-center" shadow="hover" style="border: none">
      <el-image class="mr-5" src="/src/assets/img/headerImage.png" style="height: 100px; width: 100px; object-fit: cover">
        <template #error>
          <div class="mr-3.5 flex items-center justify-center text-5xl" style="height: 100px; width: 100px; background-color: #f5f5f5">
            <el-icon>
              <icon-picture/>
            </el-icon>
          </div>
        </template>
      </el-image>
      <div>
        <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 #pager>
          <vxe-pager
              v-model:currentPage="gridOptions.pagerConfig.page"
              v-model:pageSize="gridOptions.pagerConfig.limit"
              :total="gridOptions.pagerConfig.total"
              @page-change="pageChange"
          >
          </vxe-pager>
        </template>
      </vxe-grid>
    </el-card>
  </div>
</template>

<style scoped></style>
