<template>
  <div class="root">
    <div class="search-box">
      <el-input
        v-model="script.filterData.mc"
        style="width: 240px; margin-right: 10px"
        size="large"
        placeholder="请输入服务点名称"
        :suffix-icon="Search"
      />
      <el-select
        v-model="script.filterData.zdlx"
        style="width: 240px; margin-right: 10px"
        size="large"
        placeholder="站点类型"
        :suffix-icon="Search"
        :options="script.zdlxOptions"
        clearable
      />
    </div>
    <div class="event-box">
      <el-button type="primary" size="large" @click="script.openAddDialog"
        >新增</el-button
      >
    </div>
    <DynamicTable
      :dataSource="script.tableData.value"
      :columns="script.columns"
      :autoHeight="true"
      :pagination="script.pagination"
    ></DynamicTable>
    <div class="model-box">
      <MyDialog
        v-model="script.modelVisible.value"
        :title="script.model?.title"
        :dynamicComponent="script.model?.content"
        :component-props="script.model?.props"
        :onConfirm="script.model?.onConfirm"
        :onCancel="script.model?.onCancel"
        ref="dialogRef"
        :width="script.model?.width"
      >
      </MyDialog>
      <MyDrawer
        v-model="script.drawerVisible.value"
        :title="script.drawer?.title"
        :dynamicComponent="script.drawer?.content"
        :component-props="script.drawer?.props"
        :onConfirm="script.drawer?.onConfirm"
        :onCancel="script.drawer?.onCancel"
        ref="drawerRef"
        :direction="script.drawer?.direction"
        :size="script.drawer?.size"
      ></MyDrawer>
    </div>
  </div>
</template>
  
<script setup>
import DynamicTable from "../../component/DynamicTable";
import { h, ref, onMounted, reactive, watch, toRaw } from "vue";
import { Search } from "@element-plus/icons-vue";
import MyDialog from "../../component/MyDialog";
import MyDrawer from "../../component/MyDrawer";
import scriptFn from "./index.js";
const script = scriptFn();
const { dialogRef, drawerRef } = script;
</script>
  <style scoped>
.root {
  height: 100%;
  padding: 25px;
}
.event-box {
  margin: 20px 0;
}
.model-box {
  position: absolute;
}
</style>
  