<template>
  <!-- 列表 -->
  <ContentWrap>
    <div class="question-header">
      <div class="header-left">
        <el-button
          type="primary"
          plain
          @click="openForm('create')"
          v-hasPermi="['prison:question:create']"
        >
          <Icon icon="ep:plus" class="mr-5px" /> 新建问题
        </el-button>
        <el-button
          type="success"
          plain
          @click="openPartDialog"
          v-hasPermi="['prison:question:create']"
        >
          <Icon icon="ep:folder" class="mr-5px" /> 分区管理
        </el-button>
        <el-button
          type="danger"
          plain
          :disabled="checkedIds.length === 0"
          @click="handleDeleteBatch"
          v-hasPermi="['prison:question:delete']"
        >
          <Icon icon="ep:delete" class="mr-5px" /> 批量删除
        </el-button>
      </div>
      <div class="header-right">
        <span class="total-count">共 {{ list.length }} 道问题</span>
      </div>
    </div>

    <!-- 分区显示（可拖拽排序） -->
    <div class="parts-container">
      <draggable
        v-model="partitions"
        item-key="name"
        handle=".part-drag-handle"
        :animation="200"
        @end="onPartitionDragEnd"
        class="parts-list"
      >
        <template #item="{ element: partition }">
          <div class="part-group" :class="{ 'is-default': !partition.name }">
            <!-- 分区头部 -->
            <div class="part-header">
              <div class="part-drag-handle">
                <Icon icon="ep:rank" class="drag-icon" />
              </div>
              <el-checkbox
                v-model="partition.selected"
                @change="(val: boolean) => togglePartQuestions(partition, val)"
                :disabled="!partition.name"
              >
                <span class="part-title">{{ partition.name || '默认分区' }}</span>
              </el-checkbox>
              <span class="part-count">({{ partition.questions.length }} 道题)</span>
              <div class="part-actions">
                <el-button
                  v-if="partition.name"
                  type="primary"
                  link
                  size="small"
                  @click="editPartition(partition)"
                >
                  <Icon icon="ep:edit" /> 编辑
                </el-button>
                <el-button
                  v-if="partition.name"
                  type="danger"
                  link
                  size="small"
                  @click="deletePartition(partition)"
                >
                  <Icon icon="ep:delete" /> 删除
                </el-button>
              </div>
            </div>

            <!-- 分区内的问题列表（可拖拽排序） -->
            <draggable
              v-model="partition.questions"
              item-key="id"
              handle=".question-drag-handle"
              :animation="200"
              @end="onQuestionDragEnd(partition)"
              class="questions-table"
              ghost-class="ghost-row"
            >
              <template #item="{ element: question }">
                <div class="question-row" :class="{ 'is-hidden': !partition.selected }">
                  <div class="question-drag-handle">
                    <Icon icon="ep:rank" class="drag-icon" />
                  </div>
                  <el-checkbox
                    v-model="question._checked"
                    @change="(val: boolean) => toggleQuestionCheck(question, val, partition)"
                    class="question-checkbox"
                  />
                  <span class="question-index">{{ question._index + 1 }}</span>
                  <div class="question-info">
                    <div class="question-title-row">
                      <span class="type-badge" :class="'type-' + question.type">
                        {{ getTypeLabel(question.type) }}
                      </span>
                      <span class="title-text">{{ question.title }}</span>
                      <el-tag v-if="question.isRequired" type="danger" size="small">必填</el-tag>
                    </div>
                    <div v-if="question.helpText" class="help-text">
                      <Icon icon="ep:info-filled" />
                      {{ question.helpText }}
                    </div>
                  </div>
                  <div class="question-meta">
                    <span class="meta-item">
                      <Icon icon="ep:coin" /> {{ question.score || 0 }}分
                    </span>
                    <el-tooltip
                      v-if="question.autoFillType && question.autoFillType !== 'NONE'"
                      :content="getAutoFillContent(question)"
                      placement="top"
                    >
                      <el-tag :type="question.autoFillType === 'AUTO' ? 'primary' : 'warning'" size="small">
                        {{ getAutoFillLabel(question.autoFillType) }}
                      </el-tag>
                    </el-tooltip>
                  </div>
                  <div class="question-actions">
                    <el-button
                      type="primary"
                      link
                      size="small"
                      @click="openForm('update', question.id)"
                      v-hasPermi="['prison:question:update']"
                    >
                      <Icon icon="ep:edit" /> 修改
                    </el-button>
                    <el-button
                      type="danger"
                      link
                      size="small"
                      @click="handleDelete(question.id)"
                      v-hasPermi="['prison:question:delete']"
                    >
                      <Icon icon="ep:delete" /> 删除
                    </el-button>
                  </div>
                </div>
              </template>
            </draggable>
          </div>
        </template>
      </draggable>
    </div>
  </ContentWrap>

  <!-- 表单弹窗：添加/修改 -->
  <QuestionForm ref="formRef" @success="getList" />

  <!-- 分区管理弹窗 -->
  <Dialog title="分区管理" v-model="partDialogVisible" width="600px">
    <el-form :model="partForm" label-width="100px">
      <el-form-item label="分区列表">
        <div class="part-manage-list">
          <div v-for="(part, index) in allPartitions" :key="part.id || index" class="part-manage-item">
            <el-icon class="drag-handle"><Rank /></el-icon>
            <el-input
              v-model="part.name"
              :placeholder="part.isDefault ? '默认分区' : '请输入分区名称'"
              :disabled="part.isDefault"
              style="flex: 1; margin: 0 10px"
            />
            <el-input-number
              v-model="part.sort"
              :min="0"
              :max="999"
              controls-position="right"
              style="width: 100px"
              :disabled="part.isDefault"
            />
            <el-button
              v-if="!part.isDefault"
              type="danger"
              :icon="Delete"
              circle
              @click="removePartition(index)"
            />
          </div>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain :icon="Plus" @click="addPartition" v-hasPermi="['prison:question:create']">添加分区</el-button>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="savePartitions" type="primary" v-hasPermi="['prison:question:update']">保存设置</el-button>
      <el-button @click="partDialogVisible = false">取消</el-button>
    </template>
  </Dialog>
