<template>
  <div class="mod-config">
    <el-form :inline="true" label-position="top">
      <el-form-item label="入库状态">
        <el-select v-model="queryHeaderData.inStockFlag" placeholder="请选择" style="width: 120px;">
          <el-option label="全部" value=""></el-option>
          <el-option label="未入库" value="X"></el-option>
          <el-option label="已出库" value="N"></el-option>
          <el-option label="在库" value="Y"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="物料编号">
        <el-input style="width: 120px;" v-model="queryHeaderData.partNo" placeholder="请输入物料编号"></el-input>
      </el-form-item>
      <el-form-item label="批次号">
        <el-input style="width: 120px;" v-model="queryHeaderData.batchNo" placeholder="请输入批次号"></el-input>
      </el-form-item>
      <el-form-item label="库位">
        <el-input style="width: 120px;" v-model="queryHeaderData.locationId" placeholder="请输入库位"></el-input>
      </el-form-item>
      <el-form-item label="标签ID">
        <el-input style="width: 120px;" v-model="queryHeaderData.unitId" placeholder="请输入标签ID"></el-input>
      </el-form-item>
      <el-form-item label="物料描述">
        <el-input style="width: 120px;" v-model="queryHeaderData.partDesc" placeholder="请输入物料描述"></el-input>
      </el-form-item>
      <el-form-item label="所在栈板">
        <el-input style="width: 120px;" v-model="queryHeaderData.palletId" ></el-input>
      </el-form-item>
      <el-form-item label="栈板所在区域">
        <el-input style="width: 120px;" v-model="queryHeaderData.stationArea" ></el-input>
      </el-form-item>
      <el-form-item style="margin-top: 20px;">
        <el-button @click="getDataList()" type="primary">查询</el-button>
        <el-button @click="resetQuery()" type="default">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table
      id="labelQueryTable"
      :height="height"
      :data="dataList"
      border
      v-loading="dataListLoading || printLoading"
      :element-loading-text="loadingText"
      style="width: 100%; margin-bottom: 15px;">

      <el-table-column prop="unitId" label="标签ID" min-width="150" show-overflow-tooltip></el-table-column>
      <el-table-column prop="partNo" label="物料编号" min-width="120" show-overflow-tooltip></el-table-column>
      <el-table-column prop="partDesc" label="物料描述" min-width="150" show-overflow-tooltip></el-table-column>
      <el-table-column prop="batchNo" label="批次号" min-width="120" show-overflow-tooltip></el-table-column>
      <el-table-column prop="locationId" label="库位" min-width="100" show-overflow-tooltip></el-table-column>
      <el-table-column prop="warehouseId" label="仓库" min-width="100" show-overflow-tooltip></el-table-column>
      <el-table-column prop="qty" label="数量" min-width="80" align="right"></el-table-column>
      <el-table-column prop="palletId" label="所在栈板" min-width="80" align="center"></el-table-column>
      <el-table-column prop="stationId" label="所在站点" min-width="80" align="center"></el-table-column>
      <el-table-column prop="stationArea" label="所在区域" min-width="200" align="center"></el-table-column>
      <el-table-column prop="height" label="高度(mm)" min-width="100" align="right"></el-table-column>
      <el-table-column prop="reserveFlag" label="是否预留" min-width="80" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.reserveFlag === 'Y' ? '是' : '否' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="reserveOrderRef1" label="预留单号1" min-width="120" show-overflow-tooltip></el-table-column>
      <el-table-column prop="reserveOrderRef2" label="预留单号2" min-width="120" show-overflow-tooltip></el-table-column>
      <el-table-column prop="reserveOrderRef3" label="预留单号3" min-width="120" show-overflow-tooltip></el-table-column>

      <el-table-column label="操作" min-width="100" fixed="right" align="center">
        <template slot-scope="scope">
          <a type="text" @click="showEditDialog(scope.row)">修改库位</a>
        </template>
      </el-table-column>

    </el-table>

    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

    <!-- 修改库位弹窗 - rqrq -->
    <el-dialog
      title="修改库位信息"
      :visible.sync="editDialogVisible"
      :close-on-click-modal="false"
      v-drag
      width="800px">
      <el-form :model="editForm" ref="editForm" label-position="top" style="margin-top: 1px; margin-left: 0px;">
        <!-- 第一行：基本信息（只读） - rqrq -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="标签ID">
              <el-input v-model="editForm.unitId" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="物料编号">
              <el-input v-model="editForm.partNo" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="批次号">
              <el-input v-model="editForm.batchNo" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第二行：可编辑字段 - rqrq -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="仓库" prop="warehouseId">
              <el-input v-model="editForm.warehouseId" placeholder="请输入仓库"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="库位" prop="locationId">
              <el-input v-model="editForm.locationId" placeholder="请输入库位"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否在库" prop="inStockFlag">
              <el-select v-model="editForm.inStockFlag" placeholder="请选择" style="width: 100%">
                <el-option label="在库" value="Y"></el-option>
                <el-option label="已出库" value="N"></el-option>
                <el-option label="未入库" value="X"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第三行：预留信息 - rqrq -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="是否预留" prop="reserveFlag">
              <el-select v-model="editForm.reserveFlag" @change="handleReserveFlagChange" placeholder="请选择" style="width: 100%">
                <el-option label="是" value="Y"></el-option>
                <el-option label="否" value="N"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预留单号1">
              <el-input v-model="editForm.reserveOrderRef1" placeholder="请输入预留单号1"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预留单号2">
              <el-input v-model="editForm.reserveOrderRef2" placeholder="请输入预留单号2"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第四行：预留单号3和高度 - rqrq -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="预留单号3">
              <el-input v-model="editForm.reserveOrderRef3" placeholder="请输入预留单号3"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="高度(mm)">
              <el-input v-model="editForm.height" type="number" placeholder="请输入高度"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveEdit" :disabled="editLoading">
          {{ editLoading ? '保存中...' : '确定' }}
        </el-button>
        <el-button @click="editDialogVisible = false" :disabled="editLoading">取消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { getHandlingUnitLabelList, reprintLabel, deleteLabel, updateLabelLocation } from '@/api/warehouse/labelQuery'
