<!--
 * @Author: Kane
 * @Date: 2023-09-27 10:13:31
 * @LastEditors: Kane
 * @FilePath: /task_schedule/src/views/telsaler/TelsalerManagementView.vue
 * @Description: 坐席和团队管理父组件
 *
 * Copyright (c) ${2022} by Kane, All Rights Reserved.
-->
<template>
    <div
        v-if="ui.showUI"
        class="telsaler-management-view-wrapper"
    >
        <el-tabs type="border-card">
            <el-tab-pane>
                <template #label>
                    <el-icon><User /></el-icon>
                    <span>坐席管理</span>
                </template>
                <TelsalerManagement />
            </el-tab-pane>
            <el-tab-pane>
                <template #label>
                    <el-icon><Document /></el-icon>
                    <span>团队管理</span>
                </template>
                导入导出
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script lang="ts">
import { ref, reactive } from "vue";
// import { User } from "@element-plus/icons-vue";

import TelsalerManagement from "@/views/telsaler/TelsalerManagement.vue";

export default {
    name: "TelsalerManagementView",
    components: { TelsalerManagement, },
    setup()
    {
        const ui = reactive({
            showUI: true,
        });

        return {
            ui,
        };
    },
};
</script>
<style scoped lang="scss">
.telsaler-management-view-wrapper {
    margin: 10px 10px;

    min-width: 800px;

    >*+* {
        margin-top: 10px;
    }

    span {
        margin-left: 4px;
        vertical-align: middle;
    }
}
</style>
