<!-- 用户管理 -->
<template>
  <div class="app-container model-detail">
    <!-- 用户新增/编辑表单 -->
    <el-card v-loading="loading">
      <template #header
        ><svg-icon
          icon-class="pause"
          style="width: 20px; height: 20px"
        />计算设备基本信息</template
      >
      <el-row>
        <el-col :lg="12" :xs="24">
          <el-form label-width="100px" size="small">
            <el-form-item label="设备名称"> {{ form.data.device_name }} </el-form-item>
            <el-form-item label="设备型号">
              {{ form.data.cmpt_hardware_type }}
            </el-form-item>
            <el-form-item label="设备类型">
              <el-tag effect="plain">
                {{ form.data.hardware_model }}
              </el-tag>
            </el-form-item>
            <el-form-item label="芯片信息"> {{ form.data.hardware_chip }} </el-form-item>
            <el-form-item label="厂商名称"> {{ form.data.manufacturer }} </el-form-item>
            <el-form-item label="接口类型">
              {{ form.data.cmpt_interface_type }}
            </el-form-item>
            <el-form-item label="设备状态">
              <el-tag type="success">已连接</el-tag>
            </el-form-item>
            <el-form-item label="ID编号">
              {{ form.data.uuid }}
            </el-form-item>
            <el-form-item label="程序版本"
              ><el-tag type="success" effect="dark">
                {{ form.data.software_version }}
              </el-tag></el-form-item
            >
            <el-form-item label="设备描述"> {{ form.data.device_desc }} </el-form-item>
            <el-form-item label="详细信息"> {{ form.data.infomation }} </el-form-item>
          </el-form>
        </el-col>
        <el-col :lg="12" :xs="24"> </el-col>
      </el-row>
    </el-card>
    <el-card class="card-footer">
      <el-button @click="closeBack"><i-ep-close />取 消</el-button>
    </el-card>
  </div>
</template>

<script setup>
import DeviceApi from "@/api/device";

const route = useRoute();
const router = useRouter();

const form = reactive({
  data: {},
});
const loading = ref(false); //  加载状态

/** 初始化数据 */
function initPage() {
  let id = route.query.id;
  loading.value = true;
  DeviceApi.devicesInfo(id)
    .then((res) => {
      form.data = res.data.data.device_info;
    })
    .finally(() => {
      loading.value = false;
    });
}

/** 返回列表页面 */
function closeBack() {
  router.push({ path: "/tester/equipment" });
}

onMounted(() => {
  initPage();
});
</script>
<style scoped lang="scss">
.model-detail {
  :deep(.el-card__header) {
    padding: 8px 4px;
    display: flex;
    align-items: center;
  }
}
.sp-file {
  color: #29d;
}
.tb-base-info {
  line-height: 30px;
}
:deep(.svg-icon) {
  margin-right: 8px;
}
.card-footer {
  position: fixed;
  width: calc(100% - 215px);
  bottom: 0px;
  :deep(.el-card__body) {
    padding: 10px;
    .el-pagination {
      justify-content: end;
    }
  }
}
</style>
