<template>
  <div class="container">
    <el-card class="baseSetting">
      <template #header>
        <div class="card-header">
          <div class="card-header-text">专项设置</div>
          <el-button type="primary">执行</el-button>
        </div>
      </template>
      <el-form :inline="true" :model="ruleForm" class="demo-form-inline">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="IMEI号">
              <el-input v-model="ruleForm.user" placeholder="请输入IMEI号" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="佩戴者编号：">
              <el-input v-model="ruleForm.user" placeholder="请输入佩戴者编号" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="模式选择">
              <el-input v-model="ruleForm.user" placeholder="请输入IMEI号" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider />
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="姓名 1：">
              <el-input v-model="ruleForm.user" placeholder="请输入姓名" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="紧急电话 1：">
              <el-input v-model="ruleForm.user" placeholder="请输入紧急电话" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="姓名 2：">
              <el-input v-model="ruleForm.user" placeholder="请输入姓名" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="紧急电话 2：">
              <el-input v-model="ruleForm.user" placeholder="请输入紧急电话" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="姓名 3：">
              <el-input v-model="ruleForm.user" placeholder="请输入姓名" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="紧急电话 3：">
              <el-input v-model="ruleForm.user" placeholder="请输入紧急电话" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider />
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="最小心率（次/分）：">
              <el-input v-model="ruleForm.user" placeholder="请输入最小心率" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最大心率（次/分）：">
              <el-input v-model="ruleForm.user" placeholder="请输入最大心率" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="最小血氧（%）：">
              <el-input v-model="ruleForm.user" placeholder="请输入最小血氧" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最大血氧（%）：">
              <el-input v-model="ruleForm.user" placeholder="请输入最大血氧" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="最小体表温度（℃）：">
              <el-input v-model="ruleForm.user" placeholder="请输入最小体表温度" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最大体表温度（℃）：">
              <el-input v-model="ruleForm.user" placeholder="请输入最大体表温度" clearable />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
const ruleForm = reactive({
  user: "",
  region: "",
  date: "",
});
</script>

<style scoped lang="less">
.baseSetting {
  margin-bottom: 20px;
  /deep/ .el-card__header {
    position: relative;
    .card-header {
      color: #061451;
      font-size: 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    &::before {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      content: "";
      display: block;
      width: 2px;
      height: 14px;
      border-radius: 20px;
      background: #061451;
    }
  }
}
</style>
