<template>
  <div>
    <el-form :inline="true" :model="filterQuery" size="mini">
      <el-row style="width: 100%">
        <el-form-item class="query-form-item" label="货位号/名称">
          <el-input v-model="filterQuery.key" placeholder="请输入货位号/名称:" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button-group>
            <el-button
              type="primary"
              icon="el-icon-refresh"
              @click="onReset"
            ></el-button>
            <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
            <el-button type="primary" icon="el-icon-plus" @click="addSpace">新增货位</el-button>
          </el-button-group>
        </el-form-item>
      </el-row>
    </el-form>
    <el-table v-loading="loading" :data="list" style="width: 100%" border>
      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column label="货位号" prop="code"></el-table-column>
      <el-table-column label="货位名称" prop="name"></el-table-column>
      <el-table-column label="货位分类" prop="type"></el-table-column>
      <!--        <el-table-column label="所属仓库" prop="invStorageName" width="200"-->
      <!--                         show-overflow-tooltip></el-table-column>-->
      <!--        <el-table-column label="所属分库" prop="invSubStorageName"-->
      <!--                         show-overflow-tooltip width="150"></el-table-column>-->
      <!--        <el-table-column label="状态" prop="status"-->
      <!--                         show-overflow-tooltip width="150">-->
      <!--          <template slot-scope="scope">-->
      <!--            <el-tag>-->
      <!--              {{ statusMap[scope.row.status] }}-->
      <!--            </el-tag>-->
      <!--          </template>-->
      <!--        </el-table-column>-->
      <el-table-column label="备注" prop="remark"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click.native.stop="editSpace(scope.row)"
          >编辑
          </el-button>
          <el-button
            type="text"
            @click.native.stop="deleteDialog(scope.row.id)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="filterQuery.page"
      :limit.sync="filterQuery.limit"
      @pagination="handleCurrentChange"
    />
    <el-dialog
      :title="formMap[formName]"
      :visible.sync="modifySpaceVisible"
      width="60%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
      v-if="modifySpaceVisible"
    >
      <el-form :model="formData" :rules="rules" ref="formData" label-width="80px">
        <el-row>
          <el-col :span="11">
            <el-form-item prop="code" label="货位编码">
              <el-input v-model="formData.code" auto-complete="off" style="width: 90%"
                        placeholder="请输入货位编码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item prop="name" label="货位名称">
              <el-input v-model="formData.name" auto-complete="off" style="width: 90%"
                        placeholder="请输入货位名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item prop="remark" label="货位分类">
              <el-input v-model="formData.type" auto-complete="off" style="width: 90%"
                        placeholder="请输入货位分类"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item prop="status" label="启用状态">
              <el-radio v-model="formData.status" :label="1">启用</el-radio>
              <el-radio v-model="formData.status" :label="0">禁用</el-radio>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item prop="remark" label="备注">
              <el-input v-model="formData.remark" auto-complete="off"
                        type="textarea" style="width: 90%"
                        placeholder="请输入备注内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div style="text-align: center">
          <el-button type="primary" size="small" icon="search" @click="saveSpace"
          >提交
          </el-button
          >
          <el-button type="primary" size="small" icon="search" @click="cancelDialog"
          >取消
          </el-button
          >
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import store from "../../store";
import {filterUplLocInv} from "@/api/system/invWarehouse";
import {filterSubByInv} from "@/api/system/invSubWarehouse";
import {getInvSpaceList, saveSpace, deleteSpace} from "@/api/inventory/invSpace";

export default {
  name: "invInfo",
  props: {
    invInfo: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      filterQuery: {
        invWarehouseCode: null,
        invStorageCode: null,
        key: null,
        page: 1,
        limit: 10,
        customerId: null,
      },
      list: [],
      storageList: [],
      subInvList: [],
      codeDetailVisible: false,
      total: 0,
      loading: true,
      index: null,
      dialogTableVisible: false,
      statusMap: {
        0: "禁用",
        1: "启用"
      },
      formMap: {
        add: "仓库信息-新增货位",
        edit: "仓库信息-编辑货位"
      },
      formName: null,
      modifyWarehouseDisable: true,
      modifySpaceVisible: false,
      formData: {
        id: null,
        code: null,
        name: null,
        type: null,
        invStorageCode: this.invInfo.invStorageCode,
        invWarehouseCode: this.invInfo.invWarehouseCode,
        status: 1,
        remark: null
      },
      rules: {
        code: [
          {required: true, message: "请输入货位编码", trigger: "blur"}
        ],
        name: [
          {required: true, message: "请输入货位名称", trigger: "blur"}
        ],
      },
      modifySubInvList: []
    };
  },
  watch: {
    invInfo: function () {
      this.getList();
    },
  },
  methods: {
    onReset() {
      this.$router.push({
        path: "",
      });
      this.filterQuery = {
        customerId: null,
        invWarehouseCode: this.invInfo.invWarehouseCode,
        invStorageCode: this.invInfo.invStorageCode,
        page: 1,
        limit: 10,
      };
      this.getList();
    },
    onSubmit() {
      this.loading = true;
      this.filterQuery.page = 1;
      this.getList();
    },
    handleCurrentChange(val) {
      this.filterQuery.page = val.page;
      this.getList();
    },
    getList() {
      this.loading = true;
      this.filterQuery.invStorageCode = this.invInfo.invStorageCode;
      this.filterQuery.invWarehouseCode = this.invInfo.invWarehouseCode;
      this.filterQuery.customerId = store.getters.customerId;
      getInvSpaceList(this.filterQuery).then((res) => {
        this.loading = false;
        if (res.code === 20000) {
          this.list = res.data.list || [];
          this.total = res.data.total || 0;
        } else {
          this.$message.error(res.data);
        }
      })
    },

    deleteDialog(rowId) {
      this.$confirm("此操作将永久删除该货位, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let params = {id: rowId};
          deleteSpace(params).then((res) => {
            if (res.code === 20000) {
              this.$message.success("删除成功！");
              this.getList();
            } else {
              this.$message.error(res.message);
            }
          })
        })
        .catch(() => {
        });
    },
    cancelDialog() {
      this.modifySpaceVisible = false
      this.getList();
    },
    getStorage() {
      this.storageList = [];
      filterUplLocInv()
        .then((response) => {
          this.storageList = response.data || [];
        })
        .catch(() => {
        });
    },
    resetForm() {
      if (this.$refs["formData"]) {
        // 清空验证信息表单
        this.$refs["formData"].clearValidate();
        this.getList();
      }
    },
    editSpace(row) {
      this.resetForm();
      this.modifySpaceVisible = true;
      this.formName = "edit";
      this.formData = row;
    },
    addSpace() {
      this.modifySpaceVisible = true;
      this.formName = "add";
      this.resetForm();
      this.formData = {
        id: null,
        code: null,
        name: null,
        type: null,
        invStorageCode: this.invInfo.invStorageCode,
        invWarehouseCode: this.invInfo.invWarehouseCode,
        status: 1,
        remark: null
      }
    },
    saveSpace() {
      this.$refs['formData'].validate((valid) => {
        if (valid) {
          saveSpace(this.formData, this.formName).then((res) => {
            if (res.code === 20000) {
              if ("add" === this.formName) {
                this.$message.success("新增成功");
              } else {
                this.$message.success("保存成功");
              }
              this.getList();
              this.modifySpaceVisible = false;
            } else {
              this.$message.error(res.message);
            }
          })
        }
      })
    },
  },
  created() {
    this.getStorage();
    //加载表格数据
    this.getList();
  },
};
</script>

<style type="text/scss" lang="scss">
</style>
