<template>
  <my-drawer
    :visible="visible"
    size="80%"
    header="登记详情"
    attach="body"
    :close-btn="true"
    @close="emit('update:visible', false)"
  >
    <t-form ref="formRef" labelWidth="130px" colon>
      <t-row :gutter="[0, 0]">
        <t-col :span="6">
          <t-form-item label="登记流水号">
            <span>{{ curRow.serialNo }}</span>
          </t-form-item>
        </t-col>
        <t-col :span="6">
          <t-form-item label="设备出入库选择">
            <span>{{ inoutTypeFilter(curRow.inOutType) }}</span>
          </t-form-item>
        </t-col>
        <t-col :span="6">
          <t-form-item label="用途类型">
            <span>{{ deviceUsageTypeFilter(curRow.usageType) }}</span>
          </t-form-item>
        </t-col>
        <t-col :span="6">
          <t-form-item label="设备出入库时间">
            <span>{{ timestampFilter(curRow.inOutTime) }}</span>
          </t-form-item>
        </t-col>
        <t-col :span="12">
          <t-form-item label="设备出入库登记">
            <t-table
              size="small"
              row-key="id"
              :columns="columns"
              :data="[curRow]"
              bordered
            >
              <template #deviceStatus="{ row }">
                <status-tag
                  :value="row.deviceStatus"
                  type="runningStatus"
                ></status-tag>
              </template>
              <template #basePhotoPath="{ col, row }">
                <!-- <t-image
                  v-if="row.basePhotoPath"
                  :src="row.basePhotoPath"
                  :style="{ width: '80px', height: '80px' }"
                /> -->
                <image-view
                  v-if="row.basePhotoPath"
                  :width="80"
                  :height="80"
                  :images="[row.basePhotoPath]"
                ></image-view>
              </template>
            </t-table>
          </t-form-item>
        </t-col>
      </t-row>
    </t-form>
    <template #foot>
      <t-button theme="primary" @click="emit('update:visible', false)"
        >返回</t-button
      >
    </template>
  </my-drawer>
</template>

<script setup name="RegistrationDetailDialog">
import {
  deviceUsageTypeFilter,
  inoutTypeFilter,
  timestampFilter,
} from '@/utils/filter';

const emit = defineEmits(['update:visible']);
const props = defineProps({
  visible: Boolean,
  curRow: Object,
});

const columns = [
  { colKey: 'deviceNo', title: '设备编号', width: 120 },
  { colKey: 'deviceModel', title: '型号', width: 120 },
  { colKey: 'supplierName', title: '供应商', width: 200 },
  { colKey: 'deviceStatus', title: '运行状态', width: 80 },
  { colKey: 'scanCount', title: '总扫描量', width: 80 },
  { colKey: 'location', title: '当前所在地' },
  { colKey: 'address', title: '发往地' },
  { colKey: 'basePhotoPath', title: '快递单拍照', width: 100 },
];
</script>
