<template>
  <view class="page-container">
    <view class="page-body">
      <!-- 入库表单 -->
      <view class="form-section">
        <view class="form-group">
          <view class="form-item">
            <text class="form-label required">数字识别码</text>
            <view class="input-row">
              <input class="form-input" v-model="formData.digitalId" placeholder="输入或扫码" />
              <view class="input-extra" style="margin-left: 8px;">
                <button class="btn btn-sm btn-outline" @click="scanCode">扫码</button>
              </view>
            </view>
          </view>

          <view class="form-item">
            <text class="form-label">入库时间</text>
            <view class="form-value">{{ formData.entryDateTime }}</view>            
          </view>

          <!-- <view class="form-item">
            <text class="form-label required">贮存设施</text>
            <picker class="form-value" :range="storageFacilities" range-key="label" :value="storageFacilityIndex" @change="onStorageFacilityChange">
              <text>{{ formData.storageFacilityName || '选择贮存设施' }}</text>
            </picker>
          </view> -->

          <view class="form-item">
            <text class="form-label required">贮存经办人</text>
            <picker class="form-value" :range="operators" range-key="name" :value="storageManagerIndex" @change="onStorageManagerChange">
              <text>{{ formData.storageManagerName || '选择贮存经办人' }}</text>
              <uni-icons type="right" size="14" color="#cccccc"></uni-icons>
            </picker>
          </view>

          <view class="form-item">
            <text class="form-label required">运送经办人</text>
            <picker class="form-value" :range="operators" range-key="name" :value="transportManagerIndex" @change="onTransportManagerChange">
              <text>{{ formData.transportManagerName || '选择运送经办人' }}</text>
              <uni-icons type="right" size="14" color="#cccccc"></uni-icons>
            </picker>
          </view>

        </view>
      </view>
      <!-- 自动扫码入库开关 -->
      <view class="auto-scan-section">
        <view class="form-item switch-row">
          <text class="form-label">自动扫码入库</text>
          <switch :checked="autoScanSubmit" @change="onAutoScanSwitchChange" color="#007AFF" />
        </view>
      </view>

      <!-- 按钮 -->
      <view class="btn-area" v-if="!autoScanSubmit">
        <button class="btn btn-primary" :disabled="!canSubmit" @click="handleSubmit(false)">确认入库</button>
      </view>


      <!-- 扫码入库记录 -->
      <scan-records 
        :records="scanRecords"
        title="扫码记录"
        empty-text="暂无扫码记录"
        @clear="clearScanRecords"
      />

      <!-- 入库历史 -->
      <inout-history
        :records="inRecords"
        title="入库历史"
        empty-text="暂无入库历史"
      />

    </view>
  </view>
</template>

<script>
import { api } from '@/api'
import { getDateTime, getTime } from '@/utils/common.js'
// #ifdef APP-PLUS
import scan from '@/utils/scan.js'
// #endif
import ScanRecords from '@/components/common/scan-records.vue'
import InoutHistory from '@/components/common/inout-history.vue'
import { mapState } from 'vuex'

/**
 * 入库页
 *
 * 提交数据：数字识别码(digitalId)、入库时间(entryDateTime)、
 * 贮存经办人(storageManagerCode)、运送经办人(transportManagerCode)
 *
 * 扫码方式：通过全局统一扫码模块 scan.js，
 * 由 store/scan.scanMode 决定使用 iData 专用扫码 还是 通用 Android 扫码
 * 扫码 -> 自动填充数字识别码 -> 开启自动提交时延时入库
 */
