<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 required">调整重量(KG)</text>
            <input class="form-input" type="digit" placeholder="请输入调整后的重量" v-model="form.weight" />
          </view>
          <view class="form-item">
            <text class="form-label required">调整原因</text>
            <picker class="form-value" mode="selector" :range="reasonOptions" range-key="label" @change="onReasonChange">
              <text>{{ reasonLabel || '请选择' }}</text>
              <uni-icons type="right" size="14" color="#cccccc"></uni-icons>
            </picker>
          </view>
        </view>
      </view>
      
      <view class="data-list">
        <view class="data-card">
          <view class="data-card-header">
            <text class="data-card-title">{{ (recordData.list && recordData.list[1]) || '' }}</text>
            <text class="data-card-tag orange">待调整</text>
          </view>
          <view class="data-card-row"><text>当前状态:</text><text class="val">{{ recordData.lx || '' }}</text></view>
          <view class="data-card-row"><text>数字识别码:</text><text class="val">{{ recordData.list && recordData.list[2] || '' }}</text></view>
          <view class="data-card-row"><text>当前重量:</text><text class="val">{{ (recordData.list && recordData.list[0]) || '' }}</text></view>
          <view class="data-card-row"><text>登记时间:</text><text class="val">{{ (recordData.list && recordData.list[3]) || '' }}</text></view>
          <!-- <view class="data-card-actions">
            <button class="btn btn-sm btn-outline" @click="handleGoSelect">选择</button>
          </view> -->
        </view>
      </view>
      
      <view class="btn-area">
        <button class="btn btn-outline" @click="handleQuery">查询</button>
        <button class="btn btn-primary" @click="handleSubmit" :disabled="!canSubmit">提交调整</button>
      </view>
    </view>

    <!-- 台账类型选择弹窗 -->
    <view class="type-modal-mask" v-if="showTypeModal" @click="showTypeModal = false">
      <view class="type-modal" @click.stop>
        <view class="type-modal-head">
          <text class="type-modal-title">选择台账类型</text>
          <text class="type-modal-close" @click="showTypeModal = false">✕</text>
        </view>
        <scroll-view class="type-modal-body" scroll-y>
          <view
            class="type-modal-item"
            v-for="item in ledgerTypeList"
            :key="item.id"
            @click="onTypeSelect(item)"
          >
            <text>{{ item.alias }}</text>
            <uni-icons type="right" size="14" color="#cccccc"></uni-icons>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
