<template>
  <div class="relics-layout">
    <div class="relics-header">
      <div class="search">
        <el-form label-width="100px" inline>
          <el-form-item label="SN码：">
            <el-input
              v-model="pageProps.cameraSn"
              clearable
              style="width: 250px"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item label="设备类型：">
            <el-select
              style="width: 250px"
              v-model="pageProps.cameraType"
              clearable
            >
              <el-option
                :value="Number(key)"
                :label="type"
                v-for="(type, key) in DeviceTypeDesc"
              />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="refresh">查询</el-button>
            <el-button
              type="primary"
              plain
              @click="pageProps = { ...initProps }"
            >
              重置
            </el-button>
            <el-button type="primary" @click="addHandler"> 添加设备 </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="relics-content">
      <el-table :data="relicsArray" border>
        <el-table-column label="SN码" prop="cameraSn"></el-table-column>

        <el-table-column
          label="设备类型"
          prop="snCode"
          v-slot:default="{ row }: { row: Device }"
        >
          {{ DeviceTypeDesc[row.cameraType] }}
        </el-table-column>
        <el-table-column label="所属单位" prop="orgName"></el-table-column>
        <el-table-column
          label="绑定账号"
          prop="bindName"
          v-slot:default="{ row }"
        >
          {{ row.bindName || "-" }}
        </el-table-column>
        <el-table-column label="创建人" prop="createBy"> </el-table-column>
        <el-table-column
          label="创建时间"
          prop="createTime"
          v-slot:default="{ row }"
        >
          {{ row.createTime && row.createTime.substr(0, 16) }}
        </el-table-column>

        <el-table-column label="操作" width="100px" fixed="right">
          <template #default="{ row }">
            <el-button
              link
              type="danger"
              @click="delHandler(row.cameraId)"
              size="small"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pag-layout">
      <el-pagination
        background
        layout="total, prev, pager, next, sizes, jumper"
        v-model:page-size="pageProps.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        @current-change="(data: number) => pageProps.pageNum = data"
        :current-page="pageProps.pageNum"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onActivated, ref, watch } from "vue";
import {
  devicePageFetch,
  DevicePageProps,
  delDeviceFetch,
  addDeviceFetch,
} from "@/request";
import { Device } from "@/request/type";
import { DeviceTypeDesc } from "@/store/device";
import { ElMessageBox } from "element-plus";
import { deviceEdit } from "./quisk";
import { debounce } from "@/util";

const initProps: DevicePageProps = {
  pageNum: 1,
  pageSize: 10,
};
const pageProps = ref({ ...initProps });
const total = ref<number>(0);
const relicsArray = ref<Device[]>([]);

const refresh = debounce(async () => {
  const data = await devicePageFetch(pageProps.value);
  total.value = data.total;
  relicsArray.value = data.records;
});

const delHandler = async (deviceId: number) => {
  const ok = await ElMessageBox.confirm("确定要删除吗", {
    type: "warning",
  });
  if (ok) {
    await delDeviceFetch(deviceId);
    await refresh();
  }
};

const addHandler = async () => {
  await deviceEdit({ submit: addDeviceFetch });
  await refresh();
};

watch(pageProps, refresh, { deep: true, immediate: true });
onActivated(refresh);
</script>

<style scoped lang="scss">
.relics-layout {
  height: 100%;
  overflow-y: auto;
  padding: 30px;
}
.pag-layout {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.relics-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  .search {
    flex: 1;
  }
  .relics-oper {
    flex: 0 0 100px;
    text-align: right;
  }
}
</style>
