<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" placeholder="请输入数字识别码" v-model="form.code" />
              <view class="input-extra">
                <button class="btn btn-sm btn-outline" @click="scanCode">扫码</button>
              </view>
            </view>
          </view>
          <view class="form-item">
            <text class="form-label">危废名称</text>
            <text class="form-value">{{ previewData.fwmc || '-' }}</text>
          </view>
          <view class="form-item">
            <text class="form-label">产生时间</text>
            <text class="form-value">{{ previewData.cssj || '-' }}</text>
          </view>
        </view>
      </view>

      <!-- 标签预览 -->
      <view class="label-preview">
        <view class="label-header" @click="expanded = !expanded">
          <text>危废标签</text>
          <text class="label-toggle">{{ expanded ? '收起 ▲' : '更多 ▼' }}</text>
        </view>
        <view class="label-content" :class="{ collapsed: !expanded }">
          <view class="label-row"><text class="label-key">废物名称</text><text class="label-val">{{ previewData.fwmc }}</text></view>
          <view class="label-row"><text class="label-key">废物代码</text><text class="label-val">{{ previewData.fwdm }}</text></view>
          <view class="label-row"><text class="label-key">废物类别</text><text class="label-val">{{ previewData.fwlb }}</text></view>
          <view class="label-row"><text class="label-key">废物形态</text><text class="label-val">{{ previewData.fwxt }}</text></view>
          <view class="label-row"><text class="label-key">数字识别码</text><text class="label-val label-code">{{ previewData.szsbm }}</text></view>

          <view class="label-row"><text class="label-key">主要成分</text><text class="label-val">{{ previewData.zycf }}</text></view>
          <view class="label-row"><text class="label-key">有害成分</text><text class="label-val">{{ previewData.yhcf }}</text></view>
          <view class="label-row"><text class="label-key">危险特性</text><text class="label-val">{{ previewData.wxtx }}</text></view>
          <view class="label-row"><text class="label-key">注意事项</text><text class="label-val">{{ previewData.zysx }}</text></view>

          <view class="label-row"><text class="label-key">产生数量</text><text class="label-val">{{ previewData.csl }} {{ previewData.jldw }}</text></view>
          <view class="label-row"><text class="label-key">产生时间</text><text class="label-val">{{ previewData.cssj }}</text></view>

          <view class="label-row"><text class="label-key">单位名称</text><text class="label-val">{{ previewData.dwmc }}</text></view>
          <view class="label-row"><text class="label-key">联系人</text><text class="label-val">{{ previewData.lxr }}</text></view>
          <view class="label-row"><text class="label-key">联系电话</text><text class="label-val">{{ previewData.lxrsj }}</text></view>

          <view class="label-row"><text class="label-key">容器类型</text><text class="label-val">{{ previewData.rqlx }}</text></view>
          <view class="label-row"><text class="label-key">容器材质</text><text class="label-val">{{ previewData.rqcz }}</text></view>
          <view class="label-row"><text class="label-key">容器容量</text><text class="label-val">{{ previewData.rqrl }}</text></view>


        </view>
      </view>

      <view class="btn-area">
        <button class="btn btn-outline" @click="handleQuery">查询</button>
        <button class="btn btn-primary" @click="handlePrint" :disabled="!previewData.fwmc">打印标签</button>
      </view>
    </view>
  </view>
</template>

<script>
import { api } from '@/api/index'
import scanMixin from '@/utils/barcodeMixin.js'
// #ifdef APP-PLUS
import printerService from '@/utils/BluetoothPrinterService.js'
// #endif