import { api } from '@/api/index'
import scanMixin from '@/utils/barcodeMixin.js'
import { getDateTime } from '@/utils/common.js'
// 库存调整
export default {
  mixins: [scanMixin],
  data() {
    return {
      reasonOptions: [
        { value: 'SAR1', label: '贮存一段时间后库存发生变化' },
        { value: 'SAR2', label: '不同称重设备导致的重量差异或原先库存重量为预估值' }
      ],
      form: {
        code: '',
        weight: '',
        reason: 'SAR1',
        time: ''
      },
      recordData: {},
      /* 选择模式回传标记 */
      isSelected: false,
      selectedItem: null,
      /* 台账类型选择弹窗 */
      showTypeModal: false,
      ledgerTypeList: []
    }
  },
  computed: {
    canSubmit() {
      return this.recordData.list && this.recordData.list.length && this.form.weight && this.form.reason
    },
    reasonLabel() {
      const found = this.reasonOptions.find(item => item.value === this.form.reason)
      return found ? found.label : ''
    }
  },
  onLoad() {
    if (this.reasonOptions.length) {
      this.form.reason = this.reasonOptions[0].value
    }
  },
  onShow() {
    // 从选择页返回时，处理选中的数据
    if (this.isSelected && this.selectedItem) {
      const item = this.selectedItem
      this.isSelected = false
      this.selectedItem = null
      
      let ledgerCode = ''
      if (typeof item === 'object' && item !== null) {
        ledgerCode = item.digital_id || item.code || ''
        if (!ledgerCode) {
          const keys = Object.keys(item)
          ledgerCode = keys.length ? (item[keys[0]] || '') : ''
        }
      } else {
        // 字符串类型：按空格分割，取第一部分作为台账编号
        const parts = String(item).split(/\s+/).filter(p => p)
        ledgerCode = parts.length > 0 ? parts[0] : ''
      }
      if (ledgerCode) {
        this.handleClickQuery(ledgerCode)
      }
    }
  },
  methods: {
    /** 扫码结果回调：填充数字识别码 -> 自动查询 */
    onBarcodeScanned(barcode) {
      this.form.code = barcode
      uni.showToast({ title: '扫码成功 ' + barcode, icon: 'none' })
      this.handleQuery()
    },
    handleQuery() {
      if (!this.form.code) return uni.showToast({ title: '请输入数字识别码', icon: 'none' })
      api.scanGet({ code: this.form.code }).then(res => {
        console.log('res', res)
        this.recordData = res.data
        this.form.weight = ''
        // this.form.reason = ''
        uni.showToast({ title: '查询成功', icon: 'success' })
      }).catch(() => {
        this.recordData = {}
      })
    },
    onReasonChange(e) {
      const index = e.detail.value
      this.form.reason = this.reasonOptions[index].value
    },
    /** 选择回传后调用 clickGet 查询数据，ledgerCode 为台账编号 */
    handleClickQuery(ledgerCode) {
      if (!ledgerCode) return
      api.clickGet({ code: ledgerCode }).then(res => {
        console.log('ledgerCode', ledgerCode)
        console.log('res', res)
        this.recordData = res.data
        // 处理 data 字段：如果是字符串则按空格分割成数组
        if (this.recordData.data && typeof this.recordData.data === 'string') {
          this.recordData.data = this.recordData.data.split(/\s+/).filter(item => item)
        }
        this.form.code = res.data.digital_id || ''
        this.form.weight = ''
        // this.form.reason = ''
      }).catch(() => {
        this.recordData = {}
      })
    },
    /** 跳转到台账列表选择页 */
    async handleGoSelect() {
      try {
        const res = await api.ledgetType()
        if (res.data.length) {
          this.ledgerTypeList = res.data.sort((a, b) => a.sort_order - b.sort_order)
          this.showTypeModal = true
        } else {
          uni.showToast({ title: '暂无可选台账类型', icon: 'none' })
        }
      } catch (e) {
        // request.js 已处理 loading 和错误提示
      }
    },
    /** 选择台账类型后跳转 detail 页 */
    onTypeSelect(item) {
      this.showTypeModal = false
      uni.navigateTo({
        url: '/pages/ledger/detail?mode=select&item=' + encodeURIComponent(JSON.stringify(item))
      })
    },
    handleSubmit() {
      if (!this.canSubmit) return
      api.adjust({
        code: this.form.code,
        weight: parseFloat(this.form.weight),
        time: getDateTime(),
        reason: this.form.reason
      }).then(res => {
        uni.showToast({ title: '提交成功', icon: 'success' })
        setTimeout(() => { 
          this.recordData = {}; 
          this.form = { 
            code: '', 
            weight: '', 
            reason: this.reasonOptions[0].value,
            time: '' 
          } 
        }, 1500)
      }).catch(() => {
        // request.js 已处理 loading 和错误提示
      })
    },
  }
}
</script>

<style lang="scss" scoped>

.data-card-tag.orange {
  background-color: #fff7e6;
  color: #fa8c16;
  border: 1px solid #ffd591;
}

/* 台账类型选择弹窗 */
.type-modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  z-index: 999;
}

.type-modal {
  width: 100%;
  max-height: 60vh;
  background: #ffffff;
  border-radius: $border-radius-xl $border-radius-xl 0 0;
  display: flex;
  flex-direction: column;
}

.type-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: $spacing-md;
  border-bottom: 1px solid $border-color;
}

.type-modal-title {
  font-size: $font-size-lg;
  font-weight: 600;
  color: $text-primary;
}

.type-modal-close {
  font-size: $font-size-lg;
  color: $text-placeholder;
  padding: 4px;
}

.type-modal-body {
  flex: 1;
  overflow-y: auto;
}

.type-modal-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: $spacing-md;
  border-bottom: 1px solid $border-light;
  font-size: $font-size-base;
  color: $text-primary;

  &:active {
    background: $bg-primary;
  }
}
</style>