<template>
  <div class="container">
    <el-card class="baseInfo">
      <template #header>
        <div class="card-header">基本信息</div>
      </template>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="item"><span>手铐序号：</span>手铐-10</div>
          <div class="item"><span>绑定管理员：</span>欧尼蒋</div>
          <div class="item"><span>现在状态：</span>禁用</div>
        </el-col>
        <el-col :span="6">
          <div class="item"><span>IMEI号：</span>860116079430636</div>
          <div class="item"><span>关联人信息：</span>警察123456</div>
          <div class="item"><span>当前电量：</span>87%</div>
        </el-col>
        <el-col :span="6">
          <div class="item"><span>首次绑定时间：</span>2025/03/26 18:33:32</div>
          <div class="item"><span>隶属组织：</span>xxx公安局</div>
          <div class="item"><span>联系电话：</span>10000000000</div>
        </el-col>
        <el-col :span="6">
          <div class="item"><span>固件版本：</span>V 3.14</div>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="baseInfo">
      <template #header>
        <div class="card-header">使用记录</div>
      </template>
      <TableCustom :columns="record" :tableData="tableData" :total="page.total" :currentPage="page.index" :changePage="changePage">
        <template #operator>
          <el-button link type="primary" size="small"> 处理事件 </el-button>
        </template>
      </TableCustom>
    </el-card>
    <el-card class="baseInfo">
      <template #header>
        <div class="card-header">当前设备告警记录</div>
      </template>
      <TableCustom :columns="columns" :tableData="tableData" :total="page.total" :currentPage="page.index" :changePage="changePage">
        <template #operator>
          <el-button link type="primary" size="small"> 处理事件 </el-button>
        </template>
        <template #thumb>
          <el-button type="success" link> 低 </el-button>
        </template>
        <template #state>
          <el-tag type="success"> 已处理 </el-tag>
        </template>
      </TableCustom>
    </el-card>
  </div>
</template>

<script setup lang="ts" name="basetable">
import { ref, reactive } from "vue";
import { fetchData } from "@/api/index";
import TableCustom from "@/components/table-custom.vue";
import { TableItem } from "@/types/table";
import { useRouter } from "vue-router";
const router = useRouter();

// 表格相关
let record = ref([
  { type: "index", label: "序号", width: 55, align: "center" },
  { prop: "name", label: "关联人" },
  { prop: "money", label: "类型" },
  { prop: "thumb", label: "警号" },
  { prop: "state", label: "佩戴者" },
  { prop: "state", label: "使用模式" },
  { prop: "state", label: "开始使用时间" },
  { prop: "state", label: "结束使用时间" },
]);

// 表格相关
let columns = ref([
  { 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: "操作" },
]);

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();
};
</script>

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

.baseInfo {
  margin-bottom: 20px;
  /deep/ .el-card__header {
    position: relative;
    .card-header {
      color: #061451;
      font-size: 22px;
    }

    &::before {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      content: "";
      display: block;
      width: 2px;
      height: 14px;
      border-radius: 20px;
      background: #061451;
    }
  }
  .item {
    color: #061451;
    font-size: 20px;
    margin-top: 26px;
    &:first-child {
      margin-top: 0;
    }
    span {
      color: #818aa6;
    }
  }
}
</style>
