<template>
  <div>
    <el-form ref="form" :model="openForm" inline>
      <el-form-item v-for="(obj, key) in openForm" :key="key" :label="obj.name">
        <template v-if="obj.type === 'input'">
          <el-input prefix-icon="el-icon-search" v-model="obj.value" clearable @input="sel"></el-input>
        </template>
        <!-- 添加其他表单类型的模板 -->
      </el-form-item>
    </el-form>
    <!-- 添加表格和其他内容 -->
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { debounce } from '@/utils';

const openForm = ref({});
const formOrder = ref([]);
const tableHeaderList = ref([]);
const tableData = ref([]);
const tableLoading = ref(true);
const isOnlyLoadData = ref(false);

const props = defineProps({
  openObj: {
    type: Object,
    required: true
  },
  isCheckBox: {
    type: Boolean,
    default: false
  },
  nodeKeys: {
    type: [String, Number]
  }
});

watch(props.openObj, (newValue) => {
  console.log('newValue', newValue)
  const newObj = {};
  const order = [];
  if (!isOnlyLoadData.value) {
    newValue.boxhead.forEach((obj, index) => {
      newObj[obj.select_key] = obj;
      order.push(obj.select_key);
    });
    openForm.value = newObj;
    formOrder.value = order;
  }
  tableHeaderList.value = newValue.queryDisplay;
  tableData.value = newValue.rows;
  tableLoading.value = false;
});

const formatterFn = (row, column) => {
  return row[column.property] || '无';
};

const sel = debounce(() => {
  tableLoading.value = true;
  isOnlyLoadData.value = true;
  const queryObj = {};
  Object.entries(openForm.value).forEach(([key, value]) => {
    if (value.value) {
      queryObj[key] = value.value.trim();
    }
  });
  emit('sel', queryObj);
});

const selectAllFn = (rows) => {
  if (!props.isCheckBox) {
    table.clearSelection();
    emit('input', []);
  }
};

const selectFn = (rows) => {
  if (!props.isCheckBox) {
    table.clearSelection();
    rows.length > 0 && table.toggleRowSelection(rows[rows.length - 1]);
  }
  emit('input', rows.length > 0 ? [rows[rows.length - 1]] : []);
};
</script>

<style scoped></style>
