<template>

    <div class="default-main">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="类型:">
                <el-switch v-model="value" active-text="企业部门" inactive-text="行政区域" @change="handleSwitchChange"></el-switch>
            </el-form-item>
            <el-form-item>
                <el-button
                    v-if="value ? true : false"
                    @click="AddClick1"
                    type="primary"
                    size="mini"
                    icon="el-icon-plus"
                >
                    新增部门
                </el-button>
            </el-form-item>
        </el-form>

         <Table ref='tableRef' />
        <!-- 修改弹窗 -->
        <el-dialog
            :close-on-click-modal="false"
            :title="RowName + '部门'"
            v-model="dialogFormVisible"
            width="30%"
            @close="closeDialog"
        >
            <el-form :model="formData" ref="formRef" label-width="110px" :rules="rules">
                <el-form-item v-if="flag" label="父级节点:">
                    <el-input v-model="parentName" placeholder="请输入父级节点"></el-input>
                </el-form-item>
                <el-form-item label="企业部门:" prop="name" class="top">
                    <el-input v-model="formData.name" placeholder="请输入企业部门"></el-input>
                </el-form-item>
                <el-form-item label="简称:" prop="shortName" class="top">
                    <el-input v-model="formData.shortName" placeholder="请输入简称"></el-input>
                </el-form-item>
                <el-form-item label="排序:" prop="areaCode" class="top">
                    <el-input v-model="formData.areaCode" placeholder="请输入排序"></el-input>
                </el-form-item>
                <el-form-item label="经度:" prop="lng" class="top">
                    <el-input v-model="formData.lng" placeholder="请输入经度"></el-input>
                </el-form-item>
                <el-form-item label="纬度:" prop="lat" class="top">
                    <el-input v-model="formData.lat" placeholder="请输入纬度"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="closeDialog">取 消</el-button>
                    <el-button type="primary" @click="submitEvent">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { areaTree, areaAdd, areaDelete, update, selectPid } from '@/api/system-boot/area'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'

defineOptions({
    name: 'system-boot/area/areaTree'
})
// 响应式数据
const value = ref(false)
const flag = ref(true)
const dialogFormVisible = ref(false)
const tableData = ref([])
const formData = reactive({
    type: 0,
    id: '',
    pid: '',
    name: '',
    shortName: '',
    areaCode: '',
    lng: 0,
    lat: 0
})
const parentName = ref('')
const RowName = ref('')
const flag1 = ref('')
const row = ref(null)
const formInline = reactive({})
const rules = {
    name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
    shortName: [{ required: true, message: '简称不能为空', trigger: 'blur' }],
    areaCode: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
    lng: [{ required: true, message: '经度不能为空', trigger: 'blur' }],
    lat: [{ required: true, message: '纬度不能为空', trigger: 'blur' }]
}

// 表单引用
const formRef = ref(null)


const tableStore = new TableStore({
    showPage:false,
    url: areaTree( { id: '', type: value.value ? 1 : 0 }),
    method: 'POST',
    column: [
        { title:  value ? '企业部门' : '行政区域', field: 'name', treeNode: true, align: 'left' },
        { title: '简称', field: 'shortName', treeNode: true, align: 'left' },
        { title: '经度', field: 'lng' },
        { title: '维度', field: 'lat' },    
        { title: '行政编码', field: 'areaCode' },  
    ],
    loadCallback: () => {
        console.log('tableStore.table.data')
    }
})

provide('tableStore', tableStore)
tableStore.table.params.searchState = 0
const handleSwitchChange = (val) => {
  
    areaTree( { id: '', type: value.value ? 1 : 0 })
}
// 外部新增
const AddClick1 = () => {
    flag.value = true
    Object.assign(formData, {})
    RowName.value = '新增'
    parentName.value = '企业'
    dialogFormVisible.value = true
    formData.type = 1
    formData.pid = '0'
    flag1.value = 'add'
}

// 行内新增
const AddClick = (row) => {
    flag.value = true
    Object.assign(formData, {})
    RowName.value = `${row.name}下新增`
    parentName.value = row.name
    dialogFormVisible.value = true
    formData.type = 1
    formData.pid = row.id
    formData.id = row.id
    flag1.value = 'add'
}

// 行内修改
const EditClick = (row) => {
    flag.value = false
    RowName.value = `${row.name}下修改`
    dialogFormVisible.value = true
    Object.assign(formData, {
        type: 1,
        id: row.id,
        pid: row.pid,
        name: row.name,
        shortName: row.shortName,
        areaCode: row.areaCode,
        lng: row.lng,
        lat: row.lat
    })
    flag1.value = 'edit'
    row.value = row
}

// 删除
const DeleteClick = (row) => {
    const p = row.id
    const arr = JSON.stringify([p])
    selectPid(arr).then((response) => {
        ElMessageBox.confirm('确认删除该节点吗?', '提示', {
            confirmButtonText: '确认删除',
            cancelButtonText: '取消',
            type: 'warning'
        })
            .then(() => {
                areaDelete(arr).then((response) => {
                    if (response.code === 'A0000') {
                        ElMessage.success('删除成功')
                        getAreaTree()
                    }
                })
            })
            .catch(() => {})
    })
}

// 提交操作
const submitEvent = () => {
    dialogFormVisible.value = false
    if (flag1.value === 'add') {
        areaAdd(formData).then((response) => {
            if (response.code === 'A0000') {
                ElMessage.success('新增成功')
                getAreaTree()
            }
        })
    } else if (flag1.value === 'edit') {
        update(formData).then((response) => {
            if (response.code === 'A0000') {
                ElMessage.success('修改成功')
                tableData.value = []
                getAreaTree()
            }
        })
    }
}

// 查询树形数据
const getAreaTree = () => {
    const data = { id: '', type: value.value ? 1 : 0 }
    areaTree(data).then((response) => {
        if (response.code === 'A0000') {
            response.data.forEach((m) => {
                delete m.children
                m.hasChildren = true
            })
            tableData.value = response.data
        }
    })
}

// 加载子节点
const load = (tree, treeNode, resolve) => {
    const id = tree.id
    const data = { id, type: value.value ? 1 : 0 }
    areaTree(data).then((response) => {
        const childrenData = response.data.map((n) => {
            delete n.children
            n.hasChildren = true
            return n
        })
        setTimeout(() => {
            resolve(childrenData)
        }, 30)
    })
}

// 关闭弹窗
const closeDialog = () => {
    if (formRef.value) {
        formRef.value.resetFields()
    }
    dialogFormVisible.value = false
}

// 生命周期
onMounted(() => {
    tableStore.index()
})


</script>

<style lang="less" scoped>

</style>