<template>
  <el-dialog
    :visible.sync="dialogVisible"
    width="900px"
    append-to-body
    class="warehouse-selector-dialog"
    :close-on-click-modal="false"
  >
    <span slot="title">
      选择仓库
      <small class="title-tip">双击表格行可快速选择</small>
    </span>
    <div class="warehouse-selector-body">
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        label-width="90px"
        class="warehouse-selector-form"
      >
        <!-- <el-form-item label="仓库编码" prop="warehousesCode">
          <el-input
            v-model="queryParams.warehousesCode"
            placeholder="请输入仓库编码"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item> -->
        <el-form-item label="仓库名称" prop="warehousesName">
          <el-input
            v-model="queryParams.warehousesName"
            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="warehousesList"
        :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="warehousesCode" width="150" />
        <el-table-column label="仓库名称" prop="warehousesName" min-width="220" show-overflow-tooltip />
        <el-table-column label="仓库类型" prop="warehouseType" width="120" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.warehouseType === 1">普通仓</span>
            <span v-else-if="scope.row.warehouseType === 2">危险品仓</span>
            <span v-else-if="scope.row.warehouseType === 3">冷藏仓</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="地址" prop="address" min-width="200" show-overflow-tooltip />
        <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 { listWarehousesForSelector } from "@/api/inventory/warehouses"

export default {
  name: "WarehouseSelector",
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      warehousesList: [],
      loading: false,
      total: 0,
      currentWarehouse: null,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        warehousesCode: null,
        warehousesName: 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()
      }
    }
  },
  methods: {
    init() {
      if (this.warehousesList.length === 0) {
        this.getList()
      }
    },
    resetState() {
      this.currentWarehouse = null
    },
    getList() {
      this.loading = true
      listWarehousesForSelector(this.queryParams)
        .then(res => {
          this.warehousesList = 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,
        warehousesCode: null,
        warehousesName: null,
        isEnabled: "1"
      }
      this.getList()
    },
    handleCurrentChange(row) {
      this.currentWarehouse = row
    },
    handleRowDblClick(row) {
      this.currentWarehouse = row
      this.confirmSelection()
    },
    confirmSelection() {
      if (!this.currentWarehouse) {
        this.$message.warning("请先选择一个仓库")
        return
      }
      const payload = {
        warehousesCode: this.currentWarehouse.warehousesCode,
        warehousesName: this.currentWarehouse.warehousesName,
        warehouseId: this.currentWarehouse.id
      }
      this.$emit("selected", payload)
      this.dialogVisible = false
    },
    close() {
      this.dialogVisible = false
    },
    refresh() {
      this.getList()
    }
  }
}
</script>

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

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

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

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

