<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="registerDrawer"
    showFooter
    title="设置"
    width="500px"
    @ok="handleSubmit"
  >
    <div v-for="(item, index) in Title" :key="index" class="mt-10px">
      <div class="text-20px font-semibold">{{ enumName[item] }}</div>
      <div class="mt-30px flex" v-for="(item1, index1) in setFormat(item)" :key="index1">
        <div class="w-90px leading-42px">{{ enumName1[item1] }}：</div>
        <div>
          <div
            class="flex w-full items-center mt-10px"
            v-for="(item2, index2) in roulsDate.value[item][item1]"
            :key="index2"
          >
            <Input
              type="number"
              v-model:value="item2.min"
              placeholder="请输入"
              :suffix="enumCompany[item]"
            />
            <div class="mx-10px">-</div>
            <Input
              type="number"
              v-model:value="item2.max"
              placeholder="请输入"
              :suffix="enumCompany[item]"
            />
          </div>
        </div>
      </div>
    </div>
  </BasicDrawer>
</template>

<script lang="ts" setup>
  import { getDeviceWarningRules } from '/@/api/sys/user'
  import { ref, computed } from 'vue'
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer'
  import { Input } from 'ant-design-vue'
  import { editDeviceWarningRules } from '/@/api/sys/user'
  const emits = defineEmits(['success', 'register'])
  const enumName = {
    conductivity: '电导率',
    humidity: '湿度',
    temperature: '温度',
    k: '氮',
    n: '磷',
    p: '钾',
  }
  const enumCompany = {
    temperature: '℃',
    conductivity: 'us/cm',
    humidity: '%',
    k: 'mg/kg',
    n: 'mg/kg',
    p: 'mg/kg',
  }
  const enumName1 = {
    1: 'Ⅰ级预警',
    2: 'Ⅱ级预警',
    3: 'Ⅲ级预警',
    4: 'Ⅳ级预警',
  }
  const roulsDate = ref(null)
  const Title = computed(() => {
    if (!roulsDate.value) return []
    return Object.keys(roulsDate.value.value)
  })
  const setFormat = (e: string) => {
    if (!roulsDate.value) return []
    return Object.keys(roulsDate.value.value[e])
  }
  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async () => {
    setDrawerProps({ confirmLoading: false })

    const res = await getDeviceWarningRules({})
    roulsDate.value = res.find((e) => e.slug === 'device_warning_rule_soil')
  })

  const handleSubmit = async () => {
    if (!roulsDate.value) return
    try {
      const params = {
        slug: roulsDate.value.slug,
        value: roulsDate.value.value,
      }
      console.log(params)
      const res = await editDeviceWarningRules(params)
      console.log(res)
      closeDrawer()
      emits('success')
    } finally {
      setDrawerProps({ confirmLoading: false })
    }
  }
</script>

<style scoped></style>