</template>

<script lang="ts" setup>
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { QuestionApi, Question } from '@/api/prison/question'
import QuestionForm from './QuestionForm.vue'
import { Folder, InfoFilled, Rank, Plus, Delete } from '@element-plus/icons-vue'
import draggable from 'vuedraggable'

defineOptions({ name: 'PrisonQuestionList' })

const message = useMessage()
const { t } = useI18n()

const props = defineProps<{
  questionnaireId?: number
}>()

const loading = ref(false)
const list = ref<Question[]>([])
const formRef = ref()
const partDialogVisible = ref(false)

// 分区列表（带问题）
const partitions = ref<Array<{
  name: string
  sort: number
  selected: boolean
  questions: Array<Question & { _index: number; _checked: boolean }>
}>>([])

// 所有分区（用于管理弹窗）
const allPartList = ref<Array<{ id: string; name: string; sort: number; isDefault: boolean }>>([])
const allPartitions = computed({
  get: () => allPartList.value,
  set: (val) => { allPartList.value = val }
})

// 分区表单
const partForm = ref({
  name: '',
  sort: 0
})

// 选中的问题ID
const checkedIds = ref<number[]>([])

/** 问题类型标签 */
const getTypeLabel = (type: number) => {
  const labels: Record<number, string> = { 1: '单选', 2: '多选', 3: '填空', 4: '评分', 5: '日期', 6: '数字' }
  return labels[type] || '未知'
}

/** 自动填充标签 */
const getAutoFillLabel = (type: string) => {
  return { 'NONE': '-', 'AUTO': '自动', 'MANUAL': '手动' }[type] || type
}

