<template>
    <div class="p-4">
        <div class="position-header">
            <div class="position-title">岗位管理</div>
            <div class="handle-btns">
                <a-button class="btn" type="primary" @click="addHandle">新增</a-button>
                <a-button class="btn" @click="editHandle">修改</a-button>
                <a-button class="btn" danger @click="delHandle">删除</a-button>
            </div>
        </div>
        <div class="position-body">
            <div class="structure-tree list-items">
                <div class="item-title">部门列表</div>
                <a-tree :replaceFields="replaceFields" :treeData="treeData" v-if="treeData" @select="nodeSelect"></a-tree>
            </div>
            <div class="posts-list list-items">
                <div class="item-title">职位列表</div>
                <div class="posts-box item-box">
                    <div class="posts item" v-for="(item, index) in posts.data" :key="index"
                        @click="chooseHandle(item, 'posts')">
                        <span :class="{ 'chosed': item.departid === posts.currentId }">{{ item.departName }}</span>
                    </div>
                </div>
            </div>
            <div class="position-list list-items">
                <div class="item-title">岗位列表</div>
                <div class="position-box item-box">
                    <div class="position item" v-for="(item, index) in position.data" :key="index">
                        <span :class="{ 'chosed': item.id === position.currentId }" @click="chooseHandle(item, 'position')">{{ item.name }}</span>
                        <span v-if="item.id === position.currentId" style="color: red;" @click="openDetailModal(item)">查看</span>
                    </div>
                </div>
            </div>
        </div>
        <PositionDrawer :formData="formData" :drawerTitle="drawerTitle" @onSubmit="onSubmit" ref="drawerRef">
        </PositionDrawer>
        <PositionModal v-if="showModal" @closeModal="showModal = false" :positionDetail="positionDetail"/>
    </div>
</template>

