<template>
  <my-dialog
    :visible="visible"
    :header="`供应商派单明细`"
    :width="1200"
    :closeOnOverlayClick="false"
    @close="emit('update:visible', false)"
  >
    <div class="drill-search-box">
      <div class="field">
        <div class="label">服务单元：</div>
        <div class="value">{{ props.data?.serviceName }}</div>
      </div>
      <div class="field">
        <div class="label">供应商：</div>
        <div class="value">{{ props.data?.supplierName }}</div>
      </div>
    </div>
    <t-table
      ref="tableRef"
      size="small"
      row-key="key"
      :columns="tableColumns"
      :data="tableData"
      bordered
      :pagination="{
        defaultCurrent: 1,
        defaultPageSize: 10,
        onChange,
        showJumper: true,
        showPageSize: false,
        total: pagination.total,
        current: pagination.pageNumber,
      }"
      v-loading="loading"
    >
      <template #custom-type="{ col, row }">
        {{ customerTypeFilter(row[col.colKey]) }}
      </template>
      <template #begin-time="{ col, row }">
        {{ timestampFilter(row[col.colKey]) }}
      </template>
    </t-table>
  </my-dialog>
</template>
<script setup name="SupplierDetailDrillDialog">
import { ref, computed, reactive, watch } from 'vue';
import { CUSTOMER_TYPE } from '@/config/constants';
import { dateFormat } from '@/utils/tool';
import useFetchTable from '@/hooks/useFetchTable';
import { supplierOverviewDrill } from '@/api/report';
import { customerTypeFilter, timestampFilter } from '@/utils/filter';
const tableColumns = [
  { colKey: 'service', title: '服务单元' },
  { colKey: 'crmNo', title: '项目单号' },
  { colKey: 'beginTime', title: '派单时间', cell: 'begin-time' },
  { colKey: 'crmUserName', title: '客户经理' },
  { colKey: 'customType', title: '客户类型', cell: 'custom-type' },
  { colKey: 'custom', title: '客户名称' },
  { colKey: 'name', title: '项目名称' },
  { colKey: 'product', title: '实施产品' },
];
const props = defineProps({
  visible: Boolean,
  data: Object,
});
const emit = defineEmits(['close', 'update:visible']);

watch(
  () => props.visible,
  (val) => {
    val && search();
  }
);
const transParams = computed(() => {
  return {
    serviceUnitId: props.data?.serviceUnitId,
    supplierId: props.data?.supplierId,
  };
});

const { loading, pagination, tableData, search, onChange } = useFetchTable(
  supplierOverviewDrill,
  {
    params: transParams,
  },
  false
);
</script>
