<template>
  <div class="dms-machine-ledger">
    <!-- 工厂背景装饰 -->
    <div class="factory-bg-decoration">
      <svg viewBox="0 0 1200 120" preserveAspectRatio="none">
        <path d="M0,0 L0,60 L50,60 L50,30 L100,30 L100,50 L150,50 L150,20 L200,20 L200,60 L1200,60 L1200,0 Z"
              fill="url(#factory-gradient)" opacity="0.1"/>
        <defs>
          <linearGradient id="factory-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:#409EFF;stop-opacity:1" />
            <stop offset="100%" style="stop-color:#667eea;stop-opacity:1" />
          </linearGradient>
        </defs>
      </svg>
    </div>

    <!-- 顶部信息面板 -->
    <div class="top-info-panel">
      <div class="panel-left">
        <h1 class="page-title">
          <i class="el-icon-monitor"></i>
          设备台账管理
        </h1>
        <p class="page-subtitle">设备全生命周期管理与履历追踪</p>
      </div>
      <div class="panel-right">
        <div class="current-time">
          <i class="el-icon-time"></i>
          {{ currentTime }}
        </div>
      </div>
    </div>

    <!-- 功能操作区 -->
    <div class="action-toolbar">
      <div class="toolbar-left">
        <el-button-group>
          <el-button :type="viewMode === 'grid' ? 'primary' : 'default'" @click="viewMode = 'grid'">
            <i class="el-icon-grid"></i>
            网格视图
          </el-button>
          <el-button :type="viewMode === 'list' ? 'primary' : 'default'" @click="viewMode = 'list'">
            <i class="el-icon-menu"></i>
            列表视图
          </el-button>
        </el-button-group>
      </div>
      <div class="toolbar-right">
