<template>
  <div class="container">
    <TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
    <div class="table-container">
      <TableCustom :columns="columns" :tableData="tableData" :paging="paging" :changePage="changePage">
        <template #status="{ rows }">
          <el-tag :type="rows.status == 1 ? 'success' : 'danger'">
            {{ statusEnum[rows.status] }}
          </el-tag>
        </template>
        <template #warnType="{ rows }">
          {{ warnTypeEnum[rows.warnType] }}
        </template>
        <template #operator="{ rows }">
          <el-button type="primary" size="small" link @click="toIncidentDispose(rows.id)"> 处理事件 </el-button>
        </template>
      </TableCustom>
    </div>
  </div>
</template>

<script setup lang="ts" name="basetable">
import { ref, reactive } from "vue";
import { warnRecord } from "@/api/index";
import { TWarnRecord } from "@/api/index.d";
import TableCustom from "@/components/table-custom.vue";
import TableDetail from "@/components/table-detail.vue";
import TableSearch from "@/components/table-search.vue";
import { useRouter } from "vue-router";
import { FormOptionList } from "@/types/form-option";

enum statusEnum {
  "待处理",
  "已处理",
}
enum warnTypeEnum {
  "SOS告警",
  "围栏告警",
  "破坏告警",
  "低电告警",
  "心率告警",
  "血氧告警",
  "体温告警",
}
const router = useRouter();
// 查询相关
const query = reactive<any>({});
const searchOpt = ref<FormOptionList[]>([
  { type: "input", label: "手铐IMEI号：", prop: "deviceId" },
  {
    type: "select",
    label: "告警类型：",
    prop: "warnType",
    opts: [
      { label: "SOS告警", value: 0 },
      { label: "围栏告警", value: 1 },
      { label: "破坏告警", value: 2 },
      { label: "低电告警", value: 3 },
      { label: "心率告警", value: 4 },
      { label: "血氧告警", value: 5 },
      { label: "体温告警", value: 6 },
    ],
  },
  {
    type: "select",
    label: "处理状态：",
    prop: "status",
    opts: [
      { label: "待处理", value: 0 },
      { label: "已处理", value: 1 },
    ],
  },
  { type: "daterange", label: "创建时间：", prop: "time" },
]);
const handleSearch = () => {
  changePage(1);
};

// 表格相关
let columns = ref([
  { type: "index", label: "序号", width: 55, align: "center" },
  { prop: "deviceId", label: "手铐IMEI号" },
  { prop: "userNumber", label: "关联人员" },
  { prop: "warnType", label: "事件类型" },
  { prop: "createTime", label: "时间" },
  { prop: "status", label: "处理状态" },
  { prop: "operator", label: "操作" },
]);
const paging = reactive({
  page: 1,
  size: 10,
  total: 0,
  deviceId: undefined,
});
const tableData = ref<TWarnRecord.IListRes[]>([]);

const getData = async () => {
  try {
    console.log(query, "queryqueryquery");
    let p = { ...paging, ...query, startDate: query.time?.[0], endDate: query.time?.[1] };
    delete p.time;
    const res = await warnRecord(p);
    tableData.value = res.records;
    paging.total = res.total;
  } catch (error) {}
};
getData();

const changePage = (val: number) => {
  paging.page = val;
  getData();
};
const toIncidentDispose = (id: string) => {
  router.push({
    path: "/incidentDispose",
    query: { id },
  });
};
</script>

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