<template>
  <div class="status-config-page">
    <div class="selection-grid">
      <section class="panel">
        <div class="panel-header">
          <div class="panel-title">
            <span class="panel-marker"></span>
            <span>{{ t('configPerson.deviceList') }}</span>
          </div>
          <el-tag size="small" type="info">{{ filteredDevices.length }} 台</el-tag>
        </div>

        <div class="panel-toolbar">
          <el-tree-select
            v-model="formData.deptId"
            :data="deptList"
            :props="defaultProps"
            check-strictly
            node-key="id"
            filterable
            clearable
            size="default"
            class="toolbar-control"
            :placeholder="t('configPerson.deviceListHolder')"
            @node-click="handleDeptDeviceTreeNodeClick"
            @clear="handleClearDeptForDevice" />
          <el-input
            v-model="deviceFilterText"
            :placeholder="t('devicePerson.filterDevicePlaceholder')"
            clearable
            size="default"
            class="toolbar-control">
            <template #prefix>
              <Icon icon="ep:search" />
            </template>
          </el-input>
        </div>

        <el-scrollbar class="option-scroll">
          <el-checkbox-group v-model="selectedDevices" class="option-list">
            <el-checkbox
              v-for="device in filteredDevices"
              :key="device.id"
              :value="device.id"
              class="option-item"
              :class="{ 'is-selected': selectedDevices.includes(device.id) }">
              <span class="option-content">
                <span class="option-main">{{ device.deviceCode || '暂无编码' }}</span>
                <span class="option-sub">{{ device.deviceName || '暂无名称' }}</span>
                <span class="option-extra">当前状态：{{ device.deviceStatusName || '暂无' }}</span>
              </span>
            </el-checkbox>
          </el-checkbox-group>
          <el-empty v-if="filteredDevices.length === 0" :image-size="92" description="暂无设备" />
        </el-scrollbar>
      </section>

      <section class="panel">
        <div class="panel-header">
          <div class="panel-title">
            <span class="panel-marker"></span>
            <span>{{ t('configDevice.rp') }}</span>
          </div>
          <el-tag size="small" type="info">{{ selectedDevices.length }} 台已选</el-tag>
        </div>

        <div class="status-form">
          <el-form label-position="top" size="default">
            <el-form-item :label="t('deviceStatus.status')">
              <el-select
                v-model="formData.deviceStatus"
                :placeholder="t('deviceStatus.choose')"
                clearable
                class="toolbar-control"
                :disabled="selectedDevices.length === 0"
                @change="syncRelations">
                <el-option
                  v-for="dict in statusOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value" />
              </el-select>
            </el-form-item>

            <el-form-item>
              <template #label>
                <span>{{ t('configDevice.reasonForAdjustment') }}</span>
                <span class="required-star">*</span>
              </template>
              <el-input
                v-model="formData.reason"
                :placeholder="t('configDevice.rfaHolder')"
                type="textarea"
                :rows="8"
                resize="none"
                :disabled="!formData.deviceStatus"
                @input="syncRelations" />
            </el-form-item>
          </el-form>
        </div>
      </section>
    </div>

    <section class="panel record-panel">
      <div class="panel-header">
        <div class="panel-title">
          <span class="panel-marker"></span>
          <span>{{ t('configPerson.adjustmentRecords') }}</span>
        </div>
        <el-button
          type="primary"
          size="default"
          :disabled="isSaveDisabled"
          @click="submitRelations">
          <Icon icon="ep:check" class="mr-5px" />
          {{ t('iotMaintain.save') }}
        </el-button>
      </div>

      <ZmTable
        :data="tempRelations"
        :loading="false"
        :show-border="true"
        settings-cache-key="pms-device-status-config-record"
        class="record-table">
        <ZmTableColumn prop="deviceNames" :label="t('deviceStatus.deviceName')" min-width="240" />
        <ZmTableColumn prop="status" :label="t('deviceStatus.status')" min-width="140">
          <template #default="{ row }">
            <dict-tag :type="DICT_TYPE.PMS_DEVICE_STATUS" :value="row.status" />
          </template>
        </ZmTableColumn>
        <ZmTableColumn
          prop="reason"
          :label="t('configDevice.reasonForAdjustment')"
          min-width="280"
          align="left">
          <template #default="{ row }">
            <span>{{ row.reason || '未填写调整原因' }}</span>
          </template>
        </ZmTableColumn>
        <ZmTableColumn :label="t('deviceStatus.operation')" width="120" fixed="right" action>
          <template #default="{ row }">
            <el-button type="danger" link size="default" @click="removeTempRelation(row.deviceId)">
              <Icon icon="ep:delete" class="mr-4px" />
              {{ t('fault.del') }}
            </el-button>
          </template>
        </ZmTableColumn>
      </ZmTable>
    </section>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref, unref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import { useTableComponents } from '@/components/ZmTable/useTableComponents'
