<template>
  <div class="container">
    <TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
    <div class="table-container">
      <TableCustom
        :columns="columns"
        :tableData="tableData"
        :total="page.total"
        :delFunc="handleDelete"
        :editFunc="handleEdit"
        :refresh="getData"
        :currentPage="page.index"
        :changePage="changePage"
      >
        <template #toolbarBtn>
          <el-button type="primary" @click="handleAdd">新增</el-button>
          <el-button>导出</el-button>
          <el-button type="danger">删除</el-button>
        </template>
        <template #money="{ rows }"> ￥{{ rows.money }} </template>
        <template #thumb="{ rows }">
          <el-image class="table-td-thumb" :src="rows.thumb" :z-index="10" :preview-src-list="[rows.thumb]" preview-teleported> </el-image>
        </template>
        <template #state="{ rows }">
          <el-tag :type="rows.state ? 'success' : 'danger'">
            {{ rows.state ? "正常" : "异常" }}
          </el-tag>
        </template>
        <template #operator>
          <el-button link type="primary" size="small"> 修改 </el-button>
          <el-button link type="danger" size="small"> 删除 </el-button>
        </template>
      </TableCustom>
    </div>
    <AddFence ref="addRef" v-if="visible" @closeDialog="visible = false" />
  </div>
</template>

<script setup lang="ts" name="basetable">
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { CirclePlusFilled } from "@element-plus/icons-vue";
import { fetchData } 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";

// 查询相关
const query = reactive({
  name: "",
});
const searchOpt = ref<FormOptionList[]>([
  { type: "input", label: "辖区名称：", prop: "name1" },
  { type: "daterange", label: "创建时间：", prop: "name2" },
  {
    type: "select",
    label: "状态：",
    prop: "name3",
    opts: [
      { label: "启用", value: "1" },
      { label: "禁用", value: "0" },
    ],
  },
]);

// 表格相关
let columns = ref([
  { type: "selection" },
  { type: "index", label: "序号", width: 55, align: "center" },
  { prop: "name", label: "辖区编号" },
  { prop: "money", label: "辖区名称" },
  { prop: "thumb", label: "创建角色" },
  { prop: "time", label: "创建时间" },
  { prop: "state", label: "账户状态" },
  { prop: "operator", label: "操作", width: 200 },
]);
const page = reactive({
  index: 1,
  size: 10,
  total: 200,
});
const tableData = ref<TableItem[]>([]);
const getData = async () => {
  const res = await fetchData();
  tableData.value = res.data.list;
};
getData();
const handleSearch = () => {
  changePage(1);
};
const changePage = (val: number) => {
  page.index = val;
  getData();
};

const addRef = ref();
const visible = ref(false);
const rowData = ref({});
const handleEdit = (row: TableItem) => {
  rowData.value = { ...row };
  visible.value = true;
};

// 删除相关
const handleDelete = (row: TableItem) => {
  ElMessage.success("删除成功");
};
// 删除相关
const handleAdd = () => {
  visible.value = true;
};
</script>

<style scoped></style>
