<template>
  <div class="container">
    <TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
    <div class="table-container">
      <TableCustom :columns="columns" :tableData="tableData" :paging="paging" :refresh="getData" :changePage="changePage">
        <template #toolbarBtn>
          <el-button type="primary" @click="handleAdd">新增</el-button>
          <!-- <el-button>导出</el-button> -->
          <!-- <el-button type="danger">删除</el-button> -->
        </template>
        <template #status="{ rows }">
          <el-tag :type="rows.status ? 'success' : 'danger'">
            {{ StatusEnum[rows.status] }}
          </el-tag>
        </template>
        <template #operator="{ rows }">
          <el-button link type="primary" size="small" @click="handleEdit(rows)"> 修改 </el-button>
          <el-button link type="danger" size="small" @click="handelDel(rows.id)"> 删除 </el-button>
        </template>
      </TableCustom>
    </div>
    <AddFence ref="addRef" :rowData="rowData" v-if="visible" @closeDialog="visible = false" :update="updateData" />
  </div>
</template>

<script setup lang="ts" name="basetable">
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { CirclePlusFilled } from "@element-plus/icons-vue";
import { fetchData, orgAdd, orgModify, orgList, orgDelete } from "@/api/index";
import TableCustom from "@/components/table-custom.vue";
import TableSearch from "@/components/table-search.vue";
import AddFence from "./addFence.vue";
import { TableItem } from "@/types/table";
import { FormOptionList } from "@/types/form-option";
import Alarm from "@/components/alarm.vue";
import { TOrg } from "@/api/index.d";
// 0-禁用 1-启用
enum StatusEnum {
  "禁用" = 0,
  "启用",
}
// 查询相关
const query = reactive({
  name: "",
});
const searchOpt = ref<FormOptionList[]>([
  { type: "input", label: "辖区名称：", prop: "name" },
  // { type: "daterange", label: "创建时间：", prop: "name2" },
]);

// 表格相关
let columns = ref([
  // { type: "selection" },
  { type: "index", label: "序号", width: 55, align: "center" },
  { prop: "id", label: "辖区编号" },
  { prop: "name", label: "辖区名称" },
  { prop: "creatUser", label: "创建角色" },
  { prop: "createTime", label: "创建时间" },
  // { prop: "status", label: "状态" },
  { prop: "operator", label: "操作", width: 200 },
]);
const paging = reactive({
  page: 1,
  size: 10,
  total: 0,
});
const tableData = ref<TOrg.IOrgRecordRes[]>([]);

const getData = async () => {
  const res = await orgList({ ...paging, ...query });
  tableData.value = res.records;
  paging.total = res.total;
};

const handleSearch = () => {
  changePage(1);
};
const changePage = (val: number) => {
  paging.page = val;
  getData();
};

const addRef = ref();
const visible = ref(false);
const rowData = ref({});

// 编辑
const handleEdit = (row: TableItem) => {
  rowData.value = { ...row };
  visible.value = true;
};
// 删除
const handelDel = (id: number) => {
  ElMessageBox.confirm("确定要删除吗？", "提示", {
    type: "warning",
  })
    .then(async () => {
      orgDelete({ id }).then(() => {
        ElMessage.success("删除成功");
        getData();
      });
    })
    .catch(() => {});
};
// 新增
const handleAdd = () => {
  visible.value = true;
};

const updateData = (res) => {
  let api, msg;

  api = res.id ? orgModify : orgAdd;
  msg = res.id ? "修改成功" : "新增成功";
  api(res).then((res) => {
    ElMessage.success(msg);
    visible.value = false;
    getData();
  });
};
onMounted(() => {
  getData();
});
</script>

<style scoped></style>