import * as DeptApi from '@/api/system/dept'
import { IotDeviceApi, type IotDeviceVO } from '@/api/pms/device'
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
import { useTagsViewStore } from '@/store/modules/tagsView'
import { defaultProps, handleTree } from '@/utils/tree'

defineOptions({ name: 'ConfigDeviceStatus' })

type TempRelation = {
  deviceId: number
  deviceNames: string
  status: string
  reason: string
}

type ConfigFormData = {
  deptId?: number
  deviceStatus?: string
  reason: string
}

const router = useRouter()
const route = useRoute()
const { t } = useI18n()
const { delView } = useTagsViewStore()
const { ZmTable, ZmTableColumn } = useTableComponents<TempRelation>()

const deptList = ref<Tree[]>([])
const simpleDevices = ref<IotDeviceVO[]>([])
const selectedDevices = ref<number[]>([])
const tempRelations = ref<TempRelation[]>([])
const deviceFilterText = ref('')

const formData = reactive<ConfigFormData>({
  deptId: undefined,
  deviceStatus: undefined,
  reason: ''
})

const statusOptions = computed(() => getStrDictOptions(DICT_TYPE.PMS_DEVICE_STATUS))

const filteredDevices = computed(() => {
  const searchText = deviceFilterText.value.toLowerCase().trim()
  if (!searchText) return simpleDevices.value

  return simpleDevices.value.filter((device) => {
    return (
      (device.deviceCode || '').toLowerCase().includes(searchText) ||
      (device.deviceName || '').toLowerCase().includes(searchText) ||
      (device.deviceStatusName || '').toLowerCase().includes(searchText)
    )
  })
})

const isSaveDisabled = computed(() => {
  return (
    tempRelations.value.length === 0 ||
    !formData.reason.trim() ||
    tempRelations.value.some((item) => !item.status || !item.reason?.trim())
  )
})

watch(
  selectedDevices,
  (newVal, oldVal) => {
    const removedDeviceIds = oldVal.filter((id) => !newVal.includes(id))
    tempRelations.value = tempRelations.value.filter(
      (relation) => !removedDeviceIds.includes(relation.deviceId)
    )

    if (newVal.length === 0) {
      formData.deviceStatus = undefined
      formData.reason = ''
      tempRelations.value = []
      return
    }

    syncRelations()
  },
  { deep: true }
)

const getDeviceLabel = (device: IotDeviceVO) => {
  return `${device.deviceCode || '暂无编码'}（${device.deviceName || '暂无名称'}）`
}

const syncRelations = () => {
  if (!formData.deviceStatus) {
    tempRelations.value = []
    return
  }

  const selectedDeviceSet = new Set(selectedDevices.value)
  tempRelations.value = simpleDevices.value
    .filter((device) => selectedDeviceSet.has(device.id))
    .map((device) => ({
      deviceId: device.id,
      deviceNames: getDeviceLabel(device),
      status: formData.deviceStatus!,
      reason: formData.reason
    }))
}

const getDeviceList = async () => {
  try {
    const data = await IotDeviceApi.simpleDevices({ deptId: formData.deptId })
    simpleDevices.value = data || []
    selectedDevices.value = selectedDevices.value.filter((id) =>
      simpleDevices.value.some((device) => device.id === id)
    )
    syncRelations()
  } catch (error) {
    simpleDevices.value = []
    ElMessage.error('获取设备列表失败')
  }
}

const handleDeptDeviceTreeNodeClick = async (row: Tree) => {
  formData.deptId = row.id
  selectedDevices.value = []
  deviceFilterText.value = ''
  await getDeviceList()
}

const handleClearDeptForDevice = () => {
  simpleDevices.value = []
  selectedDevices.value = []
  tempRelations.value = []
  deviceFilterText.value = ''
}

