<template>
    <HcCard actionSize="lg" scrollbar>
        <template #extra>
            <el-button type="primary" @click="editClick" size="large" v-if="!isShowIcon&&!isedit">
                <span>编辑组织机构</span>
            </el-button>

            <el-button type="primary" @click="goback" size="large" v-if="!isShowIcon&&isedit">
                <span>返回上一级</span>
            </el-button>
        </template>

        <div class="content-box" v-if="isShowIcon">
            <HcIcon name="add-box" class="add_icon" @click="addClick"/>
        </div>
        <div class="content-box1" v-if="!isShowIcon&&!isedit">
            <div style="height: 400px;text-align: center;">
                <vue3-tree-org
                    :data="testdata"
                    :horizontal="false"
                    :collapsable="false"
                    :node-draggable="false"
                    draggable
                    center
                    :scalable="false"
                    :default-expand-level="5"
                    :define-menus="[]"
                    disabled
                    @on-node-click="onNodeClick"
                >
                    <template v-slot="{node}">
                        <div class="hac-node-vue3-tree-org-label">{{ node.label }}</div>
                    </template>
                </vue3-tree-org>
            </div>
        </div>
        <div v-if="!isShowIcon&&isedit">
            <div class="tree-box blue">
                <el-scrollbar class="h-100p">
                    <HcTreeData :datas="testdata" @menuTap="treeMenuTap"/>

                    <el-tree
                        class="tree-line1"
                        :data="dataSource"
                        node-key="id"
                        default-expand-all
                        :expand-on-click-node="false"
                        v-if="false"
                    >
                        <template #default="{ node, data }">
                        <span class="custom-tree-node">
                                <span :class="node.level === 1?'level-name':''" class="label">{{ node.label }}</span>
                            <span>
                                <HcIcon name="add-box" @click="addClick" style=" color: rgb(84, 188, 189);"
                                        v-if="data.children"/>
                                <HcIcon name="edit" @click="addClick"
                                        style="margin-left: 8px;color: rgb(84, 188, 189);"/>
                                <HcIcon name="delete-bin" @click="delClick" style="margin-left: 8px;color: orange;"/>
                                <HcIcon name="vip-crown-2" @click="authorityClick"
                                        style="margin-left: 8px;color: purple;"/>
                            </span>
                        </span>

                        </template>
                    </el-tree>
                </el-scrollbar>
            </div>
        </div>

        <HcDialog bgColor="#ffffff" isToBody :show="testModal" title="新增机构信息" @close="testModalClose"
                  widths="70rem">
            <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="left" label-width="auto"
                     size="large">

                <el-form-item label="上级组织节点名称:" prop="topname">
                    <el-select v-model="formModel.top" placeholder="请选择" size="large" style="width:100%">
                        <el-option
                            v-for="item in topMenuoptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>


                <el-form-item label="组织节点类别:" prop="type">
                    <el-select v-model="formModel.top" placeholder="请选择" size="large" style="width:100%">
                        <el-option
                            v-for="item in topMenuoptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>


                <el-form-item label="组织节点名称:" prop="name">
                    <el-input v-model="formModel.deptId" placeholder=""/>
                </el-form-item>


            </el-form>
        </HcDialog>
        <HcDialog bgColor="#ffffff" isToBody isTable :show="authorityModal" title="权限配置"
                  @close="authorityModalClose" widths="60rem">
            <el-tree
                :props="props"
                :data="autoritydata"
                show-checkbox
                @check-change="handleCheckChange"
            />
        </HcDialog>
    </HcCard>

</template>

<script setup>
import {ref, watch} from "vue";
import {useAppStore} from "~src/store";
import HcTreeData from "./components/HcTreeData.vue";

const isShowIcon = ref(false)
const isedit = ref(false)
const editClick = () => {
    isedit.value = true
}
const addClick = () => {
    testModal.value = true
}
const testModal = ref(false)

//弹窗关闭
const testModalClose = () => {
    console.log('弹窗关闭')
    testModal.value = false
}
const formModel = ref({})
const formRules = {
    topname: {
        required: true,
        trigger: 'blur',
        message: "请输入菜单名称"
    },
    name: {
        required: true,
        trigger: 'blur',
        message: "请输入路由地址"
    },
    type: {
        required: true,
        trigger: 'blur',
        message: "请选择类型"
    }
}
const topMenuoptions = ref([])

const delClick = (node, data) => {
    console.log(node, 'node');
    window?.$messageBox?.alert('您确定要注销[xxx] 的机构信息吗? 一旦注销数据将彻底清除，请谨慎操作？', '注销提醒', {
        showCancelButton: true,
        confirmButtonText: '确认注销',
        cancelButtonText: '取消',
        type: 'warning',
        callback: (action) => {
            if (action === 'confirm') {
                console.log(11111);
            }
        }
    })
}
const authorityModal = ref(false)
const authorityClick = () => {
    authorityModal.value = true
}
const authorityModalClose = () => {
    console.log('弹窗关闭')
    authorityModal.value = false
}
const props = {
    label: 'label',
    children: 'children',
}
const autoritydata=ref([
{
    label: '项目管理',
    children: [
      {
        label: '新增',
        children: [
          {
            label: 'Level three 1-1-1',
          },
        ],
      },
    ],
  },
  {
    label: '系统配置',
    children: [
      {
        label: 'Level two 2-1',
        children: [
          {
            label: 'Level three 2-1-1',
          },
        ],
      },
      {
        label: 'Level two 2-2',
        children: [
          {
            label: 'Level three 2-2-1',
          },
        ],
      },
    ],
  },
  {
    label: '表单管理',
    children: [
      {
        label: 'Level two 3-1',
        children: [
          {
            label: 'Level three 3-1-1',
          },
        ],
      },
      {
        label: 'Level two 3-2',
        children: [
          {
            label: 'Level three 3-2-1',
          },
        ],
      },
    ],
  },
])
const goback = () => {
    isedit.value = false
}
const handleCheckChange = (
    data,
    checked,
    indeterminate
) => {
    console.log(data, checked, indeterminate)
}