/** 自动填充内容 */
const getAutoFillContent = (row: Question) => {
  if (row.autoFillType === 'AUTO') {
    return `自动填充来源：${row.autoFillSource || '-'}`
  }
  return '手动输入'
}

/** 从问题列表提取所有分区 */
const extractPartitions = (questions: Question[]) => {
  const partMap = new Map<string, Question[]>()
  const defaultPart: Question[] = []

  questions.forEach(q => {
    const partName = q.partName || ''
    if (partName) {
      if (!partMap.has(partName)) {
        partMap.set(partName, [])
      }
      partMap.get(partName)!.push(q)
    } else {
      defaultPart.push(q)
    }
  })

  // 按分区排序
  const sortedParts = Array.from(partMap.entries())
    .sort((a, b) => {
      const partA = partitions.value.find(p => p.name === a[0])
      const partB = partitions.value.find(p => p.name === b[0])
      const sortA = partA?.sort ?? 0
      const sortB = partB?.sort ?? 0
      return sortA - sortB
    })

  // 构建分区列表
  const result: typeof partitions.value = []

  // 添加默认分区
  result.push({
    name: '',
    sort: 0,
    selected: true,
    questions: defaultPart.map((q, i) => ({ ...q, _index: i, _checked: false }))
  })

  // 添加其他分区
  sortedParts.forEach(([name, qs]) => {
    result.push({
      name,
      sort: partitions.value.find(p => p.name === name)?.sort ?? 0,
      selected: true,
      questions: qs.map((q, i) => ({ ...q, _index: i, _checked: false }))
    })
  })

  return result
}

/** 加载问题列表 */
const getList = async () => {
  if (!props.questionnaireId) return
  loading.value = true
  try {
    const data = await QuestionApi.getQuestionPage({
      pageNo: 1,
      pageSize: 200,
      questionnaireId: props.questionnaireId
    })
    list.value = data.list
    partitions.value = extractPartitions(data.list)

    // 每次都重新初始化分区管理列表（切换问卷时需要重载）
    allPartList.value = []

    // 添加默认分区
    allPartList.value.push({
      id: 'default',
      name: '',
      sort: 0,
      isDefault: true
    })

    // 添加已存在的分区
    const existingNames = new Set<string>()
    partitions.value.forEach(p => {
      if (p.name && !existingNames.has(p.name)) {
        existingNames.add(p.name)
        allPartList.value.push({
          id: `part_${p.name}`,
          name: p.name,
          sort: p.sort,
          isDefault: false
        })
      }
    })
  } finally {
    loading.value = false
  }
}

/** 监听问卷ID变化 */
watch(
  () => props.questionnaireId,
  (val) => {
    if (!val) {
      list.value = []
      partitions.value = []
      return
    }
    getList()
  },
  { immediate: true }
)

/** 打开表单 */
const openForm = (type: string, id?: number) => {
  if (!props.questionnaireId) {
    message.error('请选择一个问卷')
    return
  }
  // 传入可用分区列表
  formRef.value.open(type, id, props.questionnaireId, getPartitionNames())
}

/** 获取分区名称列表 */
const getPartitionNames = () => {
  return allPartList.value
    .filter(p => !p.isDefault && p.name)
    .map((p, index) => ({
      label: p.name,
      value: p.name,
      sort: index
    }))
    .sort((a, b) => a.sort - b.sort)
}

/** 打开分区管理弹窗 */
const openPartDialog = () => {
  // 确保默认分区存在且在第一位
  if (allPartList.value.length === 0 || !allPartList.value[0]?.isDefault) {
    // 添加默认分区（第一个）
    allPartList.value.unshift({
      id: 'default',
      name: '',
      sort: 0,
      isDefault: true
    })
  }
  // 确保其他分区不是默认分区
  for (let i = 1; i < allPartList.value.length; i++) {
    allPartList.value[i].isDefault = false
  }
  partDialogVisible.value = true
}

