<template>
  <div class="office-sop flex flex-col h-full">
    <!-- <div class="page-action">
      <t-space size="small">
        <t-button
          v-if="perm.BUTTON_Add"
          theme="primary"
          @click="showAddDeviceDialog = true"
        >
          <template #icon><svg-icon name="add-circle" color="#fff" /></template>
          新增</t-button
        >
      </t-space>
    </div> -->
    <SearchForm :fields="fields" :params="params" :search="search">
      <template #service="{ item, params }">
        <select-service-unit v-model="params[item.prop]"></select-service-unit>
      </template>
      <template #location>
        <select-area v-model="params.location" :level="2"></select-area>
      </template>
      <template #address>
        <select-area v-model="params.address" :level="2"></select-area>
      </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="serialNo"
        :columns="columns"
        :data="tableData"
        bordered
        :pagination="{
          defaultCurrent: 1,
          defaultPageSize: 10,
          onChange,
          showJumper: true,
          showPageSize: false,
          total: pagination.total,
        }"
        v-loading="tableLoading"
        :selected-row-keys="selectedRowKeys"
        @select-change="selectChange"
      >
        <template #serialNo="{ col, row }">
          <more-content
            :content="row[col.colKey]"
            @action="handleDetail(row)"
          ></more-content>
        </template>
        <template #inouttime="{ col, row }">
          {{ timestampFilter(row[col.colKey]) }}
        </template>
        <template #status="{ col, row }">
          <!-- {{ runningStatusFilter(row[col.colKey]) }} -->
          <status-tag
            :value="row[col.colKey]"
            type="runningStatus"
          ></status-tag>
        </template>
        <template #usageType="{ col, row }">
          {{ deviceUsageTypeFilter(row[col.colKey]) }}
        </template>
        <template #inOutType="{ col, row }">
          {{ inoutTypeFilter(row[col.colKey]) }}
        </template>
      </t-table>
    </div>

    <AddDeviceDialog
      v-if="perm.BUTTON_Add"
      v-model:visible="showAddDeviceDialog"
      @success="addSuccess"
    ></AddDeviceDialog>
    <!-- RegistrationDetailDialog -->
    <registration-detail-dialog
      v-model:visible="showRegistrationDetailDialog"
      :cur-row="curRow"
    ></registration-detail-dialog>
  </div>
</template>

<script setup name="DeviceOutIn">
import { ref, reactive, computed } from 'vue';
import useFetchTable from '@/hooks/useFetchTable';
import AddDeviceDialog from './add-device-dialog.vue';
import RegistrationDetailDialog from '../../../resource-guard/device-guard/registration-query/registration-detail-dialog.vue';

import { deviceOutInSearch } from '@/api/sop';
import { omit } from 'lodash';
import {
  DEVICE_USAGE_TYPE,
  RUNNING_STATUS,
  INOUT_TYPE,
} from '@/config/constants';
import { dictToOptionList } from '@/utils/tool';
import {
  timestampFilter,
  runningStatusFilter,
  inoutTypeFilter,
  deviceUsageTypeFilter,
} from '@/utils/filter';
import usePermission from '@/hooks/usePermission';
const { perm } = usePermission();

const selectedRowKeys = ref([]);
const selectChange = (value) => {
  selectedRowKeys.value = value;
};
const showAddDeviceDialog = ref(false);
const columns = [
  {
    colKey: 'row-select',
    type: 'multiple',
    width: 50,
    fixed: 'left',
  },
  { colKey: 'serialNo', title: '登记流水号', width: 200 },
  { colKey: 'serviceUnitName', title: '服务单元', width: 120 },
  { colKey: 'usageType', title: '用途类型', width: 120 },
  { colKey: 'deviceNo', title: '设备编号', width: 200 },
  { colKey: 'deviceSerialNo', title: '设备序列号', width: 200 },
  { colKey: 'deviceStatus', title: '运行状态', width: 120, cell: 'status' },
  { colKey: 'inOutTime', title: '出/入库时间', width: 180, cell: 'inouttime' },
  { colKey: 'userName', title: '登记人', width: 140 },
  { colKey: 'customName', title: '客户名称', width: 140 },
  { colKey: 'inOutType', title: '出库/入库', width: 120 },
  { colKey: 'location', title: '当前地', width: 120 },
  { colKey: 'address', title: '发往地', width: 120 },
];
const fields = ref([
  {
    prop: 'serviceUnitId',
    label: '服务单元',
    type: 'select',
    labelWidth: 70,
    colSpan: 6,
    cell: 'service',
  },
  {
    prop: 'usageType',
    label: '用途类型',
    type: 'select',
    labelWidth: 80,
    colSpan: 6,
    options: dictToOptionList(DEVICE_USAGE_TYPE),
    attrs: {
      clearable: true,
    },
  },
  {
    prop: 'userId',
    label: '登记人',
    type: 'select',
    labelWidth: 100,
    colSpan: 6,
    cell: 'user',
  },
  {
    prop: 'deviceStatus',
    label: '运行状态',
    type: 'select',
    labelWidth: 80,
    colSpan: 6,
    options: dictToOptionList(RUNNING_STATUS),
    attrs: {
      clearable: true,
    },
  },
  {
    prop: 'deviceNo',
    label: '设备编号',
    labelWidth: 70,
    colSpan: 6,
  },
  {
    prop: 'customName',
    label: '客户名称',
    labelWidth: 80,
    colSpan: 6,
  },
  {
    prop: 'time',
    label: '出/入库时间',
    type: 'daterange',
    labelWidth: 100,
    colSpan: 12,
    attrs: {
      clearable: true,
      valueType: 'time-stamp',
    },
  },
  {
    prop: 'deviceSerialNo',
    label: '设备序列号',
    labelWidth: 70,
    colSpan: 6,
  },
  {
    type: 'buttons',
    colSpan: 2,
    children: [
      {
        type: 'button',
        text: '搜索',
        onClick: () => {
          search();
        },
      },
    ],
  },
  {
    prop: 'location',
    label: '当前地',
    labelWidth: 70,
    colSpan: 6,
    cell: 'location',
  },
  {
    prop: 'address',
    label: '发往地',
    labelWidth: 70,
    colSpan: 6,
    cell: 'address',
  },
  {
    prop: 'inOutType',
    label: '出入库状态',
    type: 'select',
    options: dictToOptionList(INOUT_TYPE),
    labelWidth: 84,
    colSpan: 6,
    attrs: {
      clearable: true,
    },
  },
]);
const params = reactive({
  serviceUnitId: '',
  usageType: '',
  userId: '',
  deviceStatus: '',
  time: [],
  deviceNo: '',
  deviceSerialNo: '',
  customName: '',
  location: '',
  address: '',
  inOutType: '',
});
const transParams = computed(() => {
  return {
    ...omit(params, ['time']),
    inOutTimeStart: params.time[0],
    inOutTimeEnd: params.time[1],
  };
});
const {
  loading: tableLoading,
  pagination,
  tableData,
  search,
  onChange,
} = useFetchTable(deviceOutInSearch, {
  params: transParams,
  fetchDataHandle: () => {
    selectedRowKeys.value = [];
  },
});
const addSuccess = () => {
  showAddDeviceDialog.value = false;
  search();
};
const showRegistrationDetailDialog = ref(false);
const curRow = ref(null);
const handleDetail = (row) => {
  curRow.value = row;
  showRegistrationDetailDialog.value = true;
};
</script>