const removeTempRelation = (deviceId: number) => {
  selectedDevices.value = selectedDevices.value.filter((id) => id !== deviceId)
  tempRelations.value = tempRelations.value.filter((relation) => relation.deviceId !== deviceId)
}

const submitRelations = async () => {
  if (!selectedDevices.value.length) {
    ElMessage.error(t('iotMaintain.deviceHolder'))
    return
  }

  if (!formData.deviceStatus) {
    ElMessage.error(t('deviceStatus.choose'))
    return
  }

  if (tempRelations.value.some((item) => !item.reason?.trim())) {
    ElMessage.error('请填写所有设备的调整原因')
    return
  }

  try {
    const submitData = tempRelations.value.map((relation) => ({
      deviceId: relation.deviceId,
      status: relation.status,
      reason: relation.reason
    }))

    await IotDeviceApi.saveDeviceStatuses(submitData)
    ElMessage.success('提交成功')
    tempRelations.value = []
    delView(unref(router.currentRoute.value))
    router.back()
  } catch (error) {
    ElMessage.error('提交失败')
  }
}

const findDeptNode = (nodes: Tree[], deptId: number): Tree | null => {
  for (const node of nodes) {
    if (node.id === deptId) return node

    if (node.children?.length) {
      const found = findDeptNode(node.children, deptId)
      if (found) return found
    }
  }

  return null
}

onMounted(async () => {
  try {
    const deptData = await DeptApi.getSimpleDeptList()
    deptList.value = handleTree(deptData)

    const routeDeptId = route.query.deptId ? Number(route.query.deptId) : undefined
    const targetDeptId = routeDeptId || deptList.value[0]?.id

    if (!targetDeptId) {
      ElMessage.warning('暂无可用部门数据')
      return
    }

    formData.deptId = targetDeptId
    const targetDeptNode = findDeptNode(deptList.value, targetDeptId)
    if (targetDeptNode) {
      await handleDeptDeviceTreeNodeClick(targetDeptNode)
    } else {
      await getDeviceList()
    }
  } catch (error) {
    ElMessage.error('加载部门数据失败')
  }
})
</script>

<style lang="scss" scoped>
.status-config-page {
  min-height: calc(
    100vh - 20px - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height)
  );
  background: #f5f7fb;
}

.selection-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.panel {
  overflow: hidden;
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgb(15 35 70 / 5%);
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 0 18px;
  background: #f4f9ff;
  border-bottom: 1px solid var(--el-border-color-lighter);
}

.panel-title {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.panel-marker {
  width: 4px;
  height: 18px;
  margin-right: 10px;
  background: var(--el-color-primary);
  border-radius: 4px;
}

.panel-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 16px 18px 0;
}

.toolbar-control {
  width: 100%;
}

.status-form {
  padding: 18px;
}

.option-scroll {
  height: 430px;
  padding: 14px 18px 18px;
}

.option-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.option-item {
  display: flex;
  align-items: flex-start;
  height: auto;
  min-width: 0;
  padding: 12px;
  cursor: pointer;
  background: var(--el-fill-color-blank);
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 6px;
  transition:
    border-color 0.2s,
    background-color 0.2s,
    box-shadow 0.2s;

  &:hover,
  &.is-selected {
    background: #f7fbff;
    border-color: var(--el-color-primary-light-5);
    box-shadow: 0 6px 18px rgb(64 158 255 / 10%);
  }

  :deep(.el-checkbox__input) {
    margin-top: 2px;
  }

  :deep(.el-checkbox__label) {
    flex: 1;
    min-width: 0;
    padding-left: 10px;
  }
}

.option-content {
  display: grid;
  align-items: center;
  grid-template-columns: minmax(90px, 0.7fr) minmax(120px, 1fr) minmax(150px, 1.2fr);
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.option-main,
.option-sub,
.option-extra {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.option-main {
  font-size: 14px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.option-sub,
.option-extra {
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

.record-panel {
  padding-bottom: 18px;
  margin-top: 16px;
}

.record-table {
  width: calc(100% - 36px);
  margin: 18px;
}

.required-star {
  margin-left: 4px;
  color: var(--el-color-danger);
}

@media (width <= 1180px) {
  .selection-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
</style>
