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

      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
        <el-form-item label="设置SO2采样频率(分钟)" prop="frequency.so2">
          <el-input-number :min="0" v-model="data.frequency.so2" />
        </el-form-item>
      </el-col>
      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
        <el-form-item label="设置盐雾采样频率(分钟)" prop="frequency.salt">
          <el-input-number :min="0" v-model="data.frequency.salt" />
        </el-form-item>
      </el-col>

      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
        <el-form-item label="设置时间" prop="time">
          <!-- <el-input v-model="data.time"></el-input> -->
          <el-date-picker v-model="data.time" type="datetime" placeholder="设置时间"></el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
        <el-form-item label="设置金属腐蚀采集个数" prop="count">
          <el-input-number :min="0" v-model="data.count" />
        </el-form-item>
      </el-col>

      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
        <el-form-item label="设置电池电压低阈值" prop="batteryLow">
          <el-input-number :min="0" v-model="data.batteryLow" />
        </el-form-item>
      </el-col>
      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
        <el-form-item label="设置电池电压高阈值" prop="batteryHigh">
          <el-input-number :min="0" v-model="data.batteryHigh" />
        </el-form-item>
      </el-col>

      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
        <el-form-item label="设置太阳能电压高阈值" prop="sunHigh">
          <el-input-number :min="0" v-model="data.sunHigh" />
        </el-form-item>
      </el-col>
      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
        <el-form-item label="设置湿度高阈值" prop="humidityHigh">
          <el-input-number :min="0" v-model="data.humidityHigh" />
        </el-form-item>
      </el-col>

      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
        <el-form-item label="设置温度低阈值" prop="temperatureLow">
          <el-input-number :min="0" v-model="data.temperatureLow" />
        </el-form-item>
      </el-col>
      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
        <el-form-item label="设置温度高阈值" prop="temperatureHigh">
          <el-input-number :min="0" v-model="data.temperatureHigh" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
        <el-form-item label="选择金属通道1类型" prop="securityMode">
          <el-select v-model="data.corrosiveType1" placeholder="选择金属腐蚀类型">
            <el-option v-for="type in types" :key="type.value" :label="type.type" :value="type.value"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
        <el-form-item label="选择金属通道2类型" prop="corrosiveType">
          <el-select v-model="data.corrosiveType2" placeholder="选择金属腐蚀类型">
            <el-option v-for="type in types" :key="type.value" :label="type.type" :value="type.value"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
        <el-form-item label="选择金属通道3类型" prop="securityMode">
          <el-select v-model="data.corrosiveType3" placeholder="选择金属腐蚀类型">
            <el-option v-for="type in types" :key="type.value" :label="type.type" :value="type.value"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
        <el-form-item label="选择金属通道4类型" prop="corrosiveType">
          <el-select v-model="data.corrosiveType4" placeholder="选择金属腐蚀类型">
            <el-option v-for="type in types" :key="type.value" :label="type.type" :value="type.value"></el-option>
          </el-select>
        </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-radio v-model="data.securityMode" label="OPEN">不加密</el-radio>
          <el-radio v-model="data.securityMode" label="ENCRYPTION">加密</el-radio>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="设置上报时间" prop="report.type" style="margin-bottom: 0 !important">
          <el-radio-group v-model="data.report.type">
            <el-radio label="POINT">按设定时间点上报</el-radio>
            <el-radio label="CYCLE">按设定周期上报(分钟)</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20" v-if="data.report.type === 'POINT'">
      <el-col :lg="6" :xl="4" :md="8" :sm="12" v-for="(item, index) in data.report.timePoints" :key="index">
        <el-form-item prop="report.timePoints" style="margin-bottom: 10px !important">
          <el-time-picker format="HH:mm" v-model="data.report.timePoints[index]" :placeholder="`上报时间点${index + 1}`"></el-time-picker>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20" v-else>
      <el-col :span="12">
        <el-form-item prop="report.cycle">
          <el-input-number :min="0" v-model="data.report.cycle" />
        </el-form-item>
      </el-col>
    </el-row>

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

  <!-- 刷新下发按钮 -->
  <Refresh @refresh="onSearch(currentDeviceId, 1)" />
</template>

<script setup>
import { computed, ref, watch, defineEmits, defineProps } from 'vue';
import { useStore } from 'vuex';
import { ElMessage } from 'element-plus';
import cloneDeep from 'lodash/cloneDeep';
import isDate from 'lodash/isDate';
import { getConfigFunction, createConfigFunction } from 'apis/index';
import Refresh from 'components/refresh.vue';
import { functionConfig, corrosiveTypes } from '@/config/config';

const data = ref(functionConfig);
// 金属腐蚀的类型
const types = ref(corrosiveTypes);

const functionForm = ref(null); // form
const store = useStore();
const currentDeviceId = computed(() => store.state.device.currentDeviceId);
const emit = defineEmits(['status']);
const props = defineProps({ activeName: String });

/**
 * 格式化时间
 */
const formatTime = date => {
  const hour = date.getHours();
  const minute = date.getMinutes();
  return `${hour}:${minute}`;
};

/**
 * 查询网络参数配置
 * @param {string} deviceId 设备id
 * @param {number} type 0数据库查询 1刷新查询
 */
async function onSearch(deviceId, type = 0) {
  const params = { deviceId, type };
  const resData = await getConfigFunction(params);
  data.value = resData || functionConfig;
  if (resData && resData.time) {
    resData.time = new Date(+resData.time);
  }
  if (resData && resData.status) {
    emit('status', resData.status);
  }
}

watch(
  currentDeviceId,
  newDeviceId => {
    newDeviceId && props.activeName === 'pending' && onSearch(newDeviceId);
  },
  { immediate: true },
);

// 提交表单
const onSubmit = () => {
  functionForm.value.validate(async () => {
    try {
      if (!currentDeviceId.value) {
        return ElMessage.error('请选择站点');
      }
      const param = cloneDeep({ ...data.value, deviceId: currentDeviceId.value });
      param.time = new Date(param.time).getTime();
      if (param.report.type === 'POINT') {
        // 按时间点上报 格式化时间格式
        const points = [...param.report.timePoints];
        for (let i = 0; i < points.length; i++) {
          if (points[i] && isDate(points[i])) {
            points[i] = formatTime(points[i]);
          }
        }
        param.report.timePoints = points;
      }
      await createConfigFunction(param);
      ElMessage.success('提交成功');
    } catch (error) {
      throw new Error(error);
    }
  });
};

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

// currentDeviceId && onSearch(currentDeviceId.value);
</script>
