<template>
    <div>
        <el-button icon="el-icon-Check" type="primary" @click="preserve">保存</el-button>
        <el-button icon="el-icon-Grid" type="primary" @click="dialogVisible = true">配置保存年限</el-button>
        <div class="mt10" :style="`height: calc(${height} - 43px)`">
            <vxe-table
                v-bind="defaultAttribute"
                height="auto"
                ref="tableRef"
                :data="tableData"
                :tree-config="{ children: 'children' }"
                :edit-config="{ trigger: 'click', mode: 'cell' }"
            >
                <vxe-table-column field="name" align="left" title="部门" tree-node></vxe-table-column>

                <vxe-table-column
                    field="proportion"
                    title="占比(%)"
                    :edit-render="{
                        name: '$input',
                        props: { type: 'float', digits: 2, max: 100, min: 0 }
                    }"
                ></vxe-table-column>
            </vxe-table>
        </div>
        <el-dialog draggable v-model="dialogVisible" title="年限设置" width="500" :before-close="handleClose">
            <el-input-number v-model="num" :min="0" :max="1000" />
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="define">保存</el-button>
                    <el-button @click="handleClose">取消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { mainHeight } from '@/utils/layout'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getAreaList } from '@/api/common'
import { addPlanConfig, addPlanCycle, queryPlanConfig } from '@/api/process-boot/generalTest'
const dialogVisible = ref(false)
const num = ref(0)
const tableRef = ref()
const height = mainHeight(80).height
const tableData: any = ref([])
const treeData = ref([])
const treeList: any = ref([])
const info = async () => {
    await queryPlanConfig().then(res => {
        treeData.value = res.data
    })
    await getAreaList().then((res: any) => {
        tableData.value = circulationTreeData(res.data)
        setTimeout(() => {
            tableRef.value.setAllTreeExpand(true)
        }, 0)
    })
}
const circulationTreeData = (rows: any) => {
    let children: any = []

    rows.forEach((item: any) => {
        let proportion = 0
        treeData.value.forEach((val: any) => {
            if (val.orgId == item.id) {
                proportion = val.proportion
                return
            }
        })

        if (item.children && item.children.length > 0) {
            children.push({
                name: item.name,
                id: item.id,
                proportion: proportion,
                children: circulationTreeData(item.children)
            })
        } else {
            children.push({
                name: item.name,
                id: item.id,
                proportion: proportion
            })
        }
    })

    return children
}
const preserve = () => {
    treeList.value = []
    circulation(tableData.value)
    setTimeout(() => {
        addPlanConfig(treeList.value).then(res => {
            ElMessage.success('保存成功!')
            info()
        })
    }, 0)
}
// 保存配置
const define = () => {
    addPlanCycle({
        cycleNum: num.value
    }).then(res => {
        if (res.data.flag == true) {
            ElMessage.success('年限设置成功!')
            handleClose()
        } else {
            ElMessage.warning(`本次普测计划周期还未结束,请在 ${res.data.endYear} 后设置!`)
        }
    })
}
const circulation = (rows: any) => {
    let children: any = []

    rows.forEach((item: any) => {
        treeList.value.push({
            orgName: item.name,
            orgId: item.id,
            proportion: item.proportion
        })
        if (item.children && item.children.length > 0) {
            circulation(item.children)
        }
    })

    return children
}
const handleClose = () => {
    dialogVisible.value = false
    num.value = 0
}

onMounted(() => {
    info()
})
</script>
