<template>
  <div class="person-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.deptId1"
            :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')"
            :disabled="!devicesLoaded"
            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.devicePersons || '暂无' }}</span>
              </span>
            </el-checkbox>
          </el-checkbox-group>
          <el-empty
            v-if="devicesLoaded && 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('configPerson.rp') }}</span>
          </div>
          <el-tag size="small" type="info">{{ filteredUsers.length }} 人</el-tag>
        </div>

        <div class="panel-toolbar">
          <el-tree-select
            v-model="formData.deptIds"
            :data="deptList"
            :props="defaultProps"
            multiple
            show-checkbox
            check-strictly
            node-key="id"
            filterable
            clearable
            collapse-tags
            collapse-tags-tooltip
            :max-collapse-tags="8"
            popper-class="dept-tags-popper"
            size="default"
            class="toolbar-control dept-tags-select"
            :placeholder="t('configPerson.rpHolder')"
            @change="handlePersonDeptChange"
            @clear="handleClearDeptForPerson" />
          <el-input
            v-model="userFilterText"
            :placeholder="t('devicePerson.filterUserPlaceholder')"
            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="selectedUsers"
            class="option-list"
            @change="handleUserSelectionChange">
            <el-checkbox
              v-for="user in filteredUsers"
              :key="user.id"
              :value="user.id"
              class="option-item"
              :class="{ 'is-selected': selectedUsers.includes(user.id) }">
              <span class="option-content">
                <span class="option-main">{{ user.nickname || user.username }}</span>
                <span class="option-sub">{{ user.deptName || '暂无部门' }}</span>
              </span>
            </el-checkbox>
          </el-checkbox-group>
          <el-empty
            v-if="personLoaded && filteredUsers.length === 0"
            :image-size="92"
            description="暂无责任人" />
        </el-scrollbar>
      </section>
    </div>

    <section class="panel reason-panel">
      <div class="panel-header">
        <div class="panel-title">
          <span class="panel-marker"></span>
          <span>{{ t('configPerson.reasonForAdjustment') }}</span>
          <span class="required-star">*</span>
        </div>
      </div>
      <el-input
        v-model="formData.reason"
        :placeholder="t('configPerson.rfaHolder')"
        type="textarea"
        :rows="4"
        resize="none"
        size="default"
        :disabled="selectedDevices.length === 0 || selectedUsers.length === 0"
        @input="handleReasonInput" />
    </section>

    <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-person-config-record"
        class="record-table">
        <ZmTableColumn prop="deviceNames" :label="t('devicePerson.deviceName')" min-width="240" />
        <ZmTableColumn prop="userNames" :label="t('devicePerson.rp')" min-width="220">
          <template #default="{ row }">
            <span>{{ row.userNames || '未选择责任人' }}</span>
          </template>
        </ZmTableColumn>
        <ZmTableColumn
          prop="reason"
          :label="t('configPerson.reasonForAdjustment')"
          min-width="280"
          align="left">
          <template #default="{ row }">
            <span>{{ row.reason || '未填写调整原因' }}</span>
          </template>
        </ZmTableColumn>
        <ZmTableColumn :label="t('devicePerson.operation')" width="120" fixed="right" action>
          <template #default="{ row }">
            <el-button type="danger" link size="default" @click="removeTempRelation(row.deviceIds)">
              <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 { useDebounceFn } from '@vueuse/core'
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 * as UserApi from '@/api/system/user'
import type { UserVO } from '@/api/system/user'
import { IotDeviceApi, type IotDeviceVO } from '@/api/pms/device'
import { IotDevicePersonApi } from '@/api/pms/iotdeviceperson'
import { useTagsViewStore } from '@/store/modules/tagsView'
import { defaultProps, handleTree } from '@/utils/tree'

defineOptions({ name: 'ConfigDevicePerson' })

type TempRelation = {
  deviceIds: number[]
  deviceNames: string
  userIds: number[]
  userNames: string
  reason: string
}

type ConfigFormData = {
  deptId1?: number
  deptIds: number[]
  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 simpleUsers = ref<UserVO[]>([])
const selectedDevices = ref<number[]>([])
const selectedUsers = ref<number[]>([])
const tempRelations = ref<TempRelation[]>([])
const deviceFilterText = ref('')
const userFilterText = ref('')
const devicesLoaded = ref(false)
const personLoaded = ref(false)

const formData = reactive<ConfigFormData>({
  deptId1: undefined,
  deptIds: [],
  reason: ''
})

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.devicePersons || '').toLowerCase().includes(searchText)
    )
  })
})

const filteredUsers = computed(() => {
  const searchText = userFilterText.value.toLowerCase().trim()
  if (!searchText) return simpleUsers.value

  return simpleUsers.value.filter((user) => {
    return (
      (user.nickname || '').toLowerCase().includes(searchText) ||
      (user.username || '').toLowerCase().includes(searchText) ||
      (user.deptName || '').toLowerCase().includes(searchText)
    )
  })
})

