<template>
  <div class="container">
    <TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
    <div class="table-container">
      <TableCustom :columns="columns" :tableData="tableData" :total="page.total" :refresh="getData" :currentPage="page.index" :changePage="changePage">
        <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 type="primary" size="small" link @click="router.push('/incidentDispose')"> 处理事件 </el-button>
        </template>
      </TableCustom>
    </div>
  </div>
</template>

<script setup lang="ts" name="basetable">
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { fetchData } from "@/api/index";
import TableCustom from "@/components/table-custom.vue";
import TableDetail from "@/components/table-detail.vue";
import TableSearch from "@/components/table-search.vue";
import { TableItem } from "@/types/table";
import { useRouter } from "vue-router";
import { FormOption, FormOptionList } from "@/types/form-option";
const router = useRouter();
// 查询相关
const query = reactive({
  name: "",
});
const searchOpt = ref<FormOptionList[]>([
  { type: "select", label: "来源手铐：", prop: "name1", opts: [{ label: "866503071660886", value: "866503071660886" }] },
  { type: "select", label: "事件类型：", prop: "name2", opts: [{ label: "866503071660886", value: "866503071660886" }] },
  { type: "select", label: "事件级别：", prop: "name3", opts: [{ label: "866503071660886", value: "866503071660886" }] },
  {
    type: "select",
    label: "处理状态：",
    prop: "name4",
    opts: [
      { label: "已处理", value: "1" },
      { label: "未处理", value: "0" },
    ],
  },
  { type: "daterange", label: "创建时间：", prop: "name5" },
]);
const handleSearch = () => {
  changePage(1);
};

// 表格相关
let columns = ref([
  { type: "index", label: "序号", width: 55, align: "center" },
  { prop: "name", label: "手铐IMEI号" },
  { prop: "name", label: "关联人员" },
  { prop: "name", label: "事件类型" },
  { prop: "money", label: "事件级别" },
  { prop: "thumb", label: "时间" },
  { prop: "state", label: "处理状态" },
  { prop: "operator", label: "操作" },
]);
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 changePage = (val: number) => {
  page.index = val;
  getData();
};

const visible = ref(false);
</script>

<style scoped>
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
