<template>
    <div class="default-main">
        <TableHeader ref="TableHeaderRef">
            <template v-slot:select>
                <el-form-item label="模板类型">
                    <el-select v-model="tableStore.table.params.type" placeholder="Select" size="large"  @change="handleTypeChange">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
            </template>
            <template #operation>
                <el-button icon="el-icon-Memo" type="primary" @click="openReportDictionary">报告字典管理</el-button>
                <el-button icon="el-icon-Plus" type="primary" @click="add">新增模版</el-button>
            </template>
        </TableHeader>
        <Table ref="tableRef" />

        <Administration
            :type="Number(tableStore.table.params.type)"
            :tree-data="treeDataForChild"
            v-if="showDictionary"
            @close="closeReportDictionary"
             @refreshTree="handleRefreshTree"
            />

         <el-dialog
            :title="title"
            v-model="dialogVisible" 
            v-if="dialogVisible"
            width="40%"
            >
            <el-row :gutter="20">
                <el-col :span="11">
                    <div class="grid-content">
                        <el-tree
                            :data="data"
                            show-checkbox
                            node-key="id"
                            :props="defaultProps"
                            :default-checked-keys="treeCheckedData"
                            :default-expanded-keys="treeExpandData"
                            @check-change="handleCheckChange"
                            ref="tree"
                        >
                        </el-tree>
                    </div
                >
                </el-col>
                <el-col :span="13">
                    <el-form ref="formRef" :rules="rules" :model="form" label-width="60px">
                    <el-form-item label="名称:" prop="name">
                    <el-input
                        v-model.trim="form.name"
                        placeholder="请输入名称"
                    ></el-input>
                    </el-form-item>
                    <el-form-item label="描述:" prop="code" class="top">
                    <el-input
                        type="textarea"
                        :rows="2"
                        placeholder="请输入描述"
                        v-model.trim="form.code"
                    >
                    </el-input>
                    </el-form-item> </el-form
                >
                </el-col>
            </el-row>
             <template #footer>
                <el-button @click="closeDialog">取 消</el-button>
                <el-button type="primary" @click="addDetermine">确定</el-button>
            </template>
        </el-dialog>

    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, nextTick } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { addData,updateData,deleteData,getDictTree } from '@/api/system-boot/MonitoringPoint'
import { ElMessage } from 'element-plus'
import Administration from '@/views/system/ReportConfiguration/components/Administration.vue'

defineOptions({
    name: 'BusinessAdministrator/ReportTemplate/ReportConfiguration'
})

const showDictionary = ref(false)
const formRef = ref(null)
const tree = ref(null)
// 弹出框标题
const title = ref<string>('新增模板')

// 弹出框是否可见
const dialogVisible = ref<boolean>(false)
// 是否为编辑模式
const isEdit = ref<boolean>(false)
// 表单数据
const form = ref({
  id: '',
  name: '',
  code: '',
  type: 0,
  ids: []
})


// 表单验证规则
const rules = {
  name: [
    { required: true, message: '请输入名称', trigger: 'blur' }
  ],
  code: [
    { required: true, message: '请输入描述', trigger: 'blur' }
  ]
}

// 树形控件相关数据（假设）
const data = ref([]) // 树形数据源
const defaultProps = {
  children: 'children',
  label: 'reportDescribe'
}

const treeCheckedData = ref([]) // 默认选中的节点
const treeExpandData = ref([]) // 默认展开的节点

const options = ([
    { value: '0', label: '监测点报告' },
    { value: '1', label: '区域报告' },
])


const treeDataForChild = ref([]) // 用于存储传递给子组件的树数据
const openReportDictionary = async () => {
  try {
    const res = await getDictTree({ type: Number(tableStore.table.params.type) })
    treeDataForChild.value = res.data // 将数据存储到响应式变量中
    showDictionary.value = true // 打开子组件
  } catch (error) {
    ElMessage.error('获取字典数据失败')
  }
}

