<template>
  <el-dialog
    :visible.sync="dialogVisible"
    width="1000px"
    append-to-body
    class="location-selector-dialog"
    :close-on-click-modal="false"
  >
    <span slot="title">
      选择库位
      <small class="title-tip">双击表格行可快速选择</small>
    </span>
    <div class="location-selector-body">
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        label-width="90px"
        class="location-selector-form"
      >
        <!-- <el-form-item label="库位编码" prop="locationCode">
          <el-input
            v-model="queryParams.locationCode"
            placeholder="请输入库位编码"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item> -->
        <el-form-item label="库位名称" prop="locationName">
          <el-input
            v-model="queryParams.locationName"
            placeholder="请输入库位名称"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <!-- <el-form-item label="仓库编码" prop="warehousesId">
          <el-input
            v-model="queryParams.warehousesId"
            placeholder="请输入仓库编码"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item> -->
        <!-- <el-form-item label="是否启用" prop="isEnabled">
          <el-select
            v-model="queryParams.isEnabled"
            placeholder="请选择"
            clearable
            style="width: 180px"
          >
            <el-option label="是" value="1" />
            <el-option label="否" value="0" />
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table
        v-loading="loading"
        :data="locationsList"
        :max-height="380"
        highlight-current-row
        @current-change="handleCurrentChange"
        @row-dblclick="handleRowDblClick"
        style="flex: 1; min-height: 0;"
      >
        <el-table-column type="index" label="#" width="60" align="center" />
        <!-- <el-table-column label="库位编码" prop="locationCode" width="150" /> -->
        <el-table-column label="库位名称" prop="locationName" min-width="150" show-overflow-tooltip />
        <el-table-column label="库位类型" prop="locationType" width="120" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.locationType === 1">货架</span>
            <span v-else-if="scope.row.locationType === 2">地面</span>
            <span v-else-if="scope.row.locationType === 3">货位</span>
            <span v-else-if="scope.row.locationType === 4">专区</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="区域代码" prop="zoneCode" width="120" />
        <!-- <el-table-column label="是否启用" prop="isEnabled" width="110" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.isEnabled === '1' || scope.row.isEnabled === 1 ? 'success' : 'info'" size="mini">
              {{ scope.row.isEnabled === '1' || scope.row.isEnabled === 1 ? '是' : '否' }}
            </el-tag>
          </template>
        </el-table-column> -->
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="confirmSelection">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { listLocationsForSelector } from "@/api/inventory/locations"

export default {
  name: "LocationSelector",
  props: {
    value: {
      type: Boolean,
      default: false
    },
    warehousesId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      locationsList: [],
      loading: false,
      total: 0,
      currentLocation: null,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        locationCode: null,
        locationName: null,
        warehousesId: null,
        isEnabled: "1"
      }
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit("input", val)
      }
    }
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.$nextTick(() => {
          this.init()
        })
      } else {
        this.resetState()
      }
    },
    warehousesId(val) {
      if (val) {
        this.queryParams.warehousesId = val
      }
    }
  },
  methods: {
    init() {
      // 如果传入了仓库编码，则自动设置查询条件
      if (this.warehousesId) {
        this.queryParams.warehousesId = this.warehousesId
      }
      if (this.locationsList.length === 0) {
        this.getList()
      } else {
        // 如果仓库编码变化，重新查询
        this.getList()
      }
    },
    resetState() {
      this.currentLocation = null
    },
    getList() {
      this.loading = true
      listLocationsForSelector(this.queryParams)
        .then(res => {
          this.locationsList = res.rows || []
          this.total = res.total || 0
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        locationCode: null,
        locationName: null,
        isEnabled: "1",
        warehousesId: this.warehousesId || null
      }
      // 如果传入了仓库编码，确保设置到查询参数中
      if (this.warehousesId) {
        this.queryParams.warehousesId = this.warehousesId
      }
      this.getList()
    },
    handleCurrentChange(row) {
      this.currentLocation = row
    },
    handleRowDblClick(row) {
      this.currentLocation = row
      this.confirmSelection()
    },
    confirmSelection() {
      if (!this.currentLocation) {
        this.$message.warning("请先选择一个库位")
        return
      }
      const payload = {
        locationCode: this.currentLocation.locationCode,
        locationName: this.currentLocation.locationName,
        locationId: this.currentLocation.id,
        warehousesId: this.currentLocation.warehousesId
      }
      this.$emit("selected", payload)
      this.dialogVisible = false
    },
    close() {
      this.dialogVisible = false
    },
    refresh() {
      this.getList()
    }
  }
}
</script>

<style scoped>
.location-selector-dialog /deep/ .el-dialog__body {
  padding: 10px 20px 0;
  min-height: 500px;
  display: flex;
  flex-direction: column;
}

.location-selector-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.location-selector-form {
  margin-bottom: 10px;
}

.title-tip {
  font-size: 12px;
  color: #999;
  margin-left: 8px;
}
</style>

