<template>
  <el-dialog
    v-model="dialogVisible"
    title="导出"
    width="500px"
    :before-close="handleClose"
  >
    <div class="export-dialog">
      <!-- 树形选择器 -->
      <el-tree
        ref="treeRef"
        :data="treeData"
        node-key="id"
        show-checkbox
        :props="defaultProps"
        :default-expand-all="true"
        @check="handleNodeCheck"
      />
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handleBackup">加密规则备份</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  projectId: {
    type: String,
    required: true
  }
})

const emit = defineEmits(['update:visible', 'confirm', 'backup'])

// 控制弹窗显示
const dialogVisible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

// 树形数据
const treeData = ref([])
const treeRef = ref(null)

// 树形配置
const defaultProps = {
  children: 'children',
  label: 'name'
}

// 加密规则备份
const handleBackup = () => {
  emit('backup', props.projectId)
  ElMessage.info('加密规则备份功能待实现')
}

// 确认导出
const handleConfirm = () => {
  const checkedNodes = treeRef.value.getCheckedNodes()
  const checkedKeys = treeRef.value.getCheckedKeys()
  
  if (checkedKeys.length === 0) {
    ElMessage.warning('请至少选择一个导出项')
    return
  }
  
  emit('confirm', {
    projectId: props.projectId,
    checkedNodes,
    checkedKeys
  })
  dialogVisible.value = false
}

// 节点选中处理
const handleNodeCheck = (nodeData, checkStatus) => {
  // 如果选中父节点，自动选中所有子节点
  // if (checkStatus.checkedKeys.includes(nodeData.id) && nodeData.children) {
  //   treeRef.value.setCheckedNodes(nodeData.children, true)
  // }
}

// 关闭前处理
const handleClose = (done) => {
  done()
}

// 根据项目ID获取树形数据
const fetchTreeData = async (projectId) => {
  // 模拟API调用，实际项目中替换为真实API
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({
        id: 'root',
        name: '若依配测系统',
        children: [
          {
            id: 'ry',
            name: 'ry',
            children: [
              {
                id: 'tables',
                name: '表',
                children: [
                  { id: 'gen_table', name: 'gen_table' },
                  { id: 'gen_table_column', name: 'gen_table_column' },
                  { id: 'sys_config', name: 'sys_config' },
                  { id: 'sys_dept', name: 'sys_dept' },
                  { id: 'sys_dict_data', name: 'sys_dict_data' },
                  { id: 'sys_dict_type', name: 'sys_dict_type' },
                  { id: 'sys_job', name: 'sys_job' },
                  { id: 'sys_job_log', name: 'sys_job_log' },
                  { id: 'sys_logininfor', name: 'sys_logininfor' },
                  { id: 'sys_menu', name: 'sys_menu' },
                  { id: 'sys_notice', name: 'sys_notice' },
                  { id: 'sys_oper_log', name: 'sys_oper_log' },
                  { id: 'sys_post', name: 'sys_post' },
                  { id: 'sys_role', name: 'sys_role' },
                  { id: 'sys_role_dept', name: 'sys_role_dept' },
                  { id: 'sys_role_menu', name: 'sys_role_menu' },
                  { id: 'sys_user', name: 'sys_user' },
                  { id: 'sys_user_online', name: 'sys_user_online' },
                  { id: 'sys_user_post', name: 'sys_user_post' },
                  { id: 'sys_user_role', name: 'sys_user_role' }
                ]
              }
            ]
          }
        ]
      })
    }, 300)
  })
}

// 监听项目ID变化，获取树形数据
watch(() => props.projectId, async (newVal) => {
  if (newVal) {
    const data = await fetchTreeData(newVal)
    treeData.value = [data]
  }
}, { immediate: true })
</script>

<style scoped>
.export-dialog {
  padding: 10px;
}

.dialog-footer {
  display: flex;
  justify-content: space-between;
}

:deep(.el-tree) {
  max-height: 400px;
  overflow-y: auto;
}

:deep(.el-tree-node__content) {
  height: 36px;
}
</style>