<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import { getManufacturerListApi } from '/@/api/manufacturer';
  import { List } from '/@/types/manufacturer';
  import { Status } from '/@/const/manufacturer/';

  const router = useRouter();

  const data = ref({
    tableData: [] as List[],
    loading: false,
    current: 1,
    total: 50,
  });

  onMounted(() => {
    getList();
  });

  const getList = async () => {
    data.value.loading = true;
    const res = await getManufacturerListApi({
      currentPage: '1',
      pageSize: '10',
    }).finally(() => (data.value.loading = false));
    if (res.message) {
      data.value.tableData = res.data;
      data.value.total = res.data.length;
    }
  };
</script>
<template>
  <div class="manufacturer-list">
    <a-button type="primary" @click="router.push('/manufacturer/operate')">新增合作商</a-button>
    <a-table :data-source="data.tableData" :loading="data.loading" bordered :pagination="false">
      <a-table-column title="厂商编码" align="center">
        <template #default="{ record }">
          {{ record.mfrCode }}
        </template>
      </a-table-column>
      <a-table-column title="厂商全称" align="center">
        <template #default="{ record }">
          {{ record.mfrName }}
        </template>
      </a-table-column>
      <a-table-column title="厂商简称" align="center">
        <template #default="{ record }">
          {{ record.mfrShortName }}
        </template>
      </a-table-column>
      <a-table-column title="合作品牌" align="center">
        <template #default="{ record }">
          {{ record.brandList.join(',') }}
        </template>
      </a-table-column>
      <a-table-column title="创建时间" align="center">
        <template #default="{ record }">
          {{ record.createTime }}
        </template>
      </a-table-column>
      <a-table-column title="合作状态" align="center">
        <template #default="{ record }">
          {{ Status[record.cooperateStatus] }}
        </template>
      </a-table-column>
      <a-table-column title="操作" align="center" :width="250">
        <template #default="{ record }">
          <a-button
            type="link"
            @click="router.push(`/manufacturer/operate?supplierCode=${record.mfrCode}`)"
            >编辑</a-button
          >
          <a-button
            type="link"
            @click="router.push(`/manufacturer/detail?supplierCode=${record.mfrCode}`)"
            >查看</a-button
          >
        </template>
      </a-table-column>
    </a-table>

    <a-pagination v-model:current="data.current" :total="data.total" show-less-items />
  </div>
</template>
<style lang="less" scoped>
  .manufacturer-list {
    background-color: var(--fy-bg-white);
    padding: 16px;
    :deep(.ant-btn) {
      margin-bottom: 16px;
    }
    :deep(.ant-pagination) {
      text-align: right;
      margin-top: 16px;
    }
  }
</style>
