<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">{{ CUSTOMER_TYPE[props.data?.type] }}</div>
      </div>
      <div class="field">
        <div class="label">年月</div>
        <div class="value">{{ props.data.year + '-' + props.data.month }}</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="MonthDispatchDrillDialog">
import { ref, computed, reactive, watch } from 'vue';
import { CUSTOMER_TYPE } from '@/config/constants';
import useFetchTable from '@/hooks/useFetchTable';
import { monthDispatchDrill } from '@/api/report';
import { dateFormat } from '@/utils/tool';
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,
  timeParams: Object,
});
const emit = defineEmits(['close']);

watch(
  () => props.visible,
  (val) => {
    val && search();
  }
);
const transParams = computed(() => {
  return {
    type: props.data?.type,
    month: props.data?.month,
    year: props.data?.year,
    startTime: props.timeParams.startTime,
    endTime: props.timeParams.endTime,
  };
});

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