<template>
  <view class="inventory-bg">
    <view class="inventory-card">
      <view class="readonly-group">
        <view class="readonly-item">
          <text class="readonly-label">一级分类</text>
          <text class="readonly-value">{{ firstCategory }}</text>
        </view>
        <view class="readonly-item">
          <text class="readonly-label">二级分类</text>
          <text class="readonly-value">{{ secondCategory }}</text>
        </view>
        <view class="readonly-item">
          <text class="readonly-label">所属种类</text>
          <text class="readonly-value">{{ categoryName }}</text>
        </view>
        <view class="readonly-item">
          <text class="readonly-label">物资名称</text>
          <text class="readonly-value">{{ materialName }}</text>
        </view>
        <!-- <view class="readonly-item">
          <text class="readonly-label">物质代码</text>
          <text class="readonly-value">{{ materialCode }}</text>
        </view> -->
        <view class="readonly-item">
          <text class="readonly-label">物资类型</text>
          <text class="readonly-value">{{ materialType }}</text>
        </view>
        <view class="readonly-item">
          <text class="readonly-label">物资型号</text>
          <text class="readonly-value">{{ materialSpec }}</text>
        </view>
        <view class="readonly-item">
          <text class="readonly-label">物资规格</text>
          <text class="readonly-value">{{ materialSize }}</text>
        </view>
        <view class="readonly-item">
          <text class="readonly-label">单位</text>
          <text class="readonly-value">{{ unit }}</text>
        </view>
        <view class="readonly-item">
          <text class="readonly-label">入库批次</text>
          <text class="readonly-value">{{ batchNumber }}</text>
        </view>
        <view class="readonly-item">
          <text class="readonly-label">在库数量</text>
          <text class="readonly-value">{{ stockQty }}{{ unit ? ' ' + unit : '' }}</text>
        </view>
        <view class="readonly-item">
          <text class="readonly-label">顺序号</text>
          <text class="readonly-value">{{ sequenceNumber }}</text>
        </view>
        <view class="readonly-item">
          <text class="readonly-label">待出库</text>
          <text class="readonly-value">{{ waitNum }}</text>
        </view>
        <view class="readonly-item">
          <text class="readonly-label">生产日期</text>
          <text class="readonly-value">{{ productionDate }}</text>
        </view>
        <view class="readonly-item">
          <text class="readonly-label">入库日期</text>
          <text class="readonly-value">{{ storageDate }}</text>
        </view>
        <view class="readonly-item">
          <text class="readonly-label">物资状态</text>
          <text class="readonly-value">{{ materialStatus }}</text>
        </view>
        <view class="readonly-item">
          <text class="readonly-label">储备方式</text>
          <text class="readonly-value">{{ reserveMethod }}</text>
        </view>
        <view class="readonly-item">
          <text class="readonly-label">所在仓库</text>
          <view class="readonly-value">{{ warehouseName }}</view>
        </view>
        <view class="readonly-item">
          <text class="readonly-label">所在货架</text>
          <text class="readonly-value">{{ shelfName }}</text>
        </view>
        <view class="readonly-item">
          <text class="readonly-label">所在货架层</text>
          <text class="readonly-value">{{ shelfLayer }}</text>
        </view>
        <view class="readonly-item">
          <text class="readonly-label">等级分类</text>
          <text class="readonly-value">{{ levelCategory }}</text>
        </view>
        <view class="readonly-item">
          <text class="readonly-label">产权信息</text>
          <text class="readonly-value">{{ propertyInfo }}</text>
        </view>
        <view class="readonly-item">
          <text class="readonly-label">是否为固定资产</text>
          <text class="readonly-value">{{ isFixedAsset }}</text>
        </view>
        <view class="readonly-item">
          <text class="readonly-label">固定资产编码</text>
          <text class="readonly-value">{{ fixedAssetCode }}</text>
        </view>
        <view class="readonly-item">
          <text class="readonly-label">储备年限</text>
          <text class="readonly-value">{{ reserveYears }}</text>
        </view>
        <view class="readonly-item">
          <text class="readonly-label">存放要求</text>
          <text class="readonly-value">{{ storageRequirement }}</text>
        </view>
        <view class="readonly-item">
          <text class="readonly-label">维护要求</text>
          <text class="readonly-value">{{ maintenanceRequirement }}</text>
        </view>
        <view class="readonly-item">
          <text class="readonly-label">保养频次</text>
          <text class="readonly-value">{{ maintenanceFrequency }}</text>
        </view>
      </view>
            <!-- 盘点按钮 -->
      <view class="inventory-action-section" v-if="!isViewMode">
        <button class="inventory-action-btn" @click="showInventoryModal">盘点</button>
      </view>
      <!-- 运维记录 -->
      <view class="maintenance-section">
        <view class="section-title">运维记录</view>
        <view class="maintenance-list" v-if="maintenanceRecords.length > 0">
          <view class="maintenance-item" v-for="(record, index) in maintenanceRecords" :key="index">
            <view class="maintenance-row">
              <text class="maintenance-label">记录编号：</text>
              <text class="maintenance-value">{{record.no || '-'}}</text>
            </view>
            <view class="maintenance-row">
              <text class="maintenance-label">计划维护日期：</text>
              <text class="maintenance-value">{{formatDate(record.planned_maintenance_date) || '-'}}</text>
            </view>
            <view class="maintenance-row">
              <text class="maintenance-label">截止日期：</text>
              <text class="maintenance-value">{{formatDate(record.end_date) || '-'}}</text>
            </view>
            <view class="maintenance-row">
              <text class="maintenance-label">负责人：</text>
              <text class="maintenance-value">{{record.responsible_admin?record.responsible_admin.name : '-'}}</text>
            </view>
            <view class="maintenance-row">
              <text class="maintenance-label">运维内容：</text>
              <text class="maintenance-value">
                <span v-if="record.equipment_maintain_config_id && record.equipment_maintain_config && record.equipment_maintain_config.name">
                  {{ record.equipment_maintain_config.name }}
                </span>
                <span v-else-if="record.content">
                  {{ record.content }}
                </span>
                <span v-else>-</span>
              </text>
            </view>
            <view class="maintenance-row">
              <text class="maintenance-label">状态：</text>
              <text class="maintenance-value">{{record.status === 1 ? '已完成' : '待处理'}}</text>
            </view>
            <view class="maintenance-row">
              <text class="maintenance-label">实际维护日期/状态：</text>
              <view class="maintenance-value">
                <text v-if="record.status === 1">{{formatDate(record.maintenance_date) || '-'}}</text>
                <view v-else :class="['status-badge', getBadgeClass(record.end_date)]">
                  {{ getBadgeText(record.end_date) }}
                </view>
              </view>
            </view>
            <view class="maintenance-actions">
              <button v-if="record.status === 0" class="action-btn complete-btn" @click="completeMaintenance(record)">完成维护</button>
              <button v-if="record.status === 1" class="action-btn view-btn" @click="viewMaintenance(record)">查看</button>
            </view>
          </view>
        </view>
        <view class="empty-maintenance" v-else>
          <text>暂无运维记录</text>
        </view>
      </view>
      

    </view>
  </view>
  
  <!-- 盘点弹窗 -->
  <view class="inventory-modal" v-if="showModal" @click="closeInventoryModal">
    <view class="modal-content" @click.stop>
      <view class="modal-header">
        <text class="modal-title">物资盘点</text>
        <view class="modal-close" @click="closeInventoryModal">
          <text class="close-icon">×</text>
        </view>
      </view>
      
      <view class="modal-body">
        <view class="form-group">
        <text class="form-label">盘点数量</text>
        <input class="form-input" type="number" v-model="countQty" placeholder="请输入盘点数量" />
      </view>
        <view class="form-group">
        <text class="form-label">盘点备注</text>
        <textarea class="form-textarea" v-model="remark" placeholder="请输入备注信息" />
      </view>
        <view class="form-group">
        <text class="form-label">照片上传</text>
        <view class="photo-upload">
          <view v-for="(photo, index) in photos" :key="index" class="photo-preview">
            <image :src="photo" mode="aspectFill" class="photo-img" />
            <view class="photo-del" @click="deletePhoto(index)">
              <text class="delete-icon">×</text>
            </view>
          </view>
          <button v-if="photos.length < 3" class="photo-btn" @click="choosePhoto">
            <text class="iconfont icon-camera"></text>
            <text class="btn-text">上传照片</text>
          </button>
        </view>
      </view>
      </view>
      
      <view class="modal-footer">
        <button class="modal-btn cancel-btn" @click="closeInventoryModal">取消</button>
        <button class="modal-btn submit-btn" @click="submit">提交盘点</button>
      </view>
    </view>
  </view>
  
  <!-- 运维记录详情弹窗 -->
  <view class="detail-modal" v-if="showDetailModal" @click="closeDetailModal">
    <view class="detail-modal-content" @click.stop>
      <view class="detail-modal-header">
        <text class="detail-modal-title">运维记录详情</text>
        <view class="detail-modal-close" @click="closeDetailModal">
          <text class="close-icon">×</text>
        </view>
      </view>
      
      <scroll-view class="detail-modal-body" scroll-y>
        <view class="detail-form-group">
          <text class="detail-form-label">计划维护日期:</text>
          <text class="detail-form-value">{{ formatDate(currentRecord.planned_maintenance_date) || '-' }}</text>
        </view>
        <view class="detail-form-group">
          <text class="detail-form-label">实际维护日期:</text>
          <text class="detail-form-value">{{ formatDate(currentRecord.maintenance_date) || '-' }}</text>
        </view>
        <view class="detail-form-group">
          <text class="detail-form-label">负责人:</text>
          <text class="detail-form-value">{{ currentRecord.responsible_admin?currentRecord.responsible_admin.name : '-' }}</text>
        </view>
        <view class="detail-form-group">
          <text class="detail-form-label">运维内容:</text>
          <text class="detail-form-value">{{ currentRecord.content || '-' }}</text>
        </view>
        <view class="detail-form-group">
          <text class="detail-form-label">维护备注:</text>
          <text class="detail-form-value">{{ currentRecord.maintenance_content || '-' }}</text>
        </view>
        <view class="detail-form-group">
          <text class="detail-form-label">维护照片:</text>
          <view v-if="currentRecord.files && currentRecord.files.length" class="detail-photo-gallery">
            <image
              v-for="(file, idx) in currentRecord.files"
              :key="'file-' + idx"
              :src="file.url"
              class="detail-photo-preview"
              mode="aspectFill"
              @click="previewImage(file.url, currentRecord.files.map(f => f.url))"
            />
          </view>
          <text v-else class="detail-form-value">-</text>
        </view>
        <view class="detail-form-group">
          <text class="detail-form-label">签名照片:</text>
          <view v-if="currentRecord.sign && currentRecord.sign.url" class="detail-photo-gallery">
            <image
              :src="currentRecord.sign.url"
              class="detail-sign-preview"
              mode="aspectFill"
              @click="previewImage(currentRecord.sign.url, [currentRecord.sign.url])"
            />
          </view>
          <text v-else class="detail-form-value">-</text>
        </view>
      </scroll-view>
      
      <view class="detail-modal-footer">
        <button class="modal-btn submit-btn" @click="closeDetailModal">关闭</button>
      </view>
    </view>
  </view>
  
  <!-- 完成维护弹窗 -->
  <view class="complete-modal" v-if="showCompleteModal" @click="closeCompleteModal">
    <view class="complete-modal-content" @click.stop>
      <view class="complete-modal-header">
        <text class="complete-modal-title">完成维护</text>
        <view class="complete-modal-close" @click="closeCompleteModal">
          <text class="close-icon">×</text>
        </view>
      </view>
      
      <scroll-view class="complete-modal-body" scroll-y>
        <view class="complete-form-group">
          <text class="complete-form-label">实际维护日期</text>
          <picker mode="date" :value="completeForm.actual_date" @change="onDateChange">
            <view class="complete-form-input">
              <text :class="completeForm.actual_date ? 'input-value' : 'input-placeholder'">
                {{ completeForm.actual_date || '请选择实际维护日期' }}
              </text>
            </view>
          </picker>
        </view>
        
        <view class="complete-form-group">
          <text class="complete-form-label">维护备注</text>
          <textarea 
            class="complete-form-textarea" 
            v-model="completeForm.notes" 
            placeholder="请输入维护备注"
            :maxlength="500"
          />
        </view>
        
        <view class="complete-form-group">
          <text class="complete-form-label">上传图片</text>
          <view class="complete-photo-upload">
            <view v-for="(photo, index) in completeForm.photos" :key="index" class="complete-photo-preview">
              <image :src="photo.url" mode="aspectFill" class="complete-photo-img" />
              <view class="complete-photo-del" @click="removeCompletePhoto(index)">
                <text class="delete-icon">×</text>
              </view>
            </view>
            <button v-if="completeForm.photos.length < 9" class="complete-photo-btn" @click="chooseCompletePhoto">
              <text class="iconfont icon-camera"></text>
              <text class="btn-text">上传照片</text>
            </button>
          </view>
        </view>
        
        <view class="complete-form-group">
          <text class="complete-form-label">签名</text>
          <view class="signature-wrapper">
            <canvas 
              canvas-id="signatureCanvas" 
              class="signature-canvas"
              disable-scroll="true"
              @touchstart="onTouchStart"
              @touchmove="onTouchMove"
              @touchend="onTouchEnd"
            ></canvas>
            <view class="signature-actions">
              <button class="signature-btn" @click="clearSignature">清除签名</button>
            </view>
          </view>
        </view>
      </scroll-view>
      
      <view class="complete-modal-footer">
        <button class="modal-btn cancel-btn" @click="closeCompleteModal">取消</button>
        <button class="modal-btn submit-btn" @click="submitCompleteMaintenance">确认完成</button>
      </view>
    </view>
  </view>
