<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';

// @ts-ignore
import { Page } from '@vben/common-ui';

import { ElCard, ElDescriptions, ElDescriptionsItem } from 'element-plus';

// @ts-ignore
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import {
  getFilterDetail,
  getFilterLogs,
  // @ts-ignore
} from '#/api/oilstation/filter/filter.ts';

// @ts-ignore

// 模拟过滤器详情数据
const filterInfo: any = ref({});

// 模拟操作记录数据
const operationRecords = ref([]);

const route = useRoute();
const filterId = ref(Number(route.params.id));

// 表格列配置
const tableColumns: any = [
  {
    field: 'operatedAt',
    title: '操作时间',
    width: 200,
  },
  {
    field: 'maintenanceType',
    title: '维护类型',
    // width: 100,
  },
  {
    field: 'flowRateBefore',
    title: '更换前流速(L/min)',
    // width: 150,
  },
  {
    field: 'flowRateAfter',
    title: '更换后流速(L/min)',
    // width: 150,
  },
  {
    field: 'nextReplacementDate',
    title: '下次更换日期',
    // width: 150,
  },
  {
    field: 'operatorName',
    title: '操作员',
  },
];

// 初始化表格配置
const gridOptions: any = {
  size: 'medium',
  toolbarConfig: {
    custom: false,
    refresh: false,
    zoom: false,
  },
  pagerConfig: {
    enabled: false,
  },
  proxyConfig: {
    ajax: {
      query: async () => {
        return {
          items: operationRecords.value || [],
        };
      },
    },
  },
  columns: tableColumns,
};

// 使用BasicTable组件
const [BasicTable] = useVbenVxeGrid({
  gridOptions,
});

// 初始化数据
const init = async () => {
  // 这里应该调用API获取过滤器详情数据
  // 暂时使用模拟数据
  // console.log('获取过滤器详情:', filterId.value);
  const res: any = await getFilterDetail(filterId.value);
  filterInfo.value = res || {};

  // 获取操作记录
  const logRes: any = await getFilterLogs({ filterId: filterId.value });
  operationRecords.value = logRes.rows || [];
};

onMounted(async () => {
  await init();
});
</script>

<template>
  <Page title="过滤器详情" :auto-content-height="true">
    <div class="boxdev">
      <div class="min-w-0 flex-1">
        <!-- 基础信息卡片 -->
        <ElCard>
          <template #header>
            <div class="flex items-center gap-4">
              <div
                style="width: 4px; height: 12px; background-color: #215acd"
              ></div>
              <span
                class="text-lg font-bold text-gray-800"
                style="font-size: 14px; font-weight: 600"
              >
                基本信息
              </span>
            </div>
          </template>
          <ElDescriptions class="filter-info" :column="4">
            <ElDescriptionsItem label="场站:">
              {{ filterInfo.stationName || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="过滤器编号:">
              {{ filterInfo.filterNumber || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="过滤器型号:">
              {{ filterInfo.filterModel || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="油机型号:">
              {{ filterInfo.oilMachineModel || '-' }}
            </ElDescriptionsItem>

            <ElDescriptionsItem label="关联油枪:">
              {{ filterInfo.relatedGuns || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="关联油品:">
              {{ filterInfo.relatedOilTypes || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="维护类型:">
              {{ filterInfo.maintenanceType || '-' }}
            </ElDescriptionsItem>
          </ElDescriptions>
        </ElCard>
        <!-- 操作记录表格 -->
        <ElCard class="mt-4">
          <template #header>
            <div class="flex items-center gap-4">
              <div
                style="width: 4px; height: 12px; background-color: #215acd"
              ></div>
              <span
                class="text-lg font-bold text-gray-800"
                style="font-size: 14px; font-weight: 600"
              >
                操作记录
              </span>
            </div>
          </template>
          <BasicTable table-title="" class="w-full" />
        </ElCard>
      </div>
    </div>
  </Page>
</template>

<style scoped lang="scss">
.boxdev {
  display: flex;
  gap: 20px;
}

.boxdev :deep(.el-card) {
  border: none !important;
  box-shadow: none !important;
}

.boxdev :deep(.el-card__header) {
  padding-top: 18px !important;
  padding-bottom: 4px !important;
  padding-left: 0px !important;
  border-bottom: none !important;
}

.boxdev :deep(.el-card__body) {
  padding-top: 16px !important;
}

::v-deep .el-descriptions__body {
  background: #ffffff00 !important;
}

.boxdev > div:nth-child(1) {
  flex: 1;
  min-width: 0;
}

.filter-info {
  :deep(.el-descriptions__label) {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-color-secondary);
  }

  :deep(.el-descriptions__content) {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color-primary);
  }

  :deep(.el-descriptions__table) {
    background: transparent !important;
  }
}

.mt-4 {
  margin-top: 16px;
}

.boxdev :deep(.el-table) {
  margin-top: 12px;
}

.boxdev :deep(.el-table__header-wrapper) {
  background-color: #f5f7fa;
}

.boxdev :deep(.el-table th) {
  font-weight: 600;
  color: var(--text-color-primary);
}
</style>