export default {
  mixins: [scanMixin],
  data() {
    return {
      form: { code: '' },
      previewData: {},
      expanded: false
    }
  },
  methods: {
    /** 扫码结果回调：填充数字识别码 -> 自动查询 */
    onBarcodeScanned(barcode) {
      this.form.code = barcode
      uni.showToast({ title: '扫码成功 ' + barcode, icon: 'none' })
      this.handleQuery()
    },

    // 查询
    async handleQuery() {
      if (!this.form.code) return uni.showToast({ title: '请输入数字识别码', icon: 'none' })

      try {
        const res = await api.labelPrint({ code: this.form.code })

        if (res.data) {
          this.previewData = res.data
          uni.showToast({ title: '查询成功', icon: 'none' })
        } else {
          this.previewData = {}
          uni.showToast({ title: res.msg || '未查询到数据', icon: 'none' })
        }
      } catch (e) {
        // request.js 已处理 loading 和错误提示
        console.error('[补打] 查询失败:', e)
      }
    },
    async handlePrint() {
      if (!this.previewData.fwmc) {
        return uni.showToast({ title: '请先查询危废信息', icon: 'none' })
      }
      // #ifdef APP-PLUS
      const printData = this.printData()
      uni.showToast({ title: '打印中...', icon: 'none' })
      try {
        await printerService.init()
        await printerService.autoConnect()
        await printerService.printWasteLabel(printData)
        await this.handleDisconnect()
        uni.showToast({ title: '打印成功', icon: 'success' })
      } catch (error) {
        console.error('[补打] 打印失败:', error)
        uni.showToast({ title: '打印失败: ' + error, icon: 'none' })
      }
      // #endif
      // #ifdef MP
      uni.showToast({ title: '小程序暂不支持蓝牙打印', icon: 'none' })
      // #endif
    },
    // #ifdef APP-PLUS
    /** 断开蓝牙连接 */
    async handleDisconnect() {
      try {
        await printerService.disconnect()
      } catch (err) {
        console.warn('[补打] 蓝牙断开失败:', err)
      }
    },
    // #endif
    printData() {
      const printData = {
        'mingcheng': this.previewData.fwmc || '', // 危废名称
        'leibie': this.previewData.fwlb || '', // 危废类别
        'daima': this.previewData.fwdm || '', // 危废代码
        'xingtai': this.previewData.fwxt || '-', // 废物形态
        'zhuyaochengfen': this.previewData.zycf || '-', // 主要成分
        'youhaichengfen': this.previewData.yhcf || '-', // 有害成分
        'zhuyi': this.previewData.zysx || '-', // 注意事项
        'shibiema': this.previewData.szsbm || '', // 数字识别码
        'danwei': this.previewData.dwmc || '', // 单位名称
        'lianxi': this.previewData.lxr || '', // 联系人
        'riqi': this.previewData.cssj || '', // 产生时间
        'zhongliang': (this.previewData.csl || '') + ' ' + (this.previewData.jldw || ''), // 重量
        'beizhu': '危险特性: ' + (this.previewData.wxtx || '-'), // 备注
        'biaoshi': '', // 标识
        'qrcode': this.previewData.wxfwbqewm || '', // 二维码
        'lianxidianhua': this.previewData.lxrsj || '', // 联系电话
        'rongqileixing': this.previewData.rqlx || '', // 容器类型
        'rongqicaizhi': this.previewData.rqcz || '', // 容器材质
        'rongqirongliang': this.previewData.rqrl || '', // 容器容量
      }
      return printData
    }
  }
}
</script>

<style lang="scss" scoped>

.label-preview {
  background: #ffffff;
  margin: 0 $spacing-md $spacing-md;
  border-radius: $border-radius-md;
  border: 2px dashed $border-color;
  overflow: hidden;
}
.label-header {
  background: $primary-color;
  color: #ffffff;
  text-align: center;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.label-toggle {
  font-size: 12px;
  font-weight: 400;
  opacity: 0.9;
}
// 收起时隐藏第6条及以后的行
.label-content.collapsed .label-row:nth-child(n+6) {
  display: none;
}
.label-content {
  padding: $spacing-md;
}
.label-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid $border-light;
  &:last-child { border-bottom: none; }
}
.label-section-title {
  padding: 10px 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: $primary-color;
  border-bottom: 1px solid $border-light;
  margin-bottom: 4px;
  &:first-child { padding-top: 0; }
}
.label-key { color: $text-secondary; font-size: 13px; }
.label-val { color: $text-primary; font-size: 13px; font-weight: 500; }
.label-code {
  font-size: 11px !important;
  word-break: break-all;
  text-align: right;
  max-width: 60%;
}
.label-reprint {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: $danger-color;
  margin-top: 8px;
}
</style>