export default {
  components: {
    ScanRecords,
    InoutHistory
  },
  data() {
    return {
      autoScanSubmit: true,       // 是否开启自动扫码提交
      isAutoSubmitting: false,    // 自动提交防重锁
      scanRecords: [],            // 扫码入库记录列表
      formData: {
        digitalId: '',            // 数字识别码（扫码或手动输入）
        entryDateTime: '',        // 入库时间
        storageManagerId: '',     // 贮存经办人 id
        storageManagerName: '',   // 贮存经办人姓名
        storageManagerCode: '',   // 贮存经办人编码
        transportManagerId: '',   // 运送经办人 id
        transportManagerName: '', // 运送经办人姓名
        transportManagerCode: ''  // 运送经办人编码
      },
      // 操作人员选项
      operators: [
        // { id: 1, name: '李伟', code: 'H_ZC_001' },
        // { id: 2, name: '张明', code: 'H_ZC_002' },
        // { id: 3, name: '王芳', code: 'H_ZC_003' },
        // { id: 4, name: '刘强', code: 'H_ZC_004' }
      ],
      storageManagerIndex: 0,     // 当前选中的贮存经办人下标
      transportManagerIndex: 0,    // 当前选中的运送经办人下标
      inRecords: [] // 入库历史记录
    }
  },
  computed: {
    // 从 store 获取当前扫码模式（idata / android）
    ...mapState('scan', ['scanMode']),
    // 提交按钮可用判定：数字识别码、贮存设施、两个经办人、入库时间，缺一不可
    canSubmit() {
      return this.formData.digitalId &&
        // this.formData.storageFacility &&
        this.formData.storageManagerCode && this.formData.transportManagerCode &&
        this.formData.entryDateTime
    }
  },
  onLoad() {
    // #ifdef APP-PLUS
    this.initScanner()         // 初始化扫码模块
    // #endif
  },
  async mounted() {
    await this.initData()
    this.initDefaultValues()   // 初始化默认值（时间、设施、经办人）
  },
  onUnload() {
    // #ifdef APP-PLUS
    this.cleanupScanner()      // 页面卸载时注销扫码回调
    // #endif
  },
  methods: {
    async initData() {
      await this.getInRecords()
      await this.getOperators()
    },
    // 获取入库历史记录
    async getInRecords() {
      this.inRecords = await api.hwInlist().then(res => {
        return res.data.list
      })
    },
    // 获取经办人
    async getOperators() {
      // 1.产生，2.贮存，3.运送，4.出库
        const res = await api.handler({ type: 2 })
        console.log('handler', res)
        if (res.code == 1000) {
          this.operators = res.data.map(res => {
            return {
              id: res.handler_code,
              name: res.handler_name,
              code: res.handler_code
            }
          })
        }
    },

    // ==================== 初始化 ====================
    /** 初始化全部默认值 */
    initDefaultValues() {
      this.setDefaultOperators()
      this.formData.entryDateTime = getDateTime()
    },
    /** 默认选中第一个贮存经办人和运送经办人 */
    setDefaultOperators() {
      if (this.operators.length > 0) {
        this.storageManagerIndex = 0
        this.transportManagerIndex = 0
        this.formData.storageManagerId = this.operators[0].id
        this.formData.storageManagerName = this.operators[0].name
        this.formData.storageManagerCode = this.operators[0].code
        this.formData.transportManagerId = this.operators[0].id
        this.formData.transportManagerName = this.operators[0].name
        this.formData.transportManagerCode = this.operators[0].code
      }
    },

    // #ifdef APP-PLUS
    // ==================== APP原生扫码模块 ====================
    /**
     * 初始化扫码
     * 根据 store 中的 scanMode 设置 idata/android 模式，并注册扫码回调
     */
    initScanner() {
      try {
        scan.setMode(this.scanMode)
        scan.init()
        scan.register((codeStr) => {
          this.onBarcodeScanned(codeStr)
        })
      } catch (e) {
        console.error('[入库] 扫码初始化失败:', e)
      }
    },
    /** 页面卸载时注销扫码回调，防止内存泄漏 */
    cleanupScanner() {
      scan.unregister()
    },
    /** APP端扫码按钮：点一次开始扫描，再点一次停止扫描 */
    scanCode() {
      if (scan.isScanning()) {
        scan.stopScan()
      } else {
        scan.startScan()
      }
    },
    // #endif

    // #ifdef MP
    // ==================== 小程序兼容扫码模块 ====================
    /** 小程序端扫码按钮：调用uni跨平台扫码API */
    scanCode() {
      uni.scanCode({
        success: (res) => {
          this.onBarcodeScanned(res.result)
        },
        fail: (err) => {
          console.error('[入库] 小程序扫码失败:', err)
          if (err.errMsg && err.errMsg.indexOf('cancel') === -1) {
            uni.showToast({ title: '扫码失败', icon: 'none' })
          }
        }
      })
    },
    // #endif
    /** 扫码结果回调：填充数字识别码 -> 自动提交（如果开启） */
    onBarcodeScanned(barcode) {
      this.formData.digitalId = barcode
      uni.showToast({ title: '扫码成功 ' + barcode, icon: 'none' })
      if (this.autoScanSubmit && !this.isAutoSubmitting) {
        setTimeout(() => {
          if (this.canSubmit) {
            this.handleSubmit(true)
          }
        }, 300)
      }
    },
    // ==================== 表单选择器 ====================

    /** 贮存经办人 picker 变更 */
    onStorageManagerChange(e) {
      this.storageManagerIndex = e.detail.value
      const operator = this.operators[e.detail.value]
      this.formData.storageManagerId = operator.id
      this.formData.storageManagerName = operator.name
      this.formData.storageManagerCode = operator.code
    },
    /** 运送经办人 picker 变更 */
    onTransportManagerChange(e) {
      this.transportManagerIndex = e.detail.value
      const operator = this.operators[e.detail.value]
      this.formData.transportManagerId = operator.id
      this.formData.transportManagerName = operator.name
      this.formData.transportManagerCode = operator.code
    },

    // ==================== 入库记录 ====================
    /** 添加一条入库记录（最多保留 10 条） */
    addScanRecord(digitalId, status, message) {
      const time = getTime()
      this.scanRecords.unshift({ digitalId, status, message, time })
      if (this.scanRecords.length > 10) {
        this.scanRecords.pop()
      }
    },
    /** 清空入库记录 */
    clearScanRecords() {
      this.scanRecords = []
    },

    // ==================== 提交 & 重置 ====================
    /**
     * 提交入库
     * @param {Boolean} isAuto 是否自动提交（扫码触发）
     */
    async handleSubmit(isAuto = false) {
      if (this.isAutoSubmitting) return
      if (isAuto) {
        this.isAutoSubmitting = true
      }
      try {
        const submitData = {
          code: this.formData.digitalId,
          time: this.formData.entryDateTime,
          storage_handler: this.formData.storageManagerCode,
          transport_handler: this.formData.transportManagerCode
        }

        const res = await api.deviceHwIn(submitData)
        console.log('hwin', res)
        if (isAuto) {
          this.addScanRecord(this.formData.digitalId, 'success', '入库成功')
        }
        uni.showToast({ title: '入库成功', icon: 'success' })
        // 刷新入库历史
        this.getInRecords()
        this.resetForm()
      } catch (error) {
        console.error('入库失败:', error)
        if (isAuto) {
          this.addScanRecord(this.formData.digitalId, 'error', '入库失败')
        }
      } finally {
        if (isAuto) {
          this.isAutoSubmitting = false
        }
      }
    },
    /** 重置表单，恢复默认值 */
    resetForm() {
      this.formData = {
        digitalId: '',
        entryDateTime: '',
        storageManagerId: '',
        storageManagerName: '',
        storageManagerCode: '',
        transportManagerId: '',
        transportManagerName: '',
        transportManagerCode: ''
      }
      this.initDefaultValues()
    },
    /** 自动提交开关切换 */
    onAutoScanSwitchChange(e) {
      this.autoScanSubmit = e.detail.value
    }
  }
}
</script>