const loadNode = (node, resolve) => {
    if (node.level === 0) {
        return resolve([{name: 'region'}])
    }
    if (node.level > 1) return resolve([])
    setTimeout(() => {
        const data = [
            {
                name: 'leaf',
                leaf: true,
            },
            {
                name: 'zone',
            },
        ]

        resolve(data)
    }, 500)
}

//组织架构显示信息
const lavel1_style = {color: "#fff", background: "#108ffe", borderColor: "#108ffe", padding: '10px 15px'}
const lavel2_style = {background: "#E8E8E8", padding: '10px 15px'}
const lavel3_style = {
    background: "none",
    border: 'none',
    borderBottom: '1px solid #c8c8c8',
    borderRadius: '0',
    boxShadow: 'none',
    fontSize: '14px',
    padding: '6px 2px'
}

const testdata = ref({
    id: 1,
    label: "总监办(常洪)",
    style: lavel1_style,
    children: [
        {
            id: 2,
            label: '技术部(祝炜)',
            style: lavel2_style,
            children: [
                {
                    id: 6,
                    label: '研发经理',
                    style: lavel3_style,
                    children: [
                        {
                            id: 14,
                            label: '祝炜',
                            style: lavel3_style,
                        }
                    ],
                },
                {
                    id: 7,
                    label: '产品经理',
                    style: lavel3_style,
                    children: [
                        {
                            id: 15,
                            label: '豆海涛',
                            style: lavel3_style,
                        }
                    ],
                },
                {
                    id: 8,
                    label: 'JAVA技术',
                    style: lavel3_style,
                    children: [
                        {
                            id: 16,
                            label: '王文龙',
                            style: lavel3_style,
                        },
                        {
                            id: 17,
                            label: '刘依程',
                            style: lavel3_style,
                        }
                    ],
                },
                {
                    id: 9,
                    label: '前端技术',
                    style: lavel3_style,
                    children: [
                        {
                            id: 18,
                            label: '杜英',
                            style: lavel3_style,
                        },
                        {
                            id: 19,
                            label: '黄飞鸿',
                            style: lavel3_style,
                        }
                    ],
                },
                {
                    id: 10,
                    label: '测试',
                    style: lavel3_style,
                    children: [
                        {
                            id: 18,
                            label: '彭成田',
                            style: lavel3_style,
                        }
                    ],
                },
            ],
        },
        {
            id: 3,
            label: '人事部(屈发青)',
            style: lavel2_style,
            children: [
                {
                    id: 11,
                    label: '人事管理',
                    style: lavel3_style,
                    children: [
                        {
                            id: 19,
                            label: '屈发青',
                            style: lavel3_style,
                        }
                    ],
                }
            ],
        },
        {
            id: 4,
            label: '维护部(覃焕)',
            style: lavel2_style,
            children: [
                {
                    id: 12,
                    label: '客服维护',
                    style: lavel3_style,
                    children: [
                        {
                            id: 20,
                            label: '代潘',
                            style: lavel3_style,
                        },
                        {
                            id: 21,
                            label: '陈佳',
                            style: lavel3_style,
                        },
                        {
                            id: 22,
                            label: '张东珍',
                            style: lavel3_style,
                        }
                    ],
                }
            ],
        },
        {
            id: 5,
            label: '业务部(覃焕)',
            style: lavel2_style,
            children: [
                {
                    id: 13,
                    label: '业务实施',
                    style: lavel3_style,
                    children: [
                        {
                            id: 23,
                            label: '覃焕',
                            style: lavel3_style,
                        },
                        {
                            id: 24,
                            label: '黄飞洋',
                            style: lavel3_style,
                        },
                    ],
                }
            ],
        },
    ]
})

const onNodeClick = (e, data) => {
    console.log(e, data)
}

//树节点的菜单点击事件
const treeMenuTap = ({key, node, data}) => {
    if (key === 'add') {
        addClick(data)
    } else if (key === 'edit') {
        editClick(data)
    } else if (key === 'del') {
        delClick(data)
    } else if (key === 'auth') {
        authorityClick(data)
    }
}
</script>

<style lang="scss" scoped>
@import "~src/styles/system/organization.scss";
</style>

<style lang="scss">
.content-box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 386px);
    text-align: center;
    width: 100%;
    color: rgb(84, 188, 189);
}
.content-box1 {
    text-align: center;
}
.add_icon {
    font-size: 8rem;
    cursor: pointer;

}
.h-100p {
    height: 100%;
}

.tree-org-node__content .tree-org-node__inner {
    margin: 0 2px;
}
</style>