import { searchSysLanguagePackList, saveUserFavorite, searchUserFavorite } from '@/api/sysLanguage'
import { createOtherInboundHU, printLabel } from '@/api/warehouse/otherInbound'
import {getHandlingUnitLabelAll, getHandlingUnitLabelListLocation} from '../../../api/warehouse/labelQuery'

export default {
  data() {
    return {
      dataForm: {
        key: ''
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 50,
      totalPage: 0,
      dataListLoading: false,
      printLoading: false,
      loadingText: '加载中...',
      dataListSelections: [],
      favorite: false,
      height: 500,
      queryHeaderData: {
        inStockFlag: '',
        partNo: '',
        batchNo: '',
        locationId: '',
        unitId: '',
        partDesc: '',
        stationArea:'',
        palletId:'',
      },
      // 打印相关配置
      reportId: 'HU_LABEL', // 默认报表ID，可根据实际情况调整
      zplCode: '', // ZPL代码
      paperSize: 'A4',
      orientation: 'portrait',
      dpi: 203,
      // 修改库位相关 - rqrq
      editDialogVisible: false,
      editLoading: false,
      editForm: {
        unitId: '',
        partNo: '',
        batchNo: '',
        warehouseId: '',
        locationId: '',
        inStockFlag: '',
        reserveFlag: 'N',
        reserveOrderRef1: '',
        reserveOrderRef2: '',
        reserveOrderRef3: '',
        height: ''
      },
      // 其它入库标签打印相关
      otherInboundVisible: false,
      otherInboundLoading: false,
      otherInboundForm: {
        partNo: '',
        partDesc: '',
        batchNo: '',
        locationId: '',
        warehouseId: '',
        wdr: '*',
        qty: 1,
        umId: '个',
        packageCount: 1,
        manufactureDate: '',
        expiredDate: '',
        remark: ''
      },
      otherInboundRules: {
        partNo: [
          { required: true, message: '物料编码不能为空', trigger: 'blur' }
        ],
        partDesc: [
          { required: true, message: '物料描述不能为空', trigger: 'blur' }
        ],
        batchNo: [
          { required: true, message: '批次号不能为空', trigger: 'blur' }
        ],
        locationId: [
          { required: true, message: '库位不能为空', trigger: 'blur' }
        ],
        warehouseId: [
          { required: true, message: '仓库不能为空', trigger: 'blur' }
        ],
        qty: [
          { required: true, message: '数量不能为空', trigger: 'blur' },
          { type: 'number', min: 0.01, message: '数量必须大于0', trigger: 'blur' }
        ],
        umId: [
          { required: true, message: '单位不能为空', trigger: 'blur' }
        ],
        packageCount: [
          { required: true, message: '包装数不能为空', trigger: 'blur' },
          { type: 'number', min: 1, message: '包装数必须大于等于1', trigger: 'blur' }
        ]
      }
    }
  },
  activated() {
    this.getDataList()
    this.getHeight()
  },
  mounted() {
    this.getDataList()
    this.getHeight()
  },
  methods: {
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      const params = {
        page: this.pageIndex,
        size: this.pageSize,
        site: localStorage.getItem('site'),
        ...this.queryHeaderData
      }

      getHandlingUnitLabelAll(params).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list || []
          this.totalPage = data.page.totalCount || 0
        } else {
          this.dataList = []
          this.totalPage = 0
          this.$message.error(data.msg || '查询失败')
        }
        this.dataListLoading = false
      }).catch(() => {
        this.dataList = []
        this.totalPage = 0
        this.dataListLoading = false
      })
    },

    // 重置查询条件
    resetQuery() {
      this.queryHeaderData = {
        inStockFlag: '',
        partNo: '',
        batchNo: '',
        locationId: '',
        unitId: '',
        partDesc: ''
      }
      this.pageIndex = 1
      this.getDataList()
    },





    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },

    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },

    // 格式化日期
    formatDate(date) {
      if (!date) return ''
      const d = new Date(date)
      const year = d.getFullYear()
      const month = String(d.getMonth() + 1).padStart(2, '0')
      const day = String(d.getDate()).padStart(2, '0')
      const hours = String(d.getHours()).padStart(2, '0')
      const minutes = String(d.getMinutes()).padStart(2, '0')
      const seconds = String(d.getSeconds()).padStart(2, '0')
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    },


    // 获取表格高度
    getHeight() {
      this.$nextTick(() => {
        this.height = window.innerHeight - 220
      })
    },

    // 打开修改库位弹窗 - rqrq
    showEditDialog(row) {
      this.editForm = {
        unitId: row.unitId,
        partNo: row.partNo,
        batchNo: row.batchNo,
        warehouseId: row.warehouseId || '',
        locationId: row.locationId || '',
        inStockFlag: row.inStockFlag || '',
        reserveFlag: row.reserveFlag || 'N',
        reserveOrderRef1: row.reserveOrderRef1 || '',
        reserveOrderRef2: row.reserveOrderRef2 || '',
        reserveOrderRef3: row.reserveOrderRef3 || '',
        height: row.height || ''
      }
      this.editDialogVisible = true
    },

    // 是否预留变化处理 - rqrq
    handleReserveFlagChange(value) {
      if (value === 'N') {
        // 选择N时清空3个预留单号 - rqrq
        this.editForm.reserveOrderRef1 = ''
        this.editForm.reserveOrderRef2 = ''
        this.editForm.reserveOrderRef3 = ''
      }
    },

    // 保存修改 - rqrq
    saveEdit() {
      // 参数校验 - rqrq
      if (!this.editForm.warehouseId) {
        this.$message.error('仓库不能为空')
        return
      }
      if (!this.editForm.locationId) {
        this.$message.error('库位不能为空')
        return
      }

      this.editLoading = true

      const params = {
        site: localStorage.getItem('site'),
        unitId: this.editForm.unitId,
        warehouseId: this.editForm.warehouseId,
        locationId: this.editForm.locationId,
        inStockFlag: this.editForm.inStockFlag,
        reserveFlag: this.editForm.reserveFlag,
        reserveOrderRef1: this.editForm.reserveOrderRef1,
        reserveOrderRef2: this.editForm.reserveOrderRef2,
        reserveOrderRef3: this.editForm.reserveOrderRef3,
        height: this.editForm.height
      }

      updateLabelLocation(params).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message.success('修改成功')
          this.editDialogVisible = false
          this.getDataList()
        } else {
          this.$message.error(data.msg || '修改失败')
        }
      }).catch(() => {
        this.$message.error('修改失败')
      }).finally(() => {
        this.editLoading = false
      })
    }

  }
}
</script>

<style>
.mod-config .el-form-item {
  margin-bottom: 15px;
}
.sl-svg {
  font-size: 20px;
  cursor: pointer;
  color: #409EFF;
}

/* 其它入库标签打印表单样式 */
.other-inbound-form .form-item-vertical {
  margin-bottom: 20px;
}

.other-inbound-form .form-item-vertical .el-form-item__label {
  display: block;
  text-align: left;
  padding: 0 0 8px 0;
  line-height: 1.5;
  font-weight: 500;
}

.other-inbound-form .form-item-vertical .el-form-item__content {
  margin-left: 0 !important;
}

.other-inbound-form .el-row {
  margin-bottom: 0;
}
</style>
