<script lang="ts" setup>
import TreeSidePageableTable from "@/components/base/treeside-pageable-table/TreeSidePageableTable.vue";
import { $t } from "@/common/languages";
import { ref } from "vue";

/**
 * 必须要的变量
 */

const tableRef = ref<InstanceType<typeof TreeSidePageableTable> | null>(null);
const getPageUrl = "/sale/device/getDeviceSnPage";
const treeSideUrl = "/sys/keyaccount/getKeyAccountTree";
const searchers = [
  {
    name: "searchCode",
    type: "text" as const,
    placeholder:
      $t("_prop.sale.devicesn.productSn") +
      "/" +
      $t("_prop.sale.devicesn.mac") +
      "/" +
      $t("_prop.sale.devicesn.serialNum"),
  },
];
</script>
<template>
  <TreeSidePageableTable
    :url="getPageUrl"
    :searchers="searchers"
    ref="tableRef"
    :tree-side-url="treeSideUrl"
    tree-side-node-name="id"
    tree-side-param-name="keyAccountId"
    :tree-side-title="$t('_message.common.all_customers')"
  >
    <template #columns>
      <el-table-column :label="$t('_prop.sale.devicesn.productType')" prop="productType" />
      <el-table-column :label="$t('_prop.sale.devicesn.productSn')" prop="productSn" />
      <el-table-column :label="$t('_prop.sale.devicesn.mac')" prop="mac" />
      <el-table-column :label="$t('_prop.sale.devicesn.serialNum')" prop="serialNum" />
      <el-table-column :label="$t('_prop.sale.devicesn.softVersion')" prop="softVersion" />
      <el-table-column :label="$t('_prop.sale.devicesn.AlVersion')" prop="alVersion" />
      <el-table-column :label="$t('_prop.sale.devicesn.outProductDate')" prop="outProductDate" />
      <el-table-column :label="$t('_prop.sale.devicesn.repairMark')" prop="repairRecords" show-overflow-tooltip />
    </template>
  </TreeSidePageableTable>
</template>