/** 添加分区 */
const addPartition = () => {
  const newSort = allPartList.value.length > 0
    ? Math.max(...allPartList.value.map(p => p.sort || 0)) + 1
    : 0
  allPartList.value.push({
    id: `part_${Date.now()}`,
    name: '',
    sort: newSort,
    isDefault: false
  })
}

/** 删除分区 */
const removePartition = (index: number) => {
  allPartList.value.splice(index, 1)
}

/** 编辑分区名称 */
const editPartition = (partition: typeof partitions.value[0]) => {
  // 打开分区管理弹窗
  openPartDialog()
  // 延迟滚动到对应分区并聚焦输入框
  nextTick(() => {
    const partIndex = allPartList.value.findIndex(p => p.name === partition.name)
    if (partIndex > 0) { // 跳过默认分区(index=0)
      const element = document.querySelector(`.part-manage-item:nth-child(${partIndex + 1}) .el-input__wrapper`)
      if (element) {
        (element as HTMLElement).scrollIntoView({ behavior: 'smooth', block: 'center' })
        // 尝试聚焦输入框
        const input = element.querySelector('input')
        if (input) {
          input.focus()
        }
      }
    }
  })
  // 提示用户
  message.info(`请在弹窗中编辑分区"${partition.name}"的名称`)
}

/** 删除分区 */
const deletePartition = async (partition: typeof partitions.value[0]) => {
  try {
    await message.delConfirm(`确定删除分区"${partition.name}"吗？该分区下的问题将移到默认分区`)
    // 更新问题的分区为默认分区
    for (const q of partition.questions) {
      await QuestionApi.updateQuestion({ ...q, id: q.id, partName: '' })
    }
    await getList()
    message.success('删除成功')
  } catch {}
}

/** 保存分区设置 */
const savePartitions = async () => {
  try {
    // 验证分区名称唯一性（非默认分区）
    const names = allPartList.value.filter(p => !p.isDefault).map(p => p.name).filter(n => n)
    if (new Set(names).size !== names.length) {
      message.error('分区名称不能重复')
      return
    }

    // 验证非默认分区必须有名称
    const emptyParts = allPartList.value.filter(p => !p.isDefault && !p.name)
    if (emptyParts.length > 0) {
      message.error('请为所有分区输入名称')
      return
    }

    // 收集所有需要更新的问题
    const updates: Array<{ id: number; partName?: string; partSort?: number; sort?: number }> = []
    for (let i = 0; i < allPartList.value.length; i++) {
      const part = allPartList.value[i]
      if (!part.isDefault && part.name) {
        for (const p of partitions.value) {
          if (p.name === part.name) {
            p.questions.forEach((q, sortIndex) => {
              updates.push({
                id: q.id!,
                partName: part.name,
                partSort: i,
                sort: sortIndex
              })
            })
          }
        }
      }
    }

    // 批量更新
    await QuestionApi.batchUpdate({ questions: updates })
    await getList()
    partDialogVisible.value = false
    message.success('保存成功')
  } catch (e) {
    message.error('保存失败')
  }
}

/** 分区拖拽排序完成 */
const onPartitionDragEnd = async () => {
  // 收集所有需要更新的问题
  const updates: Array<{ id: number; partName?: string; partSort?: number; sort?: number }> = []
  for (let i = 0; i < partitions.value.length; i++) {
    const part = partitions.value[i]
    if (part.name) {
      part.questions.forEach((q, sortIndex) => {
        updates.push({
          id: q.id!,
          partName: part.name,
          partSort: i,
          sort: sortIndex
        })
      })
    }
  }
  // 批量更新
  await QuestionApi.batchUpdate({ questions: updates })
  message.success('分区排序已更新')
}

/** 问题拖拽排序完成 */
const onQuestionDragEnd = async (partition: typeof partitions.value[0]) => {
  // 收集当前分区内需要更新的问题
  const updates: Array<{ id: number; partName?: string; partSort?: number; sort?: number }> = []
  partition.questions.forEach((q, i) => {
    updates.push({
      id: q.id!,
      partName: partition.name || undefined,
      partSort: partition.sort,
      sort: i
    })
  })
  // 批量更新
  await QuestionApi.batchUpdate({ questions: updates })
  message.success('问题排序已更新')
}

