<template>
  <div class="app-container">
    <div class="setting_title">仓储管理</div>
    <el-divider></el-divider>

    <div class="mymain-container">
      <div class="btn-group clearfix">
        <div class="fl">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            @click="addOrEdit('add')"
            >新增仓储</el-button
          >
        </div>
      </div>

      <div class="table">
        <el-table
          ref="multipleTable"
          v-loading="listLoading"
          :data="dataList"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          stripe
        >
          <el-table-column align="center" label="操作" min-width="100">
            <template slot-scope="scope">
              <el-button
                type="text"
                style="margin-left: 10px"
                @click="addOrEdit('edit', scope.row.storageId)"
                >编辑</el-button
              >
              <el-popconfirm
                style="margin-left: 10px"
                title="确定删除吗？"
                @confirm="handleDelete(scope.row.storageId)"
              >
                <el-button slot="reference" type="text">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="仓储名称"
            prop="storageName"
          ></el-table-column>
          <el-table-column
            align="center"
            label="仓储电话"
            prop="storageMobile"
          ></el-table-column>
          <el-table-column
            align="center"
            label="仓储地址"
            prop="storageAddress"
          ></el-table-column>
          <el-table-column
            align="center"
            label="创建时间"
            prop="createTime"
          ></el-table-column>
        </el-table>
      </div>

      <div class="pagination clearfix">
        <div class="fr">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="listTotal"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <!-- 新增编辑 -->
    <el-dialog
      :title="addFormType === 'add' ? '新增仓储' : '编辑仓储'"
      :visible.sync="addFormVisible"
      :show-close="false"
      width="50%"
      :close-on-click-modal="false"
    >
      <el-form
        ref="addForm"
        :model="addForm"
        :rules="addFormRules"
        label-position="left"
        label-width="80px"
      >
        <el-form-item label="仓储名称" prop="storageName">
          <el-input
            v-model="addForm.storageName"
            autocomplete="off"
            placeholder="请输入仓储名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="仓储电话" prop="storageMobile">
          <el-input
            v-model="addForm.storageMobile"
            autocomplete="off"
            placeholder="请输入仓储电话"
          ></el-input>
        </el-form-item>
        <el-form-item label="仓储地址" prop="storageAddress">
          <el-input
            v-model="addForm.storageAddress"
            autocomplete="off"
            placeholder="请输入仓储地址"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAddForm">取 消</el-button>
        <el-button type="primary" @click="submitAddForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  addStorage,
  deleteStorage,
  editStorage,
  getList,
  getStorageDetail,
} from "@/api/storage";

export default {
  data() {
    return {
      dataList: null, // 列表数据
      listLoading: true, // 列表加载loading
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数
      editId: null,
      addFormType: "add",
      addFormVisible: false,
      addForm: {
        storageName: "", // 仓储名称
        storageMobile: "", // 仓储电话
        storageAddress: "", // 仓储地址
      },
      addFormRules: {
        storageName: [
          { required: true, message: "请输入仓储名称", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;

      let params = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      };

      getList(params).then((res) => {
        this.dataList = res.data.records;
        this.listTotal = res.data.total;
        this.listLoading = false;
      });
    },
    // 筛选后重新获取列表
    getListByScreen() {
      this.currentPage = 1;
      this.getList();
    },
    // 更改每页数量
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.getList();
    },
    // 更改当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },
    // 操作 - 删除
    handleDelete(id) {
      deleteStorage({ storageId: id }).then(() => {
        this.getList();
        this.$successMsg();
      });
    },

    // 新增编辑
    addOrEdit(type, id) {
      this.addFormType = type;
      this.addFormVisible = true;
      if (type == "edit") {
        this.editId = id;
        getStorageDetail({ id: id }).then((res) => {
          this.addForm = {
            storageName: res.data.storageName,
            storageMobile: res.data.storageMobile,
            storageAddress: res.data.storageAddress,
          };
        });
      }
    },
    // 取消 新增编辑
    cancelAddForm() {
      this.addFormVisible = false;
      this.$refs.addForm.resetFields();
    },
    // 提交 新增编辑
    submitAddForm() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          let params = {
            storageName: this.addForm.storageName,
            storageMobile: this.addForm.storageMobile,
            storageAddress: this.addForm.storageAddress,
          };
          if (this.addFormType == "edit") {
            params.storageId = this.editId;
            editStorage(params).then((res) => {
              this.cancelAddForm();
              this.getList();
              this.$successMsg("编辑成功");
            });
          } else {
            addStorage(params).then((res) => {
              this.cancelAddForm();
              this.getList();
              this.$successMsg("新增成功");
            });
          }
        }
      });
    },
  },
};
</script>

<style scoped lang="scss"></style>
