<template>
  <div class="registration-query 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-filter-user
          v-model="params[item.prop]"
          clearable
        ></select-filter-user> -->
        <select-filter-user-djr
          v-model="params[item.prop]"
          clearable
        ></select-filter-user-djr>
      </template>
    </SearchForm>
    <div class="flex-1 page-wrap">
      <t-table
        size="small"
        row-key="id"
        :columns="columns"
        :data="tableData"
        bordered
        v-loading="loading"
        :pagination="{
          defaultCurrent: 1,
          defaultPageSize: 10,
          onChange,
          showJumper: true,
          showPageSize: false,
          total: pagination.total,
          current: pagination.pageNumber,
        }"
      >
        <template #usage="{ col, row }">
          {{ deviceUsageTypeFilter(row[col.colKey]) }}
        </template>
        <template #status="{ col, row }">
          {{ runningStatusFilter(row[col.colKey]) }}
        </template>
        <template #inout="{ col, row }">
          {{ inoutTypeFilter(row[col.colKey]) }}
        </template>
        <template #inout-time="{ col, row }">
          {{ timestampFilter(row[col.colKey]) }}
        </template>
        <template #detail="{ col, row }">
          <more-content
            :content="row[col.colKey]"
            @action="handleDetail(row)"
          ></more-content>
        </template>
      </t-table>
    </div>

    <!-- RegistrationDetailDialog -->
    <registration-detail-dialog
      v-model:visible="showRegistrationDetailDialog"
      :cur-row="curRow"
    ></registration-detail-dialog>
  </div>
</template>

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

import { registrationQueryListApi } from '@/api/resource-guard';
import useFetchTable from '@/hooks/useFetchTable';
import { dictToOptionList } from '@/utils/tool';
import {
  DEVICE_USAGE_TYPE,
  RUNNING_STATUS,
  INOUT_TYPE,
} from '@/config/constants';
import {
  deviceUsageTypeFilter,
  inoutTypeFilter,
  runningStatusFilter,
  timestampFilter,
} from '@/utils/filter';
import RegistrationDetailDialog from './registration-detail-dialog.vue';

const showRegistrationDetailDialog = ref(false);
const curRow = ref(null);

const fields = ref([
  {
    prop: 'serviceUnitId',
    label: '服务单元',
    type: 'select',
    labelWidth: 90,
    colSpan: 6,
    cell: 'service',
  },
  {
    prop: 'usageType',
    label: '用途类型',
    type: 'select',
    labelWidth: 80,
    colSpan: 6,
    options: dictToOptionList(DEVICE_USAGE_TYPE),
    attrs: {
      clearable: true,
    },
  },
  {
    prop: 'userId',
    label: '登记人',
    labelWidth: 90,
    colSpan: 6,
    cell: 'user',
  },
  {
    prop: 'deviceStatus',
    type: 'select',
    label: '运行状态',
    labelWidth: 80,
    colSpan: 6,
    options: dictToOptionList(RUNNING_STATUS),
    attrs: {
      clearable: true,
    },
  },
  {
    type: 'buttons',
    colSpan: 2,
    children: [
      {
        type: 'button',
        text: '搜索',
        onClick: () => {
          search();
        },
      },
    ],
  },
  {
    prop: 'inOutTime',
    label: '出/入库时间',
    type: 'daterange',
    labelWidth: 90,
    colSpan: 12,
    attrs: {
      clearable: true,
      valueType: 'time-stamp',
    },
  },
  {
    prop: 'deviceNo',
    label: '设备编号',
    labelWidth: 90,
    colSpan: 6,
    attrs: {
      clearable: true,
    },
  },
  {
    prop: 'deviceSerialNo',
    label: '设备序列号',
    labelWidth: 90,
    colSpan: 6,
    attrs: {
      clearable: true,
    },
  },
  {
    prop: 'customName',
    label: '客户名称',
    labelWidth: 80,
    colSpan: 6,
    attrs: {
      clearable: true,
    },
  },
  {
    prop: 'location',
    label: '当前地',
    labelWidth: 90,
    colSpan: 6,
    attrs: {
      clearable: true,
    },
  },
  {
    prop: 'address',
    label: '发往地',
    labelWidth: 80,
    colSpan: 6,
    attrs: {
      clearable: true,
    },
  },
  {
    prop: 'serialNo',
    label: '登记流水号',
    labelWidth: 90,
    colSpan: 6,
    attrs: {
      clearable: true,
    },
  },
  {
    prop: 'inOutType',
    label: '出入库状态',
    type: 'select',
    options: dictToOptionList(INOUT_TYPE),
    labelWidth: 84,
    colSpan: 6,
    attrs: {
      clearable: true,
    },
  },
]);
const params = reactive({
  serviceUnitId: '',
  usageType: '',
  userId: '',
  deviceStatus: '',
  deviceNo: '',
  deviceSerialNo: '',
  inOutTime: [],
  customName: '',
  location: '',
  address: '',
  serialNo: '',
  inOutType: '',
});

const computedParams = computed(() => {
  let data = omit(params, ['inOutTime']);
  data.inOutTimeStart = params.inOutTime[0];
  data.inOutTimeEnd = params.inOutTime[1];
  return data;
});

const columns = [
  { colKey: 'serialNo', title: '登记流水号', width: 200, cell: 'detail' },
  { colKey: 'serviceUnitName', title: '服务单元名称', width: 160 },
  { colKey: 'usageType', title: '用途类型', width: 100, cell: 'usage' },
  { colKey: 'deviceNo', title: '设备编号', width: 120 },
  { colKey: 'deviceSerialNo', title: '设备序列号', width: 120 },
  { colKey: 'deviceStatus', title: '运行状态', width: 100, cell: 'status' },
  {
    colKey: 'inOutTime',
    title: '出/入库时间',
    cell: 'inout-time',
    width: 180,
  },
  { colKey: 'userName', title: '登记人' },
  { colKey: 'customName', title: '客户名称' },
  { colKey: 'inOutType', title: '出库/入库', width: 100, cell: 'inout' },
  { colKey: 'location', title: '当前地' },
  { colKey: 'address', title: '发往地' },
];
const { pagination, tableData, search, onChange, loading } = useFetchTable(
  registrationQueryListApi,
  {
    params: computedParams,
  }
);

const handleDetail = (row) => {
  curRow.value = row;
  showRegistrationDetailDialog.value = true;
};
</script>
