<template>
  <el-form label-position="top" :model="data" ref="functionForm">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="设置金属腐蚀采样频率(分钟)" prop="frequency.metal">
          <el-input v-model="data.frequency.metal"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="设置温湿度采样频率(分钟)" prop="frequency.th">
          <el-input v-model="data.frequency.th"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="设置SO2采样频率(分钟)" prop="frequency.so2">
          <el-input v-model="data.frequency.so2"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="设置盐雾采样频率(分钟)" prop="frequency.salt">
          <el-input v-model="data.frequency.salt"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="设置时间" prop="time">
          <el-input v-model="data.time"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="设置金属腐蚀采集个数" prop="count">
          <el-input v-model="data.count"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="设置电池电压低阈值" prop="batteryLow">
          <el-input v-model="data.batteryLow"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="设置电池电压高阈值" prop="batteryHigh">
          <el-input v-model="data.batteryHigh"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="设置太阳能电压高阈值" prop="sunHigh">
          <el-input v-model="data.sunHigh"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="设置湿度高阈值" prop="humidityHigh">
          <el-input v-model="data.humidityHigh"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="设置温度低阈值" prop="temperatureLow">
          <el-input v-model="data.temperatureLow"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="设置温度高阈值" prop="temperatureHigh">
          <el-input v-model="data.temperatureHigh"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="设置安全模式" prop="securityMode">
          <el-input v-model="data.securityMode"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="设置金属腐蚀类型" prop="corrosiveType">
          <el-input v-model="data.corrosiveType"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="设置上报时间" prop="reportType">
          <el-input v-model="data.reportType"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-row>
  </el-form>
</template>

<script setup>
import { reactive, ref } from 'vue';

const data = reactive({
  frequency: {
    so2: '', // SO2采样频率
    metal: '', // 金属腐蚀采样频率
    th: '', // 温湿度 采样频率
    salt: '', // 盐雾 采样频率
  }, // 采样频率
  count: '', // 采集个数
  time: '', // 设置时间
  batteryLow: '', // 电池电压低阈值
  batteryHigh: '', // 电池电压高阈值
  sunHigh: '', // 太阳能电压高阈值
  humidityHigh: '', // 湿度高阈值
  temperatureLow: '', // 温度低阈值
  temperatureHigh: '', // 温度高阈值
  securityMode: '', // 安全模式
  corrosiveType: '', // 金属腐蚀类型
  reportType: '', // 上报周期类型 0->时间点  1->周期
});

const functionForm = ref(null); // form

// 提交表单
const onSubmit = () => {
  functionForm.value.validate(valid => {
    console.log(valid, { ...data });
  });
};

// 重置表单
const onReset = () => {
  functionForm.value.resetFields();
};
</script>