// 监听子组件触发的刷新事件
const handleRefreshTree = async () => {
  try {
    const res = await getDictTree({ type: Number(tableStore.table.params.type) })
    treeDataForChild.value = res.data // 更新树数据
  } catch (error) {
    ElMessage.error('刷新树数据失败')
  }
}
const closeReportDictionary = () => {
  showDictionary.value = false
}

const tableStore: any = new TableStore({
    url: '/system-boot/EventTemplate/getList',
    method: 'POST',
    column: [
        { field: 'name', title: '模板名称' },
        { field: 'code', title: '模板描述' },

        {
             title: '操作',fixed: 'right',
            width: '220',
            render: 'buttons',
            buttons: [
                {
                    name: 'edit',
                    title: '编辑',
                    type: 'primary',
                    icon: 'el-icon-Plus',
                    render: 'basicButton',
                    click: row => {
                        isEdit.value = true
                        title.value = '编辑模板'
                        dialogVisible.value = true
                        // 回显表单数据
                        form.value = {
                            id: row.id,
                            name: row.name,
                            code: row.code,
                            type: row.type,
                            ids: row.rdIds
                        }
                         // 获取树数据
                        formData.type = row.type
                        getDictTree(formData).then(res => {
                            data.value = res.data
                            treeCheckedData.value= row.rdIds
                            setDefaultExpandedKeys(res.data)
                        })
                    }
                },

                {
                    name: 'del',
                    text: '删除',
                    type: 'danger',
                    icon: 'el-icon-Delete',
                    render: 'confirmButton',
                    popconfirm: {
                        confirmButtonText: '确认',
                        cancelButtonText: '取消',
                        confirmButtonType: 'danger',
                        title: '确定删除？'
                    },
                    click: row => {
                        let data = [row.id];
                        deleteData(data).then(res => {
                            ElMessage.success('删除成功')
                            tableStore.index()
                        })
                    }
                }
            ]
        }
    ],

    loadCallback: () => { }
})
tableStore.table.params = {}

tableStore.table.params.type = '0'
provide('tableStore', tableStore)
// 模板类型变更
const handleTypeChange = (value: string) => {
    tableStore.table.params.type = value
    tableStore.index()
}

const formData= reactive({
    pageNum: 1,
    pageSize: 20,
    type: 0,  
})


const add = () => {
    isEdit.value = false
    title.value = '新增模板'
    dialogVisible.value = true
    // 初始化表单数据
    form.value = {
        id: '',
        name: '',
        code: '',
        type: tableStore.table.params.type,
        ids: []
    }
    formData.type = tableStore.table.params.type
    treeCheckedData.value = []
    getDictTree(formData).then(res => { 
       data.value = res.data
       setDefaultExpandedKeys(res.data) 
    })
}

const setDefaultExpandedKeys = (treeData: any[]) => {
  const firstLevelIds = treeData.map(item => item.id)
  treeExpandData.value = firstLevelIds
}

const handleCheckChange = (data: any, checked: boolean, indeterminate: boolean) => {
  // 获取当前选中的节点 key 值
  const checkedKeys = tree.value?.getCheckedKeys() || []
  form.value.ids = checkedKeys // 将选中的节点 ID 更新到表单数据中
}

const addDetermine = () => {
  if (formRef.value) {
    formRef.value.validate((valid: boolean) => {
      if (valid) {
        if (isEdit.value) {
          // 编辑逻辑
          updateData(form.value).then(res => {
            ElMessage.success('编辑模板成功')
            closeDialog()
            tableStore.index()
          })
        } else {
          // 新增逻辑
          addData(form.value).then(res => {
            ElMessage.success('新增模板成功')
            closeDialog()
            tableStore.index()
          })
        }
      }
    })
  }
}

const closeDialog = () => {
  dialogVisible.value = false
  // 重置表单
  if (formRef.value) {
    formRef.value.resetFields()
  }
}

onMounted(() => {
    tableStore.index()
})
</script>