/** 切换分区显示/隐藏 */
const togglePartQuestions = (partition: typeof partitions.value[0], selected: boolean) => {
  partition.questions.forEach(q => {
    q._checked = selected
  })
}

/** 切换问题选中状态 */
const toggleQuestionCheck = (question: Question & { _index: number; _checked: boolean }, val: boolean, partition: typeof partitions.value[0]) => {
  if (val) {
    if (!checkedIds.value.includes(question.id!)) {
      checkedIds.value.push(question.id!)
    }
  } else {
    checkedIds.value = checkedIds.value.filter(id => id !== question.id)
  }
}

/** 删除问题 */
const handleDelete = async (id: number) => {
  try {
    await message.delConfirm()
    await QuestionApi.deleteQuestion(id)
    message.success(t('common.delSuccess'))
    await getList()
  } catch {}
}

/** 批量删除 */
const handleDeleteBatch = async () => {
  try {
    await message.delConfirm()
    await QuestionApi.deleteQuestionList(checkedIds.value)
    checkedIds.value = []
    message.success(t('common.delSuccess'))
    await getList()
  } catch {}
}
</script>

<style scoped>
.question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.header-left {
  display: flex;
  gap: 10px;
}

.header-right {
  color: #909399;
  font-size: 14px;
}

.total-count {
  padding: 4px 12px;
  background: #f4f4f5;
  border-radius: 4px;
}

.parts-container {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  overflow: hidden;
}

.parts-list {
  display: flex;
  flex-direction: column;
}

.part-group {
  border-bottom: 1px solid #e4e7ed;
}

.part-group:last-child {
  border-bottom: none;
}

.part-group.is-default {
  background: #fafafa;
}

.part-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #f0f7ff 0%, #e8f4fd 100%);
  border-bottom: 1px solid #e4e7ed;
}

.part-drag-handle {
  cursor: grab;
  color: #c0c4cc;
  display: flex;
  align-items: center;
}

.part-drag-handle:active {
  cursor: grabbing;
}

.drag-icon {
  font-size: 16px;
}

.part-title {
  font-weight: 600;
  color: #1a5cb8;
  font-size: 14px;
}

.part-count {
  color: #909399;
  font-size: 12px;
}

.part-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.questions-table {
  min-height: 50px;
}

.question-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.3s;
}

.question-row:hover {
  background: #f5f7fa;
}

.question-row.is-hidden {
  opacity: 0.5;
}

.question-row:last-child {
  border-bottom: none;
}

.ghost-row {
  background: #f0f9eb;
  opacity: 0.8;
}

.question-drag-handle {
  cursor: grab;
  color: #c0c4cc;
  display: flex;
  align-items: center;
}

.question-drag-handle:active {
  cursor: grabbing;
}

.question-checkbox {
  margin-right: 8px;
}

.question-index {
  width: 30px;
  text-align: center;
  color: #909399;
  font-weight: 500;
}

.question-info {
  flex: 1;
  min-width: 0;
}

.question-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.title-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.type-badge {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}

.type-1 { background: #e6f7ff; color: #1890ff; }
.type-2 { background: #f6ffed; color: #52c41a; }
.type-3 { background: #fff7e6; color: #fa8c16; }
.type-4 { background: #f9f0ff; color: #722ed1; }
.type-5 { background: #fff1f0; color: #f5222d; }
.type-6 { background: #e6fffb; color: #13c2c2; }

.help-text {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.question-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 150px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #606266;
  font-size: 13px;
}

.question-actions {
  display: flex;
  gap: 8px;
}

.part-manage-list {
  max-height: 400px;
  overflow-y: auto;
}

.part-manage-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  margin-bottom: 8px;
  background: #f5f7fa;
  border-radius: 4px;
}

.drag-handle {
  cursor: move;
  color: #c0c4cc;
}
</style>
