<template>
  <Container>
    <div slot="left">
      <el-select
        v-model="warehouseId"
        filterable
        style="width: 150px; margin-right: 10px"
        placeholder="所属仓库"
        clearable
        @change="pageChange(1)"
      >
        <el-option
          v-for="item in warehouse_list"
          :key="item.id"
          :label="item.warehouseName"
          :value="item.id"
        ></el-option>
      </el-select>
      <el-button
        v-if="$accessCheck($Access.WarehouseAreaAddWarehouseArea)"
        size="small"
        type="primary"
        @click="openAdd()"
      >
        新增库区
      </el-button>
    </div>
    <el-table :data="area_list">
      <el-table-column prop="id" label="ID" min-width="140px"></el-table-column>
      <el-table-column
        prop="code"
        label="库区编码"
        min-width="140px"
      ></el-table-column>
      <el-table-column
        prop="name"
        label="库区名称"
        min-width="140px"
      ></el-table-column>
      <el-table-column
        prop="warehouseName"
        label="所属仓库"
        min-width="140px"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column
        prop="length"
        label="长/米"
        min-width="80px"
      ></el-table-column>
      <el-table-column
        prop="width"
        label="宽/米"
        min-width="80px"
      ></el-table-column>
      <el-table-column
        prop="height"
        label="高/米"
        min-width="80px"
      ></el-table-column>
      <el-table-column
        prop="weight"
        label="库区限重/kg"
        min-width="140px"
      ></el-table-column>
      <el-table-column prop="type" label="库区类型" min-width="120px">
        <template slot-scope="scope">
          {{ typeCheck(scope.row.type) }}
        </template>
      </el-table-column>
      <el-table-column min-width="100px" prop="enableStatus" label="状态">
        <template slot-scope="scope">
          <el-switch
            v-if="$accessCheck($Access.WarehouseAreaAuditWarehouseArea)"
            v-model="scope.row.enableStatus"
            class="switchStyle"
            active-color="#36B365"
            :active-value="5"
            :inactive-value="4"
            active-text="启用"
            inactive-text="禁用"
            @change="statusChange($event, scope.row)"
          ></el-switch>
          <div v-else>
            <span v-if="scope.row.enableStatus === 5" class="success-status">
              启用
            </span>
            <span v-else class="info-status">禁用</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" width="120px" label="操作">
        <template slot-scope="scope">
          <el-button-group class="table-btn-group">
            <el-button
              v-if="$accessCheck($Access.WarehouseAreaEditWarehouseArea)"
              type="text"
              @click="openAdd(scope.row.id)"
            >
              编辑
            </el-button>
            <el-button
              v-if="$accessCheck($Access.WarehouseAreaDeleteWarehouseArea)"
              type="text"
              @click="delData(scope.row.id)"
            >
              删除
            </el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <FooterPage
      :page-size="pageSize"
      :total-page.sync="total"
      :current-page.sync="page"
      @pageChange="pageChange"
      @sizeChange="sizeChange"
    ></FooterPage>
    <WarehouseAreaAdd
      v-if="show_add"
      :is-show="show_add"
      :form-id="form_id"
      @confirm="addConfirm"
      @cancel="show_add = false"
    />
  </Container>
</template>

<script>
  import WarehouseAreaAdd from "./WarehouseAreaAdd.vue";
  import {
    getAllReservoir,
    deleteReservoir,
    enableReservoir,
    getAllWarehouse,
  } from "@/api/Stock.js";
  export default {
    name: "WarehouseArea",
    components: {
      WarehouseAreaAdd,
    },
    data() {
      return {
        warehouseId: "",
        warehouse_list: [],
        area_list: [],
        form_id: "",
        page: 1,
        pageSize: 10,
        total: 0,
        show_add: false,
        is_edit: false,
        type_options: [
          {
            label: "普通货位",
            value: 1,
          },
          {
            label: "入库区",
            value: 2,
          },
          {
            label: "大货区",
            value: 3,
          },
          {
            label: "散货区",
            value: 4,
          },
          {
            label: "残次品区",
            value: 5,
          },
          {
            label: "退货区",
            value: 6,
          },
          {
            label: "出库区",
            value: 7,
          },
          {
            label: "分拣区",
            value: 8,
          },
        ],
      };
    },
    created() {
      this.getAllReservoir();
      this.getAllWarehouse();
    },
    methods: {
      typeCheck(type) {
        const obj = this.type_options.find((item) => item.value === type);
        return obj ? obj.label : "";
      },
      async getAllReservoir() {
        const data = await getAllReservoir({
          page: this.page,
          pageSize: this.pageSize,
          warehouseId: this.warehouseId,
        });
        this.area_list = data.data;
        this.total = data.pageTotal;
      },
      openAdd(id) {
        this.show_add = true;
        this.form_id = id || "";
      },
      delData(id) {
        this.$confirm("确定要删除该库区吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(async () => {
          const data = await deleteReservoir(id);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          await this.getAllReservoir();
        });
      },
      async statusChange(val, row) {
        try {
          const data = await enableReservoir(row.id, {
            enableStatus: val,
          });
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        } catch (e) {
          await this.getAllReservoir();
        }
      },
      pageChange(page) {
        this.page = page;
        this.getAllReservoir();
      },
      addConfirm() {
        if (this.form_id) {
          this.getAllReservoir();
        } else {
          this.pageChange(1);
        }
      },
      sizeChange(size) {
        this.pageSize = size;
      },
      //  请求仓库列表
      async getAllWarehouse() {
        const data = await getAllWarehouse({
          page: 1,
          pageSize: 999,
          enableStatus: 5,
        });
        this.warehouse_list = data.data;
      },
    },
  };
</script>

<style scoped></style>