const selectedUserObjects = computed(() => {
  return simpleUsers.value.filter((user) => selectedUsers.value.includes(user.id))
})

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

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

    if (newVal.length === 0) {
      selectedUsers.value = []
      formData.deptIds = []
      formData.reason = ''
      simpleUsers.value = []
      personLoaded.value = false
      tempRelations.value = []
      return
    }

    syncPersonDeptBySelectedDevices()
    syncRelations()
    void debouncedGetUserList()
  },
  { deep: true }
)

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

const getUserNames = () => {
  return selectedUserObjects.value.map((user) => user.nickname || user.username).join('、')
}

const syncRelations = () => {
  const userIds = [...selectedUsers.value]
  const userNames = getUserNames()
  const selectedDeviceSet = new Set(selectedDevices.value)

  tempRelations.value = simpleDevices.value
    .filter((device) => selectedDeviceSet.has(device.id))
    .map((device) => ({
      deviceIds: [device.id],
      deviceNames: getDeviceLabel(device),
      userIds,
      userNames,
      reason: formData.reason
    }))
}

const syncPersonDeptBySelectedDevices = () => {
  const deptIdSet = new Set<number>()
  selectedDevices.value.forEach((deviceId) => {
    const device = simpleDevices.value.find((item) => item.id === deviceId)
    if (device?.deptId) {
      deptIdSet.add(device.deptId)
    }
  })
  formData.deptIds = Array.from(deptIdSet)
}

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

const getUserList = async () => {
  const deptIds = formData.deptIds || []

  if (!deptIds.length) {
    simpleUsers.value = []
    selectedUsers.value = []
    personLoaded.value = true
    syncRelations()
    return
  }

  personLoaded.value = false
  try {
    const data = await UserApi.simpleUserList({
      deptIds,
      pageNo: 1,
      pageSize: 100
    } as any)
    simpleUsers.value = data || []
    selectedUsers.value = selectedUsers.value.filter((id) =>
      simpleUsers.value.some((user) => user.id === id)
    )
    syncRelations()
  } catch (error) {
    simpleUsers.value = []
    selectedUsers.value = []
    ElMessage.error('获取责任人列表失败')
  } finally {
    personLoaded.value = true
  }
}

const debouncedGetUserList = useDebounceFn(async () => {
  if (!selectedDevices.value.length) return
  await getUserList()
}, 600)

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

const handlePersonDeptChange = async () => {
  userFilterText.value = ''
  await getUserList()
}

const handleUserSelectionChange = (userIds: number[]) => {
  if (!selectedDevices.value.length) {
    ElMessage.warning('请先选择设备')
    selectedUsers.value = []
    return
  }

  selectedUsers.value = userIds
  syncRelations()
}

const handleReasonInput = (value: string) => {
  formData.reason = value
  syncRelations()
}

const removeTempRelation = (deviceIds: number[]) => {
  selectedDevices.value = selectedDevices.value.filter((id) => !deviceIds.includes(id))
  tempRelations.value = tempRelations.value.filter(
    (relation) => relation.deviceIds.join() !== deviceIds.join()
  )
}

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

const handleClearDeptForPerson = () => {
  formData.deptIds = []
  simpleUsers.value = []
  selectedUsers.value = []
  userFilterText.value = ''
  personLoaded.value = false
  syncRelations()
}

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

  if (!selectedUsers.value.length) {
    ElMessage.error(t('configPerson.selectPersons'))
    return
  }

  if (tempRelations.value.some((item) => !item.reason?.trim())) {
    ElMessage.error(t('configPerson.rfaHolder'))
    return
  }

  try {
    const submitData = tempRelations.value.flatMap((relation) => {
      return relation.deviceIds.map((deviceId) => ({
        deviceId,
        userIds: relation.userIds,
        userNames: relation.userNames,
        reason: relation.reason
      }))
    })

    await IotDevicePersonApi.saveDevicePersonRelation(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.deptId1 = targetDeptId
    formData.deptIds = [targetDeptId]

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

<style lang="scss" scoped>
.person-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%;
}

.dept-tags-select :deep(.el-select__tags) {
  flex-wrap: nowrap;
  max-width: calc(100% - 48px);
  overflow: hidden;
}

.dept-tags-select :deep(.el-tag) {
  flex-shrink: 0;
  max-width: 92px;
}

.dept-tags-select :deep(.el-tag__content) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:global(.dept-tags-popper .el-select__selection) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 520px;
  max-height: 220px;
  overflow-y: auto;
}

:global(.dept-tags-popper .el-select__selected-item) {
  max-width: 120px;
}

:global(.dept-tags-popper .el-tag__content),
:global(.dept-tags-popper .el-select__tags-text) {
  display: inline-block;
  max-width: 92px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

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

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

.option-item {
  display: flex;
  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;
  align-items: flex-start;

  &: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;
  width: 100%;
  min-width: 0;
  align-items: center;
  grid-template-columns: minmax(90px, 0.7fr) minmax(120px, 1fr) minmax(150px, 1.2fr);
  gap: 12px;
}

.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);
}

.reason-panel,
.record-panel {
  margin-top: 16px;
}

.reason-panel {
  padding-bottom: 18px;

  :deep(.el-textarea) {
    padding: 18px 18px 0;
  }
}

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

.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>
