<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">{{
          props.data?.regionId ? '大区：' : '供应商：'
        }}</div>
        <div class="value">{{
          props.data?.regionName || 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="SopDetailDrillDialog">
import { ref, computed, reactive, watch } from 'vue';
import { CUSTOMER_TYPE } from '@/config/constants';
import { dateFormat } from '@/utils/tool';
import useFetchTable from '@/hooks/useFetchTable';
import { sopDetailDrill } from '@/api/report';
import {
  customerTypeFilter,
  issuesReasonTypeFilter,
  issuesTypeFilter,
  timestampFilter,
} from '@/utils/filter';
const tableColumns = [
  { colKey: 'serviceName', title: '服务单元' },
  { colKey: 'crmNo', title: '项目单号' },
  { colKey: 'sopNo', title: 'SOP' },
  { colKey: 'statusStr', title: 'SOP状态' },
  { colKey: 'beginTime', title: '派单时间', cell: 'begin-time' },
  { colKey: 'customManagerName', title: '客户经理' },
  { colKey: 'customManagerTypeStr', title: '客户类型', cell: 'custom-type' },
  { colKey: 'customName', title: '客户名称' },
  { colKey: 'crmName', title: '项目名称' },
  { colKey: 'productName', title: '实施产品' },
];
const props = defineProps({
  visible: Boolean,
  data: Object,
});
const emit = defineEmits(['close']);

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

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