<template>
  <el-dialog :visible.sync="visible" title="仓库" @before-close="cancel">
    <h3>仓库：{{ value | valueFilter }}</h3>
    <el-cascader-panel
      :props="warehouseNameProps"
      v-model="value"
    ></el-cascader-panel>
    <template slot="footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm">确认</el-button>
    </template>
  </el-dialog>
</template>

<script>
  // import {
  //   getWarehouse,
  //   getReservoir,
  //   getShelves,
  //   getLocation
  // } from '@/api/stockManagement'

  export default {
    data() {
      return {
        visible: false,
        value: '',
        row: {},
        warehouseNameProps: {
          lazy: true,
          lazyLoad(node, resolve) {
            const { level } = node;

            const api = {
              0: getWarehouse, //仓库
              1: getReservoir, //库区
              2: getShelves, // 货架
              3: getLocation //货位
            };
            if (api[level]) {
              const params = {};
              if (level > 0) {
                params.id = node.value.split('-')[0];
              }
              api[level](params)
                .then((res) => {
                  if (res.success) {
                    const arr = [];
                    for (const key in res.data) {
                      arr.push({
                        value: `${key}-${res.data[key]}`,
                        label: res.data[key] || key,
                        leaf: level >= 3
                      });
                    }
                    resolve(arr);
                  }
                })
                .catch(() => {
                  resolve([]);
                });
            } else {
              resolve([]);
            }
          }
        }
      };
    },
    filters: {
      valueFilter(inp) {
        if (Array.isArray(inp) && inp.length) {
          return inp.map((item) => item.split('-')[1]).join('-');
        }

        return '';
      }
    },
    methods: {
      open(row) {
        this.row = row;
        this.value = row.warehouseAreaGoodsAllocationCode
          ? [
              `${row.warehouseName}-${row.warehouseName}`,
              `${row.warehouseAreaName}-${row.warehouseAreaName}`,
              `${row.warehouseAreaGoodsCode}-${row.warehouseAreaGoodsCode}`,
              `${row.warehouseAreaGoodsAllocationCode}-${row.warehouseAreaGoodsAllocationCode}`
            ]
          : [];
        this.visible = true;
      },
      cancel() {
        this.value = [];
        this.visible = false;
      },
      confirm() {
        if (this.value.length < 3) return this.$message.error('请选择仓库！');
        const [warehouseId, warehouseName] = this.value[0].split('-');
        const [warehouseAreaId, warehouseAreaName] = this.value[1].split('-');
        const [warehouseAreaGoodsId, warehouseAreaGoodsCode] =
          this.value[2].split('-');
        const [
          warehouseAreaGoodsAllocationId,
          warehouseAreaGoodsAllocationCode
        ] = this.value[3].split('-');

        this.row.warehouseId = warehouseId;
        this.row.warehouseName = warehouseName;
        this.row.warehouseAreaId = warehouseAreaId;
        this.row.warehouseAreaName = warehouseAreaName;
        this.row.warehouseAreaGoodsId = warehouseAreaGoodsId;
        this.row.warehouseAreaGoodsCode = warehouseAreaGoodsCode;
        this.row.warehouseAreaGoodsAllocationId =
          warehouseAreaGoodsAllocationId;
        this.row.warehouseAreaGoodsAllocationCode =
          warehouseAreaGoodsAllocationCode;

        this.cancel();
      }
    }
  };
</script>

<style lang="scss" scoped>
  h3 {
    margin-bottom: 10px;
  }
</style>