</template>

<script>
import { getMaterialInfo, saveInventoryCheck, uploadFile, getMaintenanceRecord, getMaintenanceRecordDetail, submitMaintenanceRecord } from '@/api.js'
export default {
  data() {
    return {
      isViewMode: false,
      stockQty: '',
      countQty: '',
      remark: '',
      photo: '',
      photos: [],
      material_info_id:'',
      // 物资信息
      firstCategory: '-',
      secondCategory: '-',
      categoryName: '-',
      materialName: '-',
      materialCode: '-',
      materialType: '-',
      materialSpec: '-',
      materialSize: '-',
      unit: '-',
      // 库存信息
      batchNumber: '-',
      sequenceNumber: '-',
      waitNum: '-',
      // 物资明细
      productionDate: '-',
      storageDate: '-',
      materialStatus: '-',
      reserveMethod: '-',
      warehouseName: '-',
      shelfName: '-',
      shelfLayer: '-',
      levelCategory: '-',
      propertyInfo: '-',
      isFixedAsset: '-',
      fixedAssetCode: '-',
      reserveYears: '-',
      storageRequirement: '-',
      maintenanceRequirement: '-',
      maintenanceFrequency: '-',
      material_infos_plan_id: '',
      materialId: '',
      // 运维记录
      maintenanceRecords: [],
      // 弹窗控制
      showModal: false,
      // 查看详情
      showDetailModal: false,
      currentRecord: {},
      // 完成维护弹窗
      showCompleteModal: false,
      completeForm: {
        actual_date: '',
        notes: '',
        photos: [], // [{id: xxx, url: xxx}]
        signature: '' // 签名图片路径
      },
      currentMaintenanceRecord: null, // 当前要完成的维护记录
      signatureCtx: null, // 签名画布上下文
      signaturePoints: [], // 签名点数组
      isDrawing: false // 是否正在绘制签名
    }
  },
  onLoad(options) {
    this.isViewMode = options.view === '1';
    this.date = this.getToday();
    this.materialId = options.code;
    console.log("materialId:", this.materialId);
    if (this.materialId) {
      getMaterialInfo(this.materialId).then(response => {
        console.log("response:", response);
        if (response.data) {
          const data = response.data;
          this.material_info_id = data.wuzibianma_material_infos_wuzibianma_relation.id;
          const relation = data.wuzibianma_material_infos_wuzibianma_relation || {};
          const fenleiDetail = relation.fenlei_detail || {};
          const wuzizhuangtaiDetail = data.wuzizhuangtai_detail || {};
          const chubeifangshiDetail = data.chubeifangshi_detail || {};
          const dengjifenleiDetail = data.dengjifenlei_detail || {};
          const chanquanxinxiDetail = data.chanquanxinxi_detail || {};
          const materialstorages = data.materialstorages || {};
          const shelfs = data.shelfs || {};
          const equipmentMaintainConfig = data.equipment_maintain_config || {};
          
          // 物资信息
          // 一级分类、二级分类 - 从 material_info_type 分割
          const materialInfoType = data.material_info_type || '';
          if (materialInfoType) {
            const parts = materialInfoType.split('-');
            this.firstCategory = parts[0] || '-';
            this.secondCategory = parts.length > 1 ? parts[1] : parts[0] || '-';
          }
          
          // 所属种类
          this.categoryName = fenleiDetail.name || '-';
          
          // 物资名称
          this.materialName = data.zichanmingcheng || '-';
          
          // 物质代码
          this.materialCode = data.wuzibianma || '-';
          
          // 物资类型
          this.materialType = data.wuzileixing || '-';
          
          // 物资型号
          this.materialSpec = relation.guigexinghao || data.guigexinghao || '-';
          
          // 物资规格
          this.materialSize = relation.wuziguige || '-';
          
          // 单位
          this.unit = relation.jiliangdanwei || data.jiliangdanwei || '-';
          
          // 库存信息
          // 入库批次
          this.batchNumber = data.rukupici || '-';
          
          // 在库数量
          this.stockQty = data.zaikushuliang || data.inventorys_total || '0';
          
          // 顺序号
          this.sequenceNumber = data.shunxuhao || '-';
          
          // 待出库
          this.waitNum = data.wait_num || '-';
          
          // 物资明细
          // 生产日期
          this.productionDate = data.shengchanriqi || '-';
          
          // 入库日期
          this.storageDate = data.rukuriqi || '-';
          
          // 物资状态
          this.materialStatus = wuzizhuangtaiDetail.value || '-';
          
          // 储备方式
          this.reserveMethod = chubeifangshiDetail.value || '-';
          
          // 所在仓库
          this.warehouseName = materialstorages.cangkumingcheng || '-';
          
          // 所在货架
          this.shelfName = shelfs.huojiamingcheng || '-';
          
          // 所在货架层
          this.shelfLayer = data.huojiaceng || '-';
          
          // 等级分类
          this.levelCategory = dengjifenleiDetail.value || '-';
          
          // 产权信息
          this.propertyInfo = chanquanxinxiDetail.value || '-';
          
          // 是否为固定资产
          this.isFixedAsset = data.shifouweigudingzichan || '-';
          
          // 固定资产编码
          this.fixedAssetCode = data.gudingzichanbianma || '-';
          
          // 储备年限
          this.reserveYears = data.chubeinianxian || '-';
          
          // 存放要求
          this.storageRequirement = data.cunfangyaoqiu || '-';
          
          // 维护要求
          this.maintenanceRequirement = data.weihuyaoqiu || '-';
          
          // 保养频次
          this.maintenanceFrequency = equipmentMaintainConfig.name || '-';
          
          // material_infos_plan_id
          this.material_infos_plan_id = data.material_infos_plan_id || '';
        } else {
          uni.showToast({ title: '未获取到物资信息', icon: 'none' })
        }
      }).catch(() => {
        uni.showToast({ title: '获取物资信息失败', icon: 'none' })
      })
      
      // 获取运维记录
      this.getMaintenanceRecords()
    }
  },
  methods: {
    // 显示盘点弹窗
    showInventoryModal() {
      this.showModal = true;
    },
    // 关闭盘点弹窗
    closeInventoryModal() {
      this.showModal = false;
    },
    getToday() {
      const now = new Date();
      const y = now.getFullYear();
      const m = String(now.getMonth() + 1).padStart(2, '0');
      const d = String(now.getDate()).padStart(2, '0');
      return `${y}-${m}-${d}`;
    },
    choosePhoto() {
      if (this.photos.length >= 3) {
        uni.showToast({ title: '最多上传3张照片', icon: 'none' });
        return;
      }
      uni.chooseImage({
        count: 3 - this.photos.length,
        success: (res) => {
          this.photos = [...this.photos, ...res.tempFilePaths];
        }
      });
    },
    deletePhoto(index) {
      this.photos.splice(index, 1);
    },
    async submit() {
      if (!this.countQty) {
        uni.showToast({ title: '请输入盘点数量', icon: 'none' });
        return;
      }
      
      if (!/^(0|[1-9][0-9]*)$/.test(this.countQty)) {
        uni.showToast({ title: '盘点数量必须为0或正整数', icon: 'none' });
        return;
      }
      uni.showLoading({ title: '提交中...' });
      // 1. 上传所有照片，收集 file_id
      let file_ids = [];
      for (let i = 0; i < this.photos.length; i++) {
        try {
          const res = await uploadFile(this.photos[i]);
          if (res && res.id) {
            file_ids.push(res.id);
          }
        } catch (e) {
          uni.hideLoading();
          uni.showToast({ title: '图片上传失败', icon: 'none' });
          return;
        }
      }
      // 2. 组装盘点数据
      const data = {
        status: '1',
        inventorys_id:this.materialId,
        check_num: this.countQty,
        remark: this.remark,
        file_ids
        // 其他参数如 material_infos_plan_id、status、check_date 可按需补充
      };
      console.log("data:", data);
      // 3. 提交盘点
      saveInventoryCheck(data).then(res => {
        console.log("res:", res);
        uni.hideLoading();
        if (res && (!res.data || res.data.errcode === undefined)) {
          uni.showToast({ title: '盘点提交成功', icon: 'success' });
          setTimeout(() => {
            uni.reLaunch({ url: '/pages/index/index' });
          }, 1200);
        } else {
          uni.showToast({ title: res.data.errmsg || '提交失败', icon: 'none' });
        }
      }).catch(() => {
        uni.hideLoading();
        uni.showToast({ title: '提交失败', icon: 'none' });
      });
    },
    // 获取运维记录
    async getMaintenanceRecords() {
      if (!this.materialId) return;
      
      try {
        const params = {
          page: 1,
          page_size: 999,
          'filter[0][key]': 'inventorys_id',
          'filter[0][op]': 'eq',
          'filter[0][value]': this.materialId
        };
        
        const res = await getMaintenanceRecord(params);
        console.log("运维记录响应:", res);
        
        if (res.data && res.data.list && res.data.list.data) {
          this.maintenanceRecords = res.data.list.data;
        } else {
          this.maintenanceRecords = [];
        }
      } catch (error) {
        console.error('获取运维记录失败:', error);
        this.maintenanceRecords = [];
      }
    },
    // 格式化日期
    formatDate(dateStr) {
      if (!dateStr) return '-';
      // 如果已经是 YYYY-MM-DD 格式，直接返回
      if (/^\d{4}-\d{2}-\d{2}$/.test(dateStr)) {
        return dateStr;
      }
      const date = new Date(dateStr);
      if (isNaN(date.getTime())) {
        return dateStr; // 如果无法解析，返回原值
      }
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    // 获取日期差值（天数）
    getDateDifferenceInDays(dateString) {
      if (!dateString) return 0;
      const plannedDate = new Date(dateString);
      const today = new Date();

      // 设置时间为当天的 00:00:00
      today.setHours(0, 0, 0, 0);
      plannedDate.setHours(0, 0, 0, 0);

      // 计算日期差值（毫秒）
      const diffTime = plannedDate - today;

      // 转换为天数
      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

      return diffDays;
    },
    // 获取状态徽章文本
    getBadgeText(endDate) {
      if (!endDate) {
        return '-';
      }
      const diffDays = this.getDateDifferenceInDays(endDate);
      return diffDays >= 0 ? `还有 ${diffDays} 天` : `已超期 ${Math.abs(diffDays)} 天`;
    },
    // 获取状态徽章样式类
    getBadgeClass(endDate) {
      if (!endDate) {
        return 'status-default';
      }
      const diffDays = this.getDateDifferenceInDays(endDate);
      if (diffDays < 0) {
        return 'status-overdue'; // 已超期
      } else if (diffDays <= 3) {
        return 'status-urgent'; // 紧急（3天内）
      } else {
        return 'status-normal'; // 正常
      }
    },
    // 完成维护
    completeMaintenance(record) {
      console.log('完成维护:', record);
      this.currentMaintenanceRecord = record;
      // 重置表单
      this.completeForm = {
        actual_date: this.getToday(),
        notes: '',
        photos: [],
        signature: ''
      };
      this.showCompleteModal = true;
      // 初始化签名画布
      this.$nextTick(() => {
        this.initSignatureCanvas();
      });
    },
    // 关闭完成维护弹窗
    closeCompleteModal() {
      this.showCompleteModal = false;
      this.currentMaintenanceRecord = null;
      this.completeForm = {
        actual_date: '',
        notes: '',
        photos: [],
        signature: ''
      };
    },
    // 日期选择
    onDateChange(e) {
      this.completeForm.actual_date = e.detail.value;
    },
    // 选择完成维护的图片
    chooseCompletePhoto() {
      if (this.completeForm.photos.length >= 9) {
        uni.showToast({ title: '最多上传9张照片', icon: 'none' });
        return;
      }
      uni.chooseImage({
        count: 9 - this.completeForm.photos.length,
        success: async (res) => {
          uni.showLoading({ title: '上传中...' });
          try {
            for (let i = 0; i < res.tempFilePaths.length; i++) {
              const uploadRes = await uploadFile(res.tempFilePaths[i]);
              if (uploadRes && uploadRes.id) {
                this.completeForm.photos.push({
                  id: uploadRes.id,
                  url: uploadRes.url || res.tempFilePaths[i]
                });
              }
            }
            uni.hideLoading();
          } catch (error) {
            uni.hideLoading();
            uni.showToast({ title: '图片上传失败', icon: 'none' });
          }
        }
      });
    },
    // 删除完成维护的图片
    removeCompletePhoto(index) {
      this.completeForm.photos.splice(index, 1);
    },
    // 初始化签名画布
    initSignatureCanvas() {
      this.$nextTick(() => {
        const ctx = uni.createCanvasContext('signatureCanvas', this);
        ctx.setStrokeStyle('#000000');
        ctx.setLineWidth(3);
        ctx.setLineCap('round');
        ctx.setLineJoin('round');
        this.signatureCtx = ctx;
        this.signaturePoints = [];
        this.isDrawing = false;
      });
    },
    // 触摸开始
    onTouchStart(e) {
      if (!this.signatureCtx) {
        this.initSignatureCanvas();
        return;
      }
      this.isDrawing = true;
      const touch = e.touches[0];
      const point = {
        x: touch.x,
        y: touch.y
      };
      this.signaturePoints = [point];
      this.signatureCtx.beginPath();
      this.signatureCtx.moveTo(point.x, point.y);
    },
    // 触摸移动
    onTouchMove(e) {
      if (!this.isDrawing || !this.signatureCtx) return;
      e.preventDefault();
      const touch = e.touches[0];
      const point = {
        x: touch.x,
        y: touch.y
      };
      if (this.signaturePoints.length > 0) {
        const prevPoint = this.signaturePoints[this.signaturePoints.length - 1];
        this.signatureCtx.moveTo(prevPoint.x, prevPoint.y);
        this.signatureCtx.lineTo(point.x, point.y);
        this.signatureCtx.stroke();
        this.signatureCtx.draw(true);
      }
      this.signaturePoints.push(point);
    },
    // 触摸结束
    onTouchEnd() {
      this.isDrawing = false;
      // 保存签名图片
      this.saveSignature();
    },
    // 保存签名
    saveSignature() {
      if (!this.signatureCtx) return;
      uni.canvasToTempFilePath({
        canvasId: 'signatureCanvas',
        success: (res) => {
          this.completeForm.signature = res.tempFilePath;
        },
        fail: (err) => {
          console.error('保存签名失败:', err);
        }
      }, this);
    },
    // 清除签名
    clearSignature() {
      if (this.signatureCtx) {
        // 清除整个画布（使用足够大的值）
        this.signatureCtx.clearRect(0, 0, 1000, 1000);
        this.signatureCtx.draw(true);
        this.completeForm.signature = '';
        this.signaturePoints = [];
        this.isDrawing = false;
      }
    },
    // 提交完成维护
    async submitCompleteMaintenance() {
      if (!this.completeForm.actual_date) {
        uni.showToast({ title: '请选择实际维护日期', icon: 'none' });
        return;
      }
      
      if (!this.currentMaintenanceRecord || !this.currentMaintenanceRecord.id) {
        uni.showToast({ title: '维护记录信息错误', icon: 'none' });
        return;
      }
      
      uni.showLoading({ title: '提交中...' });
      
      try {
        // 上传签名图片
        let sign_id = null;
        if (this.completeForm.signature) {
          const signRes = await uploadFile(this.completeForm.signature);
          if (signRes && signRes.id) {
            sign_id = signRes.id;
          }
        }
        
        // 组装提交数据
        const data = {
          id: this.currentMaintenanceRecord.id,
          maintenance_date: this.formatDate(this.completeForm.actual_date),
          maintenance_content: this.completeForm.notes,
          file_ids: this.completeForm.photos.map(photo => photo.id),
          sign_id: sign_id,
          status: 1
        };
        
        console.log('提交完成维护数据:', data);
        // return
        const res = await submitMaintenanceRecord(data);
        console.log('提交完成维护响应:', res);
        
        uni.hideLoading();
        
        if (res && (!res.data || res.data.errcode === undefined)) {
          uni.showToast({ title: '完成维护成功', icon: 'success' });
          this.closeCompleteModal();
          // 刷新运维记录列表
          this.getMaintenanceRecords();
        } else {
          uni.showToast({ title: res.data?.errmsg || '提交失败', icon: 'none' });
        }
      } catch (error) {
        console.error('提交完成维护失败:', error);
        uni.hideLoading();
        uni.showToast({ title: '提交失败', icon: 'none' });
      }
    },
    // 查看维护记录
    async viewMaintenance(record) {
      console.log('查看维护记录:', record);
      if (!record.id) {
        uni.showToast({
          title: '记录ID不存在',
          icon: 'none'
        });
        return;
      }
      
      uni.showLoading({ title: '加载中...' });
      try {
        const res = await getMaintenanceRecordDetail(record.id);
        console.log('运维记录详情:', res);
        
        if (res.data) {
          this.currentRecord = res.data;
          this.showDetailModal = true;
        } else {
          uni.showToast({
            title: '获取详情失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('获取运维记录详情失败:', error);
        uni.showToast({
          title: '获取详情失败',
          icon: 'none'
        });
      } finally {
        uni.hideLoading();
      }
    },
    // 关闭详情弹窗
    closeDetailModal() {
      this.showDetailModal = false;
      this.currentRecord = {};
    },
    // 预览图片
    previewImage(currentUrl, urls) {
      if (!urls || urls.length === 0) {
        urls = [currentUrl];
      }
      uni.previewImage({
        current: currentUrl,
        urls: urls
      });
    }
  }
}
</script>

<style>
.inventory-bg {
  min-height: 100vh;
  background: #f5f6f7;
  padding: 24rpx;
}

.inventory-card {
  background: #fff;
  border-radius: 24rpx;
  padding: 32rpx 24rpx;
  margin-bottom: 24rpx;
}

.readonly-group {
  margin-bottom: 32rpx;
  padding: 24rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
}

.readonly-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.readonly-item:last-child {
  margin-bottom: 0;
}

.readonly-label {
  color: #666;
  font-size: 28rpx;
  width:20%;
}

.readonly-value {
  color: #333;
  font-size: 28rpx;
  font-weight: 500;
  text-align: right;
  width:75%;
}

.form-group {
  margin-bottom: 32rpx;
}

.form-label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 16rpx;
  font-weight: 500;
}

.form-input {
  height: 88rpx;
  background: #f8f9fa;
  border: none;
  border-radius: 16rpx;
  padding: 0 24rpx;
  font-size: 28rpx;
  color: #333;
}

.form-textarea {
  min-height: 160rpx;
  background: #f8f9fa;
  border: none;
  border-radius: 16rpx;
  padding: 20rpx 24rpx;
  font-size: 28rpx;
  color: #333;
}

.photo-upload {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.photo-preview {
  position: relative;
  width: 160rpx;
  height: 160rpx;
}

.photo-btn {
  width: 160rpx;
  height: 160rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.photo-btn .iconfont {
  font-size: 48rpx;
  color: #666;
  margin-bottom: 8rpx;
}

.btn-text {
  font-size: 24rpx;
  color: #666;
}

.photo-preview {
  position: relative;
}

.photo-img {
  width: 160rpx;
  height: 160rpx;
  border-radius: 16rpx;
}

.photo-del {
  position: absolute;
  top: -16rpx;
  right: -16rpx;
  width: 40rpx;
  height: 40rpx;
  background: rgba(0,0,0,0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.delete-icon {
  color: #ff4d4f;
  font-size: 32rpx;
  font-weight: bold;
  line-height: 1;
}

.submit-btn {
  width: 100%;
  height: 88rpx;
  background: #409eff;
  color: #fff;
  font-size: 32rpx;
  font-weight: 500;
  border-radius: 44rpx;
  margin-top: 48rpx;
}

.submit-btn:active {
  opacity: 0.9;
}

/* 运维记录样式 */
.maintenance-section {
  margin-bottom: 32rpx;
  padding: 24rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 700;
  color: #333;
  margin-bottom: 24rpx;
}

.maintenance-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.maintenance-item {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  border: 1px solid #e0e0e0;
}

.maintenance-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16rpx;
  line-height: 1.6;
}

.maintenance-row:last-child {
  margin-bottom: 0;
}

.maintenance-label {
  font-size: 26rpx;
  color: #666;
  width: 240rpx;
  flex-shrink: 0;
}

.maintenance-value {
  font-size: 26rpx;
  color: #333;
  flex: 1;
  word-break: break-all;
}

.maintenance-actions {
  margin-top: 20rpx;
  padding-top: 20rpx;
  border-top: 1px solid #e0e0e0;
  display: flex;
  justify-content: flex-end;
}

.action-btn {
  padding: 12rpx 24rpx;
  border-radius: 16rpx;
  font-size: 24rpx;
  font-weight: 500;
  border: none;
  margin-left: 16rpx;
}

.complete-btn {
  background: linear-gradient(135deg, #52c41a, #73d13d);
  color: #fff;
  box-shadow: 0 2px 8px rgba(82,196,26,0.3);
}

.complete-btn:active {
  opacity: 0.9;
  transform: scale(0.98);
}

.view-btn {
  background: linear-gradient(135deg, #409eff, #66b1ff);
  color: #fff;
  box-shadow: 0 2px 8px rgba(64,158,255,0.3);
}

.view-btn:active {
  opacity: 0.9;
  transform: scale(0.98);
}

.status-badge {
  display: inline-block;
  padding: 6rpx 12rpx;
  border-radius: 12rpx;
  font-size: 22rpx;
  font-weight: 500;
  white-space: nowrap;
}

.status-badge.status-normal {
  background: #e6f7ff;
  color: #1890ff;
  border: 1px solid #91d5ff;
}

.status-badge.status-urgent {
  background: #fff7e6;
  color: #fa8c16;
  border: 1px solid #ffd591;
}

.status-badge.status-overdue {
  background: #fff1f0;
  color: #ff4d4f;
  border: 1px solid #ffccc7;
}

.status-badge.status-default {
  background: #f5f5f5;
  color: #999;
  border: 1px solid #d9d9d9;
}

.empty-maintenance {
  text-align: center;
  padding: 60rpx 0;
  color: #999;
  font-size: 28rpx;
}

/* 盘点按钮区域 */
.inventory-action-section {
  margin-top: 32rpx;
  margin-bottom: 32rpx;
  display: flex;
  justify-content: center;
}

.inventory-action-btn {
  width: 200rpx;
  height: 80rpx;
  background: linear-gradient(135deg, #409eff, #66b1ff);
  color: #fff;
  border: none;
  border-radius: 40rpx;
  font-size: 32rpx;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(64,158,255,0.3);
  transition: all 0.3s ease;
}

.inventory-action-btn:active {
  transform: scale(0.95);
  box-shadow: 0 2px 8px rgba(64,158,255,0.4);
}

/* 盘点弹窗样式 */
.inventory-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 40rpx;
  box-sizing: border-box;
}

.modal-content {
  background: #fff;
  border-radius: 24rpx;
  width: 100%;
  /* max-width: 600rpx; */
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx 24rpx;
  border-bottom: 1px solid #e0e0e0;
}

.modal-title {
  font-size: 36rpx;
  font-weight: 700;
  color: #333;
}

.modal-close {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f5f5f5;
  cursor: pointer;
}

.modal-close:active {
  background: #e0e0e0;
}

.close-icon {
  font-size: 48rpx;
  color: #666;
  line-height: 1;
}

.modal-body {
  flex: 1;
  padding: 32rpx 24rpx;
  overflow-y: auto;
}

.modal-footer {
  display: flex;
  gap: 24rpx;
  padding: 24rpx;
  border-top: 1px solid #e0e0e0;
  align-items: center;
}

.modal-btn {
  flex: 1;
  height: 88rpx;
  border-radius: 44rpx;
  font-size: 32rpx;
  font-weight: 500;
  border: none;
  transition: all 0.3s ease;
  margin-top:0;
}

.cancel-btn {
  background: #f5f5f5;
  color: #666;
}

.cancel-btn:active {
  background: #e0e0e0;
  transform: scale(0.98);
}

.modal-footer .submit-btn {
  background: linear-gradient(135deg, #409eff, #66b1ff);
  color: #fff;
  box-shadow: 0 4px 12px rgba(64,158,255,0.3);
}

.modal-footer .submit-btn:active {
  opacity: 0.9;
  transform: scale(0.98);
}

/* 运维记录详情弹窗样式 */
.detail-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  padding: 40rpx;
  box-sizing: border-box;
}

.detail-modal-content {
  background: #fff;
  border-radius: 24rpx;
  width: 100%;
  max-width: 700rpx;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.detail-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx 24rpx;
  border-bottom: 1px solid #e0e0e0;
}

.detail-modal-title {
  font-size: 36rpx;
  font-weight: 700;
  color: #333;
}

.detail-modal-close {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f5f5f5;
  cursor: pointer;
}

.detail-modal-close:active {
  background: #e0e0e0;
}

.detail-modal-body {
  flex: 1;
  padding: 32rpx 24rpx;
  overflow-y: auto;
}

.detail-form-group {
  margin-bottom: 32rpx;
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.detail-form-group:last-child {
  margin-bottom: 0;
}

.detail-form-label {
  font-size: 28rpx;
  color: #666;
  font-weight: 500;
}

.detail-form-value {
  font-size: 28rpx;
  color: #333;
  line-height: 1.6;
  word-break: break-all;
}

.detail-photo-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  margin-top: 12rpx;
}

.detail-photo-preview {
  width: 200rpx;
  height: 200rpx;
  border-radius: 16rpx;
  background: #f5f5f5;
}

.detail-sign-preview {
  width: 300rpx;
  height: 200rpx;
  border-radius: 16rpx;
  background: #f5f5f5;
}

.detail-modal-footer {
  display: flex;
  padding: 24rpx;
  border-top: 1px solid #e0e0e0;
  align-items: center;
}

.detail-modal-footer .submit-btn {
  width: 100%;
  margin-top: 0;
}

/* 完成维护弹窗样式 */
.complete-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 998;
  padding: 40rpx;
  box-sizing: border-box;
}

.complete-modal-content {
  background: #fff;
  border-radius: 24rpx;
  width: 100%;
  max-width: 700rpx;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.complete-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx 24rpx;
  border-bottom: 1px solid #e0e0e0;
}

.complete-modal-title {
  font-size: 36rpx;
  font-weight: 700;
  color: #333;
}

.complete-modal-close {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f5f5f5;
  cursor: pointer;
}

.complete-modal-close:active {
  background: #e0e0e0;
}

.complete-modal-body {
  flex: 1;
  padding: 32rpx 24rpx;
  overflow-y: auto;
}

.complete-form-group {
  margin-bottom: 32rpx;
}

.complete-form-group:last-child {
  margin-bottom: 0;
}

.complete-form-label {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 16rpx;
  display: block;
}

.complete-form-input {
  height: 88rpx;
  background: #f8f9fa;
  border: none;
  border-radius: 16rpx;
  padding: 0 24rpx;
  display: flex;
  align-items: center;
  font-size: 28rpx;
}

.input-value {
  color: #333;
}

.input-placeholder {
  color: #999;
}

.complete-form-textarea {
  min-height: 160rpx;
  background: #f8f9fa;
  border: none;
  border-radius: 16rpx;
  padding: 20rpx 24rpx;
  font-size: 28rpx;
  color: #333;
  width: 100%;
  box-sizing: border-box;
}

.complete-photo-upload {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.complete-photo-preview {
  position: relative;
  width: 160rpx;
  height: 160rpx;
}

.complete-photo-img {
  width: 160rpx;
  height: 160rpx;
  border-radius: 16rpx;
}

.complete-photo-del {
  position: absolute;
  top: -16rpx;
  right: -16rpx;
  width: 40rpx;
  height: 40rpx;
  background: rgba(0,0,0,0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.complete-photo-btn {
  width: 160rpx;
  height: 160rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
}

.complete-photo-btn .iconfont {
  font-size: 48rpx;
  color: #666;
  margin-bottom: 8rpx;
}

/* 签名区域样式 */
.signature-wrapper {
  background: #fff;
  border: 2px solid #e0e0e0;
  border-radius: 16rpx;
  padding: 20rpx;
}

.signature-canvas {
  width: 100%;
  height: 300rpx;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8rpx;
  touch-action: none;
  box-sizing: border-box;
}

.signature-actions {
  margin-top: 16rpx;
  display: flex;
  justify-content: flex-end;
}

.signature-btn {
  padding: 12rpx 24rpx;
  background: #f5f5f5;
  color: #666;
  border: none;
  border-radius: 16rpx;
  font-size: 24rpx;
}

.signature-btn:active {
  background: #e0e0e0;
}

.complete-modal-footer {
  display: flex;
  gap: 24rpx;
  padding: 24rpx;
  border-top: 1px solid #e0e0e0;
  align-items: center;
}

.complete-modal-footer .cancel-btn {
  flex: 1;
  margin-top: 0;
}

.complete-modal-footer .submit-btn {
  flex: 1;
  margin-top: 0;
}
</style>