<!--        <el-button type="primary" icon="el-icon-plus" @click="handleAdd" v-hasPermi="['dms:dmsBaseMachineInfo:add']">
          新增设备
        </el-button>
        <el-button type="success" icon="el-icon-edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['dms:dmsBaseMachineInfo:edit']">
          修改设备
        </el-button>
        <el-button type="danger" icon="el-icon-delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['dms:dmsBaseMachineInfo:remove']">
          删除设备
        </el-button>-->
        <el-button text @click="showSearch = !showSearch">
          <i class="el-icon-filter"></i>
          {{ showSearch ? '隐藏' : '显示' }}筛选
        </el-button>
      </div>
    </div>

    <!-- 查询过滤器 -->
    <el-card class="search-filter-card" v-show="showSearch">
      <div slot="header" class="filter-header">
        <div class="filter-title">
          <i class="el-icon-filter"></i>
          筛选条件
        </div>
        <el-button text @click="showSearch = false">
          <i class="el-icon-arrow-up"></i>
        </el-button>
      </div>
      <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="80px">
        <el-form-item label="设备编号" prop="deviceCode">
          <el-input v-model="queryParams.deviceCode" placeholder="请输入设备编号" clearable />
        </el-form-item>
        <el-form-item label="设备名称" prop="deviceName">
          <el-input v-model="queryParams.deviceName" placeholder="请输入设备名称" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 主内容区 -->
    <div class="main-content">
      <!-- 网格视图 -->
      <div v-if="viewMode === 'grid'" class="grid-view" v-loading="loading">
        <transition-group name="fade-transform" tag="div" class="machine-grid">
          <div v-for="machine in machineList" :key="machine.objId" class="machine-card-wrapper" @click="selectMachine(machine)">
            <div :class="['machine-card', { selected: selectedMachine && selectedMachine.objId === machine.objId }]">
              <div :class="['status-indicator', `status-${machine.deviceStatus}`]">
                <span class="status-dot"></span>
              </div>
              <div class="machine-visual">
                <div class="machine-icon-bg">
                  <i class="el-icon-monitor" style="font-size: 40px;"></i>
                </div>
                <div class="machine-number">{{ machine.deviceCode }}</div>
              </div>
              <div class="machine-details">
                <h3 class="machine-name">{{ machine.deviceName }}</h3>
                <div class="machine-meta">
                  <div class="meta-item">
                    <i class="el-icon-location"></i>
                    <span>{{ machine.productLineName || '-' }}</span>
                  </div>
                  <div class="meta-item">
                    <i class="el-icon-document"></i>
                    <span>{{ getDeviceTypeName(machine.deviceType) }}</span>
                  </div>
                  <div class="meta-item">
                    <i class="el-icon-time"></i>
                    <span>建立 {{ calculateRunDays(machine.createdTime) }} 天</span>
                  </div>
                </div>
              </div>
              <div class="quick-actions">
                <!-- <el-button size="small" @click.stop="handleUpdate(machine)" v-hasPermi="['dms:dmsBaseMachineInfo:edit']">编辑</el-button> -->
                <el-button size="small" @click.stop="viewLifecycle(machine)">生命周期</el-button>
                <el-button size="small" @click.stop="viewDetails(machine)">详情</el-button>
              </div>
            </div>
          </div>
        </transition-group>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
      </div>

      <!-- 列表视图 -->
      <div v-else-if="viewMode === 'list'" class="list-view">
        <el-table v-loading="loading" :data="machineList" :row-class-name="tableRowClassName" @selection-change="handleSelectionChange" style="width: 100%">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="设备编号" align="center" prop="deviceCode" min-width="120" />
          <el-table-column label="设备名称" align="center" prop="deviceName" min-width="150" />
          <el-table-column label="设备类型" align="center" prop="deviceTypeName" min-width="120" />
          <el-table-column label="所属产线" align="center" prop="productLineName" min-width="130" />
          <el-table-column label="设备状态" align="center" prop="deviceStatus" width="120">
            <template slot-scope="scope">
              <dict-tag :options="machine_status" :value="String(scope.row.deviceStatus)" />
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" prop="createdTime" min-width="160">
            <template slot-scope="scope">
              <span>{{ formatDate(scope.row.createdTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="320" fixed="right">
            <template slot-scope="scope">
              <!-- <el-button type="primary" size="small" @click="handleUpdate(scope.row)" v-hasPermi="['dms:dmsBaseMachineInfo:edit']">编辑</el-button> -->
              <el-button size="small" @click="viewLifecycle(scope.row)">生命周期</el-button>
              <el-button size="small" @click="viewDetails(scope.row)">详情</el-button>
              <el-button type="danger" size="small" @click="handleDelete(scope.row)" v-hasPermi="['dms:dmsBaseMachineInfo:remove']">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
      </div>
    </div>

    <!-- 添加或修改设备信息对话框 -->
    <el-dialog :title="dialog.title" :visible.sync="dialog.visible" width="900px" append-to-body>
      <el-form ref="machineFormRef" :model="form" :rules="rules" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="设备编号" prop="deviceCode">
              <el-input v-model="form.deviceCode" placeholder="请输入设备编号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备名称" prop="deviceName">
              <el-input v-model="form.deviceName" placeholder="请输入设备名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="设备类型" prop="deviceType">
              <el-select v-model="form.deviceType" placeholder="请选择设备类型" style="width: 100%;">
                <el-option v-for="item in deviceTypes" :key="item.deviceTypeId" :label="item.deviceTypeName" :value="String(item.deviceTypeId)" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备型号" prop="deviceModel">
              <el-input v-model="form.deviceModel" placeholder="请输入设备型号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="供应商" prop="supplierId">
              <el-select v-model="form.supplierId" placeholder="请选择供应商" style="width: 100%;">
                <el-option v-for="item in supplierInfoList" :key="item.supplierId" :label="item.supplierName" :value="String(item.supplierId)" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备状态" prop="deviceStatus">
              <el-select v-model="form.deviceStatus" placeholder="请选择设备状态" style="width: 100%;">
                <el-option v-for="dict in machine_status" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </span>
    </el-dialog>

    <!-- 生命周期抽屉 -->
    <el-drawer :visible.sync="lifecycleDrawer" :title="`设备生命周期 - ${selectedMachine ? selectedMachine.deviceName : ''}`" size="60%" class="lifecycle-drawer">
      <div class="lifecycle-container" v-loading="lifecycleLoading">
        <!-- 设备概览卡片 -->
        <div class="device-overview-card" v-if="selectedMachine">
          <div class="overview-header">
            <div class="device-avatar">
              <i class="el-icon-monitor" style="font-size: 40px;"></i>
            </div>
            <div class="device-basic">
              <h2>{{ selectedMachine.deviceName }}</h2>
              <p>编号：{{ selectedMachine.deviceCode }} | 产线：{{ selectedMachine.productLineName || '-' }}</p>
            </div>
          </div>
          <el-divider />
          <div class="overview-stats">
            <div class="stat">
              <span class="stat-label">建立天数</span>
              <span class="stat-value">{{ calculateRunDays(selectedMachine.createdTime) }}</span>
            </div>
          </div>
        </div>

        <!-- 生命周期类型选择 -->
        <div class="lifecycle-type-selector">
          <h3>选择查看的生命周期类型</h3>
          <div class="type-cards">
            <div v-for="type in lifecycleTypes" :key="type.value"
                 :class="['type-card', { active: selectedLifecycleTypes.indexOf(type.value) > -1 }]"
                 @click="toggleLifecycleType(type.value)">
              <div class="type-icon" :style="{ background: type.gradient }">
                <i :class="type.iconClass" style="font-size: 24px;"></i>
              </div>
              <span class="type-name">{{ type.label }}</span>
              <span v-if="type.count > 0" class="type-count">{{ type.count }}</span>
            </div>
          </div>
        </div>

        <!-- 生命周期时间轴 -->
        <div class="lifecycle-timeline-container" v-if="lifecycleEvents.length > 0">
          <h3>设备履历时间轴</h3>
          <div class="timeline-wrapper">
            <div v-for="event in lifecycleEvents" :key="event.id" class="timeline-item">
              <div class="timeline-marker" :style="{ backgroundColor: event.color }">
                <i :class="event.iconClass" style="font-size: 20px; color: #fff;"></i>
              </div>
              <div class="timeline-content">
                <div class="event-header">
                  <h4>{{ event.title }}</h4>
                  <span class="event-time">{{ formatDateTime(event.time) }}</span>
                </div>
                <p class="event-description">{{ event.description }}</p>
                <div class="event-tags">
                  <el-tag v-for="tag in event.tags" :key="tag" size="small">{{ tag }}</el-tag>
                </div>
              </div>
              <div class="timeline-line"></div>
            </div>
          </div>
        </div>

        <!-- 空状态 -->
        <el-empty v-else-if="selectedLifecycleTypes.length > 0" description="暂无相关生命周期数据" />
      </div>
    </el-drawer>

    <!-- 设备详情对话框 -->
    <el-dialog :visible.sync="detailDialog" :title="`设备详情 - ${selectedMachine ? selectedMachine.deviceName : ''}`" width="80%" top="5vh">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="基本信息" name="basic">
          <div class="detail-section">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-card>
                  <div slot="header" class="card-header-title">
                    <span>设备基础信息</span>
                  </div>
                  <el-descriptions :column="1" border>
                    <el-descriptions-item label="设备编号">{{ selectedMachine ? selectedMachine.deviceCode : '' }}</el-descriptions-item>
                    <el-descriptions-item label="设备名称">{{ selectedMachine ? selectedMachine.deviceName : '' }}</el-descriptions-item>
                    <el-descriptions-item label="设备类型">{{ selectedMachine ? selectedMachine.deviceTypeName : '' }}</el-descriptions-item>
                    <el-descriptions-item label="所属产线">{{ selectedMachine ? (selectedMachine.productLineName || '-') : '' }}</el-descriptions-item>
                    <el-descriptions-item label="设备状态">
                      <dict-tag :options="machine_status" :value="String(selectedMachine ? (selectedMachine.deviceStatus || '') : '')" />
                    </el-descriptions-item>
                    <el-descriptions-item label="创建时间">{{ selectedMachine ? formatDateTime(selectedMachine.createdTime) : '' }}</el-descriptions-item>
                  </el-descriptions>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import { listDeviceLedger } from '@/api/base/deviceLedger';
import { listAllDmsBillsMaintInstance } from '@/api/dms/dmsBillsMaintInstance';
import { listAllDmsRecordInspect } from '@/api/dms/dmsRecordInspect';
import { listAllShutDown } from '@/api/dms/shutDown';
import { listAllDmsBillsFaultInstance } from '@/api/dms/dmsBillsFaultInstance';
import { listAllRepairRecord } from '@/api/dms/repairRecord';
import pagination from '@/components/Pagination';

export default {
  name: 'ProdBaseMachineInfo',
  components: {
    pagination
  },
  data() {
    return {
      loading: false,
      buttonLoading: false,
      showSearch: true,
      machineList: [],
      total: 0,
      viewMode: 'grid',
      selectedMachine: null,
      detailDialog: false,
      activeTab: 'basic',
      currentTime: '',
      timer: null,
      deviceTypes: [],
      supplierInfoList: [],
      ids: [],
      single: true,
      multiple: true,
      // 生命周期相关
      lifecycleDrawer: false,
      lifecycleLoading: false,
      selectedLifecycleTypes: [],
      lifecycleEvents: [],
      lifecycleRequestId: 0,
      lifecycleTypes: [
        { label: '保养', value: 'maintenance', iconClass: 'el-icon-setting', gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', count: 0 },
        { label: '点检', value: 'inspection', iconClass: 'el-icon-view', gradient: 'linear-gradient(135deg, #30cfd0 0%, #330867 100%)', count: 0 },
        { label: '停机', value: 'downtime', iconClass: 'el-icon-warning-outline', gradient: 'linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%)', count: 0 },
        { label: '故障', value: 'fault', iconClass: 'el-icon-circle-close', gradient: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)', count: 0 },
        { label: '维修', value: 'repair', iconClass: 'el-icon-tools', gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', count: 0 }
      ],
      technicalParams: [],
      dialog: {
        visible: false,
        title: ''
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        deviceCode: undefined,
        deviceName: undefined
      },
      form: {
        objId: undefined,
        deviceCode: undefined,
        deviceName: undefined,
        deviceType: undefined,
        deviceModel: undefined,
        supplierId: undefined,
        deviceStatus: '1',
        remark: undefined
      },
      rules: {
        deviceCode: [
          { required: true, message: '设备编号不能为空', trigger: 'blur' }
        ],
        deviceName: [
          { required: true, message: '设备名称不能为空', trigger: 'blur' }
        ],
        deviceStatus: [
          { required: true, message: '设备状态不能为空', trigger: 'change' }
        ]
      },
      machine_status: [
        { label: '正常', value: '1' },
        { label: '维修中', value: '2' },
        { label: '停用', value: '0' }
      ]
    };
  },
  watch: {
    selectedLifecycleTypes: {
      handler(newTypes) {
        if (newTypes.length > 0 && this.selectedMachine) {
          this.loadLifecycleData();
        } else {
          this.lifecycleRequestId++;
          this.lifecycleEvents = [];
          this.lifecycleLoading = false;
        }
      },
      deep: true
    },
    selectedMachine(newMachine) {
      if (newMachine) {
        this.selectedLifecycleTypes = [];
        this.lifecycleEvents = [];
        this.loadLifecycleTypes();
      }
    }
  },
  mounted() {
    this.getList();
    this.getDeviceTypes();
    this.getSupplierInfoList();
    this.updateCurrentTime();
    this.timer = setInterval(this.updateCurrentTime, 1000);
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    updateCurrentTime() {
      const now = new Date();
      this.currentTime = now.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false
      });
    },
    async getList() {
      this.loading = true;
      try {
        const res = await listDeviceLedger(this.queryParams);
        this.machineList = res.rows || [];
        this.total = res.total || 0;
      } catch (error) {
        console.error('获取设备列表失败:', error);
        this.$modal.msgError('获取设备列表失败');
        this.machineList = [];
        this.total = 0;
      } finally {
        this.loading = false;
      }
    },
    async getDeviceTypes() {
      try {
        // 使用假数据
        this.deviceTypes = [
          { deviceTypeId: '1', deviceTypeName: '数控机床' },
          { deviceTypeId: '2', deviceTypeName: '冲床' },
          { deviceTypeId: '3', deviceTypeName: '焊接机' },
          { deviceTypeId: '4', deviceTypeName: '其他' }
        ];
      } catch (error) {
        console.error('获取设备类型失败:', error);
      }
    },
    async getSupplierInfoList() {
      try {
        // 使用假数据
        this.supplierInfoList = [
          { supplierId: '1', supplierName: '供应商A' },
          { supplierId: '2', supplierName: '供应商B' },
          { supplierId: '3', supplierName: '供应商C' }
        ];
      } catch (error) {
        console.error('获取供应商列表失败:', error);
      }
    },
    getDeviceTypeName(typeId) {
      const type = this.deviceTypes.find(t => String(t.deviceTypeId) === String(typeId));
      return type ? type.deviceTypeName : '-';
    },
    tableRowClassName({ row }) {
      if (row.deviceStatus === '0') return 'danger-row';
      if (row.deviceStatus === '2') return 'warning-row';
      return '';
    },
    formatDate(date) {
      if (!date) return null;
      return this.parseTime(date, '{y}-{m}-{d}');
    },
    formatDateTime(date) {
      if (!date) return null;
      return this.parseTime(date, '{y}-{m}-{d} {h}:{i}');
    },
    calculateRunDays(startDate) {
      if (!startDate) return 0;
      const start = new Date(startDate);
      const now = new Date();
      const diff = now.getTime() - start.getTime();
      return Math.floor(diff / (1000 * 60 * 60 * 24));
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.$refs.queryFormRef.resetFields();
      this.handleQuery();
    },
    selectMachine(machine) {
      this.selectedMachine = machine;
    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.objId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    handleAdd() {
      this.reset();
      this.dialog.visible = true;
      this.dialog.title = '添加设备信息';
    },
    async handleUpdate(row) {
      this.reset();
      const objId = row ? row.objId : this.ids[0];
      try {
        const form = row || this.machineList.find(m => m.objId === objId);
        if (form) {
          Object.assign(this.form, form);
          this.form.deviceType = form.deviceType ? String(form.deviceType) : undefined;
          this.form.supplierId = form.supplierId ? String(form.supplierId) : undefined;
        }
        this.dialog.visible = true;
        this.dialog.title = '修改设备信息';
      } catch (error) {
        console.error('获取设备信息失败:', error);
        this.$modal.msgError('获取设备信息失败');
      }
    },
    submitForm() {
      this.$refs.machineFormRef.validate(async (valid) => {
        if (valid) {
          this.buttonLoading = true;
          try {
            this.$modal.msgSuccess('操作成功');
            this.dialog.visible = false;
            await this.getList();
          } catch (error) {
            console.error('保存设备信息失败:', error);
            this.$modal.msgError('保存设备信息失败');
          } finally {
            this.buttonLoading = false;
          }
        }
      });
    },
    async handleDelete(row) {
      const objIds = row ? row.objId : this.ids;
      try {
        await this.$modal.confirm('是否确认删除设备信息编号为"' + objIds + '"的数据项？');
        this.$modal.msgSuccess('删除成功');
        await this.getList();
      } catch (error) {
        console.error('删除设备信息失败:', error);
        if (error !== 'cancel') {
          this.$modal.msgError('删除设备信息失败');
        }
      }
    },
    cancel() {
      this.reset();
      this.dialog.visible = false;
    },
    reset() {
      this.form = {
        objId: undefined,
        deviceCode: undefined,
        deviceName: undefined,
        deviceType: undefined,
        deviceModel: undefined,
        supplierId: undefined,
        deviceStatus: '1',
        remark: undefined
      };
      this.$refs.machineFormRef && this.$refs.machineFormRef.resetFields();
    },
    viewDetails(machine) {
      this.selectedMachine = machine;
      this.detailDialog = true;
      this.activeTab = 'basic';
    },
    // 生命周期相关方法
    viewLifecycle(machine) {
      this.selectedMachine = machine;
      this.lifecycleDrawer = true;
      this.selectedLifecycleTypes = [];
      this.lifecycleEvents = [];
      this.loadLifecycleTypes();
    },
    toggleLifecycleType(type) {
      const index = this.selectedLifecycleTypes.indexOf(type);
      if (index > -1) {
        this.selectedLifecycleTypes.splice(index, 1);
      } else {
        this.selectedLifecycleTypes.push(type);
      }
    },
    async loadLifecycleTypes() {
      if (!this.selectedMachine) return;
      const deviceCode = this.selectedMachine.deviceCode;
      try {
        // 并行获取所有类型的数据数量
        const [maintRes, inspectRes, shutdownRes, faultRes, repairRes] = await Promise.all([
          listAllDmsBillsMaintInstance({ deviceCode }).catch(() => ({ data: [] })),
          listAllDmsRecordInspect({ deviceCode }).catch(() => ({ data: [] })),
          listAllShutDown({ deviceCode }).catch(() => ({ data: [] })),
          listAllDmsBillsFaultInstance({ deviceCode }).catch(() => ({ data: [] })),
          listAllRepairRecord({ deviceCode }).catch(() => ({ data: [] }))
        ]);
        // 更新各类型数量
        this.lifecycleTypes.forEach(type => {
          switch (type.value) {
            case 'maintenance':
              type.count = (maintRes.data || []).length;
              break;
            case 'inspection':
              type.count = (inspectRes.data || []).length;
              break;
            case 'downtime':
              type.count = (shutdownRes.data || []).length;
              break;
            case 'fault':
              type.count = (faultRes.data || []).length;
              break;
            case 'repair':
              type.count = (repairRes.data || []).length;
              break;
            default:
              type.count = 0;
          }
        });
      } catch (error) {
        console.error('加载生命周期类型统计失败:', error);
      }
    },
    async loadLifecycleData() {
      if (!this.selectedMachine || this.selectedLifecycleTypes.length === 0) {
        this.lifecycleEvents = [];
        return;
      }
      const reqId = ++this.lifecycleRequestId;
      this.lifecycleLoading = true;
      const events = [];
      const deviceCode = this.selectedMachine.deviceCode;
      try {
        // 根据选中的类型加载对应数据
        const promises = [];
        this.selectedLifecycleTypes.forEach(type => {
          switch (type) {
            case 'maintenance':
              promises.push(
                listAllDmsBillsMaintInstance({ deviceCode }).then(res => {
                  (res.data || []).forEach((item, i) => {
                    const statusMap = { 1: '待保养', 2: '保养中', 3: '已完成' };
                    const statusText = statusMap[item.maintStatus] || '未知';
                    events.push({
                      id: `maint-${item.maintInstanceId || i}`,
                      type: 'maintenance',
                      title: item.maintLevelName || '设备保养',
                      description: `保养单号: ${item.billsMaintCode || '-'} | 保养人员: ${item.maintSupervisor || '-'} | 状态: ${statusText}`,
                      time: item.realEndTime || item.realBeginTime || item.planBeginTime || item.createTime,
                      iconClass: 'el-icon-setting',
                      color: '#4facfe',
                      tags: ['保养', statusText]
                    });
                  });
                }).catch(() => {})
              );
              break;
            case 'inspection':
              promises.push(
                listAllDmsRecordInspect({ deviceCode }).then(res => {
                  (res.data || []).forEach((item, i) => {
                    const statusMap = { 1: '待巡检', 2: '巡检中', 3: '完成' };
                    const statusText = statusMap[item.inspectStatus] || '未知';
                    const inspectTypeText = item.inspectType === '1' ? '巡检' : '点检';
                    events.push({
                      id: `inspect-${item.recordInspectId || i}`,
                      type: 'inspection',
                      title: inspectTypeText,
                      description: `巡检单号: ${item.billsInspectCode || '-'} | 执行人: ${item.performer || '-'} | 状态: ${statusText}`,
                      time: item.realEndTime || item.realBeginTime || item.planBeginTime || item.createTime,
                      iconClass: 'el-icon-view',
                      color: statusText === '完成' ? '#30cfd0' : '#ff7675',
                      tags: [inspectTypeText, statusText]
                    });
                  });
                }).catch(() => {})
              );
              break;
            case 'downtime':
              promises.push(
                listAllShutDown({ deviceCode }).then(res => {
                  (res.data || []).forEach((item, i) => {
                    const shutTimeText = item.shutTime ? `${item.shutTime}小时` : '-';
                    events.push({
                      id: `downtime-${item.recordShutDownId || i}`,
                      type: 'downtime',
                      title: '设备停机',
                      description: `原因: ${item.shutReason || '-'} | 时长: ${shutTimeText}`,
                      time: item.shutBeginTime || item.createTime,
                      iconClass: 'el-icon-warning-outline',
                      color: '#ffeaa7',
                      tags: ['停机', item.shutReason ? (item.shutReason.includes('计划') ? '计划' : '非计划') : '非计划']
                    });
                  });
                }).catch(() => {})
              );
              break;
            case 'fault':
              promises.push(
                listAllDmsBillsFaultInstance({ deviceCode }).then(res => {
                  (res.data || []).forEach((item, i) => {
                    const statusMap = { '0': '待维修', '1': '维修中', '2': '维修完成', '3': '待检修', '4': '检修中', '5': '检修完成' };
                    const statusText = statusMap[item.billsStatus] || '未知';
                    const faultLevelMap = { '1': '一般', '2': '紧急', '3': '严重' };
                    const levelText = faultLevelMap[item.faultLevel] || '一般';
                    events.push({
                      id: `fault-${item.repairInstanceId || i}`,
                      type: 'fault',
                      title: item.faultType || '设备故障',
                      description: `故障单号: ${item.billsFaultCode || '-'} | 等级: ${levelText} | 报修人: ${item.applyUser || '-'} | 状态: ${statusText}`,
                      time: item.applyTime || item.createTime,
                      iconClass: 'el-icon-circle-close',
                      color: '#fa709a',
                      tags: ['故障', levelText]
                    });
                  });
                }).catch(() => {})
              );
              break;
            case 'repair':
              promises.push(
                listAllRepairRecord({ deviceCode }).then(res => {
                  (res.data || []).forEach((item, i) => {
                    const resultMap = { '1': '成功', '2': '失败', '3': '部分完成' };
                    const resultText = resultMap[item.repairResult] || '未知';
                    events.push({
                      id: `repair-${item.recordId || i}`,
                      type: 'repair',
                      title: item.faultPhenomenon || '设备维修',
                      description: `工单编号: ${item.workOrderCode || '-'} | 维修人: ${item.repairerName || '-'} | 结果: ${resultText}`,
                      time: item.endTime || item.startTime || item.createTime,
                      iconClass: 'el-icon-tools',
                      color: '#667eea',
                      tags: ['维修', resultText]
                    });
                  });
                }).catch(() => {})
              );
              break;
          }
        });
        await Promise.all(promises);
        if (reqId === this.lifecycleRequestId) {
          this.lifecycleEvents = events.sort((a, b) => {
            const timeA = a.time ? new Date(a.time).getTime() : 0;
            const timeB = b.time ? new Date(b.time).getTime() : 0;
            return timeB - timeA;
          });
          this.lifecycleLoading = false;
        }
      } catch (e) {
        if (reqId === this.lifecycleRequestId) {
          this.lifecycleLoading = false;
        }
        console.error('加载生命周期数据失败:', e);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.dms-machine-ledger {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow: hidden;
  padding: 6px;
  width: 100%;
  box-sizing: border-box;
}

.factory-bg-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  z-index: 0;
  svg {
    width: 100%;
    height: 100%;
  }
}

.top-info-panel {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 6px;
  margin-bottom: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  .panel-left {
    .page-title {
      font-size: 18px;
      font-weight: 600;
      color: #2c3e50;
      margin: 0;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .page-subtitle {
      font-size: 11px;
      color: #7f8c8d;
      margin: 1px 0 0 0;
    }
  }
  .panel-right {
    .current-time {
      display: flex;
      align-items: center;
      gap: 3px;
      font-size: 12px;
      color: #34495e;
      font-weight: 500;
    }
  }
}

.action-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  .toolbar-left, .toolbar-right {
    display: flex;
    gap: 6px;
  }
}

.search-filter-card {
  margin-bottom: 8px;
  .filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .filter-title {
    display: flex;
    align-items: center;
    gap: 6px;
  }
}

.main-content {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 6px;
  padding: 12px;
  min-height: 500px;
}

.grid-view {
  .machine-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
  }
}

.machine-card-wrapper {
  cursor: pointer;
}

.machine-card {
  background: #fff;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  padding: 12px;
  transition: all 0.3s ease;
  position: relative;
  &:hover {
    border-color: #409eff;
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
  }
  &.selected {
    border-color: #409eff;
    background: #f0f7ff;
  }
}

.status-indicator {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  &.status-1 {
    background: #67c23a;
  }
  &.status-2 {
    background: #e6a23c;
  }
  &.status-0 {
    background: #f56c6c;
  }
}

.machine-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 12px;
  .machine-icon-bg {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-bottom: 6px;
  }
  .machine-number {
    font-size: 12px;
    color: #909399;
    font-weight: 500;
  }
}

.machine-details {
  margin-bottom: 12px;
  .machine-name {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 8px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .machine-meta {
    .meta-item {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      color: #909399;
      margin-bottom: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

.quick-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.list-view {
  .el-table {
    background: transparent;
  }
}

.detail-section {
  padding: 12px 0;
}

.card-header-title {
  display: flex;
  align-items: center;
  font-weight: 600;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.fade-transform-enter-active, .fade-transform-leave-active {
  transition: all 0.3s ease;
}

.fade-transform-enter, .fade-transform-leave-to {
  opacity: 0;
  transform: translateY(10px);
}

// 生命周期相关样式
.lifecycle-drawer {
  ::v-deep .el-drawer__body {
    padding: 16px;
    background: #f5f7fa;
  }
}

.lifecycle-container {
  min-height: 100%;
}

.device-overview-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

  .overview-header {
    display: flex;
    align-items: center;
    gap: 16px;

    .device-avatar {
      width: 64px;
      height: 64px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .device-basic {
      flex: 1;

      h2 {
        margin: 0 0 6px 0;
        font-size: 18px;
        font-weight: 600;
        color: #2c3e50;
      }

      p {
        margin: 0;
        font-size: 13px;
        color: #909399;
        line-height: 1.5;
      }
    }
  }

  .el-divider {
    margin: 16px 0;
  }

  .overview-stats {
    display: flex;
    gap: 32px;
    justify-content: space-around;

    .stat {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;

      .stat-label {
        font-size: 13px;
        color: #909399;
        margin-bottom: 6px;
      }

      .stat-value {
        font-size: 24px;
        font-weight: 700;
        color: #409eff;
        font-family: 'Arial', sans-serif;
      }
    }
  }
}

.lifecycle-type-selector {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

  h3 {
    margin: 0 0 16px 0;
    font-size: 15px;
    font-weight: 600;
    color: #2c3e50;
  }

  .type-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 12px;
  }
}

.type-card {
  background: #f8f9fa;
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 14px 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;

  &:hover {
    border-color: #409eff;
    background: #fff;
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
    transform: translateY(-2px);
  }

  &.active {
    border-color: #409eff;
    background: linear-gradient(135deg, #f0f7ff 0%, #e6f4ff 100%);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.25);

    .type-name {
      color: #409eff;
      font-weight: 600;
    }
  }

  .type-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  .type-name {
    display: block;
    font-size: 13px;
    color: #2c3e50;
    margin-bottom: 0;
    font-weight: 500;
    transition: all 0.3s ease;
  }

  .type-count {
    display: inline-block;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
    color: #fff;
    border-radius: 12px;
    min-width: 22px;
    height: 22px;
    line-height: 22px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 600;
    position: absolute;
    top: -6px;
    right: -6px;
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.4);
  }
}

.lifecycle-timeline-container {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

  h3 {
    margin: 0 0 20px 0;
    font-size: 15px;
    font-weight: 600;
    color: #2c3e50;
    padding-bottom: 12px;
    border-bottom: 2px solid #f0f0f0;
  }
}

.timeline-wrapper {
  position: relative;
  padding-left: 32px;

  &::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, #409eff 0%, #e0e0e0 100%);
    border-radius: 2px;
  }
}

.timeline-item {
  position: relative;
  margin-bottom: 24px;
  padding-bottom: 8px;

  &:last-child {
    .timeline-line {
      display: none;
    }
  }

  .timeline-marker {
    position: absolute;
    left: -32px;
    top: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    z-index: 2;
    transition: all 0.3s ease;

    &:hover {
      transform: scale(1.1);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    }
  }

  .timeline-content {
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      transform: translateY(-2px);
    }

    .event-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;

      h4 {
        margin: 0;
        font-size: 15px;
        font-weight: 600;
        color: #2c3e50;
      }

      .event-time {
        font-size: 12px;
        color: #909399;
        white-space: nowrap;
      }
    }

    .event-description {
      margin: 0 0 10px 0;
      font-size: 13px;
      color: #606266;
      line-height: 1.6;
    }

    .event-tags {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-bottom: 8px;

      .el-tag {
        margin: 0;
      }
    }

    .event-details {
      margin-top: 12px;

      .el-collapse {
        border: none;
      }

      .el-descriptions {
        margin-top: 8px;
      }
    }
  }

  .timeline-line {
    position: absolute;
    left: -17px;
    top: 28px;
    width: 2px;
    height: calc(100% - 28px);
    background: #e0e0e0;
    z-index: 1;
  }
}
</style>
