<template>
  <my-dialog
    :visible="visible"
    :header="title"
    :width="1200"
    :closeOnOverlayClick="false"
    @close="emit('update:visible', false)"
  >
    <div class="drill-search-box">
      <div class="field">
        <div class="label">服务单元：</div>
        <div class="value">{{ data?.serviceName }}</div>
      </div>
      <div class="field" v-if="data?.supplierName">
        <div class="label">供应商：</div>
        <div class="value">{{ data?.supplierName }}</div>
      </div>
      <div class="field" v-if="data?.regionName">
        <div class="label">大区：</div>
        <div class="value">{{ data?.regionName }}</div>
      </div>
      <div class="field" v-if="data?.Influence_degree">
        <div class="label">影响度：</div>
        <div class="value">{{ data?.Influence_degree }}</div>
      </div>
      <div class="field" v-if="data?.reasonName">
        <div class="label">问题原因类型：</div>
        <div class="value">{{ data?.reasonName }}</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 #flow-status="{ col, row }">
        {{ flowStatusFilter(row[col.colKey]) }}
      </template>
      <template #issues-type="{ col, row }">
        {{ issuesTypeFilter(row[col.colKey]) }}
      </template>
      <template #issues-reason="{ col, row }">
        {{ issuesReasonTypeFilter(row[col.colKey]) }}
      </template>
      <template #submit-time="{ col, row }">
        {{ timestampFilter(row[col.colKey]) }}
      </template>
      <template #update-time="{ col, row }">
        {{ timestampFilter(row[col.colKey]) }}
      </template>
    </t-table>
  </my-dialog>
</template>
<script setup name="DegreeDrillDialog">
import { ref, computed, reactive, watch } from 'vue';
import { CUSTOMER_TYPE } from '@/config/constants';
import { dateFormat } from '@/utils/tool';
import useFetchTable from '@/hooks/useFetchTable';
import { degreeDrill } from '@/api/report';
import {
  timestampFilter,
  customerTypeFilter,
  issuesReasonTypeFilter,
  issuesTypeFilter,
  flowStatusFilter,
} from '@/utils/filter';
const tableColumns = [
  { colKey: 'problemNo', title: '质量问题编号', width: 200, fixed: 'left' },
  { colKey: 'crmNo', title: '项目单号', width: 200 },
  { colKey: 'customType', title: '客户类型', cell: 'custom-type', width: 120 },
  { colKey: 'custom', title: '客户名称', width: 140 },
  { colKey: 'sopTypeStr', title: '实施产品' },
  { colKey: 'summary', title: '问题简要' },
  { colKey: 'userNames', title: '责任人', width: 140 },
  { colKey: 'type', title: '问题类型', cell: 'issues-type', width: 120 },
  { colKey: 'reason', title: '问题归因', cell: 'issues-reason', width: 160 },
  { colKey: 'influenceDegree', title: '影响度', width: 100 },
  { colKey: 'submitter', title: '提交人', width: 140 },
  {
    colKey: 'submissionTime',
    title: '提交时间',
    cell: 'submit-time',
    width: 180,
  },
  {
    colKey: 'updateDateTime',
    title: '更新时间',
    cell: 'update-time',
    width: 180,
  },
  { colKey: 'status', title: '流程状态', cell: 'flow-status', width: 120 },
  { colKey: 'taskName', title: '当前节点', minWidth: 160 },
  { colKey: 'pendApproveUsers', title: '当前负责人', width: 140 },
];
const props = defineProps({
  visible: Boolean,
  data: Object,
  title: String,
});
const emit = defineEmits(['close']);

watch(
  () => props.visible,
  (val) => {
    val && search();
  }
);
const transParams = computed(() => {
  let data = props.data || {};
  let params = {};
  for (let key in data) {
    if (!key.endsWith('Name')) {
      params[key] = data[key];
    }
  }
  return params;
});

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