<script setup>
import { ref, computed, getCurrentInstance } from "vue";
import tableMethod from "../composables/table";
const { proxy } = getCurrentInstance();
const props = defineProps({
  tableOptions: Object,
});
if (!props.tableOptions.pageInfo) {
  props.tableOptions.pageInfo = { total: 0, base: { limit: 10, current: 1 } };
}
let modelType = ref("add");
let isInit = ref(false);
const loading = ref(false);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const showSearch = ref(true);
const modelRef = ref();
const filterRef = ref();

const pageKeys = computed(() => {
  return props.tableOptions?.pageKeys ?? proxy?.$pageKeys;
});

let tableResult = computed(() => {
  let result = props?.tableOptions?.tableResult ?? proxy?.$resPath?.tableResult;
  return {
    successCode: result?.successCode ?? 200,
    codePath: result?.codePath || "code",
    dataPath: result?.dataPath || "data.list",
    totalPath: result?.totalPath || "data.total",
    messagePath: result?.messagePath || "data.msg",
  };
});
let rowResult = computed(() => {
  let result = props?.tableOptions?.rowResult ?? proxy?.$resPath?.rowResult;
  return {
    successCode: result?.successCode ?? 200,
    codePath: result?.codePath || "code",
    dataPath: result?.dataPath || "data",
    messagePath: result?.messagePath || "data.msg",
  };
});
let controlResult = computed(() => {
  let result =
    props?.tableOptions?.controlResult ?? proxy?.$resPath?.controlResult;
  return {
    successCode: result?.successCode ?? 200,
    codePath: result?.codePath || "code",
    messagePath: result?.messagePath || "data.msg",
  };
});
const {
  showModel,
  doFilter,
  pageChange,
  tableData,
  getTableData,
  handleAdd,
  handleEdit,
  editTableData,
  deleteTableData,
} = tableMethod({
  tableOptions: props.tableOptions,
  modelType,
  loading,
  isInit,
  ids,
  tableResult,
  rowResult,
  controlResult,
  pageKeys,
});
const getSelection = () => {
  return ids.value;
};
defineExpose({
  handleAdd,
  getSelection,
  doFilter,
  getTableData,
  editTableData,
  deleteTableData,
  modelRef,
  filterRef,
});

/** 选择条数  */
const handleSelectionChange = (selection) => {
  ids.value = selection.map(
    (item) =>
      item[
        props.tableOptions.selectkey
          ? props.tableOptions.selectkey
          : props.tableOptions.primaryKey
      ]
  );
  single.value = selection.length != 1;
  multiple.value = !selection.length;
};
const emit = defineEmits(["export", "import"]);
const handleImport = () => {
  emit("import");
};
const handleExport = () => {
  emit("export");
};
const doSelection = (val) => {
  emit("selectionChange", val);
};
const doClose = () => {
  if (props.tableOptions?.model?.showModel !== undefined) {
    props.tableOptions.model.showModel = false;
  } else {
    showModel.value = false;
  }
};
</script>

