<template>
  <div class="container scrollbar">
    <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>{{ query.id }}</div>
          <div class="item"><span>绑定管理员：</span>{{ query.adminName }}</div>
          <div class="item"><span>设备状态：</span>{{ statusEnum[query.status as string] }}</div>
        </el-col>
        <el-col :span="6">
          <div class="item"><span>IMEI号：</span>{{ query.deviceId }}</div>
          <div class="item"><span>绑定管理者账号：</span>{{ query.adminUsername }}</div>
          <div class="item"><span>当前电量：</span>{{ query.battery }}%</div>
        </el-col>
        <el-col :span="6">
          <div class="item"><span>首次绑定时间：</span>{{ query.createTime }}</div>
          <div class="item"><span>隶属组织：</span>{{ query.orgName }}</div>
          <div class="item"><span>联系电话：</span>{{ query.adminPhone }}</div>
        </el-col>
        <el-col :span="6">
          <div class="item"><span>固件版本：</span>{{ query.deviceVersion }}</div>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="baseInfo">
      <template #header>
        <div class="card-header">使用记录</div>
      </template>
      <TableCustom :hasToolbar="false" :columns="record" :tableData="tableData" :paging="paging" :changePage="changePage">
        <template #status="{ rows }">
          {{ recordStatusEnum[rows.status] }}
        </template>
        <template #operator="{ rows }">
          <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 :hasToolbar="false" :columns="columns" :tableData="warningTableData" :paging="paging1" :changePage="changeWarningPage">
        <template #operator="{ rows }">
          <el-button link type="primary" size="small" @click="toIncidentDispose(rows.id)" v-if="rows.status == 0"> 处理事件 </el-button>
          <div v-else></div>
        </template>
        <template #status="{ rows }">
          <el-tag :type="statusColor[rows.status]">{{ warningStatusEnum[rows.status] }}</el-tag>
        </template>
        <template #warnType="{ rows }">
          {{ warnTypeEnum[rows.warnType] }}
        </template>
      </TableCustom>
    </el-card>
  </div>
</template>

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

enum statusEnum {
  "使用中" = 0,
  "在线",
  "充电中",
}
enum warningStatusEnum {
  "待处理",
  "已处理",
}
enum recordStatusEnum {
  "使用中" = 1,
  "结束使用",
}
enum warnTypeEnum {
  "SOS告警",
  "围栏告警",
  "破坏告警",
  "低电告警",
  "心率告警",
  "血氧告警",
  "体温告警",
}
const statusColor = ["danger", "success"];
// 表格相关
let record = ref([
  { type: "index", label: "序号", width: 55, align: "center" },
  { prop: "adminName", label: "管理员" },
  { prop: "userNumber", label: "佩戴者" },
  { prop: "createTime", label: "开始使用时间" },
  { prop: "updateTime", label: "结束使用时间" },
  { prop: "operator", label: "操作" },
]);

// 表格相关
let columns = ref([
  { type: "index", label: "序号", width: 55, align: "center" },
  { prop: "userNumber", label: "佩戴者" },
  { prop: "warnType", label: "事件类型" },
  { prop: "createTime", label: "触发时间" },
  { prop: "status", label: "处理状态" },
  { prop: "operator", label: "操作" },
]);

const paging = reactive({
  deviceId: query.deviceId,
  page: 1,
  size: 10,
  total: 0,
});
const paging1 = reactive({
  deviceId: query.deviceId,
  page: 1,
  size: 10,
  total: 0,
});
const tableData = ref<TDevice.IUseRecordRes[]>([]);
const warningTableData = ref<TDevice.IWarningRecordRes[]>([]);
const getData = async () => {
  const res = await deviceUseRecord(paging);
  tableData.value = res.records;
  paging.total = res.total;
};
const getWarningData = async () => {
  const res = await warningRecord(paging1);
  warningTableData.value = res.records;
  paging1.total = res.total;
};
getData();
getWarningData();

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

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

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

.baseInfo {
  margin-bottom: 20px;

  .item {
    color: #061451;
    font-size: 20px;
    margin-top: 26px;
    &:first-child {
      margin-top: 0;
    }
    span {
      color: #818aa6;
    }
  }
}
.baseInfo :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;
  }
}
</style>
