<template>
    <div class="edit-popup">
        <popup
            ref="popupRef"
            :title="popupTitle"
            :async="true"
            width="650px"
            @confirm="handleSubmit"
            @close="handleClose"
        >
            <el-form ref="formRef" :model="formData" label-width="170px" :rules="formRules">

              <el-form-item label="所属栏舍" prop="product_id">
                <el-select
                    v-model="formData.fence_house_id"
                    remote
                    filterable
                    :remote-method="queryFenceHouse"
                    :loading="loading"
                >
                  <el-option
                      v-for="(item, index) in optionsData.fenceHouse"
                      :key="index"
                      :label="item.fencehouseinfo"
                      :value="item.id"
                  />
                </el-select>
              </el-form-item>

                <el-form-item label="室温（高）" prop="air_temp_max">
                    <el-input v-model="formData.air_temp_max" clearable  />
                </el-form-item>
                <el-form-item label="室温（低）" prop="air_temp_min">
                    <el-input v-model="formData.air_temp_min" clearable />
                </el-form-item>

                <el-form-item label="湿度（高）" prop="air_mois_max">
                    <el-input v-model="formData.air_mois_max" clearable />
                </el-form-item>
                <el-form-item label="湿度（低）" prop="air_mois_min">
                    <el-input v-model="formData.air_mois_min" clearable />
                </el-form-item>

              <el-form-item label="氮气含量（高）" prop="nitrogen_max">
                <el-input v-model="formData.nitrogen_max" clearable/>
              </el-form-item>
                <el-form-item label="氮气含量（低）" prop="nitrogen_min">
                    <el-input v-model="formData.nitrogen_min" clearable/>
                </el-form-item>

              <el-form-item label="防火(高)" prop="wind_speed_min">
                <el-input v-model="formData.fireproof_max" clearable />
              </el-form-item>
                <el-form-item label="防火(低)" prop="wind_speed_max">
                    <el-input v-model="formData.fireproof_min" clearable/>
                </el-form-item>

              <el-form-item label="甲烷（高）" prop="methane_max">
                <el-input v-model="formData.methane_max" clearable />
              </el-form-item>
                <el-form-item label="甲烷（低）" prop="methane_min">
                  <el-input v-model="formData.methane_min" clearable/>
                </el-form-item>

              <el-form-item label="噪音（高）" prop="noise_max">
                <el-input v-model="formData.noise_max" clearable />
              </el-form-item>
              <el-form-item label="噪音（低）" prop="noise_min">
                <el-input v-model="formData.noise_min" clearable/>
              </el-form-item>

              <el-form-item label="体温（高）" prop="temperature_max">
                <el-input v-model="formData.temperature_max" clearable />
              </el-form-item>
              <el-form-item label="体温（低）" prop="temperature_min">
                <el-input v-model="formData.temperature_min" clearable/>
              </el-form-item>


            </el-form>
        </popup>
    </div>
</template>

<script lang="ts" setup name="monitorThresholdEdit">
import type { FormInstance } from 'element-plus'
import Popup from '@/components/popup/index.vue'
import { apiMonitorThresholdAdd, apiMonitorThresholdEdit, apiMonitorThresholdDetail, apiFenceHouseLists } from '@/api/monitor_threshold'
import { timeFormat } from '@/utils/util'
import type { PropType } from 'vue'
import {useDictOptions} from "@/hooks/useDictOptions";
import {apiProductLists} from "@/api/device";
import {ref} from "vue";
defineProps({
    dictData: {
        type: Object as PropType<Record<string, any[]>>,
        default: () => ({})
    }
})
const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref('add')


// 弹窗标题
const popupTitle = computed(() => {
    return mode.value == 'edit' ? '编辑报警配置' : '新增报警配置'
})

// 表单数据
const formData = reactive({
    id: '',
    fence_house_id: '',
    air_temp_max: '',
    air_temp_min: '',
    air_mois_max: '',
    air_mois_min: '',
    nitrogen_min: '',
    nitrogen_max: '',
    fireproof_min: '',
    fireproof_max: '',
    methane_min: '',
    methane_max: '',
    noise_min: '',
    noise_max: '',
    temperature_min: '',
    temperature_max: '',
})


// 表单验证
const formRules = reactive<any>({})


const { optionsData } = useDictOptions<{
  fenceHouse: any[]
}>({
  fenceHouse: {
    api: apiFenceHouseLists,
    params: {
      all: 1
    }
  }
})

const loading = ref(false)

const queryFenceHouse = async (query: string) => {
  loading.value = true
  const fenceHouseList = await apiFenceHouseLists({
    fence_house_name: query ?? ''
  })
  optionsData.fenceHouse = fenceHouseList
  loading.value = false
}
// 获取详情
const setFormData = async (data: Record<any, any>) => {
    for (const key in formData) {
        if (data[key] != null && data[key] != undefined) {
            //@ts-ignore
            formData[key] = data[key]
        }
    }
    
    
}

const getDetail = async (row: Record<string, any>) => {
    const data = await apiMonitorThresholdDetail({
        id: row.id
    })
    setFormData(data)
}


// 提交按钮
const handleSubmit = async () => {
    await formRef.value?.validate()
    const data = { ...formData,  }
    mode.value == 'edit' 
        ? await apiMonitorThresholdEdit(data) 
        : await apiMonitorThresholdAdd(data)
    popupRef.value?.close()
    emit('success')
}

//打开弹窗
const open = (type = 'add') => {
    mode.value = type
    popupRef.value?.open()
}

// 关闭回调
const handleClose = () => {
    emit('close')
}



defineExpose({
    open,
    setFormData,
    getDetail
})
</script>
