<template>
  <div class="container">
    <el-card class="baseSetting">
      <template #header>
        <div class="card-header">
          <div class="card-header-text">专项设置</div>
          <el-button type="primary" @click="submitForm(ruleFormRef)">执行</el-button>
        </div>
      </template>
      <el-form :rules="rules" label-width="200px" :inline="true" :model="ruleForm" ref="ruleFormRef" class="demo-form-inline">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item style="width: 100%" prop="deviceId" label="IMEI号">
              <el-input :disabled="true" v-model="ruleForm.deviceId" placeholder="请输入IMEI号" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item style="width: 100%" prop="userNumber" label="佩戴者编号：">
              <el-input v-model="ruleForm.userNumber" :maxlength="10" placeholder="请输入佩戴者编号" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <!-- <el-col :span="12">
            <el-form-item style="width: 100%;" prop="age" label="模式选择">
              <el-input v-model="ruleForm.user" placeholder="请输入IMEI号" clearable />
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-divider />
        <el-row :gutter="20" v-for="(item, index) in ruleForm.contacts" :key="index">
          <el-col :span="12">
            <el-form-item style="width: 100%" :prop="index == 0 ? 'name' : ''" :label="`姓名 ${index + 1}：`">
              <el-input v-model="item.name" placeholder="请输入姓名" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item style="width: 100%" :prop="index == 0 ? 'phone' : ''" :label="`紧急电话 ${index + 1}：`">
              <el-input v-model="item.phone" placeholder="请输入紧急电话" clearable />
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider />
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item style="width: 100%" prop="minHr" label="最低心率（次/分）：">
              <el-input v-model="ruleForm.minHr" placeholder="请输入最低心率" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item style="width: 100%" prop="maxHr" label="最高心率（次/分）：">
              <el-input v-model="ruleForm.maxHr" placeholder="请输入最高心率" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item style="width: 100%" prop="minTemp" label="最低体表温度（℃）：">
              <el-input v-model="ruleForm.minTemp" placeholder="请输入最低体表温度" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item style="width: 100%" prop="maxTemp" label="最高体表温度（℃）：">
              <el-input v-model="ruleForm.maxTemp" placeholder="请输入最高体表温度" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item style="width: 100%" prop="minBo" label="最低血氧（%）：">
              <el-input v-model="ruleForm.minBo" placeholder="请输入最低血氧" clearable />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { deviceConfig, deviceConfigModify } from "@/api";
import { useRoute, useRouter } from "vue-router";
import { TDeviceConfig } from "@/api/index.d";
import { ElMessage, FormInstance, FormRules } from "element-plus";
const { query } = useRoute();
const router = useRouter();

const ruleForm = ref<TDeviceConfig.Tres>({
  deviceId: query.deviceId,
  userNumber: "",
  minHr: 0,
  minBo: 0,
  minTemp: 0,
  maxTemp: 0,
  maxHr: 0,
  contacts: [],
});
const validate = (rule: any, value: any, callback: any) => {
  if (rule.field == "name" && !ruleForm.value.contacts[0].name) return callback(new Error("请输入姓名1"));
  if (rule.field == "phone" && !ruleForm.value.contacts[0].phone) return callback(new Error("请输入紧急电话1"));
  callback();
};
const rules = reactive<FormRules<TDeviceConfig.Tres>>({
  userNumber: [{ required: true, message: "请输入佩戴者编号", trigger: "blur" }],
  minHr: [{ required: true, message: "请输入最低心率", trigger: "blur" }],
  minBo: [{ required: true, message: "请输入最低血氧", trigger: "blur" }],
  minTemp: [{ required: true, message: "请输入最低温度", trigger: "blur" }],
  maxTemp: [{ required: true, message: "请输入最高温度", trigger: "blur" }],
  maxHr: [{ required: true, message: "请输入最高心率", trigger: "blur" }],
  name: [{ required: true, validator: validate, trigger: "blur" }],
  phone: [{ required: true, validator: validate, trigger: "blur" }],
});
const ruleFormRef = ref<FormInstance>();

const getDeviceConfig = () => {
  deviceConfig({ deviceId: query.deviceId }).then((res) => {
    let arr = res.contacts
      .sort((a: any, b: any) => a.id - b.id)
      .map((item) => {
        return {
          name: item.name,
          phone: item.phone,
        };
      });
    ruleForm.value = {
      ...res,
      contacts: arr.length
        ? arr
        : [
            { name: "", phone: "" },
            { name: "", phone: "" },
            { name: "", phone: "" },
          ],
    };
  });
};
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid) => {
    if (valid) {
      deviceConfigModify({
        ...ruleForm.value,
        contacts: ruleForm.value.contacts,
      }).then(() => {
        ElMessage.success("执行成功");
        setTimeout(() => {
          router.back();
        }, 800);
      });
    }
  });
};
onMounted(() => {
  getDeviceConfig();
});
</script>

<style scoped lang="less">
.baseSetting {
  margin-bottom: 20px;
}
.baseSetting :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>