<style lang="scss" scoped>
// 日期并排布局
.date-row {
  display: flex;
  gap: 12px;
}

.date-picker {
  min-width: 120px;
}

// 输入行（带按钮）
.input-row {
  display: flex;
  align-items: center;
  flex: 1;
  // gap: 8px;
}

.input-extra {
  display: flex;
  align-items: center;
}

// 单位文本
.unit-text {
  font-size: 14px;
  color: #666;
  margin-left: 8px;
}

// 危险等级标签
.hazard-tag {
  padding: 4rpx 16rpx;
  border-radius: 4rpx;
  font-size: 12px;
  color: #fff;
}

.hazard-tag.level1 { background: #4CAF50; }
.hazard-tag.level2 { background: #8BC34A; }
.hazard-tag.level3 { background: #FFC107; }
.hazard-tag.level4 { background: #FF9800; }
.hazard-tag.level5 { background: #F44336; }

.btn-sm {
  padding: 0 12px;
  font-size: 13px;
  height: 32px;
  line-height: 32px;
}

// 自动扫码入库开关
.auto-scan-section {
  padding: 0 16px;
  // margin-bottom: 16px;
}

// 扫码状态提示
.scan-status {
  padding: 8px 16px;
  margin-top: 8px;
  background: #f0f9ff;
  border-radius: 4px;
  text-align: center;
}

.scan-status-text {
  font-size: 13px;
  color: #007AFF;
}

.switch-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #fff;
  border-radius: 8px;
}

</style>
