<template>
  <n-drawer display-directive="if" :show="modelShow" :width="502" :placement="placement">
    <n-drawer-content title="设备筛选">
      <n-space vertical>
        <span>组织</span>
        <n-tree-select
          placement="top-start"
          label-field="name"
          v-model:value="searchParams.organizationId"
          key-field="id"
          children-field="children"
          :options="originationOption"
        />
        <span>产品</span>
        <n-select v-model:value="searchParams.deviceProfileIds" :options="deviceProfileOption" />
        <span>设备</span>
        <n-input v-model:value="searchParams.name" type="text" placeholder="请输入设备名称" />
        <span>设备状态</span>
        <n-radio-group v-model:value="searchParams.deviceState" name="radiogroup">
          <n-space>
            <n-radio v-for="(item, index) in deviceStateGroup" :key="index" :value="item.value">
              {{ item.label }}
            </n-radio>
          </n-space>
        </n-radio-group>
        <span>是否告警</span>
        <n-radio-group v-model:value="searchParams.alarmStatus" name="radiogroup">
          <n-space>
            <n-radio v-for="(item, index) in alarmStatusGroup" :key="index" :value="item.value">
              {{ item.label }}
            </n-radio>
          </n-space>
        </n-radio-group>
        <span>配置查询分页</span>
        <n-space justify="space-between">
          <n-input-number :min="1" v-model:value="searchPage.page" clearable />
          <n-input-number :step="10" :min="10" v-model:value="searchPage.pageSize" clearable />
        </n-space>
      </n-space>
      <template #footer>
        <n-button @click="handleCancel" type="tertiary">取消</n-button>
        <div style="visibility: hidden; width: 10px">占位</div>
        <n-button @click="handleSubmit" type="success">确定</n-button>
      </template>
    </n-drawer-content>
  </n-drawer>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue'
import { NTreeSelect } from 'naive-ui'
import { getOrganizationList, getProfileList } from '@/api/external/common/index'

interface searchParamsInterface {
  organizationId: string | null
  deviceProfileIds: null
  name: string
  deviceState: string | null
  alarmStatus: number
}

defineProps({
  modelShow: Boolean
})

const emit = defineEmits(['searchParams', 'closeDrawer'])

const placement = ref('right')

//设备状态
const deviceStateGroup = [
  {
    label: '全部',
    value: null
  },
  {
    label: '待激活',
    value: 'INACTIVE'
  },
  {
    label: '在线',
    value: 'ONLINE'
  },
  {
    label: '离线',
    value: 'OFFLINE'
  }
]

//告警状态
const alarmStatusGroup = [
  {
    label: '是',
    value: 1
  },
  {
    label: '否',
    value: 0
  }
]

const searchPage = reactive<{ page: number; pageSize: number }>({
  page: 1,
  pageSize: 10
})

const searchParams = reactive<searchParamsInterface>({
  organizationId: null,
  deviceProfileIds: null,
  name: '',
  deviceState: null,
  alarmStatus: 0
})

const originationOption = ref([])

const deviceProfileOption = ref([])

const loadList = async () => {
  const resOrganization = await getOrganizationList()
  const resProfileList = await getProfileList()
  Promise.all([resOrganization, resProfileList]).then(res => {
    originationOption.value = res[0]
    deviceProfileOption.value = res[1].map((item: { name: string; tbProfileId: string }) => ({
      label: item.name,
      value: item.tbProfileId
    }))
  })
}

const handleSubmit = () => {
  searchParams.deviceProfileIds = [searchParams.deviceProfileIds] as any
  emit('searchParams', searchPage, searchParams)
  handleCancel()
}

const handleCancel = () => {
  for (let i in searchParams) Reflect.set(searchParams, i, null)
  searchParams.name = ''
  searchParams.alarmStatus = 0
  searchPage.page = 1
  searchPage.pageSize = 10
  emit('closeDrawer')
}

onMounted(() => {
  loadList()
})
</script>

<style lang="scss" scoped></style>