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

      <el-form-item label-width="0" class="search-form-buttons">
        <el-button
          type="primary"
          plain
          icon="el-icon-search"
          @click="handleQuery"
        >
          查询
        </el-button>

        <el-dropdown
          v-show="dropdownList && dropdownList.length > 0"
          style="margin-left: 5px"
          @command="batchCommand"
        >
          <el-button type="primary">
            扩展业务功能
            <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 || item.memo }}
            </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 OutSourceApi from "@/api/system/dev/mesReport";
import RecursiveTable from "../components/RecursiveTable.vue";

export default {
  name: "WarehouseLock",
  components: {
    RecursiveTable,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 列表
      list: [],
      // 创建表单
      form: {
        productMatNo: null,
      },
      dropdownList: [],
      currentRows: [],
      rowDropdownList: [],
      rules: {
        productMatNo: [
          { required: true, message: "产品料号不能为空", trigger: "change" },
        ],
      },
    };
  },
  computed: {
    columns() {
      if (this.list.length === 0) return [];
      const keys = Object.keys(this.list[0]);
      return keys.filter((key) => key !== "matNum" && key !== "details");
    },
    detailColumns() {
      if (
        this.list.length === 0 ||
        !this.list[0].details ||
        this.list[0].details.length === 0
      ) {
        return [];
      }
      // 动态获取 details 的字段
      return Object.keys(this.list[0].details[0]);
    },
  },
  created() {
    this.getList();
    OutSourceApi.getMesantimatnolocktopdropdownlistin().then((res) => {
      this.dropdownList = res || [];
    });
    OutSourceApi.getMesantimatnolockrowdropdownlistin().then((res) => {
      this.rowDropdownList = res || [];
    });
  },
  methods: {
    async handleQuery() {
      await this.$refs["formRef"].validate();
      this.getList();
    },
    // 新增
    handleAdd() {
      this.$router.push({
        path: "/production/outsource-work-order/outsourced-workOrder-detail",
      });
    },
    // 批量操作
    async batchCommand(url) {
      const { productMatNo } = this.form;

      if (!productMatNo) {
        return this.$message.warning(`料号不能为空！`);
      }

      try {
        await this.$modal.confirm(`您正在进行批量操作，请确认是否继续?`);
        const baseUrl = url.replace("/admin-api", "");
        await OutSourceApi.batchApi(baseUrl, this.form);
        this.$message.success(`批量操作成功`);
      } finally {
        this.getList();
        this.form = {
          productMatNo: null,
        };
      }
    },
    // 批量操作
    async batchRowCommand(url, row) {
      try {
        await this.$refs["formRef"].validate();
        const baseUrl = url.replace("/admin-api", "");
        const assignedRow = {
          ...row,
          ...this.form,
        };
        await OutSourceApi.batchApi(baseUrl, assignedRow);
        this.$message.success(`操作成功`);
      } finally {
        this.getList();
      }
    },
    /** 查询列表 */
    async getList() {
      try {
        this.loading = true;
        const res = await OutSourceApi.getJsonresult(this.form);
        this.list = res || [];
      } finally {
        this.loading = false;
      }
    },

    // 清空
    resetForm() {
      this.form = {
        productMatNo: undefined,
        matStatus: undefined,
        matDesc: undefined,
        wareHouseNo: undefined,
      };
    },
    // 表格选中
    tableSelected(val) {
      this.currentRows = val;
    },
  },
};
</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>
