<template>
  <div class="app-container">
    <!-- 搜索工作栏 -->
    <el-form
      v-show="showSearch"
      ref="queryForm"
      :model="form"
      size="mini"
      label-width="88px"
      class="search-form"
      :rules="formRules"
      @submit.native.prevent
    >
      <el-row :gutter="10" type="flex" class="search-form-left">
        <el-col :span="18">
          <el-form-item label="产品料号" prop="productMatNo">
            <el-input
              v-model="form.productMatNo"
              placeholder="请输入产品料号"
              clearable
              @keyup.enter.native="handlePegging"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label-width="0" class="search-form-buttons">
        <el-button
          type="danger"
          plain
          icon="el-icon-s-fold"
          size="mini"
          @click="handlePegging"
          >反查BOM</el-button
        >

        <el-dropdown
          v-show="dropdownList && dropdownList.length > 0"
          style="margin-left: 5px"
          @command="batchCommand"
        >
          <el-button type="primary" size="mini">
            扩展业务功能
            <i class="el-icon-arrow-down" />
          </el-button>
          <el-dropdown-menu>
            <el-dropdown-item
              v-for="(item, i) in dropdownList"
              :key="i"
              :command="item.value"
            >
              {{ item.text }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-form-item>
    </el-form>

    <recursive-table
      v-if="list.length > 0"
      :data="list"
      :row-dropdown-list="rowDropdownList"
      @batchRowCommand="batchRowCommand"
    />

    <el-empty v-else :image-size="150" :description="'列表数据为空'" />
  </div>
</template>
<!--  -->
<script>
import * as WarehouseLockApi from "@/api/system/dev/PeggingBom";
import { batchApi } from "@/api/system/dev/mesReport";
import { isArray } from "min-dash";
import RecursiveTable from "../components/RecursiveTable.vue";

export default {
  name: "PeggingBom",
  components: {
    RecursiveTable,
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 显示搜索条件
      showSearch: true,
      // 锁库记录列表
      list: [],
      // 创建表单
      form: {
        productMatNo: null,
      },
      dropdownList: [],
      currentRows: [],
      rowDropdownList: [],
      // 表单校验
      formRules: {
        productMatNo: [
          { required: true, message: "料号不能为空", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    columns() {
      if (this.list.length === 0) return [];
      const keys = Object.keys(this.list[0]);

      return keys.filter((key) => !isArray(this.list[0][key]));
    },
    // 动态获取子表列
    detailColumns() {
      if (!this.list || this.list.length === 0) return [];

      for (const item of this.list) {
        for (const key in item) {
          if (Array.isArray(item[key])) {
            if (item[key].length > 0) {
              return Object.keys(item[key][0]);
            }
          }
        }
      }

      return [];
    },
  },
  created() {
    this.handlePegging();
    WarehouseLockApi.getMainDropListByPegging().then((res) => {
      this.dropdownList = res || [];
    });
    WarehouseLockApi.getRowDropListByPegging().then((res) => {
      this.rowDropdownList = res || [];
    });
  },
  methods: {
    // 批量操作
    async batchCommand(url) {
      const { productMatNo } = this.form;
      if (!productMatNo) return this.$modal.msgWarning("料号不能为空!");

      try {
        await this.$modal.confirm(`您正在进行批量操作，请确认是否继续?`);
        const baseUrl = url.replace("/admin-api", "");

        await batchApi(baseUrl, this.form);
        this.$message.success(`批量操作成功`);
      } finally {
        this.handlePegging();
      }
    },
    // 批量操作
    async batchRowCommand(url, row) {
      try {
        const baseUrl = url.replace("/admin-api", "");
        await batchApi(baseUrl, row);
        this.$message.success(`操作成功`);
      } finally {
        this.handlePegging();
      }
    },

    // 展开bom
    async handlePegging() {
      this.loading = true;
      try {
        const data = await WarehouseLockApi.peggingBomJsonResult(this.form);
        this.$modal.msgSuccess("反查BOM操作成功!");
        this.list = data || [];
      } catch (error) {
        console.log(error);
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>
<style scoped lang="scss">
.search-form {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 10px;
  &-left {
    flex: 1;
  }
  &-buttons {
    flex-grow: 0;
    flex-shrink: 0;
    margin-left: 5px;
  }
}
</style>
