<template>
  <div class="issues-feedback flex flex-col h-full">
    <SearchForm :fields="fields" :params="params" :search="search">
      <template #service="{ item, params }">
        <select-service-unit v-model="params[item.prop]"></select-service-unit>
      </template>
      <template #user="{ item, params }">
        <select-url-user
          v-model="params[item.prop]"
          url="/api/admin/tb/quality/problem/apply/user/list"
          clearable
        ></select-url-user>
      </template>
    </SearchForm>
    <div class="flex-1 page-wrap">
      <t-table
        size="small"
        row-key="id"
        :columns="columns"
        :data="tableData"
        bordered
        :pagination="{
          defaultCurrent: 1,
          defaultPageSize: 10,
          onChange,
          showJumper: true,
          showPageSize: false,
          total: pagination.total,
          current: pagination.pageNumber,
        }"
      >
        <template #custom-type="{ col, row }">
          {{ customerTypeFilter(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 #create-time="{ col, row }">
          {{ timestampFilter(row[col.colKey]) }}
        </template>
      </t-table>
    </div>
  </div>
</template>

<script setup name="IssuesQuery">
import { computed, reactive, ref } from 'vue';
import { omit } from 'lodash';

import { issuesFeedbackListApi } from '@/api/project-quality';
import useFetchTable from '@/hooks/useFetchTable';
import { dictToOptionList } from '@/utils/tool';
import {
  timestampFilter,
  customerTypeFilter,
  issuesReasonTypeFilter,
  issuesTypeFilter,
} from '@/utils/filter';
import {
  ISSUES_INFLUENCE_DEGREE,
  ISSUES_REASON_TYPE,
  ISSUES_TYPE,
} from '@/config/constants';

const fields = ref([
  {
    prop: 'serviceId',
    label: '服务单元',
    type: 'select',
    labelWidth: 100,
    colSpan: 5,
    cell: 'service',
  },
  {
    prop: 'userId',
    label: '责任人',
    type: 'select',
    labelWidth: 100,
    colSpan: 5,
    cell: 'user',
  },
  {
    prop: 'type',
    label: '问题类型',
    type: 'select',
    labelWidth: 100,
    colSpan: 5,
    options: dictToOptionList(ISSUES_TYPE),
    attrs: {
      clearable: true,
    },
  },
  {
    prop: 'reason',
    label: '问题归因',
    type: 'select',
    labelWidth: 100,
    colSpan: 5,
    options: dictToOptionList(ISSUES_REASON_TYPE),
    attrs: {
      clearable: true,
    },
  },
  {
    type: 'buttons',
    colSpan: 3,
    children: [
      {
        type: 'button',
        text: '搜索',
        onClick: () => {
          search();
        },
      },
    ],
  },
  {
    prop: 'degree',
    label: '影响度',
    type: 'select',
    labelWidth: 100,
    colSpan: 5,
    options: ISSUES_INFLUENCE_DEGREE.map((item) => {
      return {
        label: item,
        value: item,
      };
    }),
    attrs: {
      clearable: true,
    },
  },
  {
    prop: 'custom',
    label: '客户名称',
    labelWidth: 100,
    colSpan: 5,
    attrs: {
      clearable: true,
    },
  },
  {
    prop: 'problemNo',
    label: '质量问题编号',
    labelWidth: 100,
    colSpan: 5,
    attrs: {
      clearable: true,
    },
  },
  {
    prop: 'submitTime',
    label: '提交时间',
    type: 'daterange',
    labelWidth: 100,
    colSpan: 10,
    attrs: {
      clearable: true,
      valueType: 'time-stamp',
    },
  },
]);
const params = reactive({
  serviceId: '',
  userId: '',
  type: '',
  reason: '',
  degree: '',
  custom: '',
  problemNo: '',
  submitTime: [],
});
const computedParams = computed(() => {
  let data = omit(params, ['submitTime']);
  data.startTime = params.submitTime[0];
  data.endTime = params.submitTime[1];
  return data;
});

const columns = [
  { colKey: 'problemNo', title: '质量问题编号' },
  { colKey: 'crmNo', title: '项目单号' },
  { colKey: 'customType', title: '客户类型', cell: 'custom-type', width: 100 },
  { colKey: 'custom', title: '客户名称' },
  // { colKey: 'sopType', title: '实施产品' },
  { colKey: 'sopTypeStr', title: '实施产品' },
  { colKey: 'summary', title: '问题简要' },
  { colKey: 'userName', title: '责任人' },
  { colKey: 'type', title: '问题类型', cell: 'issues-type', width: 120 },
  { colKey: 'reason', title: '问题归因', cell: 'issues-reason', width: 120 },
  { colKey: 'influenceDegree', title: '影响度', width: 70 },
  { colKey: 'createName', title: '提交人' },
  { colKey: 'createTime', title: '提交时间', cell: 'create-time', width: 170 },
];

const { pagination, tableData, search, onChange } = useFetchTable(
  issuesFeedbackListApi,
  {
    params: computedParams,
  }
);
</script>