<template>
  <div
    v-loading="props.tableOptions.showLoading === false ? false : loading"
    :element-loading-text="tableOptions.loadingText || 'Loading...'"
    :element-loading-background="
      tableOptions.loadingBackground || 'rgb(34, 58, 106, 0.5)'
    "
    class="base-table-page"
    :style="tableOptions.style"
  >
    <BaseModel
      ref="modelRef"
      v-if="props.tableOptions?.baseModelOptions?.length > 0"
      :title="`${
        (props.tableOptions?.model?.modelType || modelType) == 'add'
          ? '添加'
          : '修改'
      }${props.tableOptions.baseModelName}`"
      :modelType="props.tableOptions?.model?.modelType || modelType"
      :isInit="isInit"
      :showModel="props.tableOptions?.model?.showModel || showModel"
      :width="props.tableOptions?.model?.modelWidth || '35%'"
      :labelWidth="props.tableOptions?.model?.labelWidth || '30%'"
      :columnCount="props.tableOptions?.columnCount"
      @dialogClose="doClose"
      @dialogSubmit="editTableData"
      @changeInit="isInit = false"
      :modelOptions="props.tableOptions.baseModelOptions"
    ></BaseModel>
    <BaseFilter
      class="base-filter"
      v-if="props.tableOptions?.baseFilterOptions?.length > 0 && showSearch"
      ref="filterRef"
      :showRest="props.tableOptions?.showRest"
      @doFilter="doFilter"
      :filterOptions="props.tableOptions.baseFilterOptions"
      :beforeFilter="props.tableOptions.beforeFilter"
      :showMoreCondition="props.tableOptions.showMoreCondition"
      :beforeReset="props.tableOptions.beforeReset"
    ></BaseFilter>
    <BaseControl
      class="base-control"
      :single="single"
      v-model:showSearch="showSearch"
      :multiple="multiple"
      :filterOptions="props.tableOptions.baseFilterOptions"
      :options="props.tableOptions"
      :showAdd="props.tableOptions.showAddBtn"
      :showEdit="props.tableOptions.showEditBtn"
      :showFilter="props.tableOptions.showFilter"
      :columns="props.tableOptions.columns"
      :hideRightToolbar="props.tableOptions.hideRightToolbar"
      :showDelete="props.tableOptions.showDeleteBtn"
      :showExport="props.tableOptions.showExportBtn"
      :showImport="props.tableOptions.showImportBtn"
      :permission="props.tableOptions.permission"
      @add="
        props.tableOptions.handleAdd
          ? props.tableOptions.handleAdd()
          : handleAdd()
      "
      @edit="handleEdit"
      @delete="deleteTableData"
      @import="handleImport"
      @export="handleExport"
      @queryTable="getTableData"
    >
      <template #beforeTop>
        <slot name="beforeTop"></slot>
      </template>
      <template #baseAddBtn>
        <el-button
          v-if="
            !(props.tableOptions.showAddBtn === false) &&
            props.tableOptions.addBtnName
          "
          :icon="props.tableOptions.addBtnIcon"
          type="primary"
          @click="
            props.tableOptions.handleAdd
              ? props.tableOptions.handleAdd()
              : handleAdd()
          "
        >
          {{ props.tableOptions.addBtnName || "添加" }}
        </el-button>
      </template>
      <template #afterTop>
        <slot name="afterTop"></slot>
      </template>
    </BaseControl>
    <BaseTable
      @pageChange="pageChange"
      :data="tableData"
      :rowKey="props.tableOptions.rowKey"
      :style="props.tableOptions.tableStyle"
      :primaryKey="props.tableOptions.primaryKey"
      :hidePagenation="props.tableOptions.hidePagenation"
      :pageInfo="props.tableOptions.pageInfo"
      :pageSelection="props.tableOptions.pageSelection"
     
      @selection-change="handleSelectionChange"
      @doSelection="doSelection"
    >
      <el-table-column type="selection" width="50" align="center" />
      <slot name="column" :tableData="tableData"></slot>
      <slot
        name="control"
        :showModel="showModel"
        :doFilter="doFilter"
        :getTableData="getTableData"
        :pageChange="pageChange"
        :tableData="tableData"
        :handleAdd="handleAdd"
        :handleEdit="handleEdit"
        :editTableData="editTableData"
        :deleteTableData="deleteTableData"
      >
        <el-table-column
          v-if="!props.tableOptions.hideControl"
          min-width="200"
          label="操作"
        >
          <template #default="scope">
            <slot :row="scope.row" name="before"></slot>
            <el-button
              v-if="props.tableOptions?.rowControl?.showEditBtn !== false"
              link
              type="text"
              icon="Edit"
              v-hasPermi="[props.tableOptions?.permission?.edit]"
              @click="
                props.tableOptions.handleEdit
                  ? props.tableOptions.handleEdit(scope.$index, scope.row)
                  : handleEdit(scope.$index, scope.row)
              "
              >{{ props.tableOptions.editBtnName || "修改" }}</el-button
            >
            <el-button
              v-if="props.tableOptions?.rowControl?.showDelBtn !== false"
              v-hasPermi="[props.tableOptions?.permission?.delete]"
              link
              type="text"
              icon="Delete"
              @click="
                props.tableOptions.handleDelete
                  ? props.tableOptions.handleDelete(scope.$index, scope.row)
                  : deleteTableData(scope.$index, scope.row)
              "
              >{{ props.tableOptions.delBtnName || "删除" }}</el-button
            >
            <slot :row="scope.row" name="after"></slot>
          </template>
        </el-table-column>
      </slot>
    </BaseTable>
  </div>
</template>

<style scoped>
.base-table-page {
  width: 100%;
  height: 100%;
  padding: 5px;
  box-sizing: border-box;
}
.title {
  text-align: left;
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: 16px;
  border-bottom: 1px solid #ffffff;
}
.title:before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 12px;
  background: #286aed;
  margin: 0 9px;
}
</style>