<script>
import { defineComponent, reactive, ref, toRefs, computed, onMounted, watch, createVNode } from 'vue';
import PositionDrawer from './PositionDrawer.vue';
import PositionModal from './PositionModal.vue';
import { structureList, getPostsList, getPositionList, delPosition } from '/@/api/sys/position';
import { message, Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';

export default defineComponent({
    name: 'position',
    components: { PositionDrawer, PositionModal, ExclamationCircleOutlined },
    setup(props, { emit }) {
        const drawerRef = ref(null)
        const data = reactive({
            replaceFields: {
                children: 'children',
                title: 'name',
                key: 'id'
            },
            treeData: [],//单位列表树
            currentNode: "",//当前选中的树节点
            posts: {
                currentId: "",
                data: []
            },//职位数据
            position: {
                currentId: "",
                data: []
            },//岗位数据
            formData: {
                id: "",
                orgid: "",
                oabaseid: "",
                name: '',
                duty: '',
                sort: 0,
            },
            drawerTitle: '新增岗位',
            showModal:false,
            positionDetail:{}
        });
        /**
         * 点击树节点触发
         */
        const nodeSelect = (selectkey, { selectedNodes, node }) => {
            if (node.dataRef.departid === data.currentNode) {
                return;
            } else {
                data.currentNode = node.dataRef.departid
            }
            resetTwoDatas()
            let params = {
                departmentId: node.dataRef.departid
            }
            getPostsList(params).then(res => {
                if (res.datas) {
                    data.posts.data = res.datas
                }
            })
        };
        const resetTwoDatas = () => {
            data.posts.data = []
            data.posts.currentId = ""
            data.position.data = []
            data.position.currentId = ""
        }
        const chooseHandle = (item, type) => {
            if (type === 'posts') {
                if (data.posts.currentId === item.departid) {
                    return;
                }
                data.posts.currentId = item.departid
                data.position.data = []
                data.position.currentId = ""
                //此处查询岗位数据
                let params = {
                    zwId: data.posts.currentId
                }
                getPositionList(params).then(res => {
                    if (res.datas && res.datas.length) {
                        data.position.data = res.datas
                    } else {
                        message.info('该职位下无岗位数据')
                    }
                })
            } else {
                data.position.currentId = item.id
            }
        }
        onMounted(() => {
            structureList().then(res => {
                res.length && (data.treeData = res)
            })
        });
        /**
         * 对岗位的操作
         */
        const addHandle = () => {
            if (data.currentNode === "") {
                message.error('请先选择机构！')
            } else if (data.posts.currentId === "") {
                message.error('请先选择职位！')
            } else {
                data.formData = {
                    id: "",
                    orgid: data.currentNode,
                    oabaseid: data.posts.currentId,
                    name: "",
                    duty: "",
                    sort: data.position.data.length + 1,
                }
                data.drawerTitle = '新增岗位'
                drawerRef.value.showDrawer()
            }
        }
        const editHandle = () => {
            if (data.currentNode === "") {
                message.error('请先选择机构！')
            } else if (data.posts.currentId === "") {
                message.error('请先选择职位！')
            } else if (data.position.currentId === "") {
                message.error('请先选择岗位！')
            } else {
                data.position.data.forEach(item => {
                    if (item.id === data.position.currentId) {
                        data.formData = {
                            id: data.position.currentId,
                            orgid: data.currentNode,
                            oabaseid: data.posts.currentId,
                            name: item.name,
                            duty: item.duty,
                            sort: parseInt(item.sort),
                        }
                        data.drawerTitle = '修改岗位'
                        drawerRef.value.showDrawer()
                    }
                })
            }
        }
        const delHandle = () => {
            if (data.currentNode === "") {
                message.error('请先选择机构！')
            } else if (data.posts.currentId === "") {
                message.error('请先选择职位！')
            } else if (data.position.currentId === "") {
                message.error('请先选择岗位！')
            } else {
                Modal.confirm({
                    title: '删除提示',
                    icon: createVNode(ExclamationCircleOutlined),
                    content: '确定删除岗位？',
                    centered: true,
                    okText: '确定',
                    okType: 'danger',
                    cancelText: '取消',
                    onOk: (() => {
                        let params = {
                            oabaseid: data.posts.currentId,
                            id: data.position.currentId
                        }
                        delPosition(params).then(res => {
                            if (res.datas === 1) {
                                message.success('操作成功')
                                onSubmit(true)
                            } else {
                                message.error('操作失败')
                            }
                        })
                    })
                });
            }
        }
        const openDetailModal = (item) => {
            data.positionDetail = item
            data.showModal = true
        }
        const onSubmit = (e) => {
            if (e) {
                data.position.data = []
                data.position.currentId = ""
                let params = {
                    zwId: data.posts.currentId
                }
                getPositionList(params).then(res => {
                    if (res.datas && res.datas.length) {
                        data.position.data = res.datas
                    }
                })
            }
        }
        return {
            drawerRef,
            ...toRefs(data),
            nodeSelect,
            chooseHandle,
            addHandle,
            editHandle,
            delHandle,
            openDetailModal,
            onSubmit
        };
    },
});
</script>

<style lang="less" scoped>
.p-4 {
    height: 100%;

    .position-header {
        padding: 10px;
        width: 100%;
        height: 70px;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .position-title {
            font-size: 16px;
            font-weight: 500;
            margin-left: 20px;
            user-select: none;
        }

        .handle-btns {
            margin-right: 20px;
            display: flex;

            .btn {
                margin-right: 10px;

                &:last-child {
                    margin-right: 0;
                }
            }
        }
    }

    .position-body {
        margin-top: 20px;
        width: 100%;
        // height: 800px;
        height: calc(100% - 90px);
        display: flex;

        .list-items {
            margin-right: 20px;
            padding: 10px;
            height: 100%;
            overflow: auto;
            flex: 1;
            background-color: #fff;

            &:last-child {
                margin-right: 0;
            }

            .item-title {
                padding-left: 10px;
                height: 40px;
                line-height: 40px;
                font-size: 16px;
                background-color: #9eafe7;
            }

            .item-box {
                margin-top: 7px;

                .item {
                    width: fit-content;
                    height: 32px;
                    display: flex;
                    align-items: center;

                    span {
                        padding: 4px;
                        cursor: pointer;
                        user-select: none;

                        &:hover {
                            background-color: #f5f5f5;
                        }

                        margin-right: 30px;
                    }

                    .chosed {
                        background-color: #dbedff;
                    }
                }
            }
        }
    }
}
</style